/* ---------- fx: side scroller, cursor, tilt, film controls ---------- */
.rail{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:60;display:flex;align-items:center;gap:0;opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.rail.show{opacity:1;pointer-events:auto}
.rail-track{position:absolute;right:5px;top:6px;bottom:30px;width:2px;background:rgba(212,175,55,.14);border-radius:2px;overflow:hidden}
.rail-fill{position:absolute;inset:0;background:linear-gradient(180deg,var(--gold-hi),var(--gold));transform-origin:top;transform:scaleY(0)}
.rail ol{list-style:none;margin:0;padding:0 0 26px;display:flex;flex-direction:column;gap:14px;position:relative}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;color:var(--ink-3);height:14px}
.rail-dot{width:12px;height:12px;border-radius:50%;border:2px solid rgba(212,175,55,.45);background:var(--canvas);transition:transform .3s var(--ease),background .3s,border-color .3s;flex:none}
.rail a.past .rail-dot{background:var(--gold);border-color:var(--gold)}
.rail a.on .rail-dot{background:var(--gold-hi);border-color:var(--gold-hi);transform:scale(1.35);box-shadow:0 0 0 5px rgba(242,201,76,.16),0 0 18px rgba(242,201,76,.5)}
.rail-lbl{font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:99px;background:rgba(11,13,20,.82);border:1px solid var(--line);backdrop-filter:blur(8px);opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s var(--ease);white-space:nowrap;color:var(--ink-2)}
.rail a:hover .rail-lbl,.rail a:focus-visible .rail-lbl,.rail a.on .rail-lbl{opacity:1;transform:none}
.rail a.on .rail-lbl{color:var(--gold-hi)}
.rail a:hover .rail-dot{transform:scale(1.3);border-color:var(--gold-hi)}
.rail-pct{position:absolute;right:-4px;bottom:0;font:600 10px/1 var(--mono);color:var(--gold-hi);width:28px;text-align:center}
.topbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:70;pointer-events:none;display:none}
.topbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transform-origin:left;transform:scaleX(0)}
@media (max-width:900px){.rail{display:none}.topbar{display:block}}

.cur-glow{position:fixed;left:0;top:0;width:600px;height:600px;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(212,175,55,.10),rgba(212,175,55,.03) 40%,transparent 68%);opacity:0;transition:opacity .6s;mix-blend-mode:screen}
.cur-ring{position:fixed;left:0;top:0;width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(242,201,76,.7);pointer-events:none;z-index:200;opacity:0;transition:opacity .3s,width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),background .25s,border-color .25s}
.has-cur .cur-glow{opacity:1}.has-cur .cur-ring{opacity:1}
.cur-ring.hot{width:56px;height:56px;margin:-10px 0 0 -10px;background:rgba(242,201,76,.08);border-color:var(--gold-hi)}
.cur-ring.down{width:26px;height:26px;margin:5px 0 0 5px;background:rgba(242,201,76,.25)}

.tilt{position:relative;transform-style:preserve-3d;transition:opacity 1s var(--ease),transform .5s var(--ease),box-shadow .4s var(--ease),border-color .4s}
.tilt.in{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.tilt.tilting{transition:opacity 1s var(--ease),transform .12s linear,box-shadow .4s var(--ease),border-color .4s;box-shadow:0 30px 60px -30px rgba(0,0,0,.8),0 0 0 1px rgba(242,201,76,.25);border-color:var(--line-2)}
.sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(242,201,76,.14),transparent 55%);opacity:0;transition:opacity .35s}
.tilting .sheen{opacity:1}
.btn.gold{transition:transform .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),translate .25s var(--ease)}
.sec h2{transition:translate .2s linear;will-change:translate}

/* hero: scroll or play */
.hero.film-mode{height:100vh;height:100svh}
.hero-switch{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:6;display:flex;gap:4px;padding:4px;border-radius:99px;background:rgba(11,13,20,.66);border:1px solid var(--line-2);backdrop-filter:blur(12px)}
.hero-switch button{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--body);color:var(--ink-2);background:transparent;border:0;border-radius:99px;padding:10px 16px;cursor:pointer;transition:background .25s,color .25s}
.hero-switch button svg{width:14px;height:14px}
.hero-switch button[aria-pressed=true]{background:var(--gold);color:#14110a}
.hero-switch button:not([aria-pressed=true]):hover{color:var(--ink);background:rgba(212,175,55,.12)}
.film-ctrl{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);z-index:6;width:min(560px,calc(100% - 48px));display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:99px;background:rgba(11,13,20,.66);border:1px solid var(--line);backdrop-filter:blur(12px)}
.film-ctrl[hidden]{display:none}
.fc-pp{width:34px;height:34px;flex:none;border-radius:50%;border:0;background:var(--gold);color:#14110a;font:700 12px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.fc-bar{flex:1;height:6px;border-radius:99px;background:rgba(245,239,224,.16);position:relative;cursor:pointer}
.fc-bar i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-hi));transform-origin:left;transform:scaleX(var(--p,0))}
.fc-bar:focus-visible{outline:2px solid var(--gold-hi);outline-offset:4px}
.fc-t{font:500 12px/1 var(--mono);color:var(--ink-2);min-width:76px;text-align:right}
.fc-next{border:0;background:transparent;color:var(--gold-hi);font:600 13px/1 var(--body);cursor:pointer;padding:6px 8px;white-space:nowrap}
.hero.film-mode .ring{display:none}
@media (prefers-reduced-motion:reduce){.tilt.in{transform:none}.cur-glow,.cur-ring{display:none}}