.cinematic-open{overflow:hidden}
.cinematic{position:fixed;inset:0;z-index:9999;overflow:hidden;background:#000;color:#f5edf9;display:grid;place-items:center;text-align:center;isolation:isolate;opacity:1;transition:opacity .8s ease}
.cinematic.dismissed{opacity:0;pointer-events:none}
.cinematic-start,.cinematic-skip{position:absolute;z-index:10;color:#e9dcef;background:#100c15;border:1px solid #74558b;border-radius:999px;cursor:pointer}
.cinematic-start{padding:16px 28px;font-size:12px;letter-spacing:.2em}
.cinematic-skip{bottom:max(24px,env(safe-area-inset-bottom));right:24px;padding:10px 17px;font-size:12px;opacity:.75}
.cinematic button:hover{background:#2b1b39;opacity:1}.cinematic button:focus-visible{outline:2px solid #e3c37f;outline-offset:5px}
.cinematic [hidden]{display:none!important}
.cinematic-credit{position:absolute;width:92%;opacity:0;font-family:Georgia,serif;text-shadow:0 0 28px #9564b755;pointer-events:none}
.cinematic-credit strong{display:block;font-size:clamp(22px,4.6vw,65px);font-weight:400;letter-spacing:.12em;line-height:1.5}
.cinematic-credit small{display:block;font-size:clamp(14px,2vw,23px);letter-spacing:.3em;margin-top:13px;color:#d2bdde}
.credit-two{color:#d8b7f2}.credit-three{color:#e8d2a0}
.cinematic.playing .cinematic-credit{animation:cinematic-credit 4s both}
.cinematic.playing .credit-two{animation-delay:4s}.cinematic.playing .credit-three{animation-delay:8s}
@keyframes cinematic-credit{0%,100%{opacity:0;transform:translateY(8px)}25%,70%{opacity:1;transform:translateY(0)}}
.cinematic-cards{position:absolute;inset:0;perspective:1100px;pointer-events:none}
.cinematic-card{position:absolute;left:50%;top:50%;width:clamp(105px,16vw,230px);max-height:52vh;object-fit:contain;opacity:0;will-change:transform,opacity;border-radius:9px;filter:drop-shadow(0 0 15px #aa67df66)}
.cinematic.playing .cinematic-card{animation:cinematic-flight 4.2s var(--delay) cubic-bezier(.25,.5,.4,1) both}
@keyframes cinematic-flight{0%{opacity:0;transform:translate(-50%,-50%) translate3d(var(--x),var(--y),-700px) rotateY(var(--turn)) rotateZ(var(--rotation))}18%{opacity:.95}48%{opacity:1;transform:translate(-50%,-50%) translate3d(0,calc(var(--y)*.4),70px) rotateY(-12deg) rotateZ(var(--rotation))}80%{opacity:.85}100%{opacity:0;transform:translate(-50%,-50%) translate3d(calc(var(--x)*-1.2),var(--end-y),500px) rotateY(calc(var(--turn)*-1)) rotateZ(calc(var(--rotation)*-1))}}
.cinematic-logo{position:absolute;z-index:3;width:min(92vw,1050px);max-height:72vh;object-fit:contain;opacity:0;pointer-events:none}
.cinematic.playing .cinematic-logo{animation:cinematic-logo 4.1s 20.1s both}
@keyframes cinematic-logo{0%{opacity:0;transform:scale(.86);filter:brightness(2) drop-shadow(0 0 34px #ad69d7)}22%{opacity:1;filter:brightness(1.15) drop-shadow(0 0 24px #ad69d7)}100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 0 16px #ad69d755)}}
.cinematic-aura{position:absolute;width:95vw;height:80vh;opacity:0;background:radial-gradient(ellipse,#71369e44,transparent 65%)}
.cinematic.playing .cinematic-aura{animation:cinematic-aura 4.2s 20s both}
@keyframes cinematic-aura{0%{opacity:0}30%,100%{opacity:1}}
.cinematic-flash{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;background:radial-gradient(ellipse,#fff4dc,#bc8ae388 35%,transparent 75%)}
.cinematic.playing .cinematic-flash{animation:cinematic-flash .75s 20s both}
@keyframes cinematic-flash{0%,100%{opacity:0}15%{opacity:.8}}
.cinematic-particles{position:absolute;inset:0;z-index:5;pointer-events:none}
.cinematic-particles i{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:#e8c77e;box-shadow:0 0 7px #e8c77e;opacity:0}
.cinematic-particles i:nth-child(even){background:#c795ec;box-shadow:0 0 7px #b879e6}
.cinematic.playing .cinematic-particles i{animation:cinematic-spark 3s var(--delay) ease-out both}
@keyframes cinematic-spark{0%{opacity:0;transform:translate(calc(var(--px)*.7),calc(var(--py)*.7)) scale(.3)}25%,65%{opacity:.8}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(.2)}}
@media(prefers-reduced-motion:reduce){.cinematic-credit,.cinematic-logo{transform:none!important;filter:none!important}.cinematic.playing .cinematic-card{animation-name:cinematic-still;transform:translate(-50%,-50%)!important}.cinematic-flash,.cinematic-particles{display:none}.cinematic{transition:none}}
@keyframes cinematic-still{0%,100%{opacity:0}30%,60%{opacity:1}}