/* =====================================================================
   MOTION LAYER — scroll-driven, Apple-style
   Loaded after style.css. Everything is scoped under html.js so the
   page still works with no JS, and under html.reduce (reduced motion)
   all pinned/animated states fall back to a normal static page.
   ===================================================================== */

:root{
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --mono-s: 11px;
}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:998; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0);
  background:var(--rec);
}

/* ---------- glass nav (moved out of hero, fixed) ---------- */
.top-menu{
  position:fixed;
  top:22px;
  width:max-content;
  max-width:calc(100vw - 24px);
  white-space:nowrap;
  z-index:900;
  padding:10px 24px;
  border:1px solid transparent;
  border-radius:999px;
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out),
             backdrop-filter .5s var(--ease-out), transform .6s var(--ease-out), top .5s var(--ease-out);
}
.top-menu.is-stuck{
  background:rgba(12,12,12,.55);
  border-color:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  top:14px;
}
.top-menu.is-hidden{ transform:translate(-50%, -140%); }
.js .top-menu{ opacity:0; }
.js.is-ready .top-menu{ opacity:1; transition:opacity 1s .9s var(--ease-out), background .5s var(--ease-out), border-color .5s var(--ease-out), transform .6s var(--ease-out), top .5s var(--ease-out); }

/* ---------- HERO: pinned, shrinks into a card as you scroll ---------- */
.js .hero{ border-bottom:none; }
.js .hero-track{ position:relative; height:250vh; }
.js .hero-frame{
  position:sticky; top:0;
  transform-origin:50% 50%;
  will-change:transform, border-radius;
  border-bottom:none;
}
.js .hero-frame video{
  transform:translate(-50%,-50%) scale(var(--vs,1.08));
  will-change:transform;
}
.js .hero-overlay-copy{ will-change:transform, opacity; }
.js .hud-row,
.js .hud-note{ will-change:opacity; }

/* intro: title lines rise out of a mask */
.hero-bold .line{ display:block; overflow:hidden; padding-bottom:.06em; margin-bottom:-.06em; }
.hero-bold .line > span{ display:block; }
.js .hero-bold .line > span{ transform:translateY(112%); }
.js.is-ready .hero-bold .line > span{
  transform:none;
  transition:transform 1.5s var(--ease-out);
}
.js.is-ready .hero-bold .line:nth-child(2) > span{ transition-delay:.12s; }
.js .hero-oneline,
.js .hero-overlay-copy .cta-row{ opacity:0; transform:translateY(24px); }
.js.is-ready .hero-oneline{ opacity:1; transform:none; transition:opacity 1.2s .55s var(--ease-out), transform 1.2s .55s var(--ease-out); }
.js.is-ready .hero-overlay-copy .cta-row{ opacity:1; transform:none; transition:opacity 1.2s .75s var(--ease-out), transform 1.2s .75s var(--ease-out); }
.js .hud-row,
.js .hud-note{ opacity:0; }
.js.is-ready .hud-row,
.js.is-ready .hud-note{ opacity:var(--ho,1); transition:opacity 1.6s 1s ease; }
.js.is-settled .hud-row,
.js.is-settled .hud-note{ transition:none; }

/* scroll cue */
.scroll-cue{
  position:absolute; left:50%; bottom:22px; z-index:5;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:rgba(237,235,230,.6);
  pointer-events:none;
}
.scroll-cue i{
  display:block; width:1px; height:44px; background:rgba(237,235,230,.22);
  position:relative; overflow:hidden;
}
.scroll-cue i::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--ink);
  animation:cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ 0%{ top:-100%; } 60%,100%{ top:100%; } }

/* ---------- MANIFESTO: words light up with scroll ---------- */
.manifesto{ position:relative; height:340vh; border-bottom:1px solid var(--line); }
.manifesto-pin{
  position:sticky; top:0; height:100vh; height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--edge);
  max-width:1280px; margin:0 auto;
}
.mono-kicker{
  font-family:var(--mono); font-size:var(--mono-s); letter-spacing:.16em; color:var(--rec);
  margin-bottom:32px; display:inline-flex; gap:10px; align-items:center;
}
.mono-kicker::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--rec); }
.manifesto-text{
  font-weight:800; letter-spacing:-.025em; line-height:1.04;
  font-size:clamp(30px, 5.6vw, 84px);
  text-transform:none;
}
.manifesto-text .w{ display:inline-block; opacity:.13; transition:opacity .25s linear, transform .25s linear; margin-right:.22em; }
.manifesto-text .w.on{ opacity:1; }
.manifesto-text .w.hl.on{ color:var(--rec); }

/* ---------- ROLES: giant words crossfade while pinned ---------- */
.roles{ position:relative; height:420vh; border-bottom:1px solid var(--line); }
.roles-pin{
  position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.roles-top,
.roles-bottom{
  position:absolute; left:var(--edge); right:var(--edge);
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:var(--mono-s); letter-spacing:.12em; color:var(--ink-faint);
}
.roles-top{ top:32px; }
.roles-bottom{ bottom:32px; align-items:center; gap:24px; }
.roles-ticks{ display:flex; gap:8px; flex:1; max-width:320px; }
.roles-ticks i{ flex:1; height:2px; background:var(--line); position:relative; overflow:hidden; }
.roles-ticks i b{ position:absolute; inset:0; background:var(--rec); transform-origin:0 50%; transform:scaleX(0); }
.roles-stage{ position:relative; width:100%; height:100%; }
.role{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:0 var(--edge);
  opacity:0; will-change:transform, opacity, filter;
}
.role h2{
  font-weight:900; letter-spacing:-.04em; line-height:.9; text-transform:uppercase;
  font-size:clamp(52px, 15.5vw, 260px);
}
.role p{
  margin-top:28px; font-family:var(--mono); font-size:clamp(11px,1.1vw,14px);
  letter-spacing:.16em; color:var(--ink-dim);
}
.role .idx{ color:var(--rec); margin-right:14px; }

/* ---------- MARQUEE: text that travels with your scroll ---------- */
.marquee{ overflow:hidden; padding:72px 0; border-bottom:1px solid var(--line); }
.marquee-row{ display:flex; white-space:nowrap; will-change:transform; }
.marquee-row + .marquee-row{ margin-top:8px; }
.marquee-row span{
  font-weight:900; text-transform:uppercase; letter-spacing:-.03em; line-height:1;
  font-size:clamp(56px, 11vw, 190px); padding-right:.35em;
  color:transparent; -webkit-text-stroke:1px rgba(237,235,230,.28);
}
.marquee-row span.fill{ color:var(--ink); -webkit-text-stroke:0; }
.marquee-row span.rec{ color:var(--rec); -webkit-text-stroke:0; }

/* ---------- AWARD: image grows in, text rises ---------- */
.js .award-plate-b-inner{ transform-origin:50% 60%; will-change:transform, opacity; }
.js .award-plate-b-media{ clip-path:inset(0 var(--aw,100%) 0 0); will-change:clip-path; }
.js .award-plate-b-media img{ transform:scale(var(--is,1.2)); will-change:transform; }

/* ---------- BREAKDOWN: card rises, image wipes open and settles ---------- */
.js .breakdown-plate-inner{ transform-origin:50% 60%; will-change:transform, opacity; }
.js .breakdown-plate-media{ clip-path:inset(0 var(--bw,100%) 0 0); will-change:clip-path; }
.js .breakdown-plate-media img{ transform:scale(var(--bs,1.25)); will-change:transform; }
html.reduce .breakdown-plate-media,
html.reduce .award-plate-b-media{ clip-path:none !important; }
html.reduce .breakdown-plate-media img,
html.reduce .award-plate-b-media img{ transform:none !important; }
html.reduce .breakdown-plate-inner{ transform:none !important; opacity:1 !important; }

/* ---------- SECTION HEADS: big, masked ---------- */
.section-head h2{
  font-weight:900; letter-spacing:-.035em; line-height:.9;
  font-size:clamp(48px, 10vw, 168px);
}
.section-head{ align-items:flex-end; margin-bottom:56px; }
.mask-line{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.mask-line > span{ display:block; }
.js .mask-line > span{ transform:translateY(112%); transition:transform 1.3s var(--ease-out); }
.js .in .mask-line > span,
.js .mask-line.in > span{ transform:none; }

/* ---------- generic reveals ---------- */
.js [data-reveal]{
  opacity:0; transform:translateY(46px);
  transition:opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out);
  transition-delay:var(--d, 0ms);
  will-change:transform, opacity;
}
.js [data-reveal="fade"]{ transform:none; }
.js [data-reveal="scale"]{ transform:translateY(40px) scale(.94); }
.js [data-reveal].in{ opacity:1; transform:none; }

/* reel cards: staggered rise + clip open */
.js .reel-item{
  opacity:0;
  transform:translateY(70px) scale(.94);
  clip-path:inset(10% 8% 10% 8%);
  transition:opacity 1s var(--ease-out), transform 1.3s var(--ease-out), clip-path 1.4s var(--ease-out);
  transition-delay:var(--d, 0ms);
}
.js .reel-item.in{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
.reel-item video,
.reel-item img{ transition:filter .6s var(--ease-out); }
.js .reel-item video{
  height:118%; transform:translate3d(0, var(--py, 0px), 0) scale(var(--zs, 1));
  will-change:transform;
}
.js .reel-item:hover video{ --zs:1.06; }
.reel-item .item-meta{ transition:transform .6s var(--ease-out); transform:translateY(0); }
.reel-item .item-title,
.reel-item .item-tc{ transition:transform .6s var(--ease-out); }
.reel-item:hover .item-title{ transform:translateX(6px); }
.reel-item::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  border:1px solid rgba(196,69,47,0); transition:border-color .5s var(--ease-out);
}
.reel-item:hover::after{ border-color:rgba(196,69,47,.9); }

/* ---------- CAPABILITIES: rows focus as they cross the middle ---------- */
.spec-row{ position:relative; transition:opacity .5s var(--ease-out), padding-left .6s var(--ease-out), background-color .5s var(--ease-out); }
.js .spec-row{ opacity:.28; }
.js .spec-row.is-active{ opacity:1; padding-left:calc(var(--edge) + 18px); background:linear-gradient(90deg, rgba(196,69,47,.07), transparent 60%); }
.spec-row .spec-name{ font-size:clamp(22px, 3.2vw, 46px); letter-spacing:-.02em; font-weight:800; }
.spec-row::after{
  content:''; position:absolute; left:0; bottom:-1px; height:1px; width:100%;
  background:var(--rec); transform-origin:0 50%; transform:scaleX(0);
  transition:transform 1.1s var(--ease-out);
}
.spec-row.is-active::after{ transform:scaleX(1); }

/* ---------- STUDIO: video frame grows as it centers ---------- */
.js .studio-video-frame{ will-change:transform, clip-path; transform:scale(var(--gs,1)); border-radius:var(--gr,0px); }
.studio-blurb .w{ display:inline; opacity:.18; transition:opacity .35s linear; }
.studio-blurb .w.on{ opacity:1; }

/* ---------- footer ---------- */
footer{ margin-top:0; }

/* ---------- buttons: magnetic feel ---------- */
.btn{ transition:transform .5s var(--ease-out), border-color .25s ease, background-color .25s ease; will-change:transform; }

/* ---------- responsive ---------- */
@media (max-width:720px){
  .top-menu{ top:calc(env(safe-area-inset-top, 0px) + 46px); padding:8px 16px; gap:9px; }
  .top-menu.is-stuck{ top:calc(env(safe-area-inset-top, 0px) + 12px); }
  /* once the menu docks to the top, hide the hero's top HUD row so they never overlap */
  .top-menu.is-stuck ~ .shell .hero-frame .hud-row.top{ opacity:0 !important; transition:opacity .25s ease !important; }
  .js .hero-track{ height:210vh; }
  .manifesto{ height:300vh; }
  .roles{ height:360vh; }
  .marquee{ padding:44px 0; }
  .spec-row{ padding:22px var(--edge); }
  .js .spec-row.is-active{ padding-left:var(--edge); }
  /* scroll cue: tucked into the bottom-right corner (the bottom HUD's right label is hidden on phones),
     so it sits beside the CTA buttons instead of under them */
  .scroll-cue{
    left:auto; right:16px; bottom:14px;
    transform:none;
    gap:8px;
    font-size:9px;
  }
  .scroll-cue i{ height:28px; }
}
/* very narrow phones: keep just the animated line so it can never reach the buttons */
@media (max-width:360px){
  .scroll-cue span{ display:none; }
}

/* ---------- reduced motion / no-JS-motion fallback ---------- */
html.reduce .hero-track{ height:auto !important; }
html.reduce .hero-frame{ position:relative !important; transform:none !important; border-radius:0 !important; }
html.reduce .manifesto,
html.reduce .roles{ height:auto !important; }
html.reduce .manifesto-pin,
html.reduce .roles-pin{ position:relative !important; height:auto !important; min-height:70vh; padding-top:80px; padding-bottom:80px; }
html.reduce .roles-stage{ display:flex; flex-direction:column; height:auto; gap:48px; }
html.reduce .role{ position:relative !important; opacity:1 !important; transform:none !important; filter:none !important; }
html.reduce .manifesto-text .w,
html.reduce .studio-blurb .w{ opacity:1 !important; }
html.reduce [data-reveal],
html.reduce .reel-item,
html.reduce .spec-row,
html.reduce .mask-line > span,
html.reduce .hero-bold .line > span,
html.reduce .hero-oneline,
html.reduce .hero-overlay-copy .cta-row,
html.reduce .hud-row,
html.reduce .hud-note,
html.reduce .top-menu{
  opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important;
}
html.reduce .marquee-row{ transform:none !important; }

/* =========================================================================
   PROJECT PAGES - overrides + scroll-driven motion (project/*.html, <html class="page-project">)
   ========================================================================= */
/* ---------- top menu (shared across the whole site) ---------- */
:where(html.page-project) .top-menu{
  width: revert;
  max-width: revert;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:transparent;
  padding:22px var(--edge) 18px;
  border-bottom:1px solid var(--line);
}

@media (max-width:720px){
  :where(html.page-project) .top-menu{ padding:16px 16px 14px; gap:9px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
:where(html.page-project) footer{
  border-top: 1px solid var(--ink);
  padding: 56px 0 32px;
  margin-top: 120px;
}
:where(html.page-project) .spec-row{
  gap: revert;
  align-items: revert;
  position: revert;
  transition: revert;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 12.5px;
}

/* ---------- glass nav ---------- */
:where(html.page-project) .top-menu{ position:fixed; top:22px; left:50%; transform:translateX(-50%); z-index:900; padding:10px 24px; border:1px solid transparent; border-radius:999px; white-space:nowrap;
  transition:background .5s var(--ease-out), border-color .5s var(--ease-out), backdrop-filter .5s var(--ease-out), transform .6s var(--ease-out), top .5s var(--ease-out); }
:where(html.page-project) .top-menu.is-stuck{ background:rgba(12,12,12,.55); border-color:rgba(255,255,255,.09); -webkit-backdrop-filter:blur(20px) saturate(1.5); backdrop-filter:blur(20px) saturate(1.5); top:14px; }
.proj-header{ padding-top:120px; }

/* ---------- masked word rise ---------- */
.mw{ display:inline-block; overflow:hidden; vertical-align:top; padding:.1em .04em .14em; margin:-.1em -.04em -.14em; }
.mw > span{ display:inline-block; }
.js .mw > span{ transform:translateY(115%); transition:transform 1.3s var(--ease-out); transition-delay:calc(var(--i,0) * 70ms); }
.js .cut-head.in .mw > span{ transform:none; }
.js .proj-title .mw > span{ transition-duration:1.5s; transition-delay:calc(.15s + var(--i,0) * 110ms); }
.js.is-ready .proj-title .mw > span{ transform:none; }

/* ---------- header intro ---------- */
.js .proj-eyebrow{ opacity:0; transform:translateY(16px); }
.js.is-ready .proj-eyebrow{ opacity:1; transform:none; transition:opacity 1.2s .1s var(--ease-out), transform 1.2s .1s var(--ease-out); }
.proj-facts{ position:relative; }
.js .proj-facts{ border-color:transparent; }
.js .proj-facts::before,
.js .proj-facts::after{ content:''; position:absolute; left:0; right:0; height:1px; background:var(--ink); transform-origin:0 50%; transform:scaleX(0); transition:transform 1.6s .5s var(--ease-out); }
.js .proj-facts::before{ top:0; } .js .proj-facts::after{ bottom:0; }
.js.is-ready .proj-facts::before,
.js.is-ready .proj-facts::after{ transform:none; }
.js .fact{ opacity:0; transform:translateY(22px); }
.js.is-ready .fact{ opacity:1; transform:none; transition:opacity 1.1s var(--ease-out), transform 1.3s var(--ease-out); transition-delay:calc(.6s + var(--i,0) * 90ms); }

/* ---------- cover: card opens up to full screen (pinned) ---------- */
.bleed{ position:relative; width:100vw; margin-left:calc(50% - 50vw); }
.proj-cover{ margin-top:0; aspect-ratio:auto; }
.expand-track{ margin-top:56px; }
.js:not(.reduce) .expand-track{ height:240vh; }
.js:not(.reduce) .expand-pin{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
.js:not(.reduce) .expand-frame{ position:absolute; inset:0; height:auto; aspect-ratio:auto; overflow:hidden; will-change:clip-path; clip-path:inset(0% 20% 24% round 28px); }
@media (max-width:720px){ .js:not(.reduce) .expand-frame{ clip-path:inset(0% 6% 36% round 20px); } .js:not(.reduce) .expand-track{ height:200vh; }
}
.js:not(.reduce) .expand-frame > video{ transform:scale(var(--vs,1.35)); will-change:transform; }
.reduce .expand-frame,
html:not(.js) .expand-frame{ aspect-ratio:21/9; position:relative; }
.expand-hud{ position:absolute; inset:0; z-index:3; pointer-events:none; padding:28px var(--edge); display:flex; flex-direction:column; justify-content:space-between;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:rgba(237,235,230,.75); opacity:0; will-change:opacity; }
.hud-line{ display:flex; justify-content:space-between; gap:16px; }
.expand-cue{ position:absolute; left:50%; bottom:22px; z-index:4; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; color:rgba(237,235,230,.7); pointer-events:none; }
.expand-cue i{ display:block; width:1px; height:40px; background:rgba(237,235,230,.22); position:relative; overflow:hidden; }
.expand-cue i::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%; background:var(--ink); animation:cue 2.2s var(--ease-io) infinite; }
.expand-shade{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; background:linear-gradient(0deg, rgba(12,12,12,.85), rgba(12,12,12,0) 55%); }
html.reduce .expand-hud,
html.reduce .expand-shade,
html.reduce .expand-cue{ display:none; }

/* ---------- timeline spine ---------- */
.timeline::after{ content:''; position:absolute; left:calc(var(--edge) + 39px); top:100px; bottom:100px; width:1px; background:var(--rec); transform-origin:50% 0; transform:scaleY(var(--sp,0)); pointer-events:none; z-index:1; }
.spine-dot{ position:absolute; z-index:1; left:calc(var(--edge) + 36px); top:97px; width:7px; height:7px; border-radius:50%; background:var(--rec); box-shadow:0 0 14px 3px rgba(196,69,47,.55); transform:translate3d(0,var(--sd,0px),0); pointer-events:none; }
@media (max-width:720px){ .timeline::after,
.spine-dot{ display:none; }
}
.js .cut-num{ opacity:.35; transition:opacity .7s var(--ease-out); }
.js .cut-num::after{ transition:background .5s var(--ease-out), transform .7s var(--ease-out); }
.js .cut.is-reached .cut-num{ opacity:1; }
.js .cut.is-reached .cut-num::after{ background:var(--rec); transform:scale(1.3); }
.cut-head{ font-size:clamp(30px,5vw,68px); line-height:.98; letter-spacing:-.03em; margin-bottom:28px; }
.cut-text{ font-size:clamp(17px,1.7vw,23px); line-height:1.55; max-width:36em; color:var(--ink-dim); }
.cut-text .w{ display:inline; }
.js .cut-text .w{ opacity:.16; transition:opacity .35s linear; }
.js .cut-text .w.on{ opacity:1; }
.js .cut-text .w.hl{ color:var(--ink); }
.js .cut-head .mw > span{ transition-duration:1.4s; transition-delay:calc(var(--i,0) * 80ms); }
.mw{ padding:.1em .04em .14em; }
.cut{ margin-bottom:56px; }

/* =====================================================================
   SCENES — pinned full-screen moments, driven by scroll (like the index)
   Static base: plain stacked media. Enhanced: sticky 100vh stage.
   ===================================================================== */
.scene{ position:relative; z-index:3; background:var(--bg); margin-bottom:96px; }
.scene + .cut{ margin-top:0; }
.js:not(.reduce) .scene{ width:100vw; margin-left:calc(50% - 50vw); height:var(--h,400vh); }
.js:not(.reduce) .scene-pin{ position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden; }
@media (max-width:720px){ .js:not(.reduce) .scene{ height:calc(var(--h,400vh) * .8); }
}

/* shared HUD (counter + ticks) */
.hud{ display:none; }
.js:not(.reduce) .hud{ display:flex; position:absolute; left:var(--edge); right:var(--edge); bottom:26px; z-index:6; align-items:flex-end; justify-content:space-between; gap:24px; pointer-events:none; color:var(--ink); }
.hud-count{ display:flex; align-items:baseline; gap:12px; font-family:var(--grot); font-weight:700; font-size:clamp(34px,5vw,64px); line-height:1; letter-spacing:-.03em; text-shadow:0 2px 24px rgba(0,0,0,.45); }
.hud-lab,
.hud-total{ font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:.06em; color:rgba(237,235,230,.75); }
.hud-lab{ align-self:center; }
.hud-num{ display:inline-block; height:1em; overflow:hidden; }
.hud-num-in{ display:flex; flex-direction:column; transition:transform .9s var(--ease-out); }
.hud-num-in b{ display:block; height:1em; line-height:1; font-weight:inherit; }
.hud-ticks{ display:flex; gap:8px; flex:1; max-width:320px; align-self:center; }
.hud-ticks i{ flex:1; height:2px; background:rgba(237,235,230,.28); position:relative; overflow:hidden; }
.hud-ticks b{ position:absolute; inset:0; background:var(--rec); transform-origin:0 50%; transform:scaleX(0); }

/* ---------- SCENE 01 · slideshow (2.zip choreography, every image shown whole) ---------- */
.scene-ss{ --ss-t:112px; --ss-b:104px; }
.ss-center{ display:block; }
.ss-stage{ display:grid; gap:2px; position:relative; }
.ss-slide{ position:relative; margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--bg-panel); }
.ss-slide img{ width:100%; height:100%; object-fit:contain; }
.ss-dim{ position:absolute; inset:0; background:#0C0C0C; opacity:0; z-index:1; pointer-events:none; }
.ss-top,
.ss-bottom,
.ss-rail,
.ss-nums{ display:none; }

.js:not(.reduce) .ss-center{ position:absolute; inset:var(--ss-t) 0 var(--ss-b); display:grid; place-items:center; }
.js:not(.reduce) .ss-stage{ display:block; --ar:1.7778;
  width:min(calc(100vw - var(--edge) * 2), calc((100vh - var(--ss-t) - var(--ss-b) - 24px) * var(--ar)));
  width:min(calc(100vw - var(--edge) * 2), calc((100dvh - var(--ss-t) - var(--ss-b) - 24px) * var(--ar)));
  aspect-ratio:var(--ar); }
.js:not(.reduce) .ss-slide{ position:absolute; inset:0; aspect-ratio:auto; border-radius:10px; will-change:clip-path; }
.js:not(.reduce) .ss-slide img{ position:absolute; inset:0; will-change:transform; }
.js:not(.reduce) .ss-top,
.js:not(.reduce) .ss-bottom{ position:absolute; left:var(--edge); right:var(--edge); z-index:5; display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:rgba(237,235,230,.7); }
.js:not(.reduce) .ss-top{ top:80px; }
.js:not(.reduce) .ss-bottom{ bottom:32px; align-items:flex-end; }
.ss-cur{ display:inline-block; color:var(--ink); }
.ss-cur.tick{ animation:ss-tick .6s var(--ease-out); }
@keyframes ss-tick{ from{ transform:translateY(60%); opacity:0; } to{ transform:none; opacity:1; } }
.ss-prog{ display:flex; flex-direction:column; gap:12px; flex:1; max-width:340px; }
.ss-ticks{ display:flex; gap:8px; }
.ss-ticks i{ flex:1; height:2px; background:rgba(237,235,230,.22); position:relative; overflow:hidden; }
.ss-ticks b{ position:absolute; inset:0; background:var(--rec); transform-origin:0 50%; transform:scaleX(0); }
.ss-btns{ display:flex; gap:8px; }
.ss-btn{ width:48px; height:48px; display:grid; place-items:center; font-family:var(--mono); font-size:16px; color:var(--ink); background:rgba(12,12,12,.55);
  border:1px solid rgba(237,235,230,.25); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:background .3s, border-color .3s, transform .4s var(--ease-out); }
.ss-btn:hover{ background:var(--rec); border-color:var(--rec); transform:translateY(-3px); }
.js:not(.reduce) .ss-rail{ position:absolute; right:var(--edge); top:50%; transform:translateY(-50%); z-index:5; display:flex; flex-direction:column; gap:8px; }
.ss-thumb{ display:block; width:64px; aspect-ratio:16/10; padding:0; border:1px solid transparent; background:none; overflow:hidden; opacity:.4; transform:scale(.94); transform-origin:100% 50%;
  transition:opacity .5s var(--ease-out), transform .6s var(--ease-out), border-color .5s; }
.ss-thumb img{ width:100%; height:100%; object-fit:cover; }
.ss-thumb.is-on{ opacity:1; transform:translateX(-8px) scale(1.12); border-color:var(--rec); }
.scene-ss:focus-visible{ outline:2px solid var(--rec); outline-offset:-6px; }
/* big outlined numeral, tucked in the frame's corner (never covers the picture's centre) */
.js:not(.reduce) .ss-nums{ display:block; position:absolute; z-index:3; pointer-events:none; left:clamp(14px,2vw,30px); bottom:clamp(8px,1.4vw,22px); width:1px; height:.84em; font-size:clamp(60px,8.4vw,150px); }
.ss-big{ position:absolute; left:0; bottom:0; height:100%; overflow:hidden; padding:.04em .06em .02em 0; font-family:var(--grot); font-weight:800; line-height:.82; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(237,235,230,.85); }
.ss-big span{ display:block; will-change:transform; }
@media (max-width:1100px){ .js:not(.reduce) .ss-rail{ display:none; }
}
/* phones / portrait: the wide frame sits at the top-centre, the numeral drops underneath it */
@media (max-width:720px), (orientation:portrait){
  .scene-ss{ --ss-t:96px; --ss-b:96px; }
  .js:not(.reduce) .ss-rail{ display:none; }
  .js:not(.reduce) .ss-top{ top:70px; }
  .js:not(.reduce) .ss-stage{ margin-bottom:24vw; }
  .js:not(.reduce) .ss-nums{ left:0; bottom:auto; top:100%; margin-top:14px; font-size:clamp(72px,24vw,150px); }
  .ss-btn{ width:42px; height:42px; }
  .ss-prog{ max-width:calc(100% - 110px); }
}
/* static fallback: slides simply stacked */
html:not(.js) .ss-stage,
.reduce .ss-stage{ display:grid; }

/* ---------- SCENE 02 · three locations ---------- */
.tri-stage{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.tri-panel{ position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; background:var(--bg-panel); }
.tri-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tri-panel::after{ content:''; position:absolute; inset:0; background:#000; opacity:var(--dim,0); pointer-events:none; }
.tri-panel::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(0deg, rgba(12,12,12,.85) 0%, rgba(12,12,12,0) 50%); }
.tri-panel figcaption{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; }
.tri-name{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink); opacity:.75; margin-bottom:10px; }
.tri-line{ display:block; font-family:var(--grot); font-weight:700; font-size:clamp(22px,2.4vw,34px); line-height:1.02; letter-spacing:-.02em; }
@media (max-width:720px){ .tri-stage{ grid-template-columns:1fr; } .tri-panel{ aspect-ratio:16/10; }
}
.js:not(.reduce) .tri-stage{ position:absolute; inset:0; display:flex; }
.js:not(.reduce) .tri-panel{ flex:var(--g,1) 1 0px; min-width:0; min-height:0; aspect-ratio:auto; }
.js:not(.reduce) .tri-panel img{ inset:auto; left:50%; top:50%; width:100vw; height:100vh; max-width:none;
  transform:translate(-50%,-50%) translate3d(var(--x,0%),0,0) scale(var(--z,1.1)); will-change:transform; }
.js:not(.reduce) .tri-panel figcaption{ left:clamp(20px,3vw,44px); right:clamp(20px,3vw,44px); bottom:clamp(28px,6vh,64px); opacity:var(--co,0); transform:translate3d(0,var(--cy,40px),0); }
.js:not(.reduce) .tri-line{ font-size:clamp(28px,4.6vw,72px); }
/* phones / portrait: the three wide pictures become three full-width cards. Every frame stays whole; scroll lifts one card into focus at a time. */
@media (max-width:720px), (orientation:portrait){
  .js:not(.reduce) .tri-stage{ flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:76px 0 36px; }
  .js:not(.reduce) .tri-panel{ flex:none; width:min(calc(100vw - var(--edge) * 2), calc((100vh - 156px) / 3 * 1.6), calc((100dvh - 156px) / 3 * 1.6)); aspect-ratio:16/10; border-radius:10px;
    opacity:var(--po,0); transform:translate3d(0,var(--ty,0px),0) scale(var(--ps,.9)); will-change:transform, opacity; }
  .js:not(.reduce) .tri-panel img{ inset:0; left:0; top:0; width:100%; height:100%; transform:translate3d(var(--x,0%),0,0) scale(var(--z,1)); }
  .js:not(.reduce) .tri-panel figcaption{ left:14px; right:14px; bottom:12px; }
  .js:not(.reduce) .tri-name{ font-size:10px; margin-bottom:6px; }
  .js:not(.reduce) .tri-line{ font-size:clamp(18px,5.6vw,30px); }
}

/* ---------- SCENE 03 · the grade ---------- */
.gr-item{ margin-bottom:28px; }
.gr-cap{ font-family:var(--mono); font-size:11px; color:var(--ink-dim); margin-top:12px; }
.js:not(.reduce) .gr-stage{ position:absolute; inset:0; }
.js:not(.reduce) .gr-item{ position:absolute; inset:0; margin:0; display:flex; align-items:center; justify-content:center; opacity:0; will-change:transform, opacity; }
.js:not(.reduce) .gr-box{ width:min(var(--container), calc(100vw - var(--edge) * 2), calc((100vh - 200px) * 16 / 9)); }
.js:not(.reduce) .gr-cap{ margin-top:16px; }
.js:not(.reduce) .scene-grade .hud{ bottom:30px; }
.js:not(.reduce) .scene-grade .hud-count{ font-size:clamp(30px,4vw,52px); }

/* ---------- SCENE 04 · result ---------- */
.rs-frame{ position:relative; aspect-ratio:21/9; overflow:hidden; background:var(--bg-panel); }
.rs-frame img{ width:100%; height:100%; object-fit:cover; transform:scale(var(--is,1)); }
.rs-frame::after{ content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(0deg, rgba(12,12,12,.92) 0%, rgba(12,12,12,.1) 60%); opacity:var(--sh,1); }
.rs-copy{ margin-top:22px; }
.rs-line{ margin:0; font-family:var(--grot); font-weight:700; font-size:clamp(24px,3.6vw,48px); line-height:1.04; letter-spacing:-.025em; }
.rs-line span{ display:block; }
.rs-cap{ font-family:var(--mono); font-size:12px; letter-spacing:.03em; margin-top:16px; color:var(--ink-dim); }
.js:not(.reduce) .rs-frame{ position:absolute; inset:0; aspect-ratio:auto; transform:scale(var(--rs,.6)); border-radius:var(--rr,40px); will-change:transform; }
.js:not(.reduce) .rs-frame img{ will-change:transform; }
.js:not(.reduce) .rs-copy{ position:absolute; z-index:2; left:0; right:0; bottom:15vh; margin:0 auto; padding:0 var(--edge); max-width:var(--container); }
.js:not(.reduce) .rs-line{ overflow:hidden; padding-bottom:.12em; font-size:clamp(28px,5.2vw,78px); }
.js:not(.reduce) .rs-line span{ transform:translateY(112%); will-change:transform; }
.js:not(.reduce) .rs-cap{ position:absolute; z-index:2; left:0; right:0; bottom:40px; margin:0 auto; padding:0 var(--edge); max-width:var(--container); color:var(--ink); opacity:0; }

/* ---------- next project + footer ---------- */
.js .next-thumb{ opacity:0; transform:translateY(64px) scale(.95); clip-path:inset(8% 6% 8% 6%);
  transition:opacity 1s var(--ease-out), transform 1.3s var(--ease-out), clip-path 1.4s var(--ease-out); }
.js .next-thumb.in{ opacity:1; transform:none; clip-path:inset(0); }
.js .next-thumb img{ transform:translate3d(0,var(--py,0px),0) scale(1.14); will-change:transform; }
.next-thumb:hover img{ opacity:1; }
.js .next-label,
.js .next-title{ opacity:0; transform:translateY(14px); transition:opacity 1s .2s var(--ease-out), transform 1.1s .2s var(--ease-out); }
.js .next-label.in,
.js .next-title.in{ opacity:1; transform:none; }

:where(html.page-project).js .foot-block,
:where(html.page-project).js .foot-bottom{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease-out), transform 1.2s var(--ease-out); transition-delay:var(--d,0ms); }
:where(html.page-project).js .foot-block.in,
:where(html.page-project).js .foot-bottom.in{ opacity:1; transform:none; }

@media (max-width:720px){ :where(html.page-project) .top-menu{ top:16px; padding:8px 18px; } .proj-header{ padding-top:96px; }
}

/* ---------- reduced motion ---------- */
html.reduce .proj-eyebrow,
html.reduce .fact,
html.reduce .proj-cover,
html.reduce .next-thumb,
html.reduce .next-label,
html.reduce .next-title,
html:where(.page-project).reduce .foot-block,
html:where(.page-project).reduce .foot-bottom,
html.reduce .mw > span{
  opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
html.reduce .cut-text .w{ opacity:1 !important; }
html.reduce .proj-facts::before,
html.reduce .proj-facts::after{ transform:none !important; }