/* Palette read from the film's own frames: deep violet room, lilac/magenta light, amber key light, crystal white. Type: the film's titles are system sans 400 in #E6E1EC with small mono HUD labels. */
:root{--bg:#07040d;--violet:#4b1f86;--lilac:#c77be0;--amber:#e9a45c;--ink:#e6e1ec;--mute:#9a92ab;--acc:#b99cff;
--sans:'halyard-text','neue-haas-grotesk-text','neue-haas-unica',Inter,'Helvetica Neue',Arial,sans-serif;--mono:'halyard-text','neue-haas-grotesk-text','neue-haas-unica',Inter,'Helvetica Neue',Arial,sans-serif;--bar:46px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);overflow:hidden;-webkit-font-smoothing:antialiased;text-wrap:pretty}
#stage{position:fixed;inset:0 0 var(--bar) 0;touch-action:none}
#gl{width:100%;height:100%;display:block;cursor:grab}
#gl.drag{cursor:grabbing}
.mono{font:400 11px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hud{position:fixed;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;color:var(--mute);pointer-events:none;z-index:5}
.hud .ctl{pointer-events:auto;display:flex;gap:8px}
.hud button{padding:8px 12px;border:1px solid #2a2236;border-radius:999px;color:var(--ink);background:rgba(7,4,13,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hud button:hover{border-color:var(--acc)}
.hint,.tour{position:fixed;left:50%;bottom:calc(var(--bar) + 18px);transform:translateX(-50%);margin:0;color:var(--mute);z-index:5;text-align:center;transition:opacity .8s;pointer-events:none}
.tour{color:var(--amber)}
.hint.off{opacity:0}
.prod{position:fixed;left:0;right:0;bottom:0;height:var(--bar);display:flex;align-items:center;justify-content:center;gap:22px;background:#07040d;border-top:1px solid #1d1627;z-index:6}
.prod .mono{color:var(--mute)}
.prod a{color:var(--ink);text-decoration:none;font:400 13px/1 var(--sans);letter-spacing:.06em;border-bottom:1px solid transparent;padding:4px 0}
.prod a:hover{border-color:var(--acc);color:#fff}
/* callout: the lower-left reel circle, grows on rollover */
.call{position:fixed;left:20px;bottom:calc(var(--bar) + 16px);z-index:7;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.orb{position:relative;width:112px;height:112px;border-radius:50%;overflow:hidden;flex:none;border:1px solid rgba(199,123,224,.55);box-shadow:0 0 0 1px rgba(7,4,13,.8),0 0 40px rgba(199,123,224,.25);transition:width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.orb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.orb:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,transparent 55%,rgba(7,4,13,.55));mix-blend-mode:multiply}
.call:hover .orb,.call:focus-visible .orb{width:260px;height:260px;box-shadow:0 0 0 1px rgba(7,4,13,.8),0 0 70px rgba(199,123,224,.45)}
.lab{display:flex;flex-direction:column;gap:6px;max-width:190px;text-shadow:0 1px 12px #000}
.lab b{font-weight:400;color:var(--ink)}
.lab i{font:400 13px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;font-style:normal;letter-spacing:-.01em;color:var(--ink);opacity:.0;transform:translateY(4px);transition:.4s}
.call:hover .lab i{opacity:1;transform:none}
@media (hover:none){.lab i{opacity:1;transform:none}}
.watch{position:fixed;inset:0;z-index:30;background:rgba(7,4,13,.96);display:flex;align-items:center;justify-content:center;padding:56px 20px 20px}
.watch[hidden]{display:none}
.watch video{max-width:100%;max-height:100%;width:min(1280px,100%);aspect-ratio:16/9;background:#000}
.watch .x{position:absolute;top:18px;right:20px;padding:8px 12px;border:1px solid #2a2236;border-radius:999px}
.watch p{position:absolute;bottom:24px;color:var(--mute);margin:0}
.enter{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 45%,#2a1052 0%,#12082a 45%,#07040d 100%);transition:opacity 1.2s}
.enter.out{opacity:0;pointer-events:none}
.enter-in{padding:24px;max-width:640px}
.enter h1{font:400 clamp(20px,2.4vw,26px)/1.2 var(--sans);letter-spacing:.34em;text-transform:uppercase;margin:14px 0 18px;color:var(--ink)}
.enter .mono{color:var(--mute)}
.sub{color:var(--mute);margin:0 auto 32px;max-width:28em}
#go{padding:14px 26px;border:1px solid var(--lilac);border-radius:999px;color:var(--ink);background:rgba(199,123,224,.12);transition:.3s}
#go:hover{background:rgba(199,123,224,.28);box-shadow:0 0 40px rgba(199,123,224,.35)}
.quiet{display:block;margin:18px auto 0;color:var(--mute);padding:6px}
@media (max-width:640px){.hud{padding:12px 14px;justify-content:flex-end}.hud>span.mono:first-child{display:none}.hud button{padding:7px 10px;font-size:10px}.hint{display:none}.lab i{display:none}.tour{bottom:calc(var(--bar) + 130px)}.hud #readout{display:none}.orb{width:84px;height:84px}.lab{max-width:130px}.call:hover .orb{width:84px;height:84px}.prod{gap:16px}}

.credit{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:var(--ink);text-decoration:none;opacity:0;transition:opacity 1s;z-index:2;padding:8px 14px;border:1px solid #2a2236;border-radius:999px;background:rgba(7,4,13,.55)}.credit.on{opacity:1}

.front-credit{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:var(--ink);text-decoration:none;letter-spacing:.3em;padding:10px 4px;border-bottom:1px solid rgba(199,123,224,.45);white-space:nowrap}.front-credit:hover{border-color:var(--lilac);color:#fff}

.trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
#trailA{mix-blend-mode:color-dodge;filter:blur(6px)}#trailB{mix-blend-mode:overlay;filter:blur(14px);opacity:.9}#trailC{mix-blend-mode:multiply;filter:blur(22px);opacity:.55}
.hud a.btn{padding:8px 12px;border:1px solid #2a2236;border-radius:999px;color:var(--ink);background:rgba(7,4,13,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-decoration:none}.hud a.btn:hover{border-color:var(--acc)}

.credit{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0;border:0;background:none}.credit span{color:var(--mute)}.credit a{color:var(--ink);text-decoration:none;padding:8px 14px;border:1px solid #2a2236;border-radius:999px;background:rgba(7,4,13,.55)}

#skipintro{position:fixed;left:50%;bottom:calc(var(--bar) + 22px);transform:translateX(-50%);z-index:35;padding:8px 14px;border:1px solid #2a2236;border-radius:999px;color:var(--mute);background:rgba(7,4,13,.5)}#skipintro[hidden]{display:none}
.flash{position:fixed;inset:0;z-index:34;pointer-events:none;background:radial-gradient(circle,#fff 0%,#ffd4f0 30%,#c77be0 70%);opacity:0;transition:opacity .35s}.flash.on{opacity:1}
@media (max-width:640px){.hud{align-items:flex-start}.hud .ctl{flex-wrap:wrap;justify-content:flex-end;max-width:100%;gap:6px}.hud button,.hud a.btn{padding:6px 9px;font-size:9px;white-space:nowrap}}