/* Motion is concentrated in the illustrations; poster typography remains untouched. */
.opening{background:radial-gradient(ellipse at 15% 60%,#98120588,transparent 50%),radial-gradient(ellipse at 85% 55%,#68733299,transparent 48%),#080807}
.intro{margin:28px 0 30px}.intro h1{font-size:clamp(42px,5.4vw,82px)}
.living-poster{position:absolute;inset:0;pointer-events:none;overflow:hidden;isolation:isolate}
.fragment{position:absolute;aspect-ratio:1;background-repeat:no-repeat;display:block;will-change:transform;mask-image:radial-gradient(circle,#000 63%,transparent 71%);transform:translateZ(0)}
.iris{animation:irisSpin 28s linear infinite;filter:saturate(1.5) contrast(1.05)}
.green .iris{animation-direction:reverse;animation-duration:36s}
.planet{animation:planetTurn 18s linear infinite;filter:drop-shadow(0 0 6px #df8b34)}
.radial{animation:radialTurn 22s linear infinite;mask-image:radial-gradient(circle,#000 66%,transparent 71%)}
.heart{mask-image:none;clip-path:polygon(3% 15%,13% 3%,31% 0,48% 7%,67% 0,90% 5%,99% 22%,97% 48%,78% 75%,54% 96%,25% 79%,8% 51%);animation:heartBeat 2.1s ease-in-out infinite;transform-origin:50% 60%}
.speaker{animation:speakerBeat 1.6s ease-in-out infinite;mask-image:radial-gradient(circle,#000 64%,transparent 70%)}
.small-speaker{animation-delay:-.2s}
.ember{animation:emberPulse 3s ease-in-out infinite}
.chromatic-mist{position:absolute;left:3%;right:3%;top:24%;height:40%;mix-blend-mode:color-dodge;opacity:.38;background:conic-gradient(from 0deg at 40% 50%,transparent,#08b5ba55,transparent,#eb3a1655,transparent,#c7a23355,transparent);background-size:180% 180%;mask-image:radial-gradient(ellipse,#000 20%,transparent 70%);animation:mistDrift 9s ease-in-out infinite alternate}
.green .chromatic-mist{animation-delay:-4s}
.cosmic-spark{position:absolute;left:var(--x);top:var(--y);height:3px;width:3px;background:#ffe6a6;border-radius:50%;box-shadow:0 0 8px 2px #e6c46a;animation:cosmicFloat var(--duration) var(--delay) ease-in-out infinite}
.pointer-lens{position:absolute;inset:23% 3% 35%;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#51f2da66,transparent 28%);mix-blend-mode:screen;transition:opacity .4s}
.portal:hover .pointer-lens{opacity:.65}.portal .shine{display:none}
.bridge{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse,#17413e66,transparent 65%),linear-gradient(100deg,#4b110d,#151d0c)}
.bridge>div:not(.vortex),.bridge>span{position:relative;z-index:2}
.vortex{position:absolute!important;inset:-150px 0;z-index:-1;perspective:500px;opacity:.65;pointer-events:none}
.vortex i{position:absolute;left:50%;top:50%;width:260px;height:260px;border:1px solid #c7aa6399;border-radius:50%;box-shadow:0 0 20px #42aba122;animation:vortexFlow 10s linear infinite;animation-delay:calc(var(--n)*-1s)}
.wide-art .light{background:linear-gradient(115deg,transparent 20%,#47d3c34d 42%,transparent 54%,#dc662a44 65%,transparent 75%);background-size:220% 100%;animation:bannerLight 8s ease-in-out infinite}
.buy{position:relative;overflow:hidden}.buy:after{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#fff3,transparent 65%);transform:translateX(-110%);animation:ticketShine 7s ease-in-out infinite;pointer-events:none}
.controls button{font-size:12px;min-height:40px}
.chapter h2 span{color:#d5714f}.green.chapter h2 span{color:#b4be7b}
.opening-top,.opening-bottom,.chapter-top,.portal-caption{font-size:12px}
@keyframes irisSpin{to{transform:rotate(360deg)}}
@keyframes radialTurn{to{transform:rotate(-360deg)}}
@keyframes planetTurn{50%{transform:rotate(180deg) scale(1.04)}100%{transform:rotate(360deg)}}
@keyframes heartBeat{0%,45%,100%{transform:scale(1);filter:brightness(1)}15%{transform:scale(1.08);filter:brightness(1.25) drop-shadow(0 0 9px #ecb73e)}28%{transform:scale(1.015)}35%{transform:scale(1.05);filter:brightness(1.15)}}
@keyframes speakerBeat{0%,100%{transform:scale(1);filter:brightness(1)}40%{transform:scale(1.055);filter:brightness(1.22)}60%{transform:scale(1.01)}}
@keyframes emberPulse{50%{filter:brightness(1.6) drop-shadow(0 0 12px #ff7237);transform:scale(1.08)}}
@keyframes mistDrift{0%{background-position:0 20%;filter:hue-rotate(-20deg)}100%{background-position:100% 70%;filter:hue-rotate(55deg)}}
@keyframes cosmicFloat{0%,100%{opacity:.1;transform:translateY(8px) scale(.6)}50%{opacity:.8;transform:translateY(-9px) scale(1.3)}}
@keyframes vortexFlow{0%{transform:translate(-50%,-50%) rotateX(55deg) rotateZ(0) scale(.1);opacity:0}20%{opacity:.8}100%{transform:translate(-50%,-50%) rotateX(55deg) rotateZ(130deg) scale(5);opacity:0}}
@keyframes bannerLight{0%,100%{background-position:100% 0;opacity:.3}50%{background-position:0 0;opacity:.65}}
@keyframes ticketShine{0%,70%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.offscreen *{animation-play-state:paused!important}
.shooting-star{position:absolute;left:-25%;top:var(--star-y);width:20%;height:2px;background:linear-gradient(90deg,transparent,#9cf3ee,#fff7d9);border-radius:100%;filter:drop-shadow(0 0 4px #a3fff2);transform:rotate(-22deg);opacity:0;animation:shootAcross var(--star-period) var(--star-delay) linear infinite}
.shooting-star:after{content:'';position:absolute;right:0;top:-2px;width:5px;height:5px;background:#fff6cf;border-radius:50%;box-shadow:0 0 12px #c1faff}
.cosmic-blink{position:absolute;left:6%;top:25%;width:37%;aspect-ratio:1;z-index:4;border-radius:50%;overflow:hidden;mask-image:radial-gradient(circle,#000 58%,transparent 71%)}
.green .cosmic-blink{left:12%;top:19.5%;width:36%}
.cosmic-blink:before,.cosmic-blink:after{content:'';position:absolute;left:0;width:100%;height:52%;background:linear-gradient(#071713,#163832);transform:scaleY(0)}
.cosmic-blink:before{top:0;transform-origin:top;border-bottom:2px solid #639e91}.cosmic-blink:after{bottom:0;transform-origin:bottom;border-top:1px solid #436d63}
.blinking:before,.blinking:after{animation:eyeClose .72s ease-in-out 1}
@keyframes eyeClose{0%,100%{transform:scaleY(0)}35%,48%{transform:scaleY(1)}}
@keyframes shootAcross{0%,5%{opacity:0;transform:translate(0,0) rotate(-22deg)}6%{opacity:.85}15%{opacity:.85}19%{opacity:0;transform:translate(650%,-100px) rotate(-22deg)}100%{opacity:0;transform:translate(650%,-100px) rotate(-22deg)}}
@media(prefers-reduced-motion:reduce){.shooting-star,.cosmic-blink{display:none}}
.portal{animation-duration:4.5s}.iris{animation-duration:18s}.green .iris{animation-duration:23s}.radial{animation-duration:12s}.planet{animation-duration:11s}
.living-poster:before,.living-poster:after{content:'';position:absolute;top:27%;left:10%;width:38%;aspect-ratio:1;border:1px solid #85ebe499;border-radius:50%;box-shadow:0 0 12px #72e9de33;animation:signalExpand 4s ease-out infinite;pointer-events:none}
.living-poster:after{animation-delay:-2s;border-color:#e4bc6999}.green .living-poster:before,.green .living-poster:after{left:12%;top:20%}
.chromatic-mist{animation-duration:5s;opacity:.5}.cosmic-spark{box-shadow:0 0 12px 3px #e6c46a}.vortex i{animation-duration:7s}
.portal-caption i{display:inline-block;animation:guideBounce 1.6s ease-in-out infinite}
.bridge h2{animation:titleGlow 5s ease-in-out infinite}.audio-beat .portal{box-shadow:0 25px 75px color-mix(in srgb,var(--accent) 50%,transparent)}
@keyframes signalExpand{0%{transform:scale(.2) rotateX(45deg);opacity:0}25%{opacity:.65}100%{transform:scale(1.65) rotateX(65deg) rotateZ(75deg);opacity:0}}
@keyframes guideBounce{50%{transform:translateY(6px)}}
@keyframes titleGlow{50%{text-shadow:3px 0 18px #51c3b066,-3px 0 25px #e9774466}}
@media(max-width:750px){.intro h1{font-size:clamp(42px,10.7vw,78px)}.intro{margin-top:28px}.controls button{font-size:10px}.chapter-top{font-size:10px}.opening-top{font-size:10px}.portal-caption{font-size:11px}.vortex{opacity:.4}.wide-art img{width:100%;margin-left:0}.chapter h2{font-size:clamp(62px,17vw,100px)}}
@media(prefers-reduced-motion:reduce){.fragment,.chromatic-mist,.cosmic-spark,.vortex,.pointer-lens{display:none}}