/* V2 intro: desktop startup or explicit mobile replay. */
#boot-screen { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(ellipse at center, #0b2530 0%, #071116 38%, var(--bg) 72%); opacity: 1; transition: opacity .6s ease; }
.show-boot #boot-screen { display: flex; }
#boot-screen::before, #boot-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
#boot-screen::before { opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
#boot-screen::after { opacity: .2; background: repeating-linear-gradient(to bottom, transparent 0, transparent 3px, rgba(52,179,228,.12) 4px); }
#boot-screen.is-leaving { opacity: 0; pointer-events: none; }
.boot-grid { position: absolute; width: 160%; height: 130%; left: -30%; top: 20%; background: linear-gradient(rgba(52,179,228,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(52,179,228,.08) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse, #000, transparent 65%); transform: perspective(600px) rotateX(58deg); animation: boot-grid-arrive 3.2s ease-out both; }
.boot-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 22px; width: min(520px, 88vw); }
.boot-stage { position: relative; width: 100%; aspect-ratio: 1.3; display: grid; place-items: center; isolation: isolate; transition: transform .6s cubic-bezier(.6,0,.3,1), opacity .4s; }
.is-leaving .boot-stage { transform: scale(1.25); opacity: 0; }
.is-leaving #boot-logo-text { animation: boot-exit-slice .55s steps(2) both; }
.is-leaving .boot-glitch { animation: boot-glitch-burst .18s steps(1) 2; }
.boot-orbit, .boot-pulse { position: absolute; width: 75%; aspect-ratio: 1; border: 1px solid rgba(52,179,228,.25); border-radius: 50%; pointer-events: none; }
.boot-orbit { border-top-color: var(--accent); border-bottom-color: var(--accent); transform: rotate(-35deg); animation: boot-orbit-turn 3.2s cubic-bezier(.15,.75,.25,1) both; }
.boot-orbit::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(52,179,228,.18); border-radius: 50%; }
.boot-orbit::after { content: ""; position: absolute; width: 6px; height: 6px; background: var(--accent); left: 14%; top: 14%; box-shadow: 0 0 12px var(--accent); }
.boot-pulse { opacity: 0; animation: boot-pulse-expand 1.1s 1.4s ease-out both; }
.boot-reticle { position: absolute; inset: 14% 7%; animation: boot-frame-lock 1.1s .1s cubic-bezier(.2,.8,.2,1) both; }
.boot-reticle span { position: absolute; width: 24px; height: 24px; border-color: var(--accent); border-style: solid; border-width: 0; }
.boot-reticle span:nth-child(1) { left: 0; top: 0; border-top-width: 1px; border-left-width: 1px; }
.boot-reticle span:nth-child(2) { right: 0; top: 0; border-top-width: 1px; border-right-width: 1px; }
.boot-reticle span:nth-child(3) { right: 0; bottom: 0; border-bottom-width: 1px; border-right-width: 1px; }
.boot-reticle span:nth-child(4) { left: 0; bottom: 0; border-bottom-width: 1px; border-left-width: 1px; }
.boot-caption, .boot-signature { position: absolute; font-family: Consolas, monospace; color: var(--text-dim); font-size: 10px; letter-spacing: 4px; animation: boot-label-reveal .5s .5s both; }
.boot-caption { top: 7%; }
.boot-signature { bottom: 13%; color: var(--accent); animation-delay: 1.6s; }
#boot-logo-text { position: relative; width: 100%; overflow: visible; filter: drop-shadow(0 0 14px rgba(52,179,228,.4)); animation: boot-logo-lock 2.8s cubic-bezier(.2,.8,.2,1) both; }
.boot-outline { fill: transparent; stroke: var(--accent); stroke-width: 1; opacity: .6; animation: boot-outline-draw 1.6s .1s ease-out both; }
.boot-fragment { fill: var(--accent); opacity: 0; animation: boot-fragment-assemble 1.15s cubic-bezier(.16,1,.3,1) both; }
.boot-fragment:nth-child(1) { --piece-x: -100px; --piece-y: -55px; --piece-angle: -6deg; animation-delay: .35s; }
.boot-fragment:nth-child(2) { --piece-x: 130px; --piece-y: -25px; --piece-angle: 3deg; animation-delay: .48s; }
.boot-fragment:nth-child(3) { --piece-x: -140px; --piece-y: 0px; --piece-angle: -2deg; animation-delay: .26s; }
.boot-fragment:nth-child(4) { --piece-x: 160px; --piece-y: 10px; --piece-angle: 2deg; animation-delay: .4s; }
.boot-fragment:nth-child(5) { --piece-x: -110px; --piece-y: 40px; --piece-angle: -4deg; animation-delay: .52s; }
.boot-fragment:nth-child(6) { --piece-x: 100px; --piece-y: 65px; --piece-angle: 6deg; animation-delay: .32s; }
.boot-glitch { opacity: 0; animation: boot-glitch-burst .32s 1.85s steps(1) 2; }
.boot-glitch-a { fill: #d1f4ff; --glitch-shift: -12px; }
.boot-glitch-b { fill: var(--accent); --glitch-shift: 14px; animation-delay: 2s; }
.boot-beam { position: absolute; z-index: 2; width: 110%; height: 1px; top: 10%; background: var(--accent); box-shadow: 0 0 18px 3px rgba(52,179,228,.2); opacity: 0; pointer-events: none; animation: boot-beam-scan 1.45s .55s ease-in-out both; }
.boot-progress { position: absolute; bottom: 6%; width: 48%; height: 2px; background: rgba(52,179,228,.12); overflow: hidden; }
.boot-progress span { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: left; animation: boot-progress-fill 2.7s .15s cubic-bezier(.4,0,.2,1) both; }
#boot-skip { color: var(--text-dim); font-family: Consolas, monospace; font-size: 11px; letter-spacing: 2px; padding: 12px 18px; min-height: 44px; border: 1px solid var(--accent-dim); background: rgba(5,7,8,.5); transition: color .2s, border-color .2s; }
#boot-skip:hover { color: var(--accent); border-color: var(--accent); }
@keyframes boot-grid-arrive { from { opacity: 0; transform: perspective(600px) rotateX(65deg) translateY(100px); } to { opacity: .7; transform: perspective(600px) rotateX(58deg) translateY(0); } }
@keyframes boot-orbit-turn { 0% { opacity: 0; transform: rotate(-160deg) scale(.55); } 35% { opacity: .8; } 100% { opacity: .45; transform: rotate(145deg) scale(1); } }
@keyframes boot-pulse-expand { 0% { opacity: .6; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes boot-frame-lock { 0% { opacity: 0; transform: scale(1.4); } 100% { opacity: .65; transform: scale(1); } }
@keyframes boot-label-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: .8; transform: translateY(0); } }
@keyframes boot-logo-lock { 0% { transform: scale(.88); } 55% { transform: scale(1); } 70% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes boot-outline-draw { from { opacity: 0; } to { opacity: .6; } }
@keyframes boot-fragment-assemble { 0% { opacity: 0; transform: translate(var(--piece-x),var(--piece-y)) rotate(var(--piece-angle)); } 25% { opacity: .7; } 72% { opacity: 1; transform: translate(0,0) rotate(0); } 82% { transform: translate(-3px,0); } 100% { opacity: 1; transform: translate(0,0) rotate(0); } }
@keyframes boot-glitch-burst { 0%,36%,72%,100% { opacity: 0; transform: translateX(0); } 18%,54% { opacity: .8; transform: translateX(var(--glitch-shift)); } }
@keyframes boot-beam-scan { 0% { opacity: 0; transform: translateY(0); } 20%,70% { opacity: .7; } 100% { opacity: 0; transform: translateY(290px); } }
@keyframes boot-progress-fill { 0% { transform: scaleX(0); } 35% { transform: scaleX(.22); } 65% { transform: scaleX(.72); } 100% { transform: scaleX(1); } }
@keyframes boot-exit-slice { 0% { transform: translateX(0); } 24% { transform: translateX(-10px); } 48% { transform: translateX(12px); } 72% { transform: translateX(-5px); } 100% { transform: translateX(0); } }