:root { --void:#090a0c; --canvas:#303236; --iris:#5683da; --ember:#ff8964; --smoke:#95979e; --ash:#a9a9aa; --snow:#fff; }
* { box-sizing:border-box; }
html, body, #app { width:100%; height:100%; margin:0; overflow:hidden; background:var(--void); color:var(--snow); font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#loading-screen { isolation:isolate; position:relative; display:grid; grid-template-rows:auto 1fr auto auto; width:100%; height:100%; min-height:560px; padding:28px clamp(24px,5vw,72px) 26px; overflow:hidden; background:radial-gradient(ellipse 100% 55% at 50% 112%, rgba(255,137,100,.24), transparent 52%), var(--void); }
.grid { position:absolute; z-index:-1; inset:0; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:44px 44px; mask-image:linear-gradient(to bottom,transparent 0,black 34%,black 76%,transparent 100%); }
.aurora { position:absolute; z-index:-1; top:-20%; width:16vw; min-width:160px; height:140%; filter:blur(28px); opacity:.78; transform:rotate(7deg); background:linear-gradient(to bottom, transparent 4%, rgba(86,131,218,.1) 18%, rgba(86,131,218,.74) 46%, rgba(255,137,100,.92) 71%, transparent 96%); animation:drift 6s ease-in-out infinite alternate; }
.aurora-left { left:22%; }
.aurora-right { right:19%; opacity:.42; animation-delay:-3s; transform:rotate(-10deg); }
.topline { display:flex; align-items:center; justify-content:space-between; z-index:2; font-size:11px; font-weight:600; letter-spacing:.14em; }
.brand { letter-spacing:.18em; }
.status { display:flex; gap:8px; align-items:center; color:var(--ash); }
.status i { width:7px; height:7px; border-radius:50%; background:var(--ember); box-shadow:0 0 12px var(--ember); animation:pulse 1.2s ease-in-out infinite; }
.loader-core { position:relative; align-self:center; justify-self:center; display:grid; place-items:center; width:clamp(150px,20vw,232px); aspect-ratio:1; margin:36px 0 14px; }
.orbit { position:absolute; inset:0; border:1px solid rgba(255,255,255,.24); border-radius:50%; }
.orbit-one { border-top-color:var(--iris); border-right-color:var(--ember); animation:spin 4.8s linear infinite; }
.orbit-two { inset:17%; border-left-color:var(--iris); border-bottom-color:var(--ember); animation:spin 2.8s linear infinite reverse; }
.core-mark { display:grid; place-items:center; width:42%; aspect-ratio:1; border-radius:50%; color:var(--snow); font-size:clamp(32px,4vw,50px); font-weight:700; letter-spacing:-.08em; background:linear-gradient(135deg,var(--iris),var(--ember)); box-shadow:0 0 48px rgba(86,131,218,.52), inset 0 1px 1px rgba(255,255,255,.5); }
.loader-copy { text-align:center; z-index:1; }
.eyebrow { margin:0 0 10px; color:var(--ember); font-size:11px; letter-spacing:.18em; font-weight:700; }
h1 { margin:0; font-size:clamp(42px,7vw,84px); font-weight:650; letter-spacing:-.07em; line-height:.9; }
h1 em { color:transparent; font-style:normal; -webkit-text-stroke:1px rgba(255,255,255,.88); }
#loading-label { min-height:24px; margin:18px 0 0; color:var(--smoke); font-size:14px; }
.loading-panel { width:min(100%,540px); align-self:end; justify-self:center; margin-top:clamp(36px,7vh,80px); z-index:1; }
.progress-meta { display:flex; justify-content:space-between; margin-bottom:11px; color:var(--ash); font-size:11px; font-weight:600; letter-spacing:.1em; }
#progress-number { color:var(--snow); }
.progress-track { height:5px; overflow:hidden; background:rgba(255,255,255,.15); border-radius:999px; }
#progress-fill { width:0%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--iris),var(--ember),#fff); box-shadow:0 0 18px rgba(255,137,100,.8); transition:width .14s ease-out; }
#continue-button { width:100%; min-height:54px; margin-top:22px; border:0; border-radius:999px; color:#fff; font:inherit; font-weight:650; font-size:15px; letter-spacing:-.01em; cursor:pointer; background:var(--iris); box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 8px 28px rgba(86,131,218,.34); animation:reveal .45s ease-out both; }
#continue-button:hover { background:#6e9bf2; transform:translateY(-1px); }
#continue-button span { margin-left:10px; color:#cfdcff; font-size:20px; vertical-align:-1px; }
.footer-copy { margin:24px 0 0; text-align:center; color:rgba(169,169,170,.66); font-size:9px; letter-spacing:.13em; }
#video { position:fixed; inset:0; display:block; width:100%; height:100%; object-fit:cover; background:#000; }
#video[hidden] { display:none; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes pulse { 50% { transform:scale(1.6); opacity:.45; } }
@keyframes drift { to { translate:25px 30px; opacity:.9; } }
@keyframes reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:540px) { #loading-screen { padding:22px 20px; } .topline { font-size:9px; } .loader-core { margin:22px 0 8px; } .footer-copy { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }