/* ═══════════════════════════════════════════════════════════
   MEESHO.AE — PRE-LAUNCH
   1. Tokens   2. Base   3. Type   4. Chrome   5. Sections
   6. Motion   7. Responsive   8. Preferences
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────── */
:root{
  /* Palette — sampled from the official logo, extended for depth */
  --ink:        #060A16;   /* the void the objects float in */
  --midnight:   #0D1834;   /* logo navy */
  --midnight-2: #101F42;
  --slate:      #6E7C9B;
  --mist:       #9DAAC6;
  --orange:     #FF7300;   /* logo orange — accent only */
  --ember:      rgba(255,115,0,.14);
  --ivory:      #F6F2EA;
  --ivory-dim:  #C8CDDA;
  --hair:       rgba(157,170,198,.16);

  --bg: var(--ink);        /* driven by JS across the scroll */
  --fg: var(--ivory);

  /* Type */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Sora", "Segoe UI", system-ui, sans-serif;
  --mono:    "Azeret Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-xl: clamp(2.9rem, 10.4vw, 9.5rem);
  --fs-lg: clamp(2.4rem, 8.4vw, 7.4rem);
  --fs-md: clamp(2rem, 5.6vw, 4.6rem);
  --fs-lede: clamp(1.02rem, 1.55vw, 1.35rem);
  --fs-mono: clamp(.62rem, .78vw, .74rem);

  /* Space */
  --gut: clamp(1.25rem, 5vw, 5.5rem);
  --sec: clamp(6rem, 15vh, 12rem);
  --max: 1440px;

  --ease: cubic-bezier(.22,.61,.24,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── 2. BASE ───────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-weight:300;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  transition:background-color .7s linear, color .5s var(--ease);
}
body.is-loading{ overflow:hidden; height:100vh; }
img,svg{ display:block; max-width:100%; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); }
.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
::selection{ background:var(--orange); color:#fff; }
:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; border-radius:2px; }

/* Fixed atmosphere layers */
.backdrop{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-color:var(--bg);
  background-image:
    radial-gradient(102% 70% at 50% 26%, rgba(58,84,140,.30), transparent 60%),
    radial-gradient(60% 42% at 88% 12%, rgba(255,115,0,.07), transparent 70%),
    radial-gradient(120% 74% at 50% 104%, rgba(2,4,10,.85), transparent 66%);
  transition:background-color .7s linear;
}
.dust{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:0;
  transition:opacity 1.2s var(--ease);
}
body.is-ready .dust{ opacity:1; }
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
main{ position:relative; z-index:3; }

/* ── 3. TYPE ───────────────────────────────────────────── */
.display{
  font-family:var(--display);
  font-weight:500;
  font-variation-settings:"wdth" 112;
  line-height:.92;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}
.display--xl{ font-size:var(--fs-xl); }
.display--lg{ font-size:var(--fs-lg); }
.display--md{ font-size:var(--fs-md); font-variation-settings:"wdth" 106; }
.ink-orange{ color:var(--orange); }

.eyebrow{
  font-family:var(--mono); font-weight:400;
  font-size:var(--fs-mono); letter-spacing:.42em; text-transform:uppercase;
  color:var(--orange); margin:0 0 clamp(1.1rem,2.4vw,2rem);
}
.lede{
  font-size:var(--fs-lede); font-weight:200; line-height:1.55;
  color:var(--mist); max-width:33ch; margin:clamp(1.4rem,3vw,2.4rem) 0 0;
  text-wrap:pretty;
}
.lede--center{ margin-inline:auto; text-align:center; max-width:26ch; }
.mono{
  font-family:var(--mono); font-weight:300;
  font-size:var(--fs-mono); letter-spacing:.26em; text-transform:uppercase;
  color:var(--slate); margin:0;
}
.mono--accent{ color:var(--orange); }
.mono--dim{ color:rgba(110,124,155,.62); }
.rule{ flex:1; height:1px; background:var(--hair); min-width:2rem; }

/* ── 4. CHROME ─────────────────────────────────────────── */
/* Preloader */
.preloader{
  position:fixed; inset:0; z-index:100;
  display:grid; place-content:center; justify-items:center; gap:2.2rem;
  background:var(--ink);
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__mark svg{ width:clamp(90px,16vw,150px); overflow:visible; }
.preloader__mark path{
  fill:none; stroke:var(--orange); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:520; stroke-dashoffset:520;
  animation:draw 2.2s var(--ease-out) infinite;
}
@keyframes draw{
  0%{ stroke-dashoffset:520; opacity:.2 }
  45%{ stroke-dashoffset:0; opacity:1 }
  100%{ stroke-dashoffset:-520; opacity:.2 }
}
.preloader__label{ font-family:var(--mono); font-size:.66rem; letter-spacing:.4em; color:var(--slate); margin:0; }

/* Header */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.4vw,1.9rem) var(--gut);
  transform:translateY(-100%);
  transition:transform .9s var(--ease-out) .2s;
}
body.is-ready .hdr{ transform:none; }
.hdr__logo{ position:relative; display:block; line-height:0; }
.logo{ width:clamp(104px,10vw,150px); height:auto; transition:opacity .5s var(--ease); }
.logo--dark{ position:absolute; inset:0; opacity:0; }
body.is-light .logo--light{ opacity:0; }
body.is-light .logo--dark{ opacity:1; }

/* Cart manifest — the recurring signature */
.manifest{ display:flex; align-items:center; gap:.85rem; }
.manifest__last{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--slate); opacity:0; transform:translateX(8px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  white-space:nowrap;
}
.manifest__last.is-in{ opacity:1; transform:none; }
.manifest__chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .78rem .42rem .62rem;
  border:1px solid var(--hair); border-radius:100px;
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  background:rgba(10,17,34,.28);
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
body.is-light .manifest__chip{ background:rgba(13,24,52,.05); border-color:rgba(13,24,52,.14); }
.manifest__chip.is-hit{ border-color:var(--orange); }
.manifest__icon{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; color:var(--mist); }
body.is-light .manifest__icon{ color:var(--midnight); }
.manifest__count{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  font-variant-numeric:tabular-nums; color:var(--fg); min-width:1.9em; text-align:center;
}
.manifest__chip.is-hit .manifest__count{ color:var(--orange); }

/* ── 5. SECTIONS ───────────────────────────────────────── */

/* 5.1 Hero */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:center;
  padding:clamp(7rem,14vh,10rem) var(--gut) clamp(5rem,10vh,7rem);
}
.hero__inner{ position:relative; z-index:3; width:100%; max-width:var(--max); margin-inline:auto; }
.hero__meta{
  display:flex; align-items:center; gap:1.1rem;
  margin-top:clamp(2.2rem,5vw,3.6rem); max-width:640px;
}
.hero__corner{ position:absolute; bottom:clamp(1.4rem,3vw,2.6rem); font-size:.58rem; letter-spacing:.3em; z-index:3; }
.hero__corner--l{ left:var(--gut); }
.hero__corner--r{ right:var(--gut); }

.stage{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.obj{
  position:absolute; left:var(--x); top:var(--y);
  width:clamp(74px,12.5vw,190px); aspect-ratio:1;
  transform:translate3d(-50%,-50%,0) scale(var(--s));
  opacity:0;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.6));
  animation:objIn 1.6s var(--ease-out) forwards;
}
body.is-loading .obj{ animation-play-state:paused; }
.obj svg{ width:100%; height:100%; animation:float 11s ease-in-out infinite; }
.obj--far{ opacity:0; filter:blur(2.5px) drop-shadow(0 20px 34px rgba(0,0,0,.5)); }
.obj--b svg{ animation-duration:13s; animation-delay:-3s }
.obj--c svg{ animation-duration:15s; animation-delay:-6s }
.obj--d svg{ animation-duration:12s; animation-delay:-2s }
.obj--e svg{ animation-duration:16s; animation-delay:-8s }
.obj--f svg{ animation-duration:14s; animation-delay:-5s }
.obj--g svg{ animation-duration:17s; animation-delay:-1s }
.obj--h svg{ animation-duration:13.5s; animation-delay:-9s }
.obj--a{ animation-delay:.5s } .obj--b{ animation-delay:.75s } .obj--c{ animation-delay:.65s }
.obj--d{ animation-delay:.9s } .obj--e{ animation-delay:1.05s } .obj--f{ animation-delay:1.15s }
.obj--g{ animation-delay:1.25s } .obj--h{ animation-delay:1s }
@keyframes objIn{
  from{ opacity:0; transform:translate3d(-50%,calc(-50% + 46px),0) scale(calc(var(--s) * .82)); }
  to{ opacity:1; transform:translate3d(-50%,-50%,0) scale(var(--s)); }
}
.obj--far{ animation-name:objInFar; }
@keyframes objInFar{
  from{ opacity:0; transform:translate3d(-50%,calc(-50% + 46px),0) scale(calc(var(--s) * .82)); }
  to{ opacity:.42; transform:translate3d(-50%,-50%,0) scale(var(--s)); }
}
@keyframes float{
  0%,100%{ transform:translate3d(0,0,0) rotate(0deg) }
  33%{ transform:translate3d(6px,-16px,0) rotate(2.4deg) }
  66%{ transform:translate3d(-7px,10px,0) rotate(-2deg) }
}

.scrollcue{
  position:absolute; left:50%; bottom:clamp(1.4rem,3vw,2.6rem); z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  opacity:0; transition:opacity .8s var(--ease) 1.9s;
}
body.is-ready .scrollcue{ opacity:1; }
.scrollcue .mono{ font-size:.55rem; letter-spacing:.44em; }
.scrollcue__line{ width:1px; height:46px; background:linear-gradient(var(--orange),transparent); position:relative; overflow:hidden; }
.scrollcue__line::after{
  content:""; position:absolute; inset:0; background:var(--ivory);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%) } 60%,100%{ transform:translateY(100%) } }

/* 5.2 What's inside */
.inside{ padding:var(--sec) 0; text-align:center; }
.inside .display{ margin-inline:auto; }
.trio{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(2rem,9vw,8rem); margin:clamp(3.5rem,9vw,7rem) 0 clamp(2.5rem,6vw,4rem);
}
.trio__item{ width:clamp(58px,9vw,132px); opacity:0; transform:translateY(38px) scale(.9); }
.trio__item.is-in{ transform:translateY(var(--ty,0px)); }
.trio__item svg{ width:100%; filter:drop-shadow(0 26px 40px rgba(0,0,0,.55)); }
.trio__item.is-in{ opacity:1; transition:opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
.trio__item[data-drift="2"].is-in{ transition-delay:.22s }
.trio__item[data-drift="3"].is-in{ transition-delay:.44s }

/* 5.3 Category panels (pinned) */
.cats{ height:520vh; position:relative; }
.cats__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; align-items:center;
}
.panel{
  grid-area:1/1; position:relative; width:100%; height:100%;
  display:grid; align-items:center;
  padding:0 var(--gut);
  opacity:0; visibility:hidden;
  transition:opacity .75s var(--ease), visibility .75s;
}
.panel.is-active{ opacity:1; visibility:visible; }
.panel__type{
  position:relative; z-index:3;
  max-width:var(--max); margin-inline:auto; width:100%;
  transform:translateY(30px); transition:transform .9s var(--ease-out);
}
.panel.is-active .panel__type{ transform:none; }
.panel__type .display{ margin-top:.4rem; }
.panel__copy{
  font-size:clamp(.92rem,1.25vw,1.1rem); font-weight:200; color:var(--slate);
  max-width:30ch; margin:clamp(1.2rem,2.4vw,2rem) 0 0;
}
.panel__objs{ position:absolute; inset:0; z-index:1; }
.pobj{
  position:absolute; left:var(--px); top:var(--py);
  width:clamp(66px,11vw,178px); aspect-ratio:1;
  transform:translate3d(-50%,-50%,0) scale(calc(var(--ps) * .8));
  opacity:0; filter:drop-shadow(0 28px 44px rgba(0,0,0,.6));
  transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-out);
}
.panel.is-active .pobj{ opacity:1; transform:translate3d(-50%,-50%,0) scale(var(--ps)); }
.pobj:nth-child(2){ transition-delay:.12s } .pobj:nth-child(3){ transition-delay:.24s }
.pobj svg{ width:100%; height:100%; animation:float 14s ease-in-out infinite; }

.rail{
  position:absolute; right:var(--gut); top:50%; transform:translateY(-50%);
  z-index:5; list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.7rem,1.4vw,1.1rem); text-align:right;
}
.rail li{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(110,124,155,.35); transition:color .5s var(--ease), opacity .5s var(--ease);
}
.rail li.is-on{ color:var(--ivory); }
.rail__dot{
  position:absolute; left:-14px; top:0; width:5px; height:5px; border-radius:50%;
  background:var(--orange); transition:transform .6s var(--ease-out);
}

/* 5.4 A small peek */
.peek{ padding:var(--sec) 0; }
.peek__head{ margin-bottom:clamp(3rem,7vw,5.5rem); }
.tiles{
  display:grid; gap:clamp(.7rem,1.4vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.tile{
  position:relative; aspect-ratio:1/1.06;
  display:grid; place-content:center; gap:1.6rem; justify-items:center;
  padding:1.6rem;
  border:1px solid var(--hair); border-radius:3px;
  background:linear-gradient(160deg, rgba(30,44,78,.42), rgba(8,13,26,.5));
  overflow:hidden;
}
.tile__obj{ width:clamp(72px,9vw,116px); }
.tile__obj svg{ width:100%; filter:drop-shadow(0 20px 32px rgba(0,0,0,.5)); }
.tile .mono{ font-size:.55rem; letter-spacing:.24em; text-align:center; }
.tile--locked .tile__obj{ filter:blur(13px) saturate(.35) brightness(.9); transition:filter .8s var(--ease); }
.tile--locked::before{
  content:""; position:absolute; inset:0;
  background:rgba(9,15,30,.4);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
.tile--locked .tile__stamp{
  position:relative; z-index:2; color:var(--orange);
  border:1px solid var(--ember); padding:.5rem .8rem; border-radius:2px;
}
.tile--locked:hover .tile__obj,
.tile--locked:focus-visible .tile__obj{ filter:blur(6px) saturate(.6) brightness(1); }
.tile--locked:hover .tile__stamp::after,
.tile--locked:focus-visible .tile__stamp::after{ content:" — not yet"; }
.peek__foot{ margin-top:clamp(2rem,4vw,3.4rem); text-align:center; letter-spacing:.3em; }

/* 5.5 The everything moment */
.everything{ height:380vh; position:relative; }
.everything__sticky{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; text-align:center;
}
#swarm{ position:absolute; inset:0; width:100%; height:100%; }
.everything__type{ position:relative; z-index:3; padding-inline:var(--gut); display:grid; }
.everything__type::before{
  content:""; position:absolute; z-index:-1;
  inset:-16vh -12vw;
  background:radial-gradient(56% 52% at 50% 50%, rgba(4,7,16,.86), rgba(4,7,16,.5) 58%, transparent 78%);
}
.everything__type .line{ grid-area:1/1; margin:0; }
.line{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform 1s var(--ease-out); }
.line.is-in{ opacity:1; transform:none; }
.line--1{ color:var(--mist); }
.everything__foot{
  position:absolute; bottom:clamp(2rem,6vh,4rem); z-index:3; letter-spacing:.3em;
  padding-inline:var(--gut); font-size:.55rem;
}

/* 5.6 Countdown */
.count{ padding:var(--sec) 0 calc(var(--sec) * 1.1); }
.count__head{ display:flex; justify-content:space-between; gap:1rem; padding-bottom:1.4rem; border-bottom:1px solid var(--hair); }
.count__grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  align-items:end;
}
.unit{
  padding:clamp(1.6rem,4vw,3.2rem) 0 clamp(1rem,2vw,1.6rem);
  border-right:1px solid var(--hair);
  display:grid; gap:.7rem; justify-items:start; padding-inline-start:clamp(.6rem,1.6vw,1.6rem);
}
.unit:last-child{ border-right:0; }
.unit__n{
  font-family:var(--display); font-weight:300;
  font-variation-settings:"wdth" 82;
  font-size:clamp(3.1rem,11vw,10.5rem); line-height:.8;
  letter-spacing:-.04em; font-variant-numeric:tabular-nums;
  color:var(--ivory);
}
.unit--s .unit__n{ color:var(--orange); }
.unit__l{ font-size:.55rem; letter-spacing:.3em; }
.meter{ height:1px; background:var(--hair); position:relative; overflow:hidden; }
.meter__fill{ position:absolute; inset:0 auto 0 0; width:0; background:var(--orange); transition:width 1.4s var(--ease-out); }
.count__note{ margin-top:1.1rem; letter-spacing:.28em; }

/* 5.7 Final */
.final{
  position:relative; z-index:3;
  background:var(--ivory); color:var(--midnight);
  padding:calc(var(--sec) * 1.15) 0 clamp(4rem,8vw,7rem);
}
.final .display{ color:var(--midnight); }
.final .lede{ color:#4A5878; max-width:26ch; }
.final__row{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem);
  align-items:end; margin-top:clamp(3.5rem,8vw,6.5rem);
  padding-top:clamp(2rem,4vw,3rem); border-top:1px solid rgba(13,24,52,.13);
}
.final__brand{
  font-family:var(--display); font-weight:600; font-variation-settings:"wdth" 100;
  font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-.02em; margin:0;
}
.signup{ width:100%; }
.signup__field{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  border-bottom:1px solid rgba(13,24,52,.25);
  padding-bottom:.85rem; transition:border-color .4s var(--ease);
}
.signup__field:focus-within{ border-color:var(--orange); }
.signup input{
  flex:1 1 210px; min-width:0;
  background:none; border:0; padding:.35rem 0;
  font-family:var(--body); font-size:clamp(1rem,1.5vw,1.18rem); font-weight:300;
  color:var(--midnight);
}
.signup input::placeholder{ color:rgba(13,24,52,.4); }
.signup input:focus{ outline:none; }
.btn{
  --mx:0px; --my:0px;
  flex:0 0 auto; cursor:pointer;
  background:var(--midnight); color:var(--ivory);
  border:0; border-radius:100px;
  padding:.85rem 1.7rem;
  font-family:var(--mono); font-size:.63rem; letter-spacing:.24em; text-transform:uppercase;
  transform:translate3d(var(--mx),var(--my),0);
  transition:transform .45s var(--ease-out), background-color .35s var(--ease);
}
.btn:hover{ background:var(--orange); }
.btn[disabled]{ opacity:.55; cursor:default; }
.signup__note{ margin-top:1rem; color:rgba(13,24,52,.42); letter-spacing:.22em; font-size:.56rem; }
.signup__msg{
  margin:.6rem 0 0; min-height:1.2em;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); opacity:0; transform:translateY(-4px);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.signup__msg.is-in{ opacity:1; transform:none; }

.cartline{
  display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  margin-top:clamp(3.5rem,8vw,6rem); padding-top:clamp(1.5rem,3vw,2.2rem);
  border-top:1px solid rgba(13,24,52,.13);
  color:rgba(13,24,52,.55);
}
.cartline__icon svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; }
.cartline__inf{ font-family:var(--display); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; color:var(--orange); }
.cartline__txt{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; }

/* Footer */
.foot{ position:relative; z-index:3; background:var(--ivory); padding:0 0 clamp(2rem,4vw,3rem); }
.foot__inner{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap;
  padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid rgba(13,24,52,.1);
}
.foot__logo{ width:clamp(80px,7vw,110px); height:auto; opacity:.85; }
.foot .mono--dim{ color:rgba(13,24,52,.38); font-size:.55rem; }

/* ── 6. MOTION UTILITIES ───────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .95s var(--ease), transform 1.05s var(--ease-out);
}
.reveal[data-delay="1"].is-in{ transition-delay:.13s }
.reveal[data-delay="2"].is-in{ transition-delay:.26s }
.reveal[data-delay="3"].is-in{ transition-delay:.39s }

.mask{ overflow:hidden; }
.mask .ln{ display:block; overflow:hidden; }
.mask .ln > span{
  display:block; transform:translateY(105%);
  transition:transform 1.15s var(--ease-out);
}
.mask.is-in .ln > span{ transform:none; }
.mask.is-in .ln:nth-child(2) > span{ transition-delay:.11s }
.mask.is-in .ln:nth-child(3) > span{ transition-delay:.22s }

/* ── 7. RESPONSIVE ─────────────────────────────────────── */
@media (max-width:1024px){
  .final__row{ grid-template-columns:1fr; align-items:start; }
  .rail{ top:auto; bottom:clamp(4.5rem,10vh,7rem); right:auto; left:var(--gut);
         transform:none; display:flex; gap:1.1rem; flex-wrap:wrap; text-align:left; }
  .rail__dot{ display:none; }
  .rail li{ font-size:.52rem; letter-spacing:.18em; }
}
@media (max-width:760px){
  :root{ --fs-mono:.6rem; }
  .hero{ align-items:end; padding-bottom:clamp(6rem,16vh,8rem); }
  .hero__inner{ padding-bottom:2rem; }
  .lede{ max-width:30ch; }
  .hero__meta{ flex-wrap:wrap; gap:.7rem; }
  .hero__meta .rule{ display:none; }
  .obj--g,.obj--h{ display:none; }
  .obj{ width:clamp(66px,21vw,120px); }
  .scrollcue{ left:auto; right:var(--gut); transform:none; align-items:flex-end; }
  .hero__corner{ display:none; }
  .cats{ height:480vh; }
  .panel{ align-content:center; }
  .panel__type{ text-align:left; }
  .panel__objs{ opacity:.75; }
  .pobj{ width:clamp(60px,20vw,110px); }
  .panel__copy{ max-width:26ch; }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .tile{ aspect-ratio:1/1.15; gap:1.1rem; padding:1rem; }
  .tile .mono{ font-size:.48rem; letter-spacing:.16em; }
  .count__grid{ grid-template-columns:repeat(2,1fr); }
  .unit{ border-right:0; padding-inline-start:0; }
  .unit:nth-child(odd){ border-right:1px solid var(--hair); }
  .unit:nth-child(odd) .unit__n{ padding-right:1rem; }
  .everything{ height:320vh; }
  .foot__inner{ flex-direction:column; align-items:flex-start; gap:.8rem; }
}
@media (max-width:420px){
  .trio{ gap:1.2rem; }
}

/* ── 8. PREFERENCES ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .obj,.obj--far,.trio__item,.reveal,.line,.pobj{ opacity:1!important; transform:translate3d(-50%,-50%,0) scale(var(--s,1))!important; }
  .reveal,.trio__item,.line{ transform:none!important; }
  .mask .ln > span{ transform:none!important; }
  .dust,#swarm{ display:none; }
  .cats{ height:auto; }
  .cats__sticky{ position:static; height:auto; display:block; }
  .panel{ opacity:1; visibility:visible; height:auto; min-height:70vh; padding-block:4rem; }
  .everything{ height:auto; }
  .everything__sticky{ position:static; height:auto; padding:6rem 0; }
  .everything__type .line{ grid-area:auto; margin-block:1rem; }
  .rail{ display:none; }
}
@media print{ .dust,.grain,.hdr,.preloader,#swarm{ display:none!important; } }