/* hv-genesis.css — "a mind assembling itself"
   Cinematic stage for the hero figure #genesis-scene plus the hero's
   ambient .home-grid-field canvas. Companion to js/hv-genesis.js.

   Ground: DARK (the genesis figure is an ink panel inside the paper hero).
   Prefix: hv1-  ·  No markup edits: the stage is injected by JS, the old
   static decoration (.home-genesis-orbits, .home-genesis-generations) is
   only hidden when JS has added .hv1-on — no-JS keeps the original figure.

   Load AFTER css/home-v2.css. */

/* ---------- hero ambient field canvas ---------- */

.hv1-fieldcv {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------- swap static decoration for the living stage ---------- */

.home-genesis.hv1-on .home-genesis-orbits,
.home-genesis.hv1-on .home-genesis-generations {
    visibility: hidden;
}

html.home-js .home-genesis.hv1-on .home-genesis-orbits {
    animation: none !important;
}

/* Below ~478px figure width the scene sleeps and the original compact
   markup shows (JS adds .hv1-mini). */
.home-genesis.hv1-on.hv1-mini .home-genesis-orbits,
.home-genesis.hv1-on.hv1-mini .home-genesis-generations {
    visibility: visible;
}

.home-genesis.hv1-on.hv1-mini .hv1-back,
.home-genesis.hv1-on.hv1-mini .hv1-fore {
    display: none;
}

/* ---------- stage layers ---------- */

.hv1-back,
.hv1-fore {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* core is z4, mandate z5, buttons z6 — the scene lives underneath */
.hv1-back { z-index: 2; }
.hv1-fore { z-index: 3; }

.hv1-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* ---------- SVG strokes ---------- */

.hv1-ring {
    fill: none;
    stroke: #57534a;
    stroke-width: 1;
}

.hv1-gate {
    fill: #211f1b;
    stroke: #8d877c;
    stroke-width: 1;
}

.hv1-gate.hv1-glive {
    stroke: var(--home-rust-light, #f09a78);
}

.hv1-orb {
    fill: none;
    stroke: #57534a;
    stroke-width: 1;
    stroke-dasharray: 3 9;
}

.hv1-rotor {
    fill: none;
    stroke: rgba(240, 154, 120, .34);
    stroke-width: 1;
    stroke-dasharray: 2 10;
}

.hv1-vec {
    fill: none;
    stroke: var(--home-rust-light, #f09a78);
    stroke-width: 1.5;
    stroke-linecap: round;
}

.hv1-sup {
    fill: none;
    stroke: #6a655b;
    stroke-width: 1;
    stroke-dasharray: 1 0;
}

.hv1-sup-in { stroke: #8d877c; }

.hv1-apath {
    fill: none;
    stroke: #6a655b;
    stroke-width: 1.5;
}

.hv1-spoke {
    stroke: rgba(240, 154, 120, .55);
    stroke-width: 1;
}

.hv1-knot {
    fill: #211f1b;
    stroke: var(--home-rust, #bd4321);
    stroke-width: 1.5;
}

.hv1-knot.hv1-kfixed {
    stroke: var(--home-rust-light, #f09a78);
}

.hv1-mend {
    fill: none;
    stroke: var(--home-rust-light, #f09a78);
    stroke-width: 1.6;
    stroke-linecap: round;
}

/* ---------- nucleus breath ---------- */

.hv1-halo {
    position: absolute;
    border: 1px solid rgba(240, 154, 120, .45);
    border-radius: 50%;
    will-change: transform, opacity;
}

/* ---------- orbiting capability chips ---------- */

.hv1-chips {
    position: absolute;
    inset: 0;
}

.hv1-chip {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid #4b4841;
    border-radius: 999px;
    background: rgba(28, 27, 24, .93);
    color: var(--home-muted-light, #bcb5a9);
    font-family: var(--home-mono, monospace);
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: .05em;
    white-space: nowrap;
    will-change: transform, opacity;
}

.hv1-chip b { font-weight: 600; }

.hv1-chip i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8d877c;
    flex: 0 0 auto;
}

.hv1-chip[data-t="model"] i { background: #d8d2c4; }
.hv1-chip[data-t="spec"] i { background: var(--home-white, #fffaf1); }

.hv1-chip.hv1-docked {
    border-color: var(--home-rust-light, #f09a78);
    color: var(--home-white, #fffaf1);
}

.hv1-chip.hv1-docked i { background: var(--home-rust-light, #f09a78); }

/* ---------- goal beacon ---------- */

.hv1-beacon {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 2px;
    transform: translate(-50%, -50%);
    color: var(--home-white, #fffaf1);
    text-align: center;
    will-change: transform, opacity;
}

.hv1-beacon::before {
    content: "";
    width: 10px;
    height: 10px;
    margin-bottom: 3px;
    background: var(--home-rust-light, #f09a78);
    transform: rotate(45deg);
    box-shadow: 0 0 12px rgba(240, 154, 120, .8);
}

.hv1-beacon b {
    font-family: var(--home-mono, monospace);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
}

.hv1-beacon i {
    font-style: normal;
    font-size: 13px;
    color: var(--home-muted-light, #bcb5a9);
}

.hv1-bpulse {
    position: absolute;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(240, 154, 120, .8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}

/* ---------- boundary gate ticks ---------- */

.hv1-gtick {
    position: absolute;
    transform: translate(-50%, -135%);
    font-family: var(--home-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--home-rust-light, #f09a78);
    white-space: nowrap;
    text-transform: uppercase;
}

/* ---------- supply packets ---------- */

.hv1-pkt {
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--home-white, #fffaf1);
    box-shadow: 0 0 10px rgba(255, 250, 241, .75);
    will-change: transform, opacity;
}

/* ---------- action trail ---------- */

.hv1-ahead {
    position: absolute;
    left: 0;
    top: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--home-rust-light, #f09a78);
    box-shadow: 0 0 12px rgba(240, 154, 120, .8);
    will-change: transform, opacity;
}

.hv1-atick {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--home-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--home-muted-light, #bcb5a9);
}

.hv1-aknot {
    position: absolute;
    transform: translate(-50%, -50%);
    font-family: var(--home-mono, monospace);
    font-size: 14px;
    font-weight: 700;
    color: var(--home-rust-light, #f09a78);
}

.hv1-amend {
    position: absolute;
    transform: translate(-50%, -100%);
    font-family: var(--home-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--home-rust-light, #f09a78);
    white-space: nowrap;
}

/* ---------- forge (evolution) ---------- */

.hv1-forge {
    position: absolute;
    left: 0;
    top: 0;
    padding: 3px 9px;
    border: 1px solid var(--home-rust-light, #f09a78);
    border-radius: 999px;
    background: #26211c;
    color: var(--home-white, #fffaf1);
    font-family: var(--home-mono, monospace);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(189, 67, 33, .45);
    will-change: transform, opacity;
}

.hv1-flare {
    position: absolute;
    left: 0;
    top: 0;
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--home-rust-light, #f09a78);
    border-radius: 50%;
    will-change: transform, opacity;
}

.hv1-spark {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--home-rust-light, #f09a78);
    will-change: transform, opacity;
}

/* ---------- generation strip (replaces the static GEN row) ---------- */

.hv1-gens {
    position: absolute;
    left: 50%;
    bottom: 14.5%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--home-mono, monospace);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .055em;
    color: var(--home-muted-light, #bcb5a9);
    white-space: nowrap;
}

.hv1-gens > * {
    transition: opacity .45s var(--home-ease, ease), transform .45s var(--home-ease, ease);
}

.hv1-gens i {
    color: var(--home-rust-light, #f09a78);
    font-style: normal;
}

.hv1-gens b { color: var(--home-white, #fffaf1); }

.hv1-gens .hv1-gslot {
    padding: 2px 9px;
    border: 1px dashed #6a655b;
    border-radius: 999px;
    color: #8d877c;
    font-style: normal;
    font-weight: 600;
    transition: color .45s, border-color .45s, background-color .45s, box-shadow .45s;
}

.hv1-gens.hv1-gfull .hv1-gslot {
    border: 1px solid var(--home-rust-light, #f09a78);
    color: var(--home-white, #fffaf1);
    background: rgba(189, 67, 33, .28);
    box-shadow: 0 0 10px rgba(189, 67, 33, .4);
}

.hv1-gens.hv1-gadv > span:first-child { opacity: .35; }
.hv1-gens.hv1-gadv > * { transform: translateX(-4px); }

/* ==========================================================================
   Compact cinematic mode — the figure column is under 46rem on ordinary
   laptops (home-v2 switches it to a static grid there). Re-compose an
   absolute orbital layout for 30.1–46rem figures so the flagship scene
   plays at 1024–1700px viewports too. Everything scoped to .hv1-on so
   no-JS and forced-colors keep the stock grid.
   ========================================================================== */

@container genesis (min-width: 30.1rem) and (max-width: 46rem) {
    .home-genesis.hv1-on .home-genesis-field {
        display: block;
        min-height: 37rem;
        padding: 0;
    }

    .home-genesis.hv1-on .home-genesis-mandate {
        position: absolute;
        top: .9rem;
        left: 50%;
        width: auto;
        min-width: 13.5rem;
        min-height: 0;
        padding: .55rem .9rem;
        transform: translateX(-50%) !important;
    }

    .home-genesis.hv1-on .home-genesis-core {
        position: absolute;
        top: 47%;
        left: 50%;
        width: clamp(13.5rem, 38cqw, 16rem);
        min-width: 0;
        min-height: 0;
        aspect-ratio: 1 / 1;
        padding: 1.4rem;
        border-radius: 50%;
        transform: translate(-50%, -50%) !important;
    }

    .home-genesis.hv1-on .home-genesis-core strong {
        font-size: 1.2rem;
        letter-spacing: -.02em;
    }

    .home-genesis.hv1-on .home-genesis-core p {
        margin-top: .55rem;
        font-size: 13px;
    }

    .home-genesis.hv1-on .home-genesis-controls {
        position: absolute;
        inset: 0;
        display: block;
        padding: 0;
        border: 0;
        pointer-events: none;
        z-index: 6;
    }

    .home-genesis.hv1-on .home-genesis-controls button {
        pointer-events: auto;
        position: absolute;
        width: clamp(7.8rem, 24cqw, 9rem);
        min-height: 3.1rem;
        padding: .5rem .65rem;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .5rem;
        border: 1px solid #68635a;
        background: #1c1b18;
    }

    .home-genesis.hv1-on .home-genesis-controls button strong {
        font-size: 13px;
        line-height: 1.2;
    }

    .home-genesis.hv1-on .home-genesis-controls button:nth-child(1) { top: 15%; left: 2.5%; right: auto; bottom: auto; }
    .home-genesis.hv1-on .home-genesis-controls button:nth-child(2) { top: 15%; right: 2.5%; left: auto; bottom: auto; }
    .home-genesis.hv1-on .home-genesis-controls button:nth-child(3) { bottom: 22%; right: 2.5%; left: auto; top: auto; }
    .home-genesis.hv1-on .home-genesis-controls button:nth-child(4) { bottom: 22%; left: 2.5%; right: auto; top: auto; }

    .home-genesis.hv1-on .home-genesis-controls button:nth-child(5) {
        bottom: 2.4%;
        left: 50%;
        top: auto;
        right: auto;
        transform: translateX(-50%) !important;
    }

    .home-genesis.hv1-on .hv1-gens { bottom: 12.5%; }
}

/* ---------- reduced motion ---------- */
/* The scene is driven by JS; under reduce the JS renders one composed
   settled frame per state. The global home-v2 reduce rules already crush
   the strip's CSS transitions. Nothing extra needed here. */

/* ---------- forced colors ---------- */

@media (forced-colors: active) {
    .hv1-back,
    .hv1-fore,
    .hv1-fieldcv {
        display: none;
    }

    .home-genesis.hv1-on .home-genesis-generations {
        visibility: visible;
    }
}