.panel-transition{--scene-gold:#ffb461;--scene-light:#ffe7bd;position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;isolation:isolate;background:#08090c;color:#fff;contain:strict}
.panel-transition.idle{visibility:hidden;opacity:0;pointer-events:none}
.panel-transition.idle *{animation:none!important}
.panel-transition.cover{animation:scene-cover 280ms ease-out both}
.panel-transition.waiting{opacity:1}
.panel-transition.reveal{animation:scene-reveal 520ms cubic-bezier(.22,.7,.2,1) both;pointer-events:none}
.scene-atmosphere{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at 50% 42%,#ff8b2829 0%,#aa613310 31%,transparent 65%),radial-gradient(ellipse at 15% 90%,#77312a16,transparent 55%),radial-gradient(ellipse at 85% 9%,#c9924d12,transparent 48%)}
.panel-transition[data-brand=code] .scene-atmosphere{background:radial-gradient(ellipse at 50% 42%,#ffa34126 0%,#62456915 36%,transparent 66%),radial-gradient(ellipse at 80% 80%,#77628e10,transparent 55%)}
.scene-floor{position:absolute;z-index:-2;left:-50%;right:-50%;height:65vh;bottom:-37vh;background-image:linear-gradient(#ffb76d11 1px,transparent 1px),linear-gradient(90deg,#ffb76d11 1px,transparent 1px);background-size:72px 72px;transform:perspective(550px) rotateX(64deg);transform-origin:center top;mask-image:linear-gradient(transparent,#0009 38%,transparent 88%);pointer-events:none}
.scene-horizon{position:absolute;z-index:-1;top:46%;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,#ffb45c09 20%,#ffd39444 48%,#ffd39444 52%,#ffb45c09 80%,transparent);transform-origin:center;box-shadow:0 0 36px #ffa13b14}
.scene-beam{position:absolute;z-index:-1;top:-30%;left:50%;width:min(40vw,560px);height:160%;background:linear-gradient(90deg,transparent,#ffe2ac08 47%,#ffbf6520 50%,transparent 54%);transform:translateX(-75vw) rotate(24deg);opacity:0;pointer-events:none}
.scene-coordinate{position:absolute;display:flex;gap:12px;align-items:center;color:#9c846f;font:500 10px var(--heading);letter-spacing:2.5px;opacity:.7}
.scene-coordinate.top-left{top:40px;left:48px}.scene-coordinate.top-left span{color:#675c58;padding-left:12px;border-left:1px solid #8d654d44;letter-spacing:2px;font-size:8px}
.scene-coordinate.bottom-right{bottom:38px;right:48px;font-size:8px;letter-spacing:2px;color:#756758}
.panel-transition-mark{display:grid;justify-items:center;gap:26px;width:min(480px,calc(100vw - 40px));text-align:center}
.scene-eyebrow{display:flex;align-items:center;gap:15px;color:#cbae92;font:500 10px var(--body);letter-spacing:3px}
.scene-eyebrow i{display:block;width:32px;height:1px;background:linear-gradient(90deg,transparent,#bb8b58)}.scene-eyebrow i:last-child{transform:rotate(180deg)}
.scene-core{position:relative;display:grid;place-items:center;width:248px;height:248px}
.scene-aura{position:absolute;inset:-70px;background:radial-gradient(circle,#ffc56c18 5%,#ff9b4117 28%,#cf6a1507 51%,transparent 70%);border-radius:50%;pointer-events:none}
.scene-orbits{position:absolute;inset:-34px;width:316px;height:316px;stroke:var(--scene-gold);stroke-width:1;pointer-events:none;transform-origin:center}
.orbit-edge{stroke:#a781542b}.orbit-track{stroke:#e8ae607a;stroke-width:1.2;stroke-dasharray:42 16 2 80 130 240 3 170 12 140;transform-origin:200px 200px}
.orbit-inner{stroke:#edb57d30;stroke-dasharray:2 12}.orbit-ticks{stroke:#e1ac6a66;stroke-width:1.2}
.orbit-light{fill:var(--scene-light);stroke:none}.orbit-light.small{fill:#e5ac69}
.scene-emblem{position:relative;display:grid;place-items:center;width:160px;height:160px;border:1px solid #ffd49b28;border-radius:41px;background:linear-gradient(135deg,#ffe6ba09,#ffb55903);box-shadow:0 20px 55px #0009,0 0 65px #ff9b3918;isolation:isolate}
.scene-emblem:before{content:'';position:absolute;inset:-12px;border:1px solid #b7874b30;border-radius:49px;background:linear-gradient(135deg,#ffffff03,transparent 45%);z-index:-1}
.scene-emblem img{display:block;width:144px;height:144px;border-radius:32px}
.scene-logo-glint{position:absolute;inset:8px;overflow:hidden;border-radius:32px;pointer-events:none}
.scene-logo-glint:after{content:'';position:absolute;top:-20%;left:-80%;height:140%;width:48%;background:linear-gradient(90deg,transparent,#fff7d65c,transparent);transform:skewX(-22deg);opacity:0}
.scene-copy{display:grid;gap:9px}.scene-wordmark{font:600 42px/1.08 var(--heading);letter-spacing:-1.9px;color:#fff5e9}
.scene-wordmark>span{background:linear-gradient(105deg,#ffdca7,#ffac53);background-clip:text;-webkit-background-clip:text;color:transparent}
.scene-copy p{font:400 13px/1.5 var(--body);color:#b0a297;letter-spacing:.2px}
.scene-status{display:grid;justify-items:center;gap:13px;margin-top:2px}
.scene-progress{position:relative;width:180px;height:2px;overflow:hidden;border-radius:4px;background:#e9b5781f}
.scene-progress:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#a672436b,transparent)}
.scene-progress span{position:absolute;inset:0;width:45%;background:linear-gradient(90deg,transparent,#ffd6a0,#fff1cd,transparent);transform:translateX(-120%);opacity:0}
.scene-status small{font:400 11px var(--body);color:#8d8178;letter-spacing:.2px}
.panel-transition:is(.cover,.waiting) .scene-atmosphere{animation:scene-bloom 1100ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-floor{animation:scene-floor-appear 1000ms 200ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-horizon{animation:scene-horizon-open 1050ms 100ms cubic-bezier(.18,.7,.2,1) both}
.panel-transition:is(.cover,.waiting) .scene-beam{animation:scene-light-pass 1150ms 100ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-coordinate{animation:scene-type-in 700ms 250ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-eyebrow{animation:scene-type-in 650ms 80ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-aura{animation:scene-aura-open 1050ms cubic-bezier(.18,.7,.2,1) both}
.panel-transition:is(.cover,.waiting) .scene-orbits{animation:scene-orbit-open 1200ms cubic-bezier(.18,.7,.2,1) both}
.panel-transition:is(.cover,.waiting) .scene-emblem{animation:scene-emblem-arrive 880ms 70ms cubic-bezier(.16,.85,.2,1) both}
.panel-transition:is(.cover,.waiting) .scene-logo-glint:after{animation:scene-logo-pass 1050ms 120ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-copy{animation:scene-copy-arrive 780ms 180ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-status{animation:scene-type-in 600ms 420ms ease-out both}
.panel-transition:is(.cover,.waiting) .scene-progress span{animation:scene-scan 1050ms 150ms ease-out both}
.panel-transition[data-journey=depart] .panel-transition-mark,.panel-transition[data-journey=depart] .scene-beam,.panel-transition[data-journey=depart] .scene-coordinate{visibility:hidden}
.panel-transition.reveal .panel-transition-mark{animation:scene-mark-depart 520ms cubic-bezier(.22,.7,.2,1) both}
.panel-transition.reveal .scene-horizon{animation:scene-horizon-depart 520ms ease-out both}
@keyframes scene-cover{from{opacity:0}to{opacity:1}}
@keyframes scene-reveal{0%{opacity:1}30%{opacity:.96}100%{opacity:0}}
@keyframes scene-bloom{from{opacity:.35;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes scene-floor-appear{from{opacity:0}to{opacity:1}}
@keyframes scene-horizon-open{from{opacity:0;transform:scaleX(.12)}to{opacity:1;transform:scaleX(1)}}
@keyframes scene-light-pass{0%{opacity:0;transform:translateX(-75vw) rotate(24deg)}25%{opacity:1}75%{opacity:.7}100%{opacity:0;transform:translateX(35vw) rotate(24deg)}}
@keyframes scene-type-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes scene-aura-open{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes scene-orbit-open{from{opacity:0;transform:rotate(-70deg) scale(.72)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes scene-emblem-arrive{0%{opacity:0;transform:perspective(700px) rotateY(-26deg) rotateX(12deg) translateY(18px) scale(.82)}65%{opacity:1;transform:perspective(700px) rotateY(3deg) rotateX(-2deg) translateY(-2px) scale(1.03)}100%{opacity:1;transform:perspective(700px) rotateY(0) rotateX(0) translateY(0) scale(1)}}
@keyframes scene-logo-pass{0%,10%{opacity:0;transform:translateX(0) skewX(-22deg)}35%{opacity:.7}85%,100%{opacity:0;transform:translateX(480%) skewX(-22deg)}}
@keyframes scene-copy-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes scene-scan{0%{opacity:0;transform:translateX(-120%)}25%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:translateX(340%)}}
@keyframes scene-mark-depart{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(1.045) translateY(-16px)}}
@keyframes scene-horizon-depart{to{opacity:0;transform:scaleX(1.08)}}
@media(max-width:600px){.panel-transition-mark{gap:22px}.scene-core{width:218px;height:218px}.scene-orbits{inset:-29px;width:276px;height:276px}.scene-emblem{width:142px;height:142px;border-radius:37px}.scene-emblem:before{border-radius:45px}.scene-emblem img{width:128px;height:128px;border-radius:29px}.scene-logo-glint{inset:7px;border-radius:29px}.scene-wordmark{font-size:36px;letter-spacing:-1.5px}.scene-coordinate.top-left{top:24px;left:24px}.scene-coordinate.bottom-right{bottom:24px;right:24px}.scene-eyebrow{font-size:9px;letter-spacing:2.5px}.scene-floor{background-size:52px 52px}.scene-copy p{font-size:12px}.scene-beam{width:60vw}}
@media(max-height:570px){.panel-transition-mark{gap:12px}.scene-core{width:170px;height:170px}.scene-orbits{inset:-23px;width:216px;height:216px}.scene-emblem{width:110px;height:110px;border-radius:28px}.scene-emblem:before{inset:-8px;border-radius:35px}.scene-emblem img{width:98px;height:98px;border-radius:24px}.scene-wordmark{font-size:30px}.scene-coordinate{display:none}.scene-logo-glint{inset:6px;border-radius:24px}}
@media(prefers-reduced-motion:reduce){.panel-transition{display:none}.panel-transition,.panel-transition *,.panel-transition *:before,.panel-transition *:after{animation:none!important;transition:none!important}}
