/* Startup scene: the original mark itself fills as real hero work completes. */
html.kh-intro-boot { overflow:hidden; background:#170c20; }
html.kh-intro-boot:not(.kh-intro-mounted)::before { content:""; position:fixed; inset:0; z-index:19999; background:#170c20; pointer-events:none; }
.hero-boot { position:fixed; inset:0; z-index:20000; height:100vh; height:100dvh; overflow:hidden; contain:strict; color:#fff8ed; background:radial-gradient(ellipse at 50% 42%,#64263b 0%,#2b1127 38%,#0e1021 100%); opacity:1; transition:opacity .65s ease; }
.hero-boot::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(120deg,rgba(106,161,204,.08),transparent 42%,rgba(234,167,123,.06)); }
.hero-boot-tunnel { position:absolute; inset:0; perspective:650px; perspective-origin:50% 42%; overflow:hidden; }
.hero-boot-tunnel i { position:absolute; top:42%; left:50%; width:620px; height:450px; margin:-225px 0 0 -310px; border:1px solid rgba(236,177,147,.34); border-radius:26px; box-shadow:0 0 25px rgba(213,108,130,.07),inset 0 0 25px rgba(213,108,130,.05); animation:hero-boot-flight 6s linear infinite; animation-delay:calc(var(--i)*-1s); }
.hero-boot-inner { position:relative; z-index:1; display:grid; place-items:center; min-height:100%; padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom)); perspective:1000px; }
.hero-boot-content { width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.2,.7,.2,1); }
.hero-boot-kicker { margin:0 0 46px; font:600 10px/1.5 Arial,sans-serif; letter-spacing:.28em; color:#dcb3a4; }
.hero-boot-emblem { position:relative; width:clamp(240px,28vw,370px); aspect-ratio:920/555; transform-style:preserve-3d; animation:hero-boot-float 5s ease-in-out infinite; }
.hero-boot-orbit { position:absolute; left:50%; top:50%; width:155%; aspect-ratio:1; margin-left:-77.5%; margin-top:-77.5%; border:1px solid rgba(249,210,177,.48); border-radius:50%; box-shadow:0 0 24px rgba(239,183,138,.11); transform:rotateX(72deg) rotateZ(15deg) translateZ(-22px); animation:hero-boot-orbit 12s linear infinite; }
.hero-boot-orbit.two { width:170%; margin-left:-85%; margin-top:-85%; border-color:rgba(130,184,222,.32); animation-direction:reverse; animation-duration:16s; }
.hero-boot-orbit::after { content:""; position:absolute; top:10%; left:18%; width:7px; height:7px; border-radius:50%; background:#f4cba6; box-shadow:0 0 22px #e8ad84; }
.hero-boot-mark { position:absolute; inset:0; transform:translateZ(42px); transform-style:preserve-3d; }
.hero-boot-mark::before,.hero-boot-mark::after { content:""; position:absolute; inset:-8%; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); background:linear-gradient(130deg,#b76b72,#49172e 45%,#10213e); transform:translateZ(-16px); }
.hero-boot-mark::after { inset:-5%; transform:translateZ(-8px); background:linear-gradient(130deg,#d8aca0,#5e2239 55%,#305078); }
.hero-boot-logo { position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%; object-fit:contain; filter:grayscale(1) brightness(.45); }
.hero-boot-logo.fill { z-index:2; filter:drop-shadow(0 7px 16px rgba(0,0,0,.4)); clip-path:inset(calc(100% - var(--hero-boot-fill,0%)) 0 0); transition:clip-path .2s linear; }
.hero-boot-percent { position:absolute; z-index:3; left:50%; top:91%; transform:translate(-50%,-50%) translateZ(3px); color:#fff; font:700 clamp(11px,1vw,15px)/1 Arial,sans-serif; font-variant-numeric:tabular-nums; text-shadow:0 1px 5px #240918; }
.hero-boot-title { margin:52px 0 12px; font:400 clamp(27px,3vw,40px)/1.2 Georgia,serif; letter-spacing:-.025em; }
.hero-boot-status { margin:0; min-height:22px; font:400 13px/1.6 Arial,sans-serif; color:#e1c7c0; }
.hero-boot-status::after { content:""; display:block; margin:20px auto 0; width:46px; height:1px; background:linear-gradient(90deg,transparent,#afcee6,transparent); }
.hero-boot.is-finished { opacity:0; }
.hero-boot.is-finished .hero-boot-content { transform:translate3d(0,-12px,140px); }
@keyframes hero-boot-flight { from { transform:translateZ(-1400px) rotateZ(-8deg); opacity:0; } 18% { opacity:.65; } 82% { opacity:.4; } to { transform:translateZ(600px) rotateZ(8deg); opacity:0; } }
@keyframes hero-boot-float { 0%,100% { transform:translateY(0) rotateX(10deg) rotateY(-12deg); } 50% { transform:translateY(-12px) rotateX(6deg) rotateY(12deg); } }
@keyframes hero-boot-orbit { from { transform:rotateX(72deg) rotateZ(15deg) translateZ(-22px); } to { transform:rotateX(72deg) rotateZ(375deg) translateZ(-22px); } }
@media(max-width:600px) { .hero-boot-kicker { font-size:9px; margin-bottom:42px; letter-spacing:.2em; } .hero-boot-title { margin-top:42px; } .hero-boot-status { font-size:12px; } }
@media(max-height:500px) { .hero-boot-kicker { margin-bottom:16px; } .hero-boot-emblem { width:185px; } .hero-boot-title { margin:22px 0 6px; font-size:25px; } .hero-boot-status::after { margin-top:10px; } .hero-boot-inner { padding-block:18px; } }
@media(prefers-reduced-motion:reduce) { .hero-boot,.hero-boot-content,.hero-boot-logo.fill { transition:none; } .hero-boot-tunnel i,.hero-boot-emblem,.hero-boot-orbit { animation:none; } .hero-boot-emblem { transform:none; } .hero-boot-tunnel i { transform:translateZ(calc(var(--i)*-180px)); opacity:.22; } }