/* ═══════════════════════════════════════════════════════════════════════════
   MOZADO — 01 · tokens, reset, typography
   ═══════════════════════════════════════════════════════════════════════════ */

/* Latin faces, self-hosted. The Latin subset Google Fonts served before, with
   the same axes and ranges: Archivo is variable on `wdth` and `wght`, and one
   JetBrains Mono file covers every weight the mono labels use. */
@font-face{
  font-family:"Archivo";
  src:url("../assets/fonts/Archivo-var.woff2") format("woff2-variations"),
      url("../assets/fonts/Archivo-var.woff2") format("woff2");
  font-weight:100 900;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("../assets/fonts/JetBrainsMono-var.woff2") format("woff2-variations"),
      url("../assets/fonts/JetBrainsMono-var.woff2") format("woff2");
  font-weight:200 500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Persian faces. `unicode-range` confines them to the Arabic block, so every
   Latin glyph still resolves to Archivo / JetBrains Mono exactly as before —
   the fallback happens per character, not per element. Both are variable on
   `wght`, so the existing weight scale carries over untouched. */
@font-face{
  font-family:"Estedad";
  src:url("../assets/fonts/Estedad-var.woff2") format("woff2-variations"),
      url("../assets/fonts/Estedad-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0600-06FF,U+200C-200E,U+2212,U+FB50-FDFF,U+FE70-FEFF;
}
@font-face{
  font-family:"Vazirmatn";
  src:url("../assets/fonts/Vazirmatn-var.woff2") format("woff2-variations"),
      url("../assets/fonts/Vazirmatn-var.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0600-06FF,U+200C-200E,U+2212,U+FB50-FDFF,U+FE70-FEFF;
}

:root{
  /* palette */
  --ink:        #08090b;
  --ink-2:      #0e1013;
  --ink-3:      #14171b;
  --bone:       #edeae3;
  --bone-dim:   #a7a49d;
  --muted:      #6b6f75;
  --accent:     #ff3b14;
  --accent-dim: #a8280f;

  /* hairlines */
  --line:       rgba(237,234,227,.11);
  --line-soft:  rgba(237,234,227,.06);
  --line-hard:  rgba(237,234,227,.22);

  /* type — Latin face first, Persian face behind it: the swap is per glyph,
     so headings keep Archivo for Latin and pick up Estedad for Persian */
  --f-display: "Archivo", "Estedad", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Archivo", "Vazirmatn", "Helvetica Neue", Arial, sans-serif;
  --f-mono:    "JetBrains Mono", "Vazirmatn", ui-monospace, "SF Mono", Menlo, monospace;

  /* rhythm */
  --gut:  clamp(16px, 3.4vw, 48px);
  --edge: clamp(18px, 3.2vw, 56px);
  --nav-h: 78px;

  /* motion */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-io:   cubic-bezier(.76,0,.24,1);

  /* runtime (written from JS) */
  --mx: 50%;
  --my: 50%;
  --vh: 1vh;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

html{
  background:var(--ink);
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
}

body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--f-display);
  font-synthesis-weight:none;
  font-optical-sizing:auto;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

/* the page owns the scrollbar; ScrollSmoother translates #smooth-content */
body.is-loading{ overflow:hidden; height:100%; }

img,svg,canvas{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--accent); color:var(--ink); }

/* ── type primitives ─────────────────────────────────────────────────────── */

.mono{
  font-family:var(--f-mono);
  font-weight:400;
  font-size:clamp(9.5px,.72vw,11.5px);
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.4;
}

/* the big expanded grotesk — the signature of the page */
.display{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:125%;
  font-variation-settings:"wdth" 125,"wght" 800;
  /* Bounded on both axes. Sized from width alone this runs to 232px on a
     1920-wide window, and two Persian lines at 1.26 line-height then eat 585px
     of a viewport that is only ~890px tall once browser chrome is subtracted —
     the hero's closing row falls under the fold on an ordinary desktop. */
  font-size:clamp(58px, min(13.2vw, 23vh), 232px);
  line-height:.82;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin:0;
}
.display > span{ display:block; }

.h2{
  font-weight:700;
  font-stretch:112%;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(34px,5.6vw,86px);
  line-height:.94;
  letter-spacing:-.028em;
  text-transform:uppercase;
}
.h2 > span{ display:block; }
.h2--wide{
  font-stretch:125%;
  font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(44px,8vw,132px);
}

.body{
  font-family:var(--f-body);
  font-size:clamp(15px,1.28vw,19px);
  line-height:1.62;
  color:var(--bone-dim);
  max-width:46ch;
  font-weight:380;
}
.body--sm{ font-size:clamp(14px,1.05vw,16.5px); max-width:40ch; }

.lede{
  font-family:var(--f-body);
  font-size:clamp(15px,1.42vw,21px);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--bone-dim);
  max-width:34ch;
  font-weight:400;
}

.eyebrow{
  display:flex; align-items:center; gap:.7em;
  color:var(--bone-dim);
}
/* The halo is a scaled disc rather than an animated box-shadow: a shadow
   repaints on the main thread every frame, forever, right next to a WebGL
   canvas that needs that thread; a transform and an opacity never leave the
   compositor. Same breath — a 9px ring around a 6px dot is a disc at 4×. */
.eyebrow i{
  position:relative;
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
}
.eyebrow i::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:rgba(255,59,20,.5);
  animation:pulse 2.6s var(--e-io) infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  60%    { transform:scale(4); opacity:0; }
}

.tag{
  display:inline-block;
  width:fit-content;
  align-self:flex-start;   /* never stretch when it sits in a flex column */
  color:var(--muted);
  padding-bottom:.9em;
  border-bottom:1px solid var(--line);
}

/* split-text machinery: JS wraps lines/words, CSS masks them */
.split-mask{ display:block; overflow:hidden; }
.split-mask > *{ display:block; will-change:transform; }
.split-word{ display:inline-block; overflow:hidden; vertical-align:top; }
.split-word > span{ display:inline-block; will-change:transform; }


/* ═══════════════════════════════════════════════════════════════════════════
   02 · entry gate
   ═══════════════════════════════════════════════════════════════════════════ */

.loader{
  position:fixed; inset:0; z-index:9000;
  background:var(--ink);
  display:flex; align-items:flex-end;
  padding:var(--edge);
  overflow:hidden;
}
.loader.is-done{ pointer-events:none; }

/* Reopened from the nav to change colour: the panel goes translucent so the
   vehicle stays visible behind it and the swap reads as a swap. */
.loader--change{
  background:rgba(8,9,11,.62);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
}
.loader--change .loader__foot,
.loader--change .loader__bar,
.loader--change .loader__grid{ display:none; }
.loader--change .disc.is-dimmed{ opacity:1 !important; transform:none; pointer-events:auto; }

.loader__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-soft) 1px, transparent 1px);
  background-size:clamp(48px,7vw,110px) clamp(48px,7vw,110px);
  mask-image:radial-gradient(120% 90% at 50% 55%, #000 20%, transparent 78%);
  opacity:.85;
}

.loader__inner{
  position:relative; width:100%; height:100%;
  display:flex; flex-direction:column; justify-content:flex-end;
}

/* ── the choice ──────────────────────────────────────────────────────────── */

.gate{
  flex:1;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(26px,5vh,54px);
}
/* The brand carries the weight; the instruction under it stays quiet so the
   discs remain the loudest thing on the screen. */
.gate__head{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1.2vh,14px);
  opacity:0;
}
.gate__brand{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(17px,1.75vw,25px);
  letter-spacing:normal;   /* negative tracking collapses Persian joins */
  color:var(--bone);
  text-align:center;
}
.gate__line{
  font-weight:300;
  color:var(--muted);
}
.gate__discs{
  display:flex;
  gap:clamp(14px,2.6vw,34px);
  flex-wrap:wrap; justify-content:center;
}

.disc{
  position:relative;
  width:clamp(52px,5.4vw,76px);
  height:clamp(52px,5.4vw,76px);
  border-radius:50%;
  opacity:0;
  transition:transform .55s var(--e-out);
}
.disc__face{
  position:absolute; inset:0; border-radius:50%;
  background:var(--sw);
  box-shadow:
    inset 0 0 0 1px rgba(237,234,227,.16),
    inset 0 -9px 18px rgba(0,0,0,.55),
    inset 0 6px 12px rgba(255,255,255,.10);
}
.disc:hover{ transform:translateY(-8px) scale(1.06); }
.disc:active{ transform:translateY(-4px) scale(1.02); }

/* the ring doubles as the download meter once a disc has been chosen */
.disc__prog{
  position:absolute; inset:-11px; border-radius:50%;
  background:conic-gradient(
    var(--accent) calc(var(--p) * 1turn),
    rgba(237,234,227,.16) 0
  );
  -webkit-mask:radial-gradient(closest-side, transparent 0 88%, #000 89%);
  mask:radial-gradient(closest-side, transparent 0 88%, #000 89%);
  opacity:0;
  transition:opacity .45s var(--e-out);
}

.disc.is-chosen{ transform:scale(1.14); }
.disc.is-chosen .disc__prog{ opacity:1; }
.disc.is-dimmed{ opacity:.12 !important; transform:scale(.82); pointer-events:none; }

/* ── readout, pushed to the bottom edge ──────────────────────────────────── */

.loader__foot{
  display:flex; align-items:baseline; gap:clamp(14px,3vw,40px);
  justify-content:space-between;
  color:var(--muted);
  padding-bottom:clamp(12px,2vh,20px);
}
#loader-status{ color:var(--accent); }
.loader__pct{ color:var(--bone); font-variant-numeric:tabular-nums; letter-spacing:.1em; }
.loader__pct i{ font-style:normal; }

.loader__bar{ height:1px; width:100%; background:var(--line); overflow:hidden; }
.loader__bar i{
  display:block; height:100%; width:100%;
  background:var(--accent);
  transform:scaleX(0); transform-origin:0 50%;
}

/* No curtain: the entry is the studio powering up behind this panel, not a
   wipe in front of a finished frame. The loader simply fades out. */


/* ═══════════════════════════════════════════════════════════════════════════
   03 · webgl stage
   ═══════════════════════════════════════════════════════════════════════════ */

.stage{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  background:
    radial-gradient(115% 78% at 50% 118%, #16181d 0%, transparent 62%),
    radial-gradient(80% 60% at 50% -12%, #101216 0%, transparent 70%),
    var(--ink);
}
#gl{ width:100%; height:100%; display:block; }

/* soft corner falloff so the frame never reads as a flat rectangle */
.stage__vignette{
  position:absolute; inset:0;
  pointer-events:none;
  background:radial-gradient(72% 62% at 50% 48%, transparent 42%, rgba(6,7,9,.72) 100%);
  mix-blend-mode:multiply;
}

/* canvas takes pointer input only while free-look is armed */
/* ScrollSmoother makes #smooth-wrapper a fixed, full-viewport element, so it
   is the wrapper — not the content — that swallows pointer input. Disabling
   only the content leaves the canvas unreachable and the car refuses to turn. */
body.is-orbiting .stage{ pointer-events:auto; }
body.is-orbiting #smooth-wrapper,
body.is-orbiting #smooth-content{ pointer-events:none; }
body.is-orbiting .orbit__reset,
body.is-orbiting .nav,
body.is-orbiting .nav *{ pointer-events:auto; }


/* ── 3D-anchored annotations ─────────────────────────────────────────────── */

.hotspots{ position:absolute; inset:0; pointer-events:none; }

.hotspot{
  position:absolute; top:0; left:0;
  display:flex; align-items:center; gap:12px;
  /* JS owns this transform once a label goes live; see updateHotspots() */
  transform:translate3d(-9999px,-9999px,0);
  opacity:0; visibility:hidden;
  will-change:transform,opacity;
}
.hotspot__dot{
  position:relative; flex:none;
  width:9px; height:9px; border-radius:50%;
  background:var(--accent);
}
.hotspot__dot::after{
  content:""; position:absolute; inset:-9px;
  border:1px solid rgba(255,59,20,.42); border-radius:50%;
  animation:ping 2.8s var(--e-io) infinite;
}
@keyframes ping{
  0%   { transform:scale(.55); opacity:1; }
  70%,100%{ transform:scale(1.35); opacity:0; }
}

.hotspot__body{
  min-width:210px; max-width:250px;
  padding:11px 14px 13px;
  background:rgba(8,9,11,.62);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line);
  border-left:1px solid var(--accent);
}
.hotspot__body em{ display:block; color:var(--accent); font-style:normal; margin-bottom:.55em; }
.hotspot__body b{
  display:block; font-size:14.5px; font-weight:600; letter-spacing:-.012em;
  margin-bottom:.3em;
}
.hotspot__body p{ font-family:var(--f-body); font-size:12.5px; line-height:1.45; color:var(--bone-dim); }

/* flip the card to the left when the anchor sits on the right of the frame */
.hotspot.is-flipped{ flex-direction:row-reverse; }
.hotspot.is-flipped .hotspot__body{
  border-left:1px solid var(--line);
  border-right:1px solid var(--accent);
  text-align:right;
}


/* ═══════════════════════════════════════════════════════════════════════════
   04 · chrome — nav, rail, cursor, film
   ═══════════════════════════════════════════════════════════════════════════ */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:400;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--edge);
}

/* The difference blend is what keeps the wordmark and the links legible over
   both the black backdrop and the car's speculars. It sits on those two only —
   applied to the whole bar it would also invert the accent-filled CTA, which
   has to stay orange to read as the primary action. */
.nav__brand,
.nav__links{ mix-blend-mode:difference; }

.nav__brand{
  display:flex; align-items:center; gap:10px;
  font-weight:700; font-stretch:112%;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:15px; letter-spacing:-.02em; text-transform:uppercase;
}
.nav__brand svg{ width:19px; height:19px; color:var(--accent); }
.nav__brand i{ font-style:normal; color:var(--muted); margin-left:.35em; }

.nav__links{ display:flex; gap:clamp(14px,2.2vw,34px); }
.nav__links a{
  position:relative; color:var(--bone-dim);
  padding:6px 0;
  transition:color .4s var(--e-out);
}
.nav__links a span{ color:var(--accent); margin-right:.5em; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:2px;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform .55s var(--e-out);
}
.nav__links a:hover{ color:var(--bone); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

.nav__end{ display:flex; align-items:center; gap:clamp(10px,1.4vw,18px); }

.nav__paint{
  position:relative;
  width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 0 0 1px var(--line-hard);
  transition:box-shadow .4s var(--e-out), transform .5s var(--e-out);
}
.nav__paint span{
  width:14px; height:14px; border-radius:50%;
  background:var(--chosen, #0b0d10);
  box-shadow:inset 0 0 0 1px rgba(237,234,227,.22), inset 0 -3px 6px rgba(0,0,0,.5);
  transition:background-color .6s var(--e-out);
}
.nav__paint:hover{ box-shadow:0 0 0 1px var(--bone); transform:scale(1.1); }

.nav__cta{
  position:relative;
  border:1px solid var(--line-hard);
  border-radius:100px;
  padding:9px 18px;
  overflow:hidden;
  color:var(--bone);
}
.nav__cta span{ position:relative; z-index:1; transition:color .45s var(--e-out); }
.nav__cta::before{
  content:""; position:absolute; inset:0;
  background:var(--bone);
  transform:translate3d(0,101%,0);
  transition:transform .55s var(--e-out);
}
.nav__cta:hover::before{ transform:translate3d(0,0,0); }
.nav__cta:hover span{ color:var(--ink); }

/* the primary action: filled accent so it separates from the difference-blended
   chrome beside it, with a low glow doing the work the hairline border can't */
.nav__cta--hot{
  border-color:transparent;
  background:var(--accent);
  color:var(--ink);
  font-weight:500;
  box-shadow:0 0 0 1px rgba(255,59,20,.5), 0 8px 26px -10px rgba(255,59,20,.95);
  transition:box-shadow .45s var(--e-out);
}
.nav__cta--hot::before{ background:var(--bone); }
.nav__cta--hot:hover{ box-shadow:0 0 0 1px rgba(237,234,227,.5), 0 10px 30px -10px rgba(255,59,20,.6); }

/* nav retracts on downward scroll */
.nav{ transition:transform .6s var(--e-out), opacity .4s linear; }
body.nav-hidden .nav{ transform:translate3d(0,-100%,0); opacity:0; }


/* ── right-hand progress rail ────────────────────────────────────────────── */

.rail{
  position:fixed; z-index:390;
  right:var(--edge); top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--muted);
  mix-blend-mode:difference;
}
.rail__track{
  width:1px; height:clamp(90px,17vh,180px);
  background:var(--line-hard);
  position:relative; overflow:hidden;
}
.rail__track i{
  position:absolute; inset:0;
  background:var(--accent);
  transform:scaleY(0); transform-origin:50% 0;
}
#rail-id{ color:var(--bone); font-variant-numeric:tabular-nums; }


/* ── film grain + scanlines ──────────────────────────────────────────────── */

.grain{
  position:fixed; inset:-120px; z-index:700;
  pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainshift 6s steps(6) infinite;
}
@keyframes grainshift{
  0%  { transform:translate3d(0,0,0); }
  20% { transform:translate3d(-6%,4%,0); }
  40% { transform:translate3d(5%,-5%,0); }
  60% { transform:translate3d(-4%,-3%,0); }
  80% { transform:translate3d(6%,5%,0); }
  100%{ transform:translate3d(0,0,0); }
}

.scanlines{
  position:fixed; inset:0; z-index:699;
  pointer-events:none; opacity:.055;
  background:repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    rgba(0,0,0,.85) 3px 4px
  );
  mix-blend-mode:multiply;
}


/* ── no-webgl fallback ───────────────────────────────────────────────────── */

.fallback{
  position:fixed; inset:0; z-index:9500;
  display:grid; place-items:center; text-align:center;
  background:var(--ink); color:var(--bone); padding:32px;
  font-family:var(--f-mono); font-size:13px; letter-spacing:.06em; line-height:1.9;
}
.fallback[hidden]{ display:none; }


/* ═══════════════════════════════════════════════════════════════════════════
   05 · page shell + sections
   ═══════════════════════════════════════════════════════════════════════════ */

#smooth-wrapper{ position:relative; z-index:2; }
main{ position:relative; z-index:2; }

.sec{ position:relative; padding:0 var(--edge); }
.wrap{ max-width:1560px; margin:0 auto; width:100%; }

/* ── 00 · hero ───────────────────────────────────────────────────────────── */

.sec--hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 4vh);
  padding-bottom:clamp(26px,5vh,60px);
}
.hero__type{ max-width:1560px; margin:0 auto; width:100%; }
.hero__type .eyebrow{ margin-bottom:clamp(14px,2.2vh,26px); }
.hero__type .display{ margin-bottom:clamp(22px,4vh,52px); }
/* logical, not left: the optical indent belongs on whichever edge the line is
   set against, and these lines are right-aligned */
.hero__type .display span:nth-child(2){ padding-inline-start:.11em; color:var(--bone); }

.hero__foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,5vw,90px); flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:clamp(16px,2.4vh,28px);
}
.hero__meta{
  display:flex; gap:clamp(20px,3.4vw,58px); flex-wrap:wrap;
}
.hero__meta em{ display:block; color:var(--muted); font-style:normal; margin-bottom:.7em; }
.hero__meta b{ display:block; color:var(--bone); font-weight:400; letter-spacing:.06em; }
.hero__meta b.live{ color:var(--accent); }

.hero__scroll{
  position:absolute; left:50%; bottom:clamp(18px,3vh,34px);
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:var(--muted);
}
.hero__scrollline{ width:1px; height:46px; background:var(--line-hard); overflow:hidden; }
.hero__scrollline i{
  display:block; width:100%; height:40%;
  background:var(--accent);
  animation:drop 2.2s var(--e-io) infinite;
}
@keyframes drop{
  0%  { transform:translateY(-110%); }
  55% { transform:translateY(260%); }
  100%{ transform:translateY(260%); }
}

/* ── 01 · manifesto ──────────────────────────────────────────────────────── */

.sec--manifesto{ padding-top:22vh; padding-bottom:24vh; }
.sec--manifesto .wrap{
  display:grid; gap:clamp(30px,5vw,90px);
  grid-template-columns:1.05fr .95fr;
  align-items:start;
}
.col--right{ padding-top:.6em; }
.col--right .body{ margin-bottom:clamp(34px,5vw,64px); }

/* The list carries its own `dir="rtl"`, which is safe here precisely because it
   IS a grid: reversing the two columns is the point — the label leads from the
   right and the qualifier trails on the left, the way the rest of the page
   reads. The row is given room to breathe rather than the tight 16px of the
   Latin original, since it now has to hold the column on its own. */
.ledger li{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 24px; align-items:baseline;
  padding:clamp(18px,2.4vw,26px) 0;
  border-top:1px solid var(--line);
  color:var(--bone-dim);
}
.ledger li:last-child{ border-bottom:1px solid var(--line); }
.ledger b{
  font-family:var(--f-display); font-weight:500;
  font-size:clamp(15px,1.35vw,20px); letter-spacing:-.008em;
  text-transform:none; color:var(--bone);
}
/* the qualifier column lands on the car's nose at some scroll positions, so it
   carries the same dark halo the telemetry figures use */
.ledger span{
  color:var(--bone-dim);
  text-shadow:0 1px 10px rgba(8,9,11,.95), 0 0 22px rgba(8,9,11,.85);
}
.ledger b{ text-shadow:0 1px 12px rgba(8,9,11,.9); }

/* ── 02 · anatomy (pinned) ───────────────────────────────────────────────── */

/* height comes from ScrollTrigger's pin spacer — never hard-code it here, or
   the spacer and the declared height fight and neighbouring sections overlap */
.sec--anatomy{ padding-left:0; padding-right:0; }
.anatomy__pin{
  height:100svh; width:100%;
  padding:calc(var(--nav-h) + 4vh) var(--edge) clamp(30px,6vh,70px);
  display:flex; flex-direction:column; justify-content:flex-start;
  overflow:hidden;
}
.anatomy__scrolldist{ display:none; }

.anatomy__head{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(16px,3vh,34px); }
.anatomy__chapters{ display:flex; gap:clamp(16px,2.6vw,44px); flex-wrap:wrap; }
.chapter{
  display:flex; align-items:baseline; gap:.5em;
  font-weight:700; font-stretch:118%;
  font-variation-settings:"wdth" 118,"wght" 700;
  font-size:clamp(26px,4.4vw,68px);
  line-height:1; letter-spacing:-.03em; text-transform:uppercase;
  color:var(--muted);
  transition:color .6s var(--e-out);
}
.chapter em{
  font-size:.22em; font-style:normal; font-weight:400;
  font-stretch:100%; font-variation-settings:"wdth" 100,"wght" 400;
  font-family:var(--f-mono); letter-spacing:.14em;
  color:var(--muted); transition:color .6s var(--e-out);
}
.chapter.is-active{ color:var(--bone); }
.chapter.is-active em{ color:var(--accent); }

/* pushed to the bottom-left so the copy never lands on top of the vehicle,
   which sits centre-frame throughout this section */
.anatomy__copy{
  position:relative;
  min-height:6.2em;
  width:min(40ch, 100%);
  align-self:flex-start;
  margin-top:auto;
  margin-bottom:clamp(14px,2.4vh,28px);
}
.anatomy__text{
  position:absolute; inset:0;
  font-family:var(--f-body);
  font-size:clamp(14.5px,1.16vw,17.5px);
  line-height:1.6; color:var(--bone-dim);
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity .5s var(--e-out), transform .6s var(--e-out);
  pointer-events:none;
}
.anatomy__text.is-active{ opacity:1; transform:none; }

.anatomy__ticks{ display:flex; gap:6px; }
.anatomy__ticks i{
  flex:1; height:1px; background:var(--line-hard);
  transform-origin:0 50%;
}

/* ── paint discs ─────────────────────────────────────────────────────────────
   The configurator section these were built for is gone; the same two classes
   now serve the entry gate, which is their only consumer. Sizing and the
   selected ring live in the gate block further down — everything here is the
   disc itself. */

/* ── 03 · orbit (pinned, free look) ──────────────────────────────────────── */

.sec--orbit{ padding-left:0; padding-right:0; }
.orbit__pin{
  height:100svh; width:100%;
  padding:calc(var(--nav-h) + 4vh) var(--edge) clamp(30px,6vh,70px);
  display:flex; flex-direction:column; justify-content:space-between;
  pointer-events:none;
  overflow:hidden;
}
.orbit__scrolldist{ display:none; }
/* the heading anchors top-right so it reads first in a right-to-left page and
   leaves the centre of the frame to the vehicle the section is about */
.orbit__head{ display:flex; flex-direction:column; align-items:flex-end; gap:clamp(14px,2.4vh,28px); }
.orbit__head .h2{ white-space:nowrap; }

.orbit__hint{
  position:absolute; left:50%; top:50%;
  transform:translate3d(-50%,-50%,0);
  opacity:0;
}
/* Frosted glass rather than a dark tint: the pill sits dead centre over the
   car's brightest panel, where a 50%-black plate and dim grey text disappeared.
   A light film plus saturation lets the bodywork read through it while the
   copy stays solid white, and the inner highlight gives it an edge. */
.orbit__hintinner{
  display:flex; align-items:center; gap:12px;
  padding:12px 22px 12px 16px;
  border:1px solid rgba(237,234,227,.28);
  border-radius:100px;
  background:linear-gradient(
    145deg, rgba(246,244,240,.82), rgba(246,244,240,.62) 46%, rgba(246,244,240,.76));
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.4),
    0 14px 40px -14px rgba(0,0,0,.9);
  color:var(--ink);
}
.orbit__hintinner svg{ width:26px; height:26px; color:var(--accent-dim); }

.orbit__readout{
  position:absolute; right:var(--edge); bottom:clamp(30px,6vh,70px);
  display:flex; flex-direction:column; gap:.7em; align-items:flex-end;
  color:var(--muted); opacity:0;
}
.orbit__readout b{
  color:var(--bone); font-weight:400; margin-left:.6em;
  font-variant-numeric:tabular-nums;
}

.orbit__reset{
  position:absolute; left:var(--edge); bottom:clamp(30px,6vh,70px);
  padding:10px 20px; border:1px solid var(--line-hard); border-radius:100px;
  color:var(--bone-dim); opacity:0;
  transition:color .4s var(--e-out), border-color .4s var(--e-out);
}
.orbit__reset:hover{ color:var(--bone); border-color:var(--bone); }

/* ── 04 · telemetry ──────────────────────────────────────────────────────── */

.sec--telemetry{ padding-top:20vh; padding-bottom:16vh; }
.sec--telemetry .wrap{ display:flex; flex-direction:column; gap:clamp(34px,6vh,80px); }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stat{
  padding:clamp(22px,3vw,42px) clamp(12px,1.6vw,26px) clamp(22px,3vw,42px) 0;
  border-bottom:1px solid var(--line);
  display:flex; flex-direction:column; gap:.8em;
}
.stat + .stat{ padding-left:clamp(14px,2vw,32px); border-left:1px solid var(--line); }
/* The vehicle drives straight through this block, so both lines are set against
   a moving, sometimes near-white backdrop. The figures get a dark halo to hold
   their edge against a specular, and the captions — which were 9.5px of muted
   grey, effectively invisible on a desktop — are enlarged and lifted to the
   bright text colour. */
.num{
  font-weight:800; font-stretch:118%;
  font-variation-settings:"wdth" 118,"wght" 800;
  font-size:clamp(42px,6.4vw,104px);
  line-height:.86; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 18px rgba(8,9,11,.95), 0 0 46px rgba(8,9,11,.8);
}
.stat em{
  font-style:normal; color:var(--bone); font-family:var(--f-mono);
  font-size:clamp(11.5px,.95vw,14.5px); line-height:1.5;
  text-shadow:0 1px 10px rgba(8,9,11,.95), 0 0 24px rgba(8,9,11,.85);
}

.marquee{ overflow:hidden; border-top:1px solid var(--line); padding-top:clamp(20px,3vh,38px); }
.marquee__track{ display:flex; width:max-content; will-change:transform; }
.marquee__track span{
  display:flex; align-items:center;
  font-weight:800; font-stretch:125%;
  font-variation-settings:"wdth" 125,"wght" 800;
  font-size:clamp(38px,7.4vw,130px);
  line-height:1; letter-spacing:-.035em; text-transform:uppercase;
  color:transparent;
  -webkit-text-stroke:1px var(--line-hard);
  white-space:nowrap;
}
.marquee__track i{
  font-style:normal; margin:0 .28em; font-size:.34em;
  color:var(--accent); -webkit-text-stroke:0;
}

/* ── 05 · contact ────────────────────────────────────────────────────────── */

.sec--contact{ padding-top:14vh; padding-bottom:clamp(28px,5vh,56px); }
.wrap--contact{ display:flex; flex-direction:column; gap:clamp(30px,5vh,64px); }
/* a hairline of --line-hard was almost invisible at this size against the
   backdrop; the outline is thickened and lifted to the bright text colour so
   the word reads as type rather than as texture */
.display--out{ color:transparent; -webkit-text-stroke:2.5px rgba(237,234,227,.85); }
/* matched by class, not by position: SplitText re-wraps the lines it is given,
   so an `nth-child` here stops matching the moment the reveal is built */
.display--out .is-solid{ color:var(--bone); -webkit-text-stroke:0; padding-inline-start:.1em; }

/* ── the primary call to action ──
   Centred and filled rather than a full-width rule, because it is the one thing
   on the page a visitor is meant to press. The ring is a conic-gradient sweep
   held in a ::before that is masked down to the border width, so a single
   rotating highlight travels the perimeter without a second element. */
.cta{
  align-self:center;
  position:relative;
  display:inline-flex; align-items:center; gap:.6em;
  padding:clamp(16px,1.9vw,22px) clamp(34px,4.4vw,58px);
  border-radius:100px;
  background:var(--accent);
  color:var(--ink);
  font-weight:700; font-stretch:112%;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:clamp(17px,1.75vw,26px);
  box-shadow:0 0 34px -6px rgba(255,59,20,.55), 0 18px 44px -20px rgba(255,59,20,.9);
  transition:transform .5s var(--e-out), box-shadow .5s var(--e-out);
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 0 48px -4px rgba(255,59,20,.75), 0 22px 52px -20px rgba(255,59,20,1); }
.cta svg{ width:clamp(18px,1.5vw,24px); height:auto; flex:none; transition:transform .5s var(--e-out); }
.cta:hover svg{ transform:translate3d(-5px,-5px,0); }


.foot{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(20px,3vw,48px);
  padding-top:clamp(24px,4vh,54px);
  color:var(--muted);
}
.foot__col em{ display:block; font-style:normal; color:var(--bone); margin-bottom:1.1em; }
.foot__col a{ display:block; padding:.22em 0; transition:color .35s var(--e-out); }
.foot__col a:hover{ color:var(--accent); }
.foot__col--wide{ grid-column:span 1; line-height:1.85; }


/* ═══════════════════════════════════════════════════════════════════════════
   06 · responsive + accessibility
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1100px){
  .sec--manifesto .wrap{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(odd){ padding-left:0; border-left:0; }
  .stat:nth-child(even){ border-left:1px solid var(--line); }
  .foot{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:860px){
  :root{ --nav-h:64px; }
  .nav__links{ display:none; }
  .rail{ display:none; }
  .hero__scroll{ left:auto; right:var(--edge); transform:none; align-items:flex-end; }
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:26px; }
  .anatomy__copy{ align-self:flex-start; }
  .hotspot__body{ min-width:0; max-width:190px; padding:9px 11px 11px; }
  .hotspot__body p{ font-size:11.5px; }
  .orbit__readout{ display:none; }
  .scanlines{ display:none; }
}

@media (max-width:560px){
  .stats{ grid-template-columns:1fr; }
  .stat, .stat + .stat{ padding-left:0; border-left:0; }
  .foot{ grid-template-columns:1fr; }
  .ledger li{ grid-template-columns:2.2em 1fr; }
  .ledger span{ grid-column:2; text-align:left; color:var(--muted); }
}

/* A phone runs the page, the WebGL scene and the compositor on one small GPU,
   and these four surfaces are the only ones that make it read the live
   framebuffer back: a backdrop blur over a canvas that repaints every frame is
   re-composited on every one of those frames, and the grain is a full-screen
   layer stacked over the same canvas for a texture that is invisible at .028
   on a 400-pixel-wide screen. Flat plates read identically at this size. */
@media (hover:none){
  .grain{ display:none; }
  .hotspot__body{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(8,9,11,.92);
  }
  .orbit__hintinner{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:linear-gradient(145deg, rgba(246,244,240,.97), rgba(246,244,240,.9));
  }
  /* stays translucent — the point of this panel is watching the paint change
     behind it — but without the blur to pay for */
  .loader--change{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:rgba(8,9,11,.78);
  }
  /* The corner falloff over the canvas, blended normally. Multiply made the
     compositor read the canvas back under a full-screen layer every frame;
     over a frame this dark a plain alpha gradient darkens the corners by the
     same amount, within a few levels. */
  .stage__vignette{ mix-blend-mode:normal; }
}

/* ── page reveal across documents ───────────────────────────────────────────
   «ورود به مزادو» opens the sign-in (or the app) as a new document, which
   the in-page reveal (js/page-reveal.js) cannot carry. The browser's view
   transition can: it freezes this page and the next one grows through a
   circle from the tapped button — the same reveal, not a curtain. The rules
   run on the arriving page; this copy is the opt-in, and the reveal for a
   page that arrives here. Only a navigation that asked for it is revealed
   (the head script skips the rest); a browser without view transitions
   simply navigates. Kept identical in main.css, auth.css and app.css: both
   ends must opt in.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  @view-transition{ navigation:auto; }
}
::view-transition{ background:#08090b; }
::view-transition-old(root),
::view-transition-new(root){ mix-blend-mode:normal; }
::view-transition-old(root){
  animation:page-recede .8s cubic-bezier(.45,0,.2,1) both;
  transform-origin:var(--reveal-x, 50%) var(--reveal-y, 100%);
}
::view-transition-new(root){ animation:page-reveal .8s cubic-bezier(.45,0,.2,1) both; }
@keyframes page-recede{ to{ transform:scale(.94); opacity:.4; } }
@keyframes page-reveal{
  from{ clip-path:circle(0 at var(--reveal-x, 50%) var(--reveal-y, 100%)); }
  to{ clip-path:circle(142vmax at var(--reveal-x, 50%) var(--reveal-y, 100%)); }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .grain,.scanlines{ display:none; }
}

/* keyboard focus should always be visible, even with a custom cursor */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   07 · Persian copy

   Reading direction and script-appropriate tracking, nothing else. Every
   `dir="rtl"` in the markup sits on a leaf text element — never on a flex or
   grid container — because the inline axis follows `direction`, so a container
   set to RTL would reverse its children and move boxes the layout depends on.
   Sizes, weights, colours and positions are the Latin original's.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The document is declared Persian and right-to-left (`<html lang="fa"
   dir="rtl">`), which is what it is to a crawler, a screen reader or a
   translator. The layout under <body> is still the Latin original's, so the
   body sets the inline direction back. The body's direction is also what the
   viewport takes (CSS Writing Modes §8), so the scrollbar and the scroll
   origin stay where they were. Leaf elements keep their own dir="rtl". */
body{ direction:ltr; }

/* Persian is a connected script: the display faces are tracked tight (negative)
   and the mono labels tracked wide. Both distort it — the first collides the
   joins, the second pulls them apart — so tracking, and only tracking, is
   neutralised here. Each element-qualified selector below repeats the
   specificity of the rule it is answering, so it wins on source order alone. */
.display,
.h2,
.lede,
.cta,
.mono--fa,
.marquee__track span,
.chapter span,
.hotspot__body b,
.ledger b,
.hero__meta b,
.stat b,
.stat em,

/* Persian sets a much taller ink box than Latin capitals. Measured across this
   page, the worst line runs 1.19em from the top of an ascender to the bottom of
   a descender — against the 0.82em the display type was set on for uppercase
   Latin, which has no descenders at all. Left at those values the manifesto
   lines collide and the SplitText line masks cut the tails off. The figures
   below are that measurement plus a small margin: the same tight optical gap
   the Latin original had, expressed for a script that needs the room. */
.display{ line-height:1.26; }
.h2{ line-height:1.28; }
.marquee__track span{ line-height:1.32; }

/* Headings read right-to-left with the rest of the page: `text-align` stays at
   its `start` default, which `direction: rtl` resolves to the right edge, so
   every line hangs off the right of its own column. In the hero and the closing
   block that lands the type over the vehicle, which reads as backdrop behind it
   rather than as a neighbour beside it. */

/* the stacked breakpoint aligns its text to the start of the column — which
   for Persian is the right edge */
@media (max-width:560px){
  .ledger span{ text-align:right; }
}