/* Keep the live design, chapter lengths and all original transitions. */
.motion-local .hero-pin,.motion-local .flow-pin,.motion-local .gallery-pin{height:100dvh}
.motion-local .interlude{min-height:100svh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
.motion-local .lab{min-height:100svh;min-height:100dvh}
.motion-local .manifesto{min-height:100svh;min-height:100dvh}
.motion-local .manifesto-row{margin-top:clamp(36px,7svh,90px)}
.motion-local .signature{touch-action:pan-y pinch-zoom}
.motion-local:not(.hero-visible) .hero-field *{animation-play-state:paused}

/* Performance */
.motion-local .grain{contain:strict;opacity:.04}
.motion-local #liquid,.motion-local #scope,.motion-local #particles{contain:strict;transform:translateZ(0)}
.motion-local ::selection{background:rgba(169,155,255,.35);color:#fff}

/* ---------- Entrance choreography (transform/opacity only, replays on re-entry) ---------- */
.motion-local{--soft:cubic-bezier(.22,.8,.24,1);--in:1.5s}
.motion-local .m-in{opacity:0;transform:translate3d(0,42px,0);transition:opacity var(--in) var(--soft),transform calc(var(--in) + .3s) var(--soft);transition-delay:0s}
.motion-local .seen .m-in,.motion-local .on .m-in{opacity:1;transform:none;transition-delay:var(--d,0s)}

/* 01 manifesto: lines rise, then sign words and copy follow */
.motion-local .manifesto h2 .ink{opacity:0;transform:translate3d(0,.45em,0);transition:opacity 1.6s var(--soft),transform 1.9s var(--soft)}
.motion-local .manifesto.seen h2 .ink{opacity:1;transform:none}
.motion-local .manifesto.seen h2 .ink:nth-child(2){transition-delay:.18s}
.motion-local .manifesto .sign span{opacity:0;transform:translate3d(-.4em,0,0);transition:opacity 1.3s var(--soft),transform 1.6s var(--soft),font-weight .6s var(--ease),font-stretch .6s var(--ease),color .6s}
.motion-local .manifesto.seen .sign span{opacity:1;transform:none}
.motion-local .manifesto.seen .sign span:nth-child(1){transition-delay:.45s,.45s,0s,0s,0s}
.motion-local .manifesto.seen .sign span:nth-child(2){transition-delay:.6s,.6s,0s,0s,0s}
.motion-local .manifesto.seen .sign span:nth-child(3){transition-delay:.75s,.75s,0s,0s,0s}
.motion-local .manifesto .manifesto-text{transition-delay:.7s}

/* 02 flow: headline is scroll-driven; latin word and line breathe in after it */
.motion-local .flow-word h2{letter-spacing:.12em;transition:letter-spacing 1.8s var(--soft)}
.motion-local .flow-word.on h2{letter-spacing:.02em}
.motion-local .flow-word .lat,.motion-local .flow-word p{opacity:0;transform:translate3d(0,18px,0);transition:opacity .9s var(--soft),transform 1.2s var(--soft)}
.motion-local .flow-word.on .lat{opacity:1;transform:none;transition-delay:.25s}
.motion-local .flow-word.on p{opacity:1;transform:none;transition-delay:.45s}
.motion-local .flow-foot{opacity:0;transition:opacity 1.4s var(--soft) .3s}
.motion-local .flow.seen .flow-foot{opacity:1}

/* 03 gallery: each card's copy staggers in when it becomes the current card */
.motion-local .panel-copy>*{opacity:0;transform:translate3d(0,36px,0);transition:opacity .8s var(--soft),transform 1s var(--soft)}
.motion-local .gallery.seen .panel.on .panel-copy>*{opacity:1;transform:none;transition-duration:1.4s,1.7s}
.motion-local .gallery.seen .panel.on .panel-copy>:nth-child(2){transition-delay:.18s}
.motion-local .gallery.seen .panel.on .panel-copy>:nth-child(3){transition-delay:.34s}
.motion-local .panel .panel-top{opacity:0;transition:opacity 1s var(--soft)}
.motion-local .gallery.seen .panel.on .panel-top{opacity:1;transition-delay:.5s}
.motion-local .panel-copy .big{font-weight:380;transition:opacity 1.4s var(--soft),transform 1.7s var(--soft),font-weight 1.8s var(--soft)}
.motion-local .gallery.seen .panel.on .panel-copy .big{font-weight:620}
.motion-local .gallery-foot{opacity:0;transform:translate3d(0,14px,0);transition:opacity 1.2s var(--soft) .6s,transform 1.4s var(--soft) .6s}
.motion-local .gallery.seen .gallery-foot{opacity:1;transform:none}

/* 04 interlude */
.motion-local .interlude p{opacity:0;transition:opacity 1.6s var(--soft)}
.motion-local .interlude.seen .one{opacity:1}
.motion-local .interlude.seen .two{opacity:1;transition-delay:.25s}
.motion-local .interlude small{opacity:0;transform:translate3d(0,16px,0);transition:opacity 1.3s var(--soft),transform 1.5s var(--soft)}
.motion-local .interlude.seen small{opacity:1;transform:none;transition-delay:.6s}

/* 05 lab */
.motion-local .lab-head h2{opacity:0;transform:translate3d(0,40px,0);transition:opacity 1.5s var(--soft),transform 1.8s var(--soft)}
.motion-local .lab.seen .lab-head h2{opacity:1;transform:none;transition-delay:.1s}
.motion-local .lab #particles{opacity:0;transition:opacity 2.2s var(--soft)}
.motion-local .lab.seen #particles{opacity:1}
.motion-local .lab-ctrl{opacity:0;transform:translate3d(0,20px,0);transition:opacity 1.2s var(--soft),transform 1.4s var(--soft)}
.motion-local .lab.seen .lab-ctrl{opacity:1;transform:none;transition-delay:.55s}

/* 06 outro: headline (original .reveal) then sub-line, signature, footer */
.motion-local .outro h2 span{opacity:0;transform:translate3d(0,.35em,0);transition:opacity 1.4s var(--soft),transform 1.7s var(--soft)}
.motion-local .outro.seen h2 span{opacity:1;transform:none;transition-delay:.35s}
.motion-local .outro .signature{opacity:0;transform:translate3d(0,8%,0);transition:opacity 1.8s var(--soft),transform 2.1s var(--soft)}
.motion-local .outro.seen .signature{opacity:1;transform:none;transition-delay:.55s}
.motion-local .outro .footer{opacity:0;transition:opacity 1.2s var(--soft)}
.motion-local .outro.seen .footer{opacity:1;transition-delay:1s}
.motion-local .reveal{transition:opacity 1.5s var(--soft),transform 1.8s var(--soft)}

@media(prefers-reduced-motion:reduce){
 .motion-local .hero-field *{animation:none!important}
 .motion-local main *{transition:none!important;opacity:1!important}
}

/* 04 interlude: living type */
.motion-local .interlude .one{background:linear-gradient(100deg,#eceef6 0%,#eceef6 40%,#cfeeff 48%,#ffd3f0 54%,#fff0cf 60%,#eceef6 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes sheen{0%{background-position:100% 0}55%,100%{background-position:0 0}}
.motion-local .interlude .two{-webkit-text-stroke:1px rgba(124,232,255,.28)}
.motion-local .interlude .two{-webkit-text-stroke-color:rgba(190,170,255,.34)}
.motion-local .interlude small{opacity:1;transform:none}
.motion-local .interlude small span{display:inline-block;opacity:0;transform:translate3d(0,.8em,0);filter:blur(4px);transition:opacity 1s var(--soft),transform 1.2s var(--soft),filter 1s var(--soft)}
.motion-local .interlude.seen small span{opacity:1;transform:none;filter:none;transition-delay:calc(.7s + var(--i)*.07s)}
.motion-local .interlude:before{content:"";position:absolute;inset:-20%;background:radial-gradient(ellipse 35% 40% at 50% 50%,rgba(169,155,255,.18),transparent 70%);pointer-events:none;will-change:transform}
.motion-local .interlude.seen:before{animation:float 14s ease-in-out infinite alternate}
@keyframes float{0%{transform:translate3d(-12%,4%,0)}100%{transform:translate3d(14%,-6%,0)}}
@media(prefers-reduced-motion:reduce){.motion-local .interlude *,.motion-local .interlude:before{animation:none!important}}

/* 05 lab: pinned, scroll walks the three particle forms */
.motion-local .lab{height:300vh;height:300dvh;min-height:0;overflow:clip;background:#0f1131;contain:none}
.motion-local .lab-pin{position:sticky;top:0;height:100vh;height:100dvh;overflow:clip;isolation:isolate;background:radial-gradient(ellipse 55% 60% at 64% 55%,#232a66 0,transparent 70%),radial-gradient(ellipse 40% 40% at 5% 10%,rgba(48,128,158,.16) 0,transparent 70%),linear-gradient(180deg,#111437 0,#0f1131 100%)}
.motion-local .lab-pin:after{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:conic-gradient(from 0deg at 64% 56%,transparent 0 30%,rgba(124,232,255,.06) 38%,transparent 46% 70%,rgba(255,122,217,.05) 78%,transparent 86%);animation:labspin 40s linear infinite;animation-play-state:paused}
.motion-local .lab.seen .lab-pin:after{animation-play-state:running}
@keyframes labspin{to{transform:rotate(1turn)}}
.motion-local .lab-head{z-index:3}
.motion-local .lab-cap{margin-top:30px;display:flex;flex-direction:column;gap:14px;font-family:var(--han)}
.motion-local .lab-idx{font-family:var(--latin);font-size:13px;letter-spacing:.2em;color:var(--dim)}
.motion-local .lab-idx b{font-weight:500;color:var(--ink)}
.motion-local .lab-line{font-size:clamp(17px,1.5vw,22px);letter-spacing:.12em;color:#b9bdd6;min-height:1.6em}
.motion-local .lab-line span{display:inline-block;opacity:1;filter:none;transform:none;transition:opacity .9s var(--soft),filter .9s var(--soft),transform 1.1s var(--soft);transition-delay:calc(var(--i)*.05s)}
.motion-local .lab-line.out span{opacity:0;filter:blur(8px);transform:translate3d(0,-.3em,0) scale(1.08);transition-duration:.45s;transition-delay:calc(var(--i)*.02s)}
.motion-local .lab:not(.seen) .lab-line span{opacity:0;filter:blur(6px)}
.motion-local .lab .lab-cap{opacity:0;transition:opacity 1.2s var(--soft) .5s}
.motion-local .lab.seen .lab-cap{opacity:1}
.motion-local .tabs{position:relative}
.motion-local .tabs button{position:relative;z-index:1;background:transparent!important;transition:color .7s var(--soft)}
.motion-local .tabs button[aria-pressed="true"]{color:var(--abyss)}
.motion-local .tab-pill{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--ink);box-shadow:0 0 24px rgba(169,155,255,.35);transition:transform 1s cubic-bezier(.65,0,.2,1),width 1s cubic-bezier(.65,0,.2,1)}
@media(prefers-reduced-motion:reduce){.motion-local .lab-pin:after{animation:none}}

/* ---------- Type scale & refinement (all chapters) ---------- */
.motion-local .manifesto h2{font-size:clamp(40px,5.6vw,96px);font-weight:400;letter-spacing:.04em;line-height:1.4}
.motion-local .sign{font-size:clamp(34px,4.2vw,68px)}
.motion-local .manifesto-text{font-size:16px;letter-spacing:.08em;line-height:2.2}
.motion-local .flow-word h2{font-size:clamp(64px,8.4vw,148px);font-weight:500}
.motion-local .flow-word .lat{letter-spacing:.32em;text-transform:uppercase;font-size:clamp(12px,1vw,14px);font-weight:400;color:#9aa0c2}
.motion-local .panel-copy .big{font-size:clamp(72px,9.5vw,164px)}
.motion-local .panel-copy h3{font-size:clamp(22px,2.2vw,34px);font-weight:400;letter-spacing:.08em}
.motion-local .panel-copy p,.motion-local .flow-word p{letter-spacing:.12em;font-size:14px}
.motion-local .interlude p{font-size:clamp(64px,10vw,172px)}
.motion-local .lab-head h2{font-size:clamp(34px,4vw,66px);font-weight:400;letter-spacing:.05em}

/* 06 outro: quieter, editorial headline */
.motion-local .outro h2{font-size:clamp(38px,4.8vw,80px);font-weight:300;letter-spacing:.16em;line-height:1.9;display:flex;flex-direction:column;align-items:center;gap:.35em}
.motion-local .outro h2:before{content:"";width:1px;height:56px;margin-bottom:.9em;background:linear-gradient(transparent,rgba(236,238,246,.55));transform:scaleY(0);transform-origin:top;transition:transform 1.6s var(--soft) .1s}
.motion-local .outro.seen h2:before{transform:none}
.motion-local .outro h2 span{font-size:.7em;letter-spacing:.4em;font-weight:400;padding-left:.5em;background:var(--film);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.motion-local .outro h2 span{background-position:30% 0}
.motion-local .signature{font-size:15vw;margin-top:80px}
@media(max-width:700px){.motion-local .outro h2{font-size:9vw;letter-spacing:.12em}.motion-local .manifesto h2{font-size:9.6vw}.motion-local .flow-word h2{font-size:18vw}.motion-local .panel-copy .big{font-size:20vw}}

/* lab title: each form has its own text change */
.motion-local .lab-title span{display:inline-block;transition:opacity 1s var(--soft),transform 1.2s var(--soft),filter 1s var(--soft);transition-delay:calc(var(--i)*.045s)}
.motion-local .lab-title.out span{opacity:0;transition-duration:.5s;transition-delay:calc(var(--i)*.02s)}
.motion-local .lab-title[data-fx=mist].out span{filter:blur(10px);transform:scale(1.12)}
.motion-local .lab-title[data-fx=sweep].out span{transform:translate3d(-.6em,0,0) rotate(-8deg)}
.motion-local .lab-title[data-fx=rise].out span{transform:translate3d(0,.7em,0);filter:blur(3px)}

/* 06 outro background: aurora horizon + faint star field + slow light arc */
.motion-local .outro{isolation:isolate}
.motion-local .outro:before,.motion-local .outro:after{content:"";position:absolute;pointer-events:none;z-index:-1}
.motion-local .outro:before{inset:-10% -20% 0;background:
  radial-gradient(ellipse 38% 26% at 30% 78%,rgba(124,232,255,.16),transparent 70%),
  radial-gradient(ellipse 42% 30% at 70% 82%,rgba(255,122,217,.18),transparent 70%),
  radial-gradient(ellipse 30% 22% at 50% 70%,rgba(255,217,138,.10),transparent 70%);
  animation:aurora 22s ease-in-out infinite alternate;animation-play-state:paused}
.motion-local .outro:after{inset:0;opacity:.55;background-image:
  radial-gradient(1px 1px at 12% 18%,#fff8,transparent),radial-gradient(1px 1px at 27% 42%,#fff6,transparent),radial-gradient(1.5px 1.5px at 44% 12%,#fff9,transparent),
  radial-gradient(1px 1px at 63% 30%,#fff6,transparent),radial-gradient(1px 1px at 81% 16%,#fff8,transparent),radial-gradient(1.5px 1.5px at 90% 48%,#fff5,transparent),
  radial-gradient(1px 1px at 8% 60%,#fff5,transparent),radial-gradient(1px 1px at 55% 52%,#fff4,transparent),radial-gradient(1px 1px at 36% 26%,#fff5,transparent);
  -webkit-mask:linear-gradient(#000 0,#000 45%,transparent 75%);mask:linear-gradient(#000 0,#000 45%,transparent 75%);animation:twinkle 6s ease-in-out infinite alternate;animation-play-state:paused}
.motion-local .outro.seen:before,.motion-local .outro.seen:after{animation-play-state:running}
@keyframes aurora{0%{transform:translate3d(-4%,2%,0) scale(1)}100%{transform:translate3d(5%,-3%,0) scale(1.08)}}
@keyframes twinkle{to{opacity:.25}}
/* thin horizon arc behind the signature */
.motion-local .outro .signature{position:relative}
.motion-local .outro .signature:before{content:"";position:absolute;left:50%;top:58%;width:130vw;height:60vw;transform:translate(-50%,0);border-radius:50%;border-top:1px solid rgba(236,238,246,.18);box-shadow:0 -30px 80px -40px rgba(169,155,255,.5);pointer-events:none;z-index:-1}
@media(prefers-reduced-motion:reduce){.motion-local .outro:before,.motion-local .outro:after{animation:none}}

/* 02 flow headline: a slow breath while the word is current */
.motion-local .flow-word.on h2{animation:breathe 6s ease-in-out 1.8s infinite alternate}
@keyframes breathe{to{opacity:.82;transform:translate3d(.04em,0,0)}}
.motion-local .flow-word h2{display:inline-block}
@media(prefers-reduced-motion:reduce){.motion-local .flow-word h2{animation:none!important}}


/* hero mirrors the outro: aurora and a thin arc bending down from the top */
.motion-local .hero-pin:before,.motion-local .hero-pin:after{content:"";position:absolute;pointer-events:none;z-index:0}
.motion-local .hero-pin:before{inset:0 -20% -10%;background:
  radial-gradient(ellipse 38% 26% at 30% 22%,rgba(124,232,255,.14),transparent 70%),
  radial-gradient(ellipse 42% 30% at 70% 18%,rgba(255,122,217,.15),transparent 70%),
  radial-gradient(ellipse 30% 22% at 50% 30%,rgba(255,217,138,.08),transparent 70%);
  animation:auroraTop 22s ease-in-out infinite alternate}
.motion-local .hero-pin:after{left:50%;bottom:76%;width:130vw;height:60vw;transform:translateX(-50%);border-radius:50%;border-bottom:1px solid rgba(236,238,246,.16);box-shadow:0 30px 80px -40px rgba(169,155,255,.5)}
.motion-local:not(.hero-visible) .hero-pin:before{animation-play-state:paused}
@keyframes auroraTop{0%{transform:translate3d(4%,-2%,0) scale(1)}100%{transform:translate3d(-5%,3%,0) scale(1.08)}}
@media(max-width:700px){.motion-local .hero-pin:after{bottom:80%;width:180vw;height:90vw}}
@media(prefers-reduced-motion:reduce){.motion-local .hero-pin:before{animation:none}}

/* drawer: same type scale, light and arc language as the pages */
.motion-local .drawer{background:radial-gradient(ellipse 40% 30% at 75% 12%,rgba(255,122,217,.14),transparent 70%),radial-gradient(ellipse 40% 30% at 25% 16%,rgba(124,232,255,.12),transparent 70%),radial-gradient(ellipse 60% 60% at 80% 20%,#1c2150 0,transparent 70%),#0b0c22;overflow:clip}
.motion-local .drawer:before{content:"";position:absolute;left:50%;bottom:82%;width:140vw;height:64vw;transform:translateX(-50%);border-radius:50%;border-bottom:1px solid rgba(236,238,246,.14);box-shadow:0 30px 80px -40px rgba(169,155,255,.45);pointer-events:none}
.motion-local .drawer-links a{font-size:clamp(32px,4.6vw,72px);font-weight:400;letter-spacing:.06em;color:#9aa0c2;transition:transform .8s var(--soft),color .5s}
.motion-local .drawer-links a b{letter-spacing:.2em;font-size:12px}
.motion-local .drawer-links a.current{color:var(--ink)}
.motion-local .drawer-links a.current b{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.motion-local .drawer-links a.current:after{content:"";align-self:center;width:36px;height:1px;margin-left:8px;background:var(--film)}
.motion-local .drawer.open .drawer-links a{animation:drawerIn 1.1s var(--soft) backwards;animation-delay:calc(.2s + var(--i)*.08s)}
@keyframes drawerIn{from{opacity:0;transform:translate3d(0,32px,0);filter:blur(6px)}}
.motion-local .drawer-foot{letter-spacing:.08em}
@media(max-width:700px){.motion-local .drawer-links a{font-size:9vw}.motion-local .drawer:before{bottom:88%;width:200vw;height:96vw}}

/* nav: transparent; a soft top fade (opacity only) keeps links legible over content */
.motion-local .nav,.motion-local .nav.scrolled{background:transparent;height:84px;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.motion-local .nav:before{content:"";position:absolute;inset:0 0 -40px;z-index:-1;pointer-events:none;background:linear-gradient(rgba(9,10,26,.72),rgba(9,10,26,.35) 55%,transparent);opacity:0;transition:opacity 1s var(--soft)}
.motion-local:not(.hero-visible) .nav.scrolled:before{opacity:1}
@media(max-width:700px){.motion-local .nav,.motion-local .nav.scrolled{height:68px}}

/* drawer: six chapters, each with its stages */
.motion-local .drawer-links{gap:clamp(4px,1.2vh,14px)}
.motion-local .drawer-item{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:28px;row-gap:6px}
.motion-local .drawer-links a{font-size:min(clamp(28px,3.8vw,60px),7vh)}
.motion-local .drawer-item.current>a{color:var(--ink)}
.motion-local .drawer-item.current>a b{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.motion-local .drawer-item.current>a:after{content:"";align-self:center;width:36px;height:1px;margin-left:8px;background:var(--film)}
.motion-local .drawer-sub{display:flex;gap:4px;font-family:var(--han);font-size:13px;letter-spacing:.14em}
.motion-local .drawer-sub button{padding:6px 12px;border:1px solid transparent;border-radius:999px;color:var(--dim);transition:color .4s,border-color .4s}
.motion-local .drawer-sub button:hover{color:var(--ink);border-color:var(--line)}
.motion-local .drawer-sub button.current{color:var(--ink);border-color:rgba(236,238,246,.22)}
.motion-local .drawer.open .drawer-sub{animation:drawerIn 1.1s var(--soft) backwards;animation-delay:calc(.35s + var(--i)*.08s)}
@media(max-width:700px){.motion-local .drawer-links a{font-size:min(8vw,6vh)}.motion-local .drawer-sub{font-size:12px}.motion-local .drawer-sub button{padding:4px 8px}}

/* drawer hover: links grow from the left edge (transform only) */
.motion-local .drawer-links a{font-size:min(clamp(34px,4.4vw,68px),7.2vh);transform-origin:0 60%;transition:transform .9s var(--soft),color .5s}
.motion-local .drawer-links a:hover{transform:translate3d(10px,0,0) scale(1.14)}
.motion-local .drawer-links a b{display:inline-block;width:2.2em;transition:transform .9s var(--soft)}
.motion-local .drawer-item{transition:opacity .6s var(--soft)}
@media(hover:hover){.motion-local .drawer-links:hover .drawer-item:not(:hover){opacity:.45}}
@media(max-width:700px){.motion-local .drawer-links a{font-size:min(9vw,6.4vh)}}
.motion-local .drawer-links{--f:min(clamp(34px,4.4vw,68px),7.2vh)}
.motion-local .drawer-links a{font-size:var(--f)}
.motion-local .drawer-sub{transition:transform .9s var(--soft)}
.motion-local .drawer-item:hover .drawer-sub{transform:translate3d(calc(14px + .14*(var(--len)*var(--f)*1.06 + 56px)),0,0)}
@media(max-width:700px){.motion-local .drawer-links{--f:min(9vw,6.4vh)}}

/* top nav: six chapters, current one marked */
#soundBtn[hidden]{display:none}
.motion-local .top-fab{touch-action:manipulation}
.motion-local .nav-links{gap:clamp(18px,2.2vw,36px);font-size:13px;letter-spacing:.12em}
.motion-local .nav-links a.current{color:#fff}
.motion-local .nav-links a.current:after{transform:scaleX(1);transform-origin:left}
@media(max-width:1100px){.motion-local .nav-links{gap:16px;font-size:12px;letter-spacing:.06em}}