/* Varordakan Tester — marketing site
   Design language: Armenian road signage. The amber priority-road diamond is
   the app icon, the mascot's body and the structural unit of this page. */

:root{
  --ink-0:oklch(0.13 0.018 285);
  --ink-1:oklch(0.175 0.020 285);
  --ink-2:oklch(0.235 0.022 285);
  --ink-line:oklch(0.32 0.020 285);
  --ink-60:oklch(0.775 0.014 285);
  --ink-90:oklch(0.965 0.004 285);

  --amber:oklch(0.845 0.163 86);
  --amber-deep:oklch(0.72 0.155 70);
  --teal:oklch(0.874 0.136 175);
  --signal-red:oklch(0.585 0.215 27);
  --sign-white:oklch(0.97 0.003 90);

  --page:var(--ink-0);
  --on-page:var(--ink-90);
  --muted:var(--ink-60);
  --rule:var(--ink-line);

  --t-display:clamp(2.55rem,8vw,5.5rem);
  --t-mega:clamp(3rem,11vw,6rem);
  --t-h2:clamp(1.95rem,4.6vw,3.35rem);
  --t-h3:clamp(1.35rem,2.4vw,1.95rem);
  --t-lead:clamp(1.05rem,1.5vw,1.3rem);
  --t-body:clamp(1rem,0.95vw,1.09rem);
  --t-label:0.815rem;

  --gut:clamp(1.25rem,4vw,3rem);
  --maxw:1240px;
  --bleed:clamp(1.25rem,4vw,3.5rem);

  --z-bg:0;
  --z-mid:10;
  --z-fg:20;
  --z-sticky:40;
  --z-nav:60;
  --z-overlay:80;

  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart:cubic-bezier(0.25,1,0.5,1);

  --sign-plate:
    0 0 0 3px var(--sign-white),
    0 0 0 4px oklch(0.13 0.018 285),
    0 18px 48px -18px oklch(0 0 0 / 0.9);
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--page);
  color:var(--on-page);
  font-family:'Google Sans','Noto Sans Armenian','Noto Sans',system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;}

:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--bleed);
}

/* ── Display type: Handjet, a variable dot-matrix face. At high weight the
   elements fuse into solid condensed signage lettering; at low weight they
   separate back into a motorway message-sign matrix. That range is the
   page's signature move. ────────────────────────────────────────────── */
.dsp{
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 800;
  line-height:0.92;
  letter-spacing:0.005em;
  text-transform:uppercase;
  text-wrap:balance;
  overflow-wrap:break-word;
}
.dsp--matrix{font-variation-settings:'ELGR' 1,'ELSH' 4,'wght' 600;}

/* ── Page texture: film grain + a lattice of amber diamonds that drifts
   with the scroll. Both fixed, both inert. ──────────────────────────── */
.texture{
  position:fixed;inset:0;
  z-index:var(--z-bg);
  pointer-events:none;
}
.texture__lattice{
  position:absolute;inset:-25vh -10vw;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath d='M36 24 48 36 36 48 24 36Z' fill='none' stroke='%23FFC72C' stroke-width='1.1' opacity='0.14'/%3E%3C/svg%3E");
  transform:translate3d(0,var(--lattice-y,0px),0);
  will-change:transform;
}
.texture__grain{
  position:absolute;inset:0;
  opacity:0.22;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;
  z-index:var(--z-nav);
  background:oklch(0.13 0.018 285 / 0.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}
.nav__inner{
  max-width:var(--maxw);margin-inline:auto;
  padding:0.7rem var(--bleed);
  display:flex;align-items:center;gap:1rem;
}
.mark{
  display:flex;align-items:center;gap:0.6rem;
  margin-inline-end:auto;
  min-width:0;
}
.mark img{
  width:30px;height:30px;flex:none;
  border:1px solid var(--rule);
  border-radius:8px;
}
.mark__text{
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 800;
  font-size:1.18rem;letter-spacing:0.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.langs{display:flex;gap:2px;flex:none;}
.langs button{
  border:1px solid var(--rule);
  background:transparent;color:var(--muted);
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 700;
  font-size:0.95rem;letter-spacing:0.05em;
  padding:0.28rem 0.6rem;cursor:pointer;
  transition:color .18s var(--ease-out),background-color .18s var(--ease-out),border-color .18s var(--ease-out);
}
.langs button:hover{color:var(--on-page);border-color:var(--ink-60);}
.langs button[aria-pressed="true"]{
  background:var(--amber);border-color:var(--amber);color:var(--ink-0);
}

.plate{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:var(--amber);color:var(--ink-0);
  border:2px solid var(--sign-white);
  padding:0.5rem 1.05rem;
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 800;
  font-size:1.05rem;letter-spacing:0.05em;text-transform:uppercase;
  cursor:pointer;
  transition:translate .2s var(--ease-out),box-shadow .2s var(--ease-out);
  box-shadow:0 0 0 oklch(0.845 0.163 86 / 0);
}
.plate:hover{translate:0 -2px;box-shadow:0 10px 26px -10px oklch(0.845 0.163 86 / 0.7);}
.nav .plate{display:none;}
@media (min-width:760px){.nav .plate{display:inline-flex;}}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  z-index:var(--z-mid);
  padding-block:clamp(2.5rem,7vw,5.5rem) clamp(2rem,4vw,3.5rem);
  overflow:clip;
}
.hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,3rem);
  align-items:center;
}
@media (min-width:980px){
  .hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr);gap:clamp(2rem,4vw,4rem);}
}

.hero h1{
  font-size:var(--t-display);
  margin:0 0 1.25rem;
  max-width:20ch;
}
.hero h1 .amber{color:var(--amber);}
.hero__lead{
  font-size:var(--t-lead);
  color:var(--muted);
  max-width:46ch;
  margin:0 0 1.9rem;
  text-wrap:pretty;
}

.badges{display:flex;flex-wrap:wrap;gap:0.75rem;}
.badge{
  display:flex;align-items:center;gap:0.65rem;
  border:1px solid var(--ink-line);
  background:var(--ink-1);
  padding:0.6rem 1.1rem 0.6rem 0.85rem;
  transition:border-color .2s var(--ease-out),translate .2s var(--ease-out),background-color .2s var(--ease-out);
}
.badge:hover{border-color:var(--sign-white);translate:0 -2px;background:var(--ink-2);}
.badge svg{width:26px;height:26px;flex:none;fill:var(--on-page);}
.badge span{display:flex;flex-direction:column;line-height:1.16;}
.badge small{font-size:0.66rem;color:var(--muted);letter-spacing:0.04em;text-transform:uppercase;}
.badge strong{font-size:1rem;font-weight:600;}

/* Hero stage: the mascot on its diamond halo, with real road signs
   scattered at three depths behind it. */
.stage{
  position:relative;
  aspect-ratio:1/1;
  width:min(100%,520px);
  margin-inline:auto;
}
.stage__halo{
  position:absolute;inset:14%;
  background:
    radial-gradient(closest-side, oklch(0.845 0.163 86 / 0.40), transparent 74%);
  rotate:45deg;
  transform:translate3d(0,var(--halo-y,0px),0);
}
.stage__mascot{
  position:absolute;inset:6% 4% 4%;
  z-index:var(--z-fg);
  transform:translate3d(calc(var(--px,0) * 14px), calc(var(--py,0) * 14px + var(--mascot-y,0px)), 0);
}
.stage__mascot canvas{width:100%;height:100%;display:block;}

.sign-drift{
  position:absolute;
  width:var(--w,68px);
  filter:drop-shadow(0 12px 22px oklch(0 0 0 / 0.75));
  opacity:var(--o,1);
  transform:
    translate3d(calc(var(--px,0) * var(--depth,20) * 1px),
               calc(var(--py,0) * var(--depth,20) * 1px + var(--drift-y,0px)), 0)
    rotate(var(--rot,0deg));
  will-change:transform;
}

/* Variable-message strip: the stats, set as a motorway sign readout. */
.vms{
  position:relative;z-index:var(--z-mid);
  border-block:1px solid var(--rule);
  background:var(--ink-1);
  overflow:hidden;
  padding-block:0.55rem;
}
.vms__track{
  display:flex;width:max-content;
  transform:translate3d(var(--marq-a,0px),0,0);
  will-change:transform;
}
.vms__run{
  display:flex;align-items:center;gap:2.6rem;
  padding-inline:1.3rem;
  white-space:nowrap;
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 4,'wght' 600;
  font-size:1.35rem;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--amber);
}
.vms__run b{
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 900;
  font-weight:400;
  font-size:1.5rem;
  color:var(--sign-white);
}
.vms__run i{
  font-style:normal;color:var(--ink-line);
}

/* ── Sign gantry: the real sign library, two counter-scrolling rows whose
   speed is modulated by how fast you are scrolling. ──────────────────── */
.gantry{
  position:relative;z-index:var(--z-mid);
  padding-block:clamp(2.2rem,5vw,4rem);
  overflow:clip;
  border-bottom:1px solid var(--rule);
}
.gantry__row{
  display:flex;width:max-content;
  gap:clamp(1rem,2vw,1.8rem);
  transform:translate3d(var(--marq,0px),0,0);
  will-change:transform;
}
.gantry__row + .gantry__row{margin-top:clamp(1rem,2vw,1.8rem);}
.gantry__row img{
  width:clamp(58px,7.5vw,92px);
  height:clamp(58px,7.5vw,92px);
  object-fit:contain;
  flex:none;
  filter:drop-shadow(0 10px 20px oklch(0 0 0 / 0.6));
}
.gantry__row--dim img{opacity:0.5;filter:grayscale(0.35) drop-shadow(0 8px 16px oklch(0 0 0 / 0.5));}

.gantry__caption{
  position:relative;
  margin-top:clamp(1.8rem,4vw,3rem);
  text-align:center;
}
.gantry__caption p{
  font-size:var(--t-lead);color:var(--muted);
  max-width:52ch;margin-inline:auto;text-wrap:pretty;
}

/* ── Acts ────────────────────────────────────────────────────────────── */
.act{
  position:relative;z-index:var(--z-mid);
  padding-block:clamp(4rem,10vw,8.5rem);
  border-bottom:1px solid var(--rule);
}
.act__grid{
  display:grid;grid-template-columns:1fr;
  gap:clamp(2.5rem,5vw,4rem);
  align-items:start;
}
@media (min-width:980px){
  .act__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(3rem,6vw,6rem);}
  .act--flip .act__copy{order:2;}
  .act__visual{position:sticky;top:calc(18vh);}
}
.act__copy h2{
  font-size:var(--t-h2);
  margin:0 0 1.1rem;
  max-width:18ch;
}
.act__copy p{
  color:var(--muted);max-width:56ch;margin:0 0 1.1rem;
  text-wrap:pretty;
}
.act__marker{
  display:flex;align-items:center;gap:0.9rem;
  margin-bottom:1.5rem;
}
.act__marker img{
  width:52px;height:52px;object-fit:contain;flex:none;
  filter:drop-shadow(0 8px 18px oklch(0 0 0 / 0.65));
}
.act__marker span{
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 4,'wght' 600;
  font-size:1.1rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--amber);
}

.points{list-style:none;margin:1.6rem 0 0;padding:0;}
.points li{
  display:grid;grid-template-columns:auto 1fr;gap:0.85rem;
  align-items:start;
  padding-block:0.8rem;
  border-top:1px solid var(--rule);
  color:var(--on-page);
}
.points li:last-child{border-bottom:1px solid var(--rule);}
.points li::before{
  content:"";
  width:11px;height:11px;margin-top:0.55rem;
  background:var(--amber);
  rotate:45deg;
  border-radius:1px;
}

/* Phone renders, tilted and parallaxed against the copy. */
.shots{
  position:relative;
  display:flex;justify-content:center;
  min-height:clamp(320px,46vw,560px);
}
.shots img{
  border-radius:26px;
  box-shadow:0 34px 70px -28px oklch(0 0 0 / 0.95);
  will-change:transform;
}
.shots__lead{
  width:min(68%,300px);
  position:relative;z-index:var(--z-fg);
  transform:translate3d(0,var(--shot-a,0px),0) rotate(-2.2deg);
}
.shots__trail{
  position:absolute;
  width:min(56%,248px);
  right:0;top:12%;
  opacity:0.82;
  transform:translate3d(0,var(--shot-b,0px),0) rotate(4deg);
}
.shots__solo{width:min(74%,330px);transform:translate3d(0,var(--shot-a,0px),0);}

.act__mascot{
  position:absolute;
  width:clamp(104px,16vw,176px);
  aspect-ratio:1/1;
  z-index:var(--z-fg);
  pointer-events:none;
  transform:translate3d(0,var(--mascot-y,0px),0);
}
.act__mascot canvas{width:100%;height:100%;display:block;}
.act__mascot--wheel{left:0;bottom:-6%;width:clamp(312px,48vw,528px);}
.act__mascot--zen{right:0;top:-6%;}
.act__mascot--tutor{right:0;bottom:-26%;}
@media (min-width:980px){
  .act__mascot--wheel{left:-18%;bottom:-8%;}
  .act__mascot--zen{right:-9%;top:-4%;}
}

/* ── Act: amber drench (the committed colour move) ───────────────────── */
.act--drench{
  background:var(--amber);
  color:var(--ink-0);
  border-bottom:none;
}
.act--drench .act__copy p{color:oklch(0.35 0.075 74);}
.act--drench .act__marker span{
  color:oklch(0.33 0.072 74);
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 800;
  letter-spacing:0.1em;
}
.act--drench .points li{border-color:oklch(0.72 0.135 76);color:var(--ink-0);}
.act--drench .points li::before{background:var(--ink-0);}
.act--drench .shots img{box-shadow:0 34px 70px -30px oklch(0.3 0.08 74 / 0.9);}

/* ── Act: the 3D simulator, on a road plane that scrolls toward you ──── */
.act--road{
  background:oklch(0.105 0.016 285);
  overflow:clip;
}
.road{
  position:absolute;inset:auto 0 0;
  inset:0;
  perspective:260px;
  perspective-origin:50% 34%;
  pointer-events:none;
  overflow:hidden;
  z-index:var(--z-bg);
  mask-image:linear-gradient(to bottom,transparent 26%,#000 52%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(to bottom,transparent 26%,#000 52%,#000 86%,transparent);
}
.road__plane{
  position:absolute;
  top:34%;left:-110%;right:-110%;bottom:-120%;
  transform:rotateX(62deg);
  transform-origin:50% 0%;
  background-image:
    repeating-linear-gradient(to right,
      oklch(0.845 0.163 86 / 0.30) 0 3px, transparent 3px 132px),
    repeating-linear-gradient(to bottom,
      oklch(0.874 0.136 175 / 0.22) 0 3px, transparent 3px 120px);
  background-position:0 var(--road-y,0px);
}
.act--road .act__copy h2,.act--road .act__copy p{position:relative;}

/* ── Sign board: the reference library, live ─────────────────────────── */
.board{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(56px,1fr));
  gap:clamp(0.45rem,1.4vw,1rem);
}
@media (min-width:980px){
  .board{grid-template-columns:repeat(auto-fit,minmax(74px,1fr));}
}
.board button{
  aspect-ratio:1/1;
  border:1px solid transparent;
  background:transparent;
  padding:0.45rem;
  cursor:pointer;
  transition:border-color .18s var(--ease-out),scale .18s var(--ease-out),background-color .18s var(--ease-out);
}
.board button:hover,.board button[aria-pressed="true"]{
  border-color:var(--amber);
  background:var(--ink-1);
  scale:1.06;
}
.board img{width:100%;height:100%;object-fit:contain;}
.board__readout{
  margin-top:1.4rem;
  border:1px solid var(--rule);
  background:var(--ink-1);
  padding:0.9rem 1.1rem;
  display:flex;align-items:center;gap:0.9rem;
  min-height:76px;
}
.board__readout img{width:48px;height:48px;object-fit:contain;flex:none;}
.board__readout code{
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 800;
  font-size:1.3rem;letter-spacing:0.04em;
  color:var(--amber);
}
.board__readout span{color:var(--muted);font-size:0.95rem;}

/* ── Act: the AI assistant, answering in a citation slip ─────────────── */
.slip{
  border:1px solid var(--rule);
  background:var(--ink-1);
  padding:clamp(1.1rem,2.4vw,1.7rem);
  max-width:520px;
  margin-inline:auto;
  transform:translate3d(0,var(--shot-a,0px),0);
}
.slip__q{
  color:var(--on-page);
  border-bottom:1px solid var(--rule);
  padding-bottom:0.9rem;margin:0 0 0.9rem;
  font-size:1.02rem;
}
.slip__a{color:var(--muted);margin:0 0 1rem;font-size:0.98rem;}
.slip__cite{
  display:inline-flex;align-items:center;gap:0.55rem;
  border:1px solid var(--teal);
  color:var(--teal);
  padding:0.35rem 0.75rem;
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 800;
  font-size:1rem;letter-spacing:0.05em;
}

/* ── Legend: the proof points, as a sign legend rather than a card grid ── */
.legend{
  position:relative;z-index:var(--z-mid);
  padding-block:clamp(4rem,9vw,7rem);
  border-bottom:1px solid var(--rule);
}
.legend__head{
  display:flex;align-items:center;justify-content:flex-start;
  gap:clamp(1rem,3vw,2.5rem);
  margin-bottom:clamp(2rem,4vw,3rem);
}
.legend h2{font-size:var(--t-h2);margin:0;max-width:20ch;}
.legend__mascot{
  width:clamp(112px,15vw,188px);aspect-ratio:1/1;flex:none;
  order:-1;
  transform:translate3d(0,var(--mascot-y,0px),0);
}
.legend__mascot canvas{width:100%;height:100%;display:block;}
.legend__list{
  display:grid;grid-template-columns:1fr;
  column-gap:clamp(2rem,5vw,4.5rem);
}
@media (min-width:860px){.legend__list{grid-template-columns:1fr 1fr;}}
.legend__row{
  display:grid;grid-template-columns:56px 1fr;
  gap:1.1rem;align-items:start;
  padding-block:1.4rem;
  border-top:1px solid var(--rule);
}
.legend__row img{width:56px;height:56px;object-fit:contain;}
.legend__row h3{
  font-size:1.12rem;margin:0 0 0.3rem;font-weight:600;
  letter-spacing:0.002em;
}
.legend__row p{margin:0;color:var(--muted);font-size:0.98rem;text-wrap:pretty;}

/* ── Sourcing notice ─────────────────────────────────────────────────── */
.sourcing{
  position:relative;z-index:var(--z-mid);
  padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2.5rem,5vw,4rem);
}
.sourcing__plate{
  border:1px solid var(--rule);
  background:var(--ink-1);
  padding:clamp(1.1rem,2.6vw,1.8rem);
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
}
.sourcing__plate svg{width:26px;height:26px;stroke:var(--muted);fill:none;stroke-width:1.8;}
.sourcing__plate p{margin:0;color:var(--muted);font-size:0.92rem;text-wrap:pretty;}
.sourcing__plate a{color:var(--on-page);text-decoration:underline;text-underline-offset:3px;}
.sourcing__plate a:hover{color:var(--amber);}

/* ── Closing call ────────────────────────────────────────────────────── */
.close{
  position:relative;z-index:var(--z-mid);
  background:var(--amber);
  color:var(--ink-0);
  padding-block:clamp(3.5rem,8vw,6.5rem);
  overflow:clip;
  text-align:center;
}
.close__mascot{
  width:min(258px,48vw);aspect-ratio:1/1;
  margin:0 auto clamp(1rem,2vw,1.6rem);
  transform:translate3d(0,var(--mascot-y,0px),0);
}
.close__mascot canvas{width:100%;height:100%;display:block;}
.close h2{
  font-size:var(--t-mega);
  margin:0 0 0.9rem;
  max-width:15ch;margin-inline:auto;
}
.close p{
  color:oklch(0.35 0.075 74);
  font-size:var(--t-lead);
  margin:0 auto 2rem;max-width:44ch;
}
.close .badges{justify-content:center;}
.close .badge{
  background:var(--ink-0);border-color:var(--ink-0);color:var(--ink-90);
}
.close .badge:hover{border-color:var(--sign-white);}

/* ── Footer ──────────────────────────────────────────────────────────── */
.foot{
  position:relative;z-index:var(--z-mid);
  padding-block:clamp(2rem,4vw,3rem);
  border-top:1px solid var(--rule);
}
.foot__inner{
  display:flex;flex-wrap:wrap;gap:1rem 1.8rem;
  align-items:center;justify-content:space-between;
}
.foot__copy{
  font-family:'Handjet','Google Sans',sans-serif;
  font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 700;
  font-size:1.02rem;letter-spacing:0.05em;text-transform:uppercase;
  color:var(--muted);
}
.foot__links{display:flex;flex-wrap:wrap;gap:0.4rem 1.4rem;font-size:0.92rem;}
.foot__links a{color:var(--muted);}
.foot__links a:hover{color:var(--amber);}

/* ── Reveals. Content is visible by default; these only add movement. ── */
/* Scoped to `.js` so a blocked or failed script leaves every section
   visible rather than stuck at opacity 0. */
@media (prefers-reduced-motion:no-preference){
  .js .rise{
    opacity:0;
    translate:0 26px;
    transition:opacity .7s var(--ease-out-quart),translate .7s var(--ease-out-quart);
  }
  .js .rise.is-in{opacity:1;translate:0 0;}

  /* The display headline switches on like a message sign. */
  .js .switch-on{
    font-variation-settings:'ELGR' 1,'ELSH' 4,'wght' 250;
    opacity:0.35;
    transition:font-variation-settings 1.1s var(--ease-out-quart),opacity .8s var(--ease-out-quart);
  }
  .js .switch-on.is-in{
    font-variation-settings:'ELGR' 1,'ELSH' 2,'wght' 800;
    opacity:1;
  }

  .js .legend__row{
    opacity:0;translate:0 18px;
    transition:opacity .55s var(--ease-out-quart) var(--stagger,0ms),
               translate .55s var(--ease-out-quart) var(--stagger,0ms);
  }
  .js .legend__row.is-in{opacity:1;translate:0 0;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .sign-drift,.stage__mascot,.stage__halo,.shots img,.slip,
  .act__mascot,.close__mascot,.texture__lattice,.gantry__row,.vms__track{
    transform:none !important;
  }
  .road__plane{background-position:0 0 !important;}
}