/* The Origin Room — the front door. The page is a space; scroll is a dolly. */
:root{--room:#8FC3F2;--roomAmt:0}
html{scroll-behavior:auto!important}
body.room{background:#000;overflow-x:clip}
body.room .nav{background:none!important;border-color:transparent!important}
body.room .foot{display:none}
body.room #main{position:relative}
.scroller{height:920vh}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
body.flat #gl{display:none}body.flat{background:radial-gradient(60% 50% at 50% 30%,#12306E,#07090F 70%)}
.cursor{position:fixed;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid rgba(255,255,255,.7);pointer-events:none;z-index:40;mix-blend-mode:difference;transition:width .2s,height .2s,margin .2s}
.space.hov ~ .cursor{width:34px;height:34px;margin:-17px 0 0 -17px}
@media (hover:none){.cursor{display:none}}

.center{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,980px);text-align:center;z-index:3;pointer-events:none}
.center .row{justify-content:center;pointer-events:auto}
.intro{opacity:0;transition:opacity 1.4s ease .3s,transform 1.4s ease .3s;transform:translate(-50%,-44%)}
.intro.on{opacity:1;transform:translate(-50%,-50%)}
.intro.off{opacity:0;transform:translate(-50%,-56%);transition:opacity .5s,transform .5s;pointer-events:none}
.intro.off .row{pointer-events:none}
.intro h1{font-size:clamp(40px,6.4vw,88px);line-height:.98;letter-spacing:-.035em;margin:0 0 20px;text-shadow:0 20px 80px rgba(0,0,0,.6)}
.intro h1 span{display:block}
.intro p{font-size:clamp(17px,1.5vw,21px);color:rgba(255,255,255,.8);max-width:560px;margin:0 auto 30px}
.intro .hint{margin-top:44px;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.45);animation:hint 2.6s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.9;transform:translateY(6px)}}
.outro{opacity:0;top:auto;bottom:6vh;transform:translate(-50%,0)}
.outro h2{font-size:clamp(34px,4.6vw,64px);letter-spacing:-.03em;margin:0 0 12px;max-width:none}
.outro p{margin:0 auto 26px;color:rgba(255,255,255,.8)}
.outro .proof{display:flex;justify-content:center;gap:clamp(20px,4vw,56px);margin-top:44px;font-size:12px;color:rgba(255,255,255,.6);flex-wrap:wrap}
.outro .proof b{display:block;font-size:20px;color:#fff;font-weight:800}
.outro .links{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:13px;color:rgba(255,255,255,.55);pointer-events:auto}
.outro .links a:hover{color:#fff}

/* the corridor */
.space{position:fixed;inset:0;perspective:900px;perspective-origin:50% 50%;transform-style:preserve-3d;z-index:2;pointer-events:none}
.pane{position:absolute;left:50%;top:50%;width:min(58vw,720px);aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 120px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.06);will-change:transform,opacity,filter;transform-style:preserve-3d;transition:box-shadow .3s}
.pane img,.pane video{width:100%;height:100%;object-fit:cover;display:block;transition:filter .35s}
.pane:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.6));pointer-events:none;mix-blend-mode:screen}
.pane .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;font-size:14px;color:rgba(255,255,255,.78);line-height:1.45;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75));text-shadow:0 2px 10px rgba(0,0,0,.6)}
.pane .cap b{display:block;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.02em;color:#fff;margin-bottom:4px;font-weight:800}
.pane.film{width:min(70vw,900px)}
.pane.cast{width:min(18vw,230px);aspect-ratio:3/4}
.pane.cast.main{width:min(22vw,280px)}
.space.hov .pane:not(.hot) img,.space.hov .pane:not(.hot) video{filter:brightness(.45) saturate(.7)}
.pane.hot{box-shadow:0 60px 160px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.35),0 0 80px color-mix(in srgb,var(--room) 45%,transparent)}
.pane.slate{width:min(40vw,400px);aspect-ratio:auto;padding:20px;background:rgba(8,12,24,.72);backdrop-filter:blur(16px);border-color:rgba(255,255,255,.3);font-size:14px}
.pane.slate:after{display:none}
.pane.slate .hd{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--room);font-weight:700;margin-bottom:12px}
.pane.slate dl{display:grid;grid-template-columns:86px 1fr;gap:6px 10px;margin:0 0 14px}.pane.slate dt{color:#8A93A8}.pane.slate dd{margin:0;color:#fff}
.pane.slate .bt{display:flex;gap:10px}.pane.slate .bt .pill{flex:1;justify-content:center}
.pane.slate .note{margin-top:10px;font-size:12px;color:#8A93A8}
@media (max-width:760px){.pane{width:86vw}.pane.film{width:90vw}.pane.cast{display:none}.pane.cast.main{display:block;width:52vw}.pane.slate{width:86vw}.scroller{height:760vh}.outro{bottom:4vh}.outro .links{display:none}}

/* the gate */
.gate{position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.35);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s}
.gate.on{opacity:1;pointer-events:auto}
.gpane{width:min(92vw,460px);padding:30px;border-radius:22px;background:rgba(10,14,28,.7);border:1px solid rgba(255,255,255,.22);box-shadow:0 60px 160px rgba(0,0,0,.7),0 0 120px color-mix(in srgb,var(--room) 35%,transparent);backdrop-filter:blur(20px);transform:translateY(20px) scale(.98);transition:transform .5s cubic-bezier(.2,.8,.2,1);position:relative}
.gate.on .gpane{transform:none}
.gate.go .gpane{transform:scale(1.06);opacity:0;transition:all .7s}
.gpane h3{font-size:24px;letter-spacing:-.02em;margin:0 0 8px}
.gpane p{font-size:15px;color:#A6B1C7;margin:0 0 16px}
.gpane input{width:100%;font:inherit;font-size:18px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;margin-bottom:14px}
.gpane input:focus{outline:2px solid color-mix(in srgb,var(--room) 70%,transparent);outline-offset:1px}
.gpane .gmsg{min-height:20px;font-size:13px;color:#F0B27A;margin-bottom:8px}
.gpane .small{font-size:12px;color:#8A93A8}.gpane .small a{color:#fff;text-decoration:underline}
.gclose{position:absolute;right:14px;top:12px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:none;color:#fff;font-size:20px;cursor:pointer}