/* S.I. Studio cinematic transit: isolated overlay, no global dashboard mutations. */
.si-transit{position:fixed;inset:0;z-index:99999;overflow:hidden;pointer-events:none;opacity:0;background:#020713;color:#eaffff;font-family:system-ui,sans-serif;transition:opacity .4s ease}
.si-transit.is-active{opacity:1;pointer-events:all}
.si-transit *{box-sizing:border-box}
.si-transit .si-stars{position:absolute;inset:-20%;background-image:radial-gradient(#e0ffffaa 1px,transparent 2px);background-size:43px 43px;opacity:.4;transform:scale(1);animation:si-warp 6.8s ease-in forwards}
.si-transit .si-vortex{position:absolute;left:50%;top:50%;width:min(80vw,660px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.1);border:2px solid #9cfaffaa;background:repeating-radial-gradient(circle,#62e8ff08 0 12px,#a282ff35 14px 16px,transparent 20px 35px);box-shadow:0 0 110px #55d9ff55,inset 0 0 130px #a379ff66;animation:si-portal 6.7s cubic-bezier(.15,.8,.2,1) forwards}
.si-transit .si-beam{position:absolute;left:50%;top:-40%;width:22%;height:140%;transform:translateX(-50%) scaleX(.15);background:linear-gradient(90deg,transparent,#71faff22 20%,#d6ffffa8 50%,#71faff22 80%,transparent);filter:blur(12px);opacity:0;animation:si-beam 6.8s ease-in-out forwards}
.si-transit .si-ship{position:absolute;top:6%;left:50%;width:min(75vw,650px);height:130px;transform:translate(-50%,-180%) scale(.4);opacity:0;filter:drop-shadow(0 0 35px #65eaffaa);animation:si-ship 6.8s ease-in-out forwards}
.si-transit .si-ship:before{content:"";display:block;width:100%;height:100%;clip-path:polygon(50% 0,65% 30%,100% 55%,73% 73%,60% 90%,40% 90%,27% 73%,0 55%,35% 30%);background:linear-gradient(180deg,#b4faff,#496fa3 50%,#090e2d 80%);border-bottom:3px solid #8ff9ff}
.si-transit .si-hud{position:absolute;inset:auto 18px 13%;text-align:center;text-transform:uppercase;letter-spacing:.25em;font-size:clamp(12px,1.5vw,17px);text-shadow:0 0 22px #9afaff;animation:si-hud 6.8s linear forwards}
.si-transit .si-hud strong{display:block;font-size:clamp(23px,4vw,44px);letter-spacing:.13em;margin:12px 0;color:#fff}
.si-transit .si-flash{position:absolute;inset:0;background:#dfffff;opacity:0;animation:si-flash 6.8s ease-in forwards}
.si-transit .si-skip{position:absolute;right:20px;top:20px;border:1px solid #a8f8ff88;background:#071b32cc;color:white;border-radius:99px;padding:10px 16px;cursor:pointer;z-index:2;font:inherit}
@keyframes si-warp{0%,20%{transform:scale(1)}75%,100%{transform:scale(6);opacity:.95}}
@keyframes si-portal{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}28%{opacity:1}65%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(8);opacity:0}}
@keyframes si-beam{0%,24%{opacity:0}35%,65%{opacity:.9;transform:translateX(-50%) scaleX(1)}90%,100%{opacity:0}}
@keyframes si-ship{0%,20%{opacity:0;transform:translate(-50%,-180%) scale(.4)}40%,70%{opacity:1;transform:translate(-50%,0) scale(1)}90%,100%{opacity:0;transform:translate(-50%,-100%) scale(2)}}
@keyframes si-hud{0%,15%{opacity:0}25%,85%{opacity:1}100%{opacity:0}}
@keyframes si-flash{0%,85%{opacity:0}91%{opacity:.36}96%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.si-transit,.si-transit *{animation:none!important;transition:none!important}}

.si-transit .si-audio-toggle{position:absolute;right:175px;top:20px;z-index:2;border:1px solid #a8f8ff88;background:#071b32cc;color:white;border-radius:99px;padding:10px 16px;cursor:pointer;font:inherit}.si-transit button:focus-visible{outline:3px solid #d2ffff;outline-offset:3px}.si-transit .si-audio-toggle[hidden]{display:none}@media(max-width:520px){.si-transit .si-audio-toggle{right:auto;left:16px;top:16px}.si-transit .si-skip{right:16px;top:16px}}

/* Phase four: cockpit materialisation and holographic intelligence boot. */
.si-transit .si-cockpit{position:absolute;inset:0;opacity:0;transform:scale(1.3);animation:si-cockpit 6.8s ease-in-out forwards;pointer-events:none}
.si-transit .si-cockpit:before,.si-transit .si-cockpit:after{content:"";position:absolute;inset:12% 5%;border:1px solid #74efff88;clip-path:polygon(0 0,28% 0,28% 2%,2% 2%,2% 30%,0 30%,0 0,100% 0,100% 30%,98% 30%,98% 2%,72% 2%,72% 0,100% 0,100% 100%,72% 100%,72% 98%,98% 98%,98% 70%,100% 70%,100% 100%,0 100%,0 70%,2% 70%,2% 98%,28% 98%,28% 100%,0 100%);box-shadow:inset 0 0 45px #6eeaff44}
.si-transit .si-cockpit:after{inset:21% 16%;border-color:#b68aff99;transform:perspective(500px) rotateX(15deg)}
.si-transit .si-console{position:absolute;bottom:3%;left:50%;width:min(80vw,760px);height:18%;transform:translateX(-50%) perspective(300px) rotateX(35deg);border:1px solid #70f4ff88;border-radius:16px 16px 40% 40%;background:repeating-linear-gradient(90deg,transparent 0 20px,#64edff20 21px 22px),linear-gradient(#07152cbb,#1b1e52dd);box-shadow:0 0 65px #57eaff44,inset 0 0 50px #b58aff33}
.si-transit .si-boot{position:absolute;top:19%;left:50%;transform:translateX(-50%);font-size:clamp(12px,1.3vw,16px);letter-spacing:.28em;text-transform:uppercase;text-align:center;color:#9efcff;text-shadow:0 0 20px #8efbff}
.si-transit .si-boot:before{content:"S.I. CORE ONLINE";display:block;font-size:clamp(19px,3vw,35px);font-weight:900;letter-spacing:.12em;color:white}
@keyframes si-cockpit{0%,51%{opacity:0;transform:scale(1.3)}67%,86%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}
@media(prefers-reduced-motion:reduce){.si-transit .si-cockpit{opacity:0}}

/* Keep the transfer visible throughout its full runtime, including on older desktop browsers. */
.si-transit{background:radial-gradient(ellipse at center,#0b2347 0%,#030917 75%);isolation:isolate}
.si-transit .si-flash{pointer-events:none;mix-blend-mode:screen}
.si-transit .si-hud{z-index:1}
.si-transit .si-skip,.si-transit .si-audio-toggle{z-index:5}