/* Public boot stage only. FC Vision + POPNIX artwork; no dashboard dependencies.
   Keep image geometry intrinsic: CSS width must always pair with height:auto. */
:root {
    color-scheme: dark;
    --boot-bg: #081322;
    --boot-text: #eef5ff;
    --boot-muted: #acbfd5;
    --boot-accent: #80cbef;
    --boot-ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { min-height: 100%; font-size: 15px; }
body.boot-page {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(28px + var(--pnx-envbar-h, 0px)) clamp(20px, 5vw, 80px) 24px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    color: var(--boot-text);
    background: var(--boot-bg);
    font: 400 1rem/1.6 'fc-vision', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    isolation: isolate;
    overflow-x: clip;
}
.boot-atmosphere {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 40%, #173b54 0%, transparent 52%),
        radial-gradient(ellipse at 50% 110%, #164660 0%, transparent 55%),
        var(--boot-bg);
}
.boot-atmosphere::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(#80cbef06 1px, transparent 1px), linear-gradient(90deg, #80cbef06 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, #000, transparent 75%);
}
.boot-horizon {
    position: absolute; left: 50%; bottom: -580px;
    width: max(1200px, 140vw); height: 740px;
    transform: translateX(-50%); border-radius: 50%;
    border: 1px solid #80cbef45;
    box-shadow: 0 -10px 80px #80cbef0c, 0 -1px 18px #80cbef24;
}
.boot-header, .boot-footer {
    width: 100%; max-width: 1440px; margin-inline: auto;
    display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.boot-brand { display: block; width: 156px; height: auto; aspect-ratio: 4 / 1; object-fit: contain; filter: brightness(0) invert(1); }
.boot-header-label { color: var(--boot-muted); font-size: .95rem; }
.boot {
    position: relative; width: 100%; min-width: 0;
    display: flex; flex-direction: column; align-items: center;
    padding-block: 24px 32px; text-align: center;
    align-self: center;
}
.boot-core {
    position: relative; width: clamp(230px, 36vh, 340px); aspect-ratio: 1;
    display: grid; place-items: center; flex-shrink: 0;
    animation: boot-arrive .8s var(--boot-ease) both;
}
.boot-core::before {
    content: ''; position: absolute; inset: 8%; border-radius: 50%;
    background: radial-gradient(circle at 45% 35%, #80cbef20, #80cbef04 60%, transparent 72%);
    border: 1px solid #80cbef12;
    box-shadow: inset 0 0 42px #80cbef06, 0 24px 80px #020b174d;
}
.boot-core::after {
    content: ''; position: absolute; left: 26%; right: 26%; bottom: 5%; height: 5%;
    border-radius: 50%; background: #020b1766; filter: blur(10px);
}
.boot-orbit { overflow: hidden; position: absolute; inset: 0; border: 1px solid #80cbef35; border-radius: 50%; }
.boot-orbit::before {
    content: ''; position: absolute; inset: -1px; border-radius: inherit;
    border: 2px solid transparent; border-top-color: var(--boot-accent);
    transform: rotate(-40deg); animation: boot-orbit 2.8s ease-in-out infinite;
}
.boot-orbit-outer { inset: -13%; border-color: #80cbef12; }
.boot-orbit-outer::before { border-top-color: #80cbef4d; animation-direction: reverse; animation-duration: 4s; }
.boot-orbit-wide { inset: -37%; border-color: #80cbef0a; }
.boot-orbit-wide::before { display: none; }
.boot-mark { position: relative; z-index: 1; width: 68%; animation: boot-mascot .85s var(--boot-ease) both; }
.boot-mark img { display: block; width: 100%; height: auto; aspect-ratio: 360 / 315; object-fit: contain; }
.boot-title { position: relative; margin: 27px 0 0; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 700; line-height: 1.3; letter-spacing: -.025em; }
.boot-tagline { position: relative; margin: 5px 0 0; color: var(--boot-muted); font-size: 1.05rem; }
.boot-loading { width: min(260px, 100%); margin-top: 25px; }
.boot-bar { height: 2px; overflow: hidden; background: #80cbef26; }
.boot-bar span { display: block; width: 100%; height: 100%; background: var(--boot-accent); transform: scaleX(0); transform-origin: left; animation: boot-progress 1.05s var(--boot-ease) .1s forwards; }
.boot-status { margin: 12px 0 0; min-height: 1.6em; color: var(--boot-muted); font-size: .95rem; }
.boot-footer { position: relative; font-size: .95rem; color: var(--boot-muted); }
.boot-footer p { margin: 0; }
.boot-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 14px;
    min-height: 44px; padding: 8px 0 8px 12px;
    color: var(--boot-text); text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}
.boot-link-arrow { font-size: 1.4rem; line-height: 1; }
.boot-link:hover { color: var(--boot-accent); transform: translateX(3px); }
.boot-link:active { transform: translateX(1px); }
.boot-link:focus-visible { outline: 2px solid var(--boot-accent); outline-offset: 5px; border-radius: 4px; }
/* Navigation never hides the fallback link: a stalled request remains usable. */
.is-leaving .boot-core { transition: opacity .28s ease, transform .28s ease; opacity: .55; transform: scale(1.04); }
@keyframes boot-arrive { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes boot-mascot { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes boot-orbit { to { transform: rotate(320deg); } }
@keyframes boot-progress { to { transform: scaleX(1); } }
@media (max-width: 600px) {
    .boot-header-label { font-size: .95rem; }
    .boot-brand { width: 124px; }
    .boot { padding-block: 52px 40px; }
    .boot-core { width: min(64vw, 280px); }
    .boot-orbit-wide { inset: -22%; }
    .boot-title { margin-top: 30px; }
    .boot-footer { flex-direction: column; gap: 6px; text-align: center; }
    .boot-link { padding-inline: 12px; }
}
@media (max-height: 600px) and (min-width: 601px) {
    .boot { padding-block: 12px; }
    .boot-core { width: 170px; }
    .boot-title { margin-top: 12px; font-size: 2.2rem; }
    .boot-loading { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .boot-bar span { transform: scaleX(1); }
}
@media (forced-colors: active) {
    .boot-brand { filter: none; background: white; }
    .boot-bar { background: CanvasText; }
    .boot-link { text-decoration: underline; }
}