:root { color-scheme:dark; --progress:0; --flare:0; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#160203; color:#fff8ed; overflow-x:hidden; }
body { font-family:Arial,Helvetica,sans-serif; }
.journey { position:relative; height:520vh; }
.stage { position:sticky; inset:0; height:100svh; overflow:hidden; isolation:isolate; background:#160203; }
#sequence,#atmosphere { position:absolute; inset:0; width:100%; height:100%; display:block; }
#sequence { z-index:0; }
#atmosphere { z-index:3; pointer-events:none; mix-blend-mode:screen; opacity:calc(.28 + var(--flare) * .3); }
.portal-light { position:absolute; z-index:2; left:50%; top:50%; width:38vmin; aspect-ratio:.5; transform:translate(-50%,-50%) scale(calc(.55 + var(--flare) * 2.4)); background:radial-gradient(ellipse,rgba(255,246,216,calc(var(--flare) * .8)) 0%,rgba(255,184,112,calc(var(--flare) * .28)) 30%,transparent 72%); filter:blur(calc(12px + var(--flare) * 22px)); mix-blend-mode:screen; pointer-events:none; }
.lens { position:absolute; z-index:4; inset:-2px; pointer-events:none; background:radial-gradient(circle at 50% 50%,transparent 28%,rgba(18,0,2,.12) 62%,rgba(10,0,1,.68) 116%),linear-gradient(90deg,rgba(110,0,8,.12),transparent 16%,transparent 84%,rgba(110,0,8,.12)); }
.grain { position:absolute; z-index:5; inset:-55%; opacity:.055; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain .18s steps(2) infinite; mix-blend-mode:soft-light; }
@keyframes grain { 0%{transform:translate3d(-1.5%,1%,0)} 33%{transform:translate3d(1%,-1.5%,0)} 66%{transform:translate3d(.5%,1.5%,0)} 100%{transform:translate3d(-1%,0,0)} }
.opening { position:absolute; z-index:6; left:50%; bottom:34px; display:flex; flex-direction:column; align-items:center; gap:12px; transform:translateX(-50%); font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:calc(1 - min(1,var(--progress) * 14)); }
.opening i { display:block; width:1px; height:42px; background:linear-gradient(#fff8ed,transparent); animation:breathe 1.8s ease-in-out infinite; transform-origin:top; }
@keyframes breathe { 0%,100%{transform:scaleY(.35);opacity:.45} 50%{transform:scaleY(1);opacity:1} }
.arrival { position:absolute; z-index:6; inset:0; display:grid; place-items:center; pointer-events:none; opacity:clamp(0,calc((var(--progress) - .86) * 8),1); transform:scale(calc(1.08 - var(--progress) * .08)); filter:blur(calc((1 - var(--progress)) * 8px)); }
.arrival span { font-size:clamp(38px,7vw,108px); font-weight:600; letter-spacing:.22em; text-indent:.22em; color:#fffaf0; text-shadow:0 2px 26px rgba(65,25,6,.45); }
.sound { position:absolute; z-index:8; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:9px; appearance:none; border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:10px 13px; background:rgba(12,0,1,.18); backdrop-filter:blur(12px); color:#fff8ed; font:500 10px/1 Arial,sans-serif; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.sound i { width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55; }
.sound[aria-pressed="true"] i { opacity:1; box-shadow:0 0 12px #fff1c5; animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50%{transform:scale(.55)} }
@media (max-width:700px) { .journey{height:440vh}.arrival span{font-size:clamp(32px,12vw,62px)}.portal-light{width:52vmin}.sound span{display:none}.sound{padding:11px}.opening{bottom:24px} }
@media (prefers-reduced-motion:reduce) { .journey{height:100svh}.grain,.opening i,.sound i{animation:none}.opening{display:none}.arrival{opacity:1;transform:none;filter:none}.portal-light{display:none} }