:root{color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#030303}body{overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.hero{position:relative;width:100vw;height:100dvh;overflow:hidden;background:#030303;isolation:isolate}.stage{position:absolute;inset:0;z-index:1;background:#030303;overflow:hidden}.hero{cursor:default}.hero:active{cursor:pointer}.poster,.canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.poster{z-index:0}.canvas{z-index:1;display:block}.hidden-media{position:absolute;width:2px;height:2px;opacity:.001;pointer-events:none;left:-30px;top:-30px}.vignette{position:absolute;inset:0;z-index:40;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.65),rgba(0,0,0,.10) 42%,rgba(0,0,0,.08) 68%,rgba(0,0,0,.30)),linear-gradient(180deg,rgba(0,0,0,.34),transparent 28%,transparent 74%,rgba(0,0,0,.42))}.top{--tx:0px;--ty:0px;position:absolute;z-index:60;left:32px;right:32px;top:26px;display:flex;justify-content:space-between;letter-spacing:.17em;font-size:11px;pointer-events:none;transform:translate3d(var(--tx),var(--ty),0);will-change:transform}.brand{font-weight:700}.status{opacity:.68}.copy{--cx:0px;--cy:0px;position:absolute;z-index:60;left:clamp(28px,6vw,92px);bottom:clamp(38px,9vh,110px);pointer-events:none;transform:translate3d(var(--cx),var(--cy),0);will-change:transform}.copy p{font-size:11px;letter-spacing:.25em;opacity:.58}.copy h1{margin:14px 0 0;font-size:clamp(54px,8.2vw,128px);line-height:.83;letter-spacing:-.055em;font-weight:600}.grid{position:absolute;inset:0;z-index:80;display:none;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);pointer-events:none}.grid.on{display:grid}.grid span{display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.08);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.7)}

/* V31 — instant pointer response. Front/idle and all directions react immediately. */
.stage{will-change:transform;transform:translate3d(0,0,0) scale(1.018)}
.fx-shadow{--sx:0px;--sy:0px;position:absolute;z-index:8;left:56%;top:51%;width:min(46vw,700px);height:min(42vw,620px);transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy)));pointer-events:none;opacity:.28;filter:blur(34px);will-change:transform,opacity;background:radial-gradient(ellipse at 50% 58%,rgba(0,0,0,.86) 0 22%,rgba(0,0,0,.45) 43%,transparent 70%)}
.fx-shadow:before,.fx-shadow:after{content:"";position:absolute;top:39%;width:55%;height:34%;background:radial-gradient(ellipse at center,rgba(0,0,0,.72),transparent 70%);filter:blur(22px);opacity:.48;transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .45s}
.fx-shadow:before{right:48%;transform:rotate(-13deg) scaleX(1.15)}.fx-shadow:after{left:48%;transform:rotate(13deg) scaleX(1.15)}
.fx-halo{--hx:0px;--hy:0px;position:absolute;z-index:12;left:50.2%;top:26.3%;width:min(35.8vw,590px);aspect-ratio:1;border-radius:50%;transform:translate(calc(-50% + var(--hx)),calc(-50% + var(--hy))) scale(1);pointer-events:none;will-change:transform,opacity,filter;opacity:.16;mix-blend-mode:screen;background:radial-gradient(circle,transparent 52%,rgba(255,213,151,.20) 59%,rgba(255,202,122,.10) 64%,transparent 72%);filter:blur(1px);transition:opacity .35s ease,filter .35s ease}
.fx-halo:after{content:"";position:absolute;inset:-7%;border-radius:50%;border:1px solid rgba(255,222,170,.12);box-shadow:0 0 30px rgba(255,196,112,.10),inset 0 0 28px rgba(255,208,135,.04)}
.hero.raven-near .fx-halo{opacity:.38;filter:blur(.4px) drop-shadow(0 0 16px rgba(255,196,112,.20))}
.hero.reveal-active .fx-halo{opacity:.72;filter:drop-shadow(0 0 34px rgba(255,198,105,.48));animation:haloSurge 1.2s ease-in-out infinite alternate}
@keyframes haloSurge{to{transform:translate(calc(-50% + var(--hx)),calc(-50% + var(--hy))) scale(1.045);opacity:.88}}
.fx-particles{position:absolute;inset:0;z-index:18;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.fx-particles i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,218,163,var(--a));box-shadow:0 0 8px rgba(255,203,126,.22);animation:particleDrift var(--d) ease-in-out var(--delay) infinite alternate;will-change:transform,opacity}
@keyframes particleDrift{0%{transform:translate3d(-3px,7px,0) scale(.8);opacity:.18}55%{opacity:.55}100%{transform:translate3d(5px,-13px,0) scale(1.15);opacity:.3}}
.click-ripple{position:fixed;z-index:115;width:14px;height:14px;border:1px solid rgba(255,214,153,.72);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.7);animation:ripple .65s ease-out forwards}
@keyframes ripple{to{opacity:0;transform:translate(-50%,-50%) scale(5.2)}}
.intro-veil{position:absolute;inset:0;z-index:105;pointer-events:none;background:#030303;animation:introVeil 1.55s cubic-bezier(.2,.7,.2,1) forwards}.intro-veil:after{content:"";position:absolute;left:50%;top:28%;width:12vmin;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 60px rgba(255,205,132,.22);animation:introHalo 1.35s ease-out forwards}
@keyframes introVeil{0%,25%{opacity:1}100%{opacity:0}}@keyframes introHalo{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}45%{opacity:1}100%{transform:translate(-50%,-50%) scale(5);opacity:0}}
.exe-overlay{position:absolute;inset:0;z-index:110;display:grid;place-items:center;pointer-events:none;background:rgba(0,0,0,.0);opacity:0}.exe-overlay b{font-size:clamp(32px,5vw,74px);letter-spacing:.35em;font-weight:500;color:rgba(255,222,171,.92);text-shadow:0 0 28px rgba(255,188,92,.5)}
.hero.exe .exe-overlay{animation:exeFlash 1.3s ease both}.hero.exe .fx-shadow:before{transform:translateX(-19%) rotate(-22deg) scaleX(1.9) scaleY(1.28);opacity:.76}.hero.exe .fx-shadow:after{transform:translateX(19%) rotate(22deg) scaleX(1.9) scaleY(1.28);opacity:.76}.hero.exe .fx-halo{opacity:1;filter:drop-shadow(0 0 55px rgba(255,196,101,.65))}
@keyframes exeFlash{0%{opacity:0;background:rgba(0,0,0,0)}18%{opacity:1;background:rgba(0,0,0,.74)}65%{opacity:1;background:rgba(0,0,0,.53)}100%{opacity:0;background:rgba(0,0,0,0)}}
.scroll-hint{position:absolute;z-index:65;right:32px;bottom:30px;font-size:9px;letter-spacing:.22em;opacity:.42;pointer-events:none;transition:opacity .3s}.scroll-hint:after{content:"";display:inline-block;width:28px;height:1px;margin-left:10px;vertical-align:middle;background:currentColor;transform-origin:left;animation:hint 1.8s ease-in-out infinite}@keyframes hint{50%{transform:scaleX(.45);opacity:.4}}
.portal-preview{position:absolute;inset:0;z-index:95;display:grid;place-items:center;background:#050505;opacity:0;pointer-events:none;transform:translateY(100%);transition:transform .9s cubic-bezier(.16,.84,.24,1),opacity .65s}.portal-preview .portal-ring{position:absolute;width:min(78vmin,900px);aspect-ratio:1;border:1px solid rgba(239,201,143,.34);border-radius:50%;box-shadow:0 0 90px rgba(205,151,84,.11),inset 0 0 75px rgba(222,170,96,.06)}.portal-preview h2{position:relative;margin:0;font-size:clamp(46px,8vw,128px);letter-spacing:-.055em;font-weight:520}.portal-preview p{position:absolute;bottom:9vh;letter-spacing:.25em;font-size:10px;opacity:.45}.hero.portal-open .portal-preview{opacity:1;pointer-events:auto;transform:translateY(0)}.hero.portal-open .scroll-hint{opacity:0}
@media (pointer:coarse),(prefers-reduced-motion:reduce){.stage{transition:none}.fx-particles i{animation-duration:12s!important}.intro-veil{animation-duration:.7s}.scroll-hint{display:none}}

/* Native two-layer video compositor: avoids a full-screen canvas redraw loop. */
.canvas[hidden]{display:none!important}.poster{transition:opacity .12s linear}.raven-layer{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none;opacity:0;transform:translateZ(0)}.raven-layer.raven-entering{animation:ravenIris 110ms cubic-bezier(.22,.75,.25,1) both;will-change:clip-path}@keyframes ravenIris{from{clip-path:circle(15% at 56% 50%)}to{clip-path:circle(85% at 56% 50%)}}

/* One-shot eclipse intro. It is removed from the DOM when this animation ends. */
.eclipse-intro{position:absolute;inset:0;z-index:140;display:grid;place-items:center;overflow:hidden;pointer-events:none;background:#020203;animation:eclipseExit 2.65s cubic-bezier(.2,.72,.2,1) both}.eclipse-mark{position:absolute;left:50%;top:32%;width:min(34vw,460px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#f5d59b 0 42%,#bd8441 58%,transparent 70%);box-shadow:0 0 28px #d89e5366,0 0 100px #a76a2738;animation:eclipseAlign 2.2s cubic-bezier(.2,.72,.2,1) both}.eclipse-mark i{position:absolute;inset:-1%;border-radius:50%;background:#020203;box-shadow:inset -8px 0 18px #000;animation:moonPass 1.75s cubic-bezier(.4,0,.25,1) both}.eclipse-mark b{position:absolute;inset:-4%;border:1px solid #e9c27a66;border-radius:50%;box-shadow:0 0 22px #e9b96844;opacity:0;animation:corona 1.55s .45s ease-out both}.eclipse-intro p{position:absolute;top:66%;margin:0;font-family:Cinzel,Georgia,serif;font-size:clamp(16px,2vw,28px);letter-spacing:.42em;color:#e9dfd0;animation:introWord 2.3s .2s ease both}.eclipse-intro p span{color:#c79b5d}@keyframes moonPass{0%{transform:translateX(-115%)}45%,62%{transform:translateX(0)}100%{transform:translateX(115%)}}@keyframes corona{0%,20%{opacity:0;transform:scale(.88)}55%{opacity:1}100%{opacity:0;transform:scale(1.22)}}@keyframes eclipseAlign{0%{transform:translate(-50%,-50%) scale(.62)}70%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(1.08)}}@keyframes introWord{0%,18%{opacity:0;transform:translateY(12px)}42%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-6px)}}@keyframes eclipseExit{0%,72%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(max-width:760px){.raven-layer{object-position:center top}.eclipse-mark{top:25%;width:62vw}.eclipse-intro p{top:55%;font-size:17px}}
@media(prefers-reduced-motion:reduce){.eclipse-intro{display:none!important}}
.eclipse-intro{position:fixed}@keyframes ravenIris{from{clip-path:circle(15% at 56% 50%)}to{clip-path:circle(150% at 56% 50%)}}
.hero.raven-lite .stage,.hero.reduced .stage{transition:transform .09s linear}
@media(prefers-reduced-motion:reduce){.hero .stage{transform:none!important;transition:none!important}}