/*
 * Afniah-CAD: the brand fonts, the colour tokens, and the loading screen.
 *
 * This sheet loads before the app's own code, so the loading screen paints at
 * once, and its @font-face rules serve the whole app. The tokens are the
 * landing page's: light is paper space, dark is model space, and the three
 * brand greys are --g1, --g2 and --g3. The loading screen is one drawing sheet
 * on the desk, with the Afniah mark built from plan to model in the middle.
 */
@font-face { font-family: "Fedra Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/FedraSans-Light.woff2") format("woff2"); }
@font-face { font-family: "Fedra Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/FedraSans-Book.woff2") format("woff2"); }
@font-face { font-family: "Fedra Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/FedraSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "29LT Azer"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/Azer-Light.woff2") format("woff2"); }

:root {
  --desk: #e9eaec;
  --sheet: #fdfdfd;
  --ink: #3c3d40;
  --text: #5a5b5e;
  --g1: #757679;
  --g2: #8c8e90;
  --g3: #b6b8ba;
  --rule: #dadbdd;
  --rule-soft: #ecedef;

  --hairline-plate: var(--sheet);
  --hairline-hi: var(--ink);
  --hairline-edge: var(--g2);
  --hairline-mid: var(--g3);
  --hairline-lo: var(--rule);

  /* Fedra Sans has no Arabic, so Arabic text falls through to the brand's Arabic face. */
  --font-sans: "Fedra Sans", "29LT Azer", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  --font-arabic: "29LT Azer", "Fedra Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.5, 0, 0.1, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #131416;
    --sheet: #1d1e22;
    --ink: #e4e5e7;
    --text: #b4b5b8;
    --g1: #b6b8ba;
    --g2: #8c8e90;
    --g3: #66686c;
    --rule: #34353a;
    --rule-soft: #27282c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #131416;
  --sheet: #1d1e22;
  --ink: #e4e5e7;
  --text: #b4b5b8;
  --g1: #b6b8ba;
  --g2: #8c8e90;
  --g3: #66686c;
  --rule: #34353a;
  --rule-soft: #27282c;
  color-scheme: dark;
}

/* Coming from the landing page, the two pages cross-fade where the browser can. */
@view-transition { navigation: auto; }

html, body { margin: 0; }
body { background: var(--desk); }

/* ---------- the loading screen ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  padding: 12px;
  box-sizing: border-box;
  background: var(--desk);
  color: var(--text);
  font: 400 1rem/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  transition: opacity 480ms var(--ease), visibility 0s linear 480ms;
}
.loader.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.loader *, .loader *::before, .loader *::after { box-sizing: border-box; }

.ld-sheet {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  background: var(--sheet);
  overflow: hidden;
  isolation: isolate;
}
.ld-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ld-frame rect { fill: none; stroke: var(--g2); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ld-frame .inner { stroke: var(--rule); }

/* grid references along the sheet's edges, as on a drawing sheet */
.ld-refs {
  position: absolute;
  display: flex;
  justify-content: space-around;
  font: 400 0.625rem/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--g3);
  pointer-events: none;
  user-select: none;
}
.ld-refs-top, .ld-refs-bottom { left: 0; right: 0; height: 1rem; align-items: center; }
.ld-refs-top { top: 0.15rem; }
.ld-refs-bottom { bottom: 0.15rem; }
.ld-refs-left, .ld-refs-right { top: 0; bottom: 0; width: 1.1rem; flex-direction: column; align-items: center; }
.ld-refs-left { left: 0.05rem; }
.ld-refs-right { right: 0.05rem; }

.ld-body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(0.75rem, 2.5vh, 1.5rem);
  width: min(600px, 100% - 3rem);
  padding-block: 2rem;
}
.ld-fig { position: relative; margin: 0; width: 100%; }
.ld-stage { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; max-height: 52vh; margin-inline: auto; touch-action: pan-y; cursor: crosshair; }
.ld-read {
  position: absolute; top: 0.25rem; right: 0;
  font: 400 0.6875rem/1 var(--font-mono); letter-spacing: 0.04em; color: var(--g2);
  font-variant-numeric: tabular-nums; pointer-events: none;
}

.ld-caption { display: grid; gap: 0.8rem; width: 100%; max-width: 420px; text-align: center; }
.ld-eyebrow {
  margin: 0;
  font: 700 0.6875rem/1.4 var(--font-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--g2);
}
.ld-eyebrow .sep { color: var(--g3); padding-inline: 0.35em; }
.ld-title { margin: 0; font: 300 clamp(2.25rem, 6vw, 3.25rem)/1 var(--font-sans); letter-spacing: -0.015em; color: var(--ink); }
.ld-progress { position: relative; height: 1px; margin-top: 0.4rem; background: var(--rule); overflow: hidden; }
.ld-progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.ld-status {
  display: flex; justify-content: space-between; gap: 1rem; margin: 0;
  font: 400 0.6875rem/1.4 var(--font-mono); letter-spacing: 0.04em; color: var(--g2);
}
.ld-skip { opacity: 0; transition: opacity 300ms var(--ease); }
.loader.is-ready .ld-skip { opacity: 1; }

/* ---------- the plot-in, as on the landing page ---------- */
@media (prefers-reduced-motion: no-preference) {
  .ld-frame rect { stroke-dashoffset: 1; animation: ld-plot 1.2s var(--ease) forwards; }
  .ld-frame .inner { animation-delay: 0.2s; }
  .ld-caption > * { animation: ld-rise 0.7s var(--ease) both; }
  .ld-caption > :nth-child(1) { animation-delay: 0.15s; }
  .ld-caption > :nth-child(2) { animation-delay: 0.25s; }
  .ld-caption > :nth-child(3) { animation-delay: 0.35s; }
  .ld-caption > :nth-child(4) { animation-delay: 0.45s; }
}
@keyframes ld-plot { to { stroke-dashoffset: 0; } }
@keyframes ld-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- English or Arabic: the head script sets <html lang dir> ---------- */
html[lang="ar"] .loader [lang="en"],
html:not([lang="ar"]) .loader [lang="ar"] { display: none; }
/* The sheet's grid references and the figure are a drawing: they read left to right in both languages. */
.ld-refs, .ld-fig { direction: ltr; }
[dir="rtl"] .ld-progress i { transform-origin: right center; }
/* Arabic letters join: no tracking, no capitals, and the brand's Arabic face for the status line. */
html[lang="ar"] .ld-eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; font-weight: 400; }
html[lang="ar"] .ld-status { font-family: var(--font-sans); letter-spacing: 0; font-size: 0.75rem; }
html[lang="ar"] .ld-read { font-family: var(--font-sans); letter-spacing: 0; }

@media (max-width: 600px) {
  .loader { padding: 8px; }
  .ld-refs-left, .ld-refs-right { display: none; }
}