.scene{height:700svh;position:relative}.scene-stage{background:var(--color-night-950);height:100svh;color:var(--color-night-ink);position:sticky;top:0;overflow:hidden}.scene-layer{position:absolute;inset:0}.scene-bg{transform:scale(calc(1.08 - .06 * var(--p)));transform-origin:50% 80%}.scene-photo,.scene-photo-lit{object-fit:cover;object-position:50% 72%;width:100%;height:100%;position:absolute;inset:0}.scene-photo{filter:brightness(.36)saturate(.5)contrast(1.15)}.scene-photo-lit{contain:paint;will-change:opacity;filter:brightness(1.05)saturate(.45)contrast(1.05);opacity:calc(var(--beam) * .9);-webkit-mask-image:radial-gradient(var(--lit-rx) 190px at var(--x) 84%, black 0%, #0000008c 45%, transparent 100%);mask-image:radial-gradient(var(--lit-rx) 190px at var(--x) 84%, black 0%, #0000008c 45%, transparent 100%)}.scene-tint{background:var(--color-night-900);mix-blend-mode:color;opacity:.55}.scene-vignette{background:linear-gradient(180deg, color-mix(in srgb, var(--color-night-950) 94%, transparent) 0%, color-mix(in srgb, var(--color-night-950) 82%, transparent) 34%, color-mix(in srgb, var(--color-night-900) 38%, transparent) 58%, color-mix(in srgb, var(--color-night-950) 25%, transparent) 78%, color-mix(in srgb, var(--color-night-950) 70%, transparent) 100%)}.scene-headline{text-align:center;width:min(900px,100% - 48px);opacity:var(--headline);transform:translate(-50%, -50%) translateY(calc((1 - var(--headline)) * -30px));position:absolute;top:50%;left:50%}.scene-anchor{left:var(--x);width:0;height:0;position:absolute;top:24%}.scene-beam,.scene-beam-glow{will-change:transform, opacity;height:74svh;transform:translateX(-50%) scaleY(max(.001, var(--beam)));transform-origin:50% 0;opacity:min(1, calc(var(--beam) * 1.3));position:absolute;top:-2px;left:0}.scene-beam{width:var(--beam-w);clip-path:polygon(calc(50% - 15px) 0,calc(50% + 15px) 0,100% 100%,0 100%);background:linear-gradient(180deg, #fffffff5 0%, var(--color-beam-light) 10%, color-mix(in srgb, var(--color-primary-soft) 32%, transparent) 58%, color-mix(in srgb, var(--color-primary-soft) 4%, transparent) 100%);mix-blend-mode:screen}.scene-beam-glow{width:calc(var(--beam-w) * 1.5 + 80px);clip-path:polygon(calc(50% - 40px) 0,calc(50% + 40px) 0,100% 100%,0 100%);background:linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-primary-soft) 35%, transparent) 12%, color-mix(in srgb, var(--color-primary-soft) 14%, transparent) 60%, transparent 100%);filter:blur(14px)}.scene-craft{will-change:transform, opacity;transform-origin:95px 148px;width:190px;max-width:none;height:190px;opacity:var(--arrival);transform:translateY(calc((1 - var(--arrival)) * -70px)) scale(calc(.55 + .45 * var(--arrival)));filter:brightness(0) invert(1) drop-shadow(0 0 18px color-mix(in srgb, var(--color-primary-soft) 95%, transparent)) drop-shadow(0 0 54px color-mix(in srgb, var(--color-primary) 60%, transparent));position:absolute;top:-148px;left:-95px}.scene-pool{left:var(--x);background:radial-gradient(closest-side, color-mix(in srgb, var(--color-beam-light) 42%, transparent), color-mix(in srgb, var(--color-primary-soft) 18%, transparent) 55%, transparent 100%);mix-blend-mode:screen;width:900px;height:170px;opacity:calc(var(--beam) * (.5 + .5 * var(--spread)));transform:translateX(-50%) scaleX(calc(.2 + .8 * var(--spread) + 2 * var(--outro)));border-radius:50%;position:absolute;bottom:3%}.scene-intro{left:var(--intro-x);text-align:center;width:min(460px,100% - 32px);opacity:var(--intro);transform:translate(-50%, calc((1 - var(--intro)) * 20px));position:absolute;top:46%}.scene-outro{text-align:center;width:min(820px,100% - 48px);opacity:var(--outro);transform:translate(-50%, calc((1 - var(--outro)) * 20px));position:absolute;top:42%;left:50%}.scene-card{box-sizing:border-box;border-radius:var(--radius-lg);background:var(--color-canvas);width:min(480px,100% - 32px);color:var(--color-ink);box-shadow:var(--shadow-beam);pointer-events:none;flex-direction:column;gap:12px;padding:26px;display:flex;position:absolute;top:34%}.scene-card[data-card="1"]{left:var(--stop1);opacity:var(--c1);transform:translate(-50%, calc((1 - var(--c1)) * 28px))}.scene-card[data-card="2"]{left:var(--stop2);opacity:var(--c2);transform:translate(-50%, calc((1 - var(--c2)) * 28px))}.scene-card[data-card="3"]{left:var(--stop3);opacity:var(--c3);transform:translate(-50%, calc((1 - var(--c3)) * 28px))}[data-active="1"] .scene-card[data-card="1"],[data-active="2"] .scene-card[data-card="2"],[data-active="3"] .scene-card[data-card="3"]{pointer-events:auto}.scene-stations{height:24px;opacity:calc(var(--beam) * (1 - var(--outro)));position:absolute;inset:auto 0 3%}.scene-station{white-space:nowrap;color:color-mix(in srgb, var(--color-night-ink) 82%, transparent);text-shadow:0 1px 8px var(--color-night-950);align-items:center;gap:8px;display:flex;position:absolute;transform:translate(-50%)}.scene-station:before{content:"";background:color-mix(in srgb, var(--color-night-ink) 40%, transparent);border-radius:50%;width:6px;height:6px}.scene-station[data-station="1"]{left:var(--stop1)}.scene-station[data-station="2"]{left:var(--stop2)}.scene-station[data-station="3"]{left:var(--stop3)}[data-active="1"] .scene-station[data-station="1"],[data-active="2"] .scene-station[data-station="2"],[data-active="3"] .scene-station[data-station="3"]{color:var(--color-night-ink)}[data-active="1"] .scene-station[data-station="1"]:before,[data-active="2"] .scene-station[data-station="2"]:before,[data-active="3"] .scene-station[data-station="3"]:before{background:var(--color-primary-soft)}.scene-hint{opacity:var(--headline);flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;bottom:6%;left:50%;transform:translate(-50%)}@media (prefers-reduced-motion:reduce){.scene{height:auto}.scene-stage{height:auto;min-height:100svh;padding-bottom:96px;position:relative}.scene-cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;max-width:1200px;margin:78svh auto 0;padding-inline:24px;display:grid;position:relative}.scene-card[data-card]{opacity:1;pointer-events:auto;width:auto;position:static;transform:none}.scene-intro,.scene-outro,.scene-stations,.scene-hint{display:none}}@media (max-width:899px){.scene-stations{display:none}}
