*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#000;--ink:#f4f4f2;--dim:#8a8a90;--line:#1c1c20;
  --f:"Helvetica Neue",Helvetica,Inter,Arial,sans-serif}
html,body{background:var(--bg);color:var(--ink);font-family:var(--f);overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
body{overscroll-behavior-y:none}
img,video{user-select:none;-webkit-user-drag:none}
li{list-style:none}

#grain{position:fixed;inset:-50%;z-index:95;pointer-events:none;opacity:.05;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
 animation:gr 1.1s steps(3) infinite}
@keyframes gr{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* loader */
#loader{position:fixed;inset:0;z-index:200;background:#000;display:flex;align-items:center;justify-content:center;
 transition:opacity 1s cubic-bezier(.4,0,.2,1),visibility 1s}
#loader.done{opacity:0;visibility:hidden}
.ld{text-align:center}
.ld-mark{font-size:11px;letter-spacing:.9em;color:#dcdcdc;margin-bottom:26px;text-indent:.9em}
.ld-bar{width:240px;height:1px;background:#1a1a1e;overflow:hidden}
.ld-bar i{display:block;height:100%;width:0;background:#fff;transition:width .25s linear}
.ld-pct{margin-top:14px;font-size:9px;letter-spacing:.38em;color:var(--dim)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;
 justify-content:space-between;padding:24px 34px;mix-blend-mode:difference}
.brand{font-size:12px;letter-spacing:.42em;font-weight:600}
.nav ul{display:flex;gap:30px}
.nav li{font-size:9px;letter-spacing:.3em;color:#bdbdbd;cursor:pointer;transition:color .3s}
.nav li:hover{color:#fff}
.tc{font-size:9px;letter-spacing:.26em;color:#bdbdbd;font-variant-numeric:tabular-nums}

/* chapter rail */
.rail{position:fixed;right:30px;top:50%;transform:translateY(-50%);z-index:80;
 display:flex;flex-direction:column;gap:16px;mix-blend-mode:difference}
.rail b{display:flex;align-items:center;gap:10px;font-size:8.5px;letter-spacing:.26em;
 color:#6e6e74;font-weight:400;transition:color .45s cubic-bezier(.4,0,.2,1)}
.rail b i{display:block;width:16px;height:1px;background:#4a4a50;transition:all .45s cubic-bezier(.4,0,.2,1)}
.rail b.on{color:#fff}
.rail b.on i{width:40px;background:#fff}

/* scrub hud */
.scrubhud{position:fixed;left:34px;bottom:30px;z-index:80;mix-blend-mode:difference}
.sh-line{width:190px;height:1px;background:#2a2a30;position:relative}
.sh-line i{position:absolute;inset:0 auto 0 0;width:0;background:#fff}
.sh-lab{margin-top:10px;font-size:8.5px;letter-spacing:.32em;color:#9a9aa0;font-variant-numeric:tabular-nums}

/* ── ACT I : scroll-scrubbed film ── */
.film{position:relative;height:1000vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.media{position:absolute;inset:0;z-index:1}
.media video,.media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
 display:block;background:#000;will-change:transform}
.media video::-webkit-media-controls{display:none!important}
.grade{position:absolute;inset:0;z-index:2;pointer-events:none;
 background:
  linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.12) 26%,rgba(0,0,0,.18) 58%,rgba(0,0,0,.86) 100%),
  radial-gradient(ellipse at 50% 48%,transparent 36%,rgba(0,0,0,.66) 100%)}
.bars{position:absolute;inset:0;z-index:3;pointer-events:none}
.bars i{position:absolute;left:0;right:0;height:0;background:#000;transition:height .8s cubic-bezier(.4,0,.2,1)}
.bars i:first-child{top:0}.bars i:last-child{bottom:0}
.film.cine .bars i{height:7vh}

/* captions */
.caps{position:absolute;inset:0;z-index:5;pointer-events:none}
.cap{position:absolute;left:7vw;bottom:19vh;max-width:min(60vw,920px);opacity:0;will-change:transform,opacity}
.cap h1{font-size:clamp(40px,7.4vw,124px);line-height:.92;font-weight:700;letter-spacing:-.045em;
 text-transform:uppercase;text-shadow:0 20px 70px rgba(0,0,0,.6)}
.cap p{margin-top:22px;font-size:clamp(11px,1.05vw,14px);letter-spacing:.17em;color:#c6c6ca;
 max-width:520px;line-height:1.95;text-transform:uppercase}

.hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:6;text-align:center;
 font-size:8.5px;letter-spacing:.44em;color:#9a9aa0;transition:opacity .6s}
.hint i{display:block;width:1px;height:40px;margin:11px auto 0;background:linear-gradient(#9a9aa0,transparent);
 animation:dr 2.2s infinite ease-in-out}
@keyframes dr{0%,100%{transform:scaleY(.25);opacity:.3;transform-origin:top}50%{transform:scaleY(1);opacity:1;transform-origin:top}}

/* ── ACT II : exploded rig ── */
.act2{position:relative;height:560vh;background:#000}
.rig{position:absolute;inset:0;perspective:1600px;transform-style:preserve-3d}
.part{position:absolute;left:50%;top:50%;width:46vmin;height:46vmin;margin:-23vmin 0 0 -23vmin;
 transform-style:preserve-3d;will-change:transform,opacity}
.part img{width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;filter:contrast(1.1) saturate(1.02)}
.part.focus img{filter:contrast(1.18) saturate(1.1) brightness(1.2) drop-shadow(0 0 44px rgba(255,255,255,.22))}
.exp-hud{position:absolute;left:7vw;bottom:14vh;z-index:6;pointer-events:none;opacity:0}
.exp-title{display:flex;align-items:baseline;gap:18px}
.exp-title span{font-size:clamp(36px,5.4vw,86px);font-weight:800;letter-spacing:-.05em}
.exp-title em{font-style:normal;font-size:10px;letter-spacing:.38em;color:#d4d4d8}
.exp-count{margin-top:20px;width:230px}
.exp-count i{display:block;height:1px;background:#242428;position:relative}
.exp-count i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:#fff}
.exp-count u{display:block;margin-top:9px;font-size:8.5px;letter-spacing:.34em;color:var(--dim);text-decoration:none}
.act-mark{position:absolute;top:13vh;left:7vw;font-size:9px;letter-spacing:.46em;color:#6c6c72}

/* end */
.end{position:relative;z-index:20;background:#000;border-top:1px solid var(--line);padding:100px 34px 56px}
.specs{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1120px;margin:0 auto}
.specs div{border-left:1px solid var(--line);padding-left:20px}
.specs b{display:block;font-size:clamp(28px,4vw,56px);font-weight:700;letter-spacing:-.035em}
.specs span{display:block;margin-top:9px;font-size:9px;letter-spacing:.3em;color:var(--dim)}
.endline{margin-top:90px;text-align:center;font-size:8px;letter-spacing:.32em;color:#45454b}

@media(max-width:860px){
  .nav ul,.tc{display:none}
  .nav{padding:18px 20px}
  .rail{right:16px;gap:13px}
  .rail b span{display:none}
  .cap{left:7vw;right:7vw;bottom:16vh;max-width:none}
  .cap h1{font-size:clamp(34px,10.5vw,62px)}
  .cap p{font-size:10.5px;letter-spacing:.14em;margin-top:16px}
  .scrubhud{left:20px;bottom:20px}
  .sh-line{width:120px}
  .film{height:820vh}
  .act2{height:460vh}
  .part{width:64vmin;height:64vmin;margin:-32vmin 0 0 -32vmin}
  .exp-hud{left:7vw;bottom:12vh}
}
@media(prefers-reduced-motion:reduce){#grain{display:none}}

/* diagnostic panel — only ever visible when media fails to load */
.diag{max-width:620px;padding:0 28px;font-size:12px;line-height:1.8;color:#c9c9cd;letter-spacing:.04em}
.diag h4{font-size:11px;letter-spacing:.42em;color:#ff6b6b;margin-bottom:20px}
.diag p{margin-bottom:14px}
.diag p.b{color:#8a8a90}
.diag code{font-family:ui-monospace,Menlo,Consolas,monospace;color:#fff;background:#141418;
  padding:2px 6px;border-radius:3px;font-size:11px;word-break:break-all}
.diag ul{margin:0 0 16px;padding:0}
.diag li{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;color:#ff9a9a;
  padding:3px 0;border-bottom:1px solid #16161a;word-break:break-all}