@charset "UTF-8";
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#000;color:#f4faff;--reveal:0;--glow:0}
*{box-sizing:border-box}html{scrollbar-width:none;overscroll-behavior:none}html::-webkit-scrollbar{display:none}body{margin:0;background:#000}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #aff6ff;outline-offset:8px}button:disabled{cursor:wait}.journey{height:460svh;min-height:1700px}.stage{position:fixed;inset:0;overflow:hidden;background:#000;isolation:isolate}.film{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;display:block;z-index:1}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 78%,#05205a 0%,#01040d 42%,#000 75%);opacity:var(--glow);transition:opacity .3s;z-index:0}.curtain{position:absolute;inset:0;background:#000;opacity:calc(1 - var(--reveal));pointer-events:none;z-index:2}.scroll-cue{position:absolute;bottom:max(36px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:3;border:0;background:none;color:#87a5b9;padding:14px;opacity:0;animation:cue-appear 1.4s 1.3s forwards;transition:visibility .3s;touch-action:manipulation}.scroll-cue.gone{display:none}.cue-dot{animation:cue-move 1.8s ease-in-out infinite}.invitation{position:absolute;z-index:4;left:50%;bottom:max(9svh,40px);transform:translate(-50%,24px);opacity:0;visibility:hidden;transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),visibility 1.1s;white-space:nowrap}.invitation.visible{opacity:1;transform:translate(-50%,0);visibility:visible}.button-aura{position:absolute;inset:-35px -70px;background:radial-gradient(ellipse,#047fff50,transparent 68%);filter:blur(16px);pointer-events:none;animation:breathe 3s ease-in-out infinite}.enter-button{border:0;padding:1.5px;border-radius:100px;color:#effbff;background:linear-gradient(110deg,#008aff,#c5ffff 38%,#42bfff 55%,#0362e9);box-shadow:0 0 12px #19a9ff88,0 0 38px #0573ff44,0 12px 65px #003ba04d;position:relative;transition:transform .25s,box-shadow .25s;min-width:260px;overflow:hidden}.enter-button:before{content:"";position:absolute;width:60px;height:180%;background:linear-gradient(90deg,transparent,#e0ffffbb,transparent);transform:rotate(25deg);top:-40%;left:-40%;animation:shine 5s ease-in-out infinite;pointer-events:none}.button-surface{position:relative;display:flex;align-items:center;justify-content:center;gap:28px;padding:22px 30px;border-radius:inherit;background:linear-gradient(180deg,#0b2963e8,#051129f5);font-size:16px;font-weight:500;letter-spacing:.025em;box-shadow:inset 0 1px 14px #70d4ff1a}.button-surface svg{transition:transform .25s}.enter-button:hover{transform:translateY(-3px);box-shadow:0 0 20px #39bfffaa,0 0 64px #0573ff77,0 15px 70px #003ba070}.enter-button:hover svg{transform:translateX(4px)}.enter-button:active{transform:translateY(0) scale(.98)}.error{position:absolute;z-index:6;inset:0;align-content:center;text-align:center;background:#020611;color:#d7e7f5}.error[hidden]{display:none}.retry,.return-button{border:1px solid #2875b8;background:#081b35;color:#e3f5ff;border-radius:24px;padding:12px 22px;font-size:16px}.preview-dialog{border:1px solid #173458;border-radius:24px;background:#030b1b;color:#ddebff;max-width:calc(100% - 40px);padding:48px 32px 32px;box-shadow:0 0 80px #0375ff26;text-align:center}.preview-dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}.preview-dialog p{font-size:18px;margin:0 0 24px}.close-dialog{position:absolute;right:12px;top:8px;background:none;border:0;color:#93b5d2;font-size:28px;width:36px;height:36px}.stage.entering{animation:entry-flash .6s forwards}
@keyframes cue-appear{to{opacity:.55}}@keyframes cue-move{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(4px);opacity:1}}@keyframes breathe{50%{opacity:.55;transform:scale(.9)}}@keyframes shine{0%,65%{left:-40%}90%,100%{left:140%}}@keyframes entry-flash{to{opacity:0;filter:blur(10px)}}
@media(max-width:700px){.journey{height:390svh;min-height:1400px}.film{height:78%;top:4%}.invitation{bottom:max(18svh,56px)}.button-surface{padding:20px 26px}.enter-button{min-width:250px}.scroll-cue{bottom:8svh}.ambient{background:radial-gradient(ellipse at 50% 51%,#041335 0%,#01040d 35%,#000 70%)}}
@media(prefers-reduced-motion:reduce){.journey{height:100svh;min-height:0}.scroll-cue{display:none}.invitation,.ambient{transition:none}.button-aura,.enter-button:before,.cue-dot{animation:none}.enter-button,.button-surface svg{transition:none}}
/* Fullscreen film: playback is automatic; scrolling never seeks the video. */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.journey{height:100svh;min-height:0}
.stage{height:100svh}
.film{width:100%;height:100%;inset:0;object-fit:cover;transform:scale(1);transform-origin:center}
.curtain{opacity:1;transition:opacity .7s ease}
.stage.ready .curtain{opacity:0}
.ambient{opacity:0}
.video-fill{display:none;position:absolute;inset:-4%;width:108%;height:108%;filter:blur(28px) brightness(.45);z-index:0}
.living-light{position:absolute;inset:-15%;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(ellipse at 40% 40%,#0b90e326,transparent 38%),radial-gradient(ellipse at 70% 60%,#0090ff20,transparent 40%);mix-blend-mode:screen;transition:opacity 2s}
.particles{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:0;transition:opacity 2s}
.stage.finished .living-light,.stage.finished .particles{opacity:1}
.stage.finished .living-light{animation:light-drift 11s ease-in-out infinite alternate}
.stage.finished .film{animation:film-drift 16s ease-in-out infinite alternate}
.invitation{bottom:max(8svh,28px)}
.play-button{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:76px;height:76px;border-radius:50%;border:1px solid #62bdff77;background:#031b38b8;color:#b9efff;box-shadow:0 0 50px #047aff44;display:grid;place-items:center}
.play-button[hidden]{display:none}
@keyframes light-drift{0%{transform:translate(-2%,-1%);filter:brightness(.65)}100%{transform:translate(3%,2%);filter:brightness(1.3)}}
@keyframes film-drift{from{transform:scale(1)}to{transform:scale(1.035) translateY(-.35%)}}
@media(orientation:portrait){.video-fill{display:block}.film{object-fit:contain;width:130%;left:-15%;height:100%;top:-8%;mask-image:linear-gradient(transparent 12%,#000 30%,#000 66%,transparent 86%)}.invitation{bottom:max(16svh,42px)}}
@media(prefers-reduced-motion:reduce){.stage.finished .film,.stage.finished .living-light{animation:none}.living-light,.particles{display:none}.curtain{transition:none}}
@media(orientation:portrait){.film{height:73.125vw;top:calc(42svh - 36.5625vw);object-fit:cover;mask-image:linear-gradient(transparent 0%,#000 14%,#000 84%,transparent 100%)}}
/* Continue the halo before the source film ends, then lift the opening as one panel. */
.journey{position:fixed;inset:0;z-index:50;background:#000;transform:translateY(0);transition:transform 1.35s cubic-bezier(.76,0,.24,1);box-shadow:0 18px 80px #000a;will-change:transform}
.journey.lifting{transform:translateY(-102%);pointer-events:none}
.stage.living .particles,.stage.living .living-light{opacity:1;transition:opacity .25s linear}
.stage.living .living-light{animation:light-drift 7s ease-in-out infinite alternate}
.stage.living .film{animation:film-drift 13s ease-in-out infinite alternate}
.invitation{transition:opacity .55s ease,transform .75s cubic-bezier(.2,.7,.2,1),visibility .55s}
@media(prefers-reduced-motion:reduce){.journey{transition:none}.stage.living .film,.stage.living .living-light{animation:none}}

/* Continuous handoff: only composite opacity, without a cut or a heavy blur. */
.journey{opacity:1;box-shadow:none;transition:opacity 1.85s cubic-bezier(.4,0,.2,1);will-change:opacity}
.journey.blending{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.journey{transition:none}}
