/* Two authentic films, one reversible journey. No synthetic tunnel or color wash. */
:root{--portal-nav:1}.portal-pending{--portal-nav:0}.portal-pending:not(.portal-ready) .site-header{visibility:hidden}
.has-portal .site-header{position:fixed;left:50%;translate:-50% calc((1 - var(--portal-nav))*-14px);top:12px;margin:0;background:#0b0713de;backdrop-filter:blur(18px);opacity:var(--portal-nav);visibility:visible;z-index:100;pointer-events:none}.has-portal .site-header:not([inert]){pointer-events:auto}.has-portal main{overflow-anchor:none}.has-portal .stars{top:100svh}
.portal-journey{position:relative;isolation:isolate;background:#08060f;overflow-anchor:none}.portal-pin{position:relative;height:100svh;width:100%;overflow:hidden;isolation:isolate;background:#08060f}.portal-screen{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#08060f;z-index:1}.portal-backfill{position:absolute;inset:-10%;background:url('/assets/portal/wizzy-portal-poster.webp') center/cover;filter:blur(28px);opacity:.45}.portal-film,.journey-film{position:absolute;inset:0;transform-origin:50% 47%;will-change:transform,opacity}.portal-film{background:url('/assets/portal/wizzy-portal-poster.webp') center/cover no-repeat}.portal-film video,.journey-film video{display:block;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none}.portal-film video{opacity:0;transition:opacity .5s}.gateway-playing .portal-film video{opacity:1}.journey-film{opacity:0}.journey-film video{opacity:0}.journey-loaded .journey-film video{opacity:1}
.portal-arrival{position:absolute;inset:0;z-index:6;visibility:hidden;opacity:0;background:#08060f}.portal-arrival .opening-track{height:100%!important}.portal-arrival #hero{position:relative!important;top:0!important;height:100svh!important;min-height:0!important;padding-top:100px;padding-bottom:55px;transform:none!important}.portal-arrival .hero-copy{opacity:1!important}.portal-arrival .scene-cue,.portal-arrival .scene-edge{display:none}.portal-arrival .hero-copy>*{animation:none}.portal-arrival h1 .kinetic-word{transition:none;filter:none!important}.portal-arrival .hero h1{font-size:clamp(68px,6.7vw,104px)}.portal-arrival .portal-stage{height:min(590px,68svh);transform:translate3d(var(--arrival-hover-x,0px),var(--arrival-hover-y,0px),0)!important;transition:transform .3s ease-out}.portal-arrival .hero .floating-portrait{will-change:auto}.portal-arrival .hero .portrait-chicken{top:53%}.portal-arrival .world-backdrop{transform:none!important}
.portal-hud{position:absolute;inset:auto 44px 34px;z-index:10;display:flex;align-items:end;gap:24px;color:#e9d9f8;pointer-events:none;text-shadow:0 1px 12px #000}.portal-hud a{pointer-events:auto}.portal-phase{font:8px 'JetBrains Mono',monospace;letter-spacing:1.8px;opacity:.7}.portal-enter{position:absolute;left:50%;translate:-50% 0;display:flex;align-items:center;gap:16px;font:10px 'JetBrains Mono',monospace;letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;bottom:2px;padding:12px 8px}.portal-enter>span:last-child{font-size:19px}.portal-scroll-mark{height:28px;width:16px;border:1px solid #e5cfff7a;border-radius:20px;position:relative}.portal-scroll-mark:after{content:'';position:absolute;left:6px;top:6px;width:2px;height:5px;background:#e5cfff;animation:portal-scroll-dot 1.8s ease-in-out infinite}
.portal-controls{position:absolute;inset:28px 32px auto;z-index:110;display:flex;justify-content:space-between;gap:20px;pointer-events:none}.portal-controls>*{pointer-events:auto}.portal-menu,.portal-skip{display:inline-flex;align-items:center;gap:12px;border:1px solid #d0b4e329;border-radius:30px;background:#08050c66;backdrop-filter:blur(8px);padding:11px 17px;color:#eadcf4;font:11px 'Space Grotesk',sans-serif;cursor:pointer;line-height:1.2}.portal-menu:hover,.portal-skip:hover{background:#1a0e27c9;border-color:#c9a9e18c;color:white}.portal-nav-open .portal-controls{inset:106px 32px auto}.portal-enter:focus-visible,.portal-controls>*:focus-visible{outline:2px solid #ead5ff;outline-offset:5px}.portal-controls>*:active{transform:translateY(1px)}.portal-play{position:absolute;left:50%;bottom:110px;translate:-50% 0;z-index:15;cursor:pointer;background:#160b26c9}.portal-play[hidden]{display:none}.portal-status{position:absolute;left:50%;bottom:108px;translate:-50% 0;z-index:15;font:10px 'JetBrains Mono';color:#e2d2ed;text-shadow:0 1px 9px #000;max-width:80%;text-align:center}
.portal-journey[data-mode="static"] .journey-film,.portal-journey[data-mode="fallback"] .journey-film{display:none}.portal-journey[data-mode="static"] .portal-film video{display:none}.portal-journey[data-mode="static"] .portal-scroll-mark:after{animation:none}
@keyframes portal-scroll-dot{0%,100%{translate:0 0;opacity:.4}50%{translate:0 7px;opacity:1}}
@media(max-width:1100px){.portal-arrival .hero h1{font-size:76px}.portal-arrival .hero .portal-stage{height:510px}}
@media(max-width:899px),(max-height:699px){.has-portal .opening-track{height:auto!important}.has-portal .opening-track #hero{position:relative!important;top:auto!important}.has-portal .hero .hero-copy{transform:none!important;opacity:1!important}.portal-phase{display:none}.portal-hud{bottom:40px;inset-inline:24px}.portal-enter{font-size:9px;letter-spacing:1.4px;gap:12px}.portal-controls{inset:24px 20px auto}.portal-menu,.portal-skip{font-size:11px;padding:11px 15px}.portal-backfill{opacity:.5}.portal-nav-open .portal-controls{inset:130px 20px auto}}
@media(max-width:800px){.has-portal .site-header{left:0;translate:0 calc((1 - var(--portal-nav))*-14px);top:0;background:#090610ee}.portal-film{background-size:auto 50svh;mask-image:linear-gradient(transparent 22%,#000 29%,#000 71%,transparent 78%)}.portal-film video{position:absolute;left:50%;top:50%;width:auto;height:50svh;max-width:none;transform:translate(-50%,-50%);object-fit:contain}.journey-film video{object-fit:cover}.portal-status{font-size:9px}.portal-scroll-mark{width:14px;height:25px}.portal-scroll-mark:after{left:5px}}
@media(prefers-reduced-motion:reduce){.portal-film{will-change:auto;transform:none!important}.portal-film video{display:none}.journey-film{display:none!important}.portal-scroll-mark:after{animation:none}.portal-arrival{display:none}.portal-journey{height:auto!important}.has-portal .opening-track{height:auto!important}.has-portal .opening-track #hero{position:relative!important;top:auto!important}}

.portal-journey:not(.journey-loaded) .portal-film{opacity:1!important}
/* The controls stay clear of both the portal crown and the returning main header. */
.portal-controls,.portal-nav-open .portal-controls{inset:auto 32px 84px}
@media(max-width:899px),(max-height:699px){.portal-controls,.portal-nav-open .portal-controls{inset:auto 20px 92px}}

@media(max-width:800px){.journey-film{mask-image:linear-gradient(transparent 22%,#000 29%,#000 71%,transparent 78%);transform-origin:50% 50%}.journey-film video{position:absolute;left:50%;top:50%;width:auto;height:50svh;max-width:none;transform:translate(-50%,-50%);object-fit:contain}}

@media(max-width:899px){.portal-pin{height:100svh!important}.has-portal .site-header{backdrop-filter:none}.has-portal .world-backdrop,.has-portal .orbit,.has-portal .floating-portrait{animation:none!important}.has-portal .motion-reveal,.has-portal .chapter-entrance{transform:none!important;filter:none!important;opacity:1!important;clip-path:none!important;transition:none!important}.has-portal .kinetic-word{filter:none!important}.has-portal .magic-control{backdrop-filter:none}.has-portal .spotlight-art{transform:none!important}}

/* Matching projection at the handoff: both frames share size and center. */
.portal-film,.journey-film{transform-origin:50% 50%}

.portal-intro-brand,.portal-tagline{display:none}
@media(max-width:800px){
 .portal-film,.journey-film{-webkit-mask-image:linear-gradient(transparent 25%,#000 27.5%,#000 66%,transparent 75%);mask-image:linear-gradient(transparent 25%,#000 27.5%,#000 66%,transparent 75%)}
 .portal-backfill{inset:-8%;background-position:center;filter:blur(34px);opacity:.6;transform:scale(1.06)}
 .portal-intro-brand{display:flex;position:absolute;z-index:8;top:6svh;left:50%;translate:-50% 0;align-items:center;flex-direction:column;gap:9px;pointer-events:none}
 .portal-intro-brand .brand-wordmark{width:clamp(210px,65vw,310px)}
 .portal-hq{font:14px 'Space Grotesk',sans-serif;letter-spacing:6px;padding:5px 18px 5px 24px;color:#f0dfff;border:1px solid #b382d65c;border-radius:10px;box-shadow:0 0 18px #a155d51c}
 .portal-tagline{display:block;position:absolute;z-index:8;left:0;right:0;top:76svh;text-align:center;margin:0;padding:0 15px;color:#e6d7f1;font:12px 'Space Grotesk',sans-serif;letter-spacing:2px;pointer-events:none}
}
@media(max-width:800px){.portal-intro-brand>*{animation:portal-brand-arrival 5s ease-out both}}
@keyframes portal-brand-arrival{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.portal-intro-brand>*{animation:none}}

@media(max-width:800px){
 .portal-backfill{inset:0;background-image:url('/assets/portal/wizzy-mobile-world.webp');background-size:cover;background-position:50% 50%;filter:none;opacity:1;transform:none}
 .portal-film,.journey-film{-webkit-mask-image:linear-gradient(transparent 25%,#000 30%,#000 65%,transparent 75%);mask-image:linear-gradient(transparent 25%,#000 30%,#000 65%,transparent 75%)}
 .portal-intro-brand .brand-wordmark{mix-blend-mode:normal}
}

/* The projection owns the camera. Its two films and fallback share pixel geometry. */
.portal-projection{position:absolute;inset:0;transform-origin:49.3% 44.8%;will-change:transform}
@media(min-width:900px){
 .portal-backfill{inset:-8%;background-image:linear-gradient(#08040c66,#09051088),url('/assets/portal/wizzy-atmosphere.webp');background-position:center;background-size:cover;filter:blur(28px);opacity:1;transform:none}
 .portal-projection{inset:auto;left:50%;top:18svh;translate:-50% 0;width:min(94vw,145.778svh);aspect-ratio:16/9;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
 .portal-film,.journey-film{transform-origin:49.3% 44.8%;mask-image:linear-gradient(transparent,#000 7%,#000 89%,transparent),radial-gradient(ellipse 25% 16% at 49.3% 9%,#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(transparent,#000 7%,#000 89%,transparent),radial-gradient(ellipse 25% 16% at 49.3% 9%,#000 55%,transparent 100%)}
 .portal-film{background-size:100% 100%}
 .portal-film video,.journey-film video{object-fit:contain;object-position:center}
 .portal-intro-brand{display:flex;position:absolute;z-index:8;top:2.2svh;left:50%;translate:-50% 0;align-items:center;flex-direction:column;gap:clamp(4px,.8svh,9px);pointer-events:none}
 .portal-intro-brand .brand-wordmark{width:clamp(220px,31svh,340px);mix-blend-mode:normal}
 .portal-hq{font:clamp(11px,1.45svh,15px) 'Space Grotesk',sans-serif;letter-spacing:5px;padding:4px 16px 4px 21px;color:#f0dfff;border:1px solid #b382d65c;border-radius:9px;box-shadow:0 0 18px #a155d51c}
 .portal-intro-brand>*{animation:portal-brand-arrival 5s ease-out both}
 .portal-tagline{display:block;position:absolute;z-index:8;left:0;right:0;top:15.4svh;margin:0;text-align:center;padding:0 20px;color:#e6d7f1;font:clamp(10px,1.35svh,14px) 'Space Grotesk',sans-serif;letter-spacing:clamp(2px,.3vw,5px);pointer-events:none}
}
@media(min-width:900px) and (max-height:699px){
 .portal-arrival .hero h1{font-size:clamp(45px,10svh,68px)}
 .portal-arrival #hero{padding-top:80px;padding-bottom:24px}
 .portal-arrival .hero .portal-stage{height:70svh}
 .portal-intro-brand .brand-wordmark{width:29svh;min-width:170px}
 .portal-intro-brand{top:1.5svh;gap:3px}
 .portal-tagline{top:15.6svh;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.portal-projection{will-change:auto}.portal-intro-brand>*{animation:none}}
@media(min-width:900px) and (max-height:699px){.portal-arrival .hero .portal-stage{width:min(100%,70svh);justify-self:center}}

.portal-world{display:none}
@media(min-width:900px){
 /* Registration from the shared crown/rune features, background pixels -> film pixels:
    [1.495932, -.001828, -392.811; .001828, 1.495932, -175.859].
    Keep the supplied world's pillars intact; the moving aperture never cuts across them. */
 .portal-projection{--portal-aperture:1;mask-image:none;-webkit-mask-image:none;overflow:visible}
 .portal-world{display:block;position:absolute;left:-20.4589%;top:-16.2833%;width:139.4645%;height:121.7523%;background:url('/assets/portal/wizzy-desktop-world-crisp.webp') center/100% 100% no-repeat;transform:rotate(.070012deg);transform-origin:0 0;mask-image:none;-webkit-mask-image:none}
 .portal-film,.journey-film{mask-image:radial-gradient(ellipse calc(27% * var(--portal-aperture)) calc(44% * var(--portal-aperture)) at 49.3% 43.5%,#000 88%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse calc(27% * var(--portal-aperture)) calc(44% * var(--portal-aperture)) at 49.3% 43.5%,#000 88%,transparent 100%)}
}

/* Crisp, full-bleed environment. Reflected perimeter tiles continue the exact
   edge pixels beyond the registered image, without scaling the portal or
   revealing the old blurred backfill. The central supplied image is untouched. */
.portal-world-edge{display:none}
@media(min-width:900px){
 .portal-backfill{display:none}
 .portal-world{filter:none;opacity:1}
 .portal-world-edge{display:block;position:absolute;inset:0;background:inherit;transform:translate(var(--edge-x),var(--edge-y)) scale(var(--edge-flip-x),var(--edge-flip-y));pointer-events:none}
}
@media(min-width:900px) and (max-aspect-ratio:5/2){
 /* Let the original sharp image itself cover both side edges on standard and
    ultrawide desktop screens; the portal keeps the same shared camera. */
 .portal-projection{width:max(calc((100vw + 8px) / 1.394645),min(94vw,145.778svh))}
}

/* Layout owns centering; GSAP owns only the camera transform. Never mix an
   independent CSS translate with GSAP's cached x/xPercent decomposition. */
@media(min-width:900px){
 .portal-projection{left:0;right:0;margin-inline:auto;translate:none}
 .portal-tagline{top:auto;bottom:92px;text-shadow:0 2px 8px #000,0 0 18px #08060f}
}
@media(min-width:900px) and (max-height:699px){
 .portal-tagline{top:auto;bottom:62px}
 .portal-hud{bottom:13px}
}
.portal-autoplay[aria-busy="true"]{cursor:progress}