/* ==========================================================================
   Space navigation (NEO-181) - homepage-only presentation layer.

   Every rule is scoped to html.space-nav, which js/space-nav-gate.js sets
   before first paint (never under prefers-reduced-motion, never without JS,
   and ?spacenav=off opts out for the session). js/space-nav.js drives the
   camera. If the engine fails to boot, the gate removes the class on window
   load and this whole sheet becomes inert, reverting to the classic page.
   ========================================================================== */

/* The engine owns all easing; native smooth scrolling would fight the
   magnetic snap and nav flights. */
html.space-nav {
    scroll-behavior: auto;
}

/* The canvas draws the symbol live; the static image and its Ken Burns loop
   retire. The vignette div stays: it reads just as well over the canvas. */
html.space-nav .hero-infinity {
    display: none;
}

html.space-nav #space-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* The space canvas provides the ambient particles; the hero cursor layer
   retires (hero-cursor.js also skips itself under space-nav). */
html.space-nav #hero-cursor-canvas {
    display: none;
}

/* Sections become fixed-height scroll segments ("stations"). Native scroll
   through them is what drives the camera, so scrollbar, keyboard paging,
   anchors and screen-reader order all keep working. */
html.space-nav main > section {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    padding: 0;
    scroll-margin-top: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

html.space-nav main > section::before {
    display: none;
}

/* Station panels: each section's existing .container, lifted into a fixed
   camera layer. The engine writes transform/opacity per frame; these are the
   resting defaults, which also hold for first paint (hero visible, the rest
   waiting off-camera). Tall content scrolls inside the panel and chains back
   to the page, so nothing is ever unreachable. */
html.space-nav main > section > .container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(1160px, 94vw);
    max-height: calc(100vh - 128px);
    max-height: min(84svh, calc(100svh - 112px));
    overflow-y: auto;
    padding: clamp(20px, 3.2vw, 44px);
    background: linear-gradient(165deg, rgba(16, 16, 20, 0.58), rgba(6, 6, 8, 0.44));
    border: 1px solid rgba(255, 215, 0, 0.14);
    border-radius: var(--radius-2xl);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    opacity: 0;
    will-change: transform, opacity;
}

html.space-nav main > section > .container::-webkit-scrollbar {
    width: 8px;
}

html.space-nav main > section > .container::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.25);
    border-radius: var(--radius-sm);
}

html.space-nav main > section > .container::-webkit-scrollbar-track {
    background: transparent;
}

/* The hero arrives unboxed: its inner elements already carry their own glass
   treatment, and the open composition matches the current live hero. */
html.space-nav #home > .container {
    opacity: 1;
    background: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-y: visible;
}

/* The stock scroll-driven reveal must not fight the engine. animation-timeline
   animations would override the engine's inline styles, so kill them here. */
html.space-nav .content-section > .container {
    animation: none !important;
}

html.space-nav .content-section.reveal-fallback > .container {
    transition: none;
}

/* End of the journey: the footer scrolls up over the space like a bulkhead.
   Slightly more opaque here so panels and starfield read through it less. */
html.space-nav .footer {
    background: rgba(8, 8, 10, 0.94);
    z-index: 5;
}

@media (max-width: 768px) {
    html.space-nav main > section > .container {
        width: 94vw;
        max-height: calc(100vh - 96px);
        max-height: min(86svh, calc(100svh - 88px));
        padding: var(--space-5);
    }
}