/* hv-succession.css — "the lineage yard" cinematic stage for #succession-studio.
   Layered by hv-succession.js between the figcaption and the GEN button
   timeline; home-page.js remains the state controller (buttons + readout).
   This sheet only styles the injected .hv7-stage and re-flows the existing
   controls once .hv7-live is present. Prefix: hv7-. Paper ground. */

/* ---- gentle re-flow of the existing figure once the stage is live ---- */

.home-succession-studio.hv7-live .home-succession-line {
    padding: clamp(1rem, 2.4vw, 1.6rem);
}

.home-succession-studio.hv7-live .home-succession-line button {
    min-height: 5.25rem;
}

/* ---- the stage ---- */

.hv7-stage {
    position: relative;
    height: 448px;
    overflow: hidden;
    border-bottom: 1px solid var(--home-line);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--home-white) 62%, transparent), transparent 46%),
        var(--home-paper);
    color: var(--home-ink);
    font-family: var(--home-sans);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.hv7-stage * {
    box-sizing: border-box;
    min-width: 0;
}

/* edge-fade scrims: world content dissolves at the frame instead of
   hard-slicing letterforms (GEN labels, constructs arrows) at the clip */
.hv7-stage::before,
.hv7-stage::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 7;
    pointer-events: none;
}

.hv7-stage::before {
    left: 0;
    width: 40px;
    background: linear-gradient(90deg, var(--home-paper, #f4f1e9), transparent);
}

.hv7-stage::after {
    right: 0;
    width: 56px;
    background: linear-gradient(270deg, var(--home-paper, #f4f1e9), transparent);
}

.hv7-vp {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hv7-world {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    will-change: transform;
    /* faint drafting grid pans with the world so the camera move is legible */
    background:
        repeating-linear-gradient(90deg, rgba(25, 25, 23, .05) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(180deg, rgba(25, 25, 23, .035) 0 1px, transparent 1px 72px);
}

.hv7-ground {
    position: absolute;
    top: 310px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid var(--home-line);
    background: linear-gradient(180deg, rgba(25, 25, 23, .05), transparent 46%);
}

/* ---- sky svg: the returning feedback arc ---- */

.hv7-sky {
    position: absolute;
    inset: 0;
    display: block;
    overflow: visible;
    pointer-events: none;
    z-index: 4;
}

.hv7-arc {
    fill: none;
    stroke: var(--home-rust);
    stroke-width: 2;
    stroke-linecap: round;
}

.hv7-arc-head {
    fill: var(--home-rust);
    opacity: 0;
    transition: opacity .3s ease;
}

.hv7-arclab {
    position: absolute;
    top: 50px;
    z-index: 5;
    padding: 4px 10px;
    border: 1px solid var(--home-rust);
    background: var(--home-paper);
    color: var(--home-rust-dark);
    font: 600 13px/1.3 var(--home-mono);
    letter-spacing: .04em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-7px);
    transition: opacity .5s ease, transform .6s var(--home-ease);
}

.hv7-arclab.hv7-arclab-on {
    opacity: 1;
    transform: none;
}

/* ---- construction sites ---- */

.hv7-site {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 340px;
    z-index: 2;
}

/* ---- capability blocks ---- */

.hv7-blk {
    position: absolute;
    left: 95px;
    width: 150px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--home-ink);
    background: var(--home-white);
    color: var(--home-ink);
    font: 600 13px/1 var(--home-mono);
    letter-spacing: .03em;
    white-space: nowrap;
    opacity: 0;
    z-index: 2;
}

.hv7-blk.hv7-fly {
    z-index: 6;
    box-shadow: 0 10px 16px -10px rgba(25, 25, 23, .45);
}

/* created earlier in the lineage — carries the maker's mark */
.hv7-blk-heir {
    box-shadow: inset 3px 0 0 var(--home-rust);
}

/* created by THIS build — the one rust moment per arrival */
.hv7-blk-new {
    border-color: var(--home-rust);
    background: color-mix(in srgb, var(--home-rust) 9%, var(--home-white));
    color: var(--home-rust-dark);
    box-shadow: inset 3px 0 0 var(--home-rust);
}

.hv7-blk-new.hv7-fly {
    box-shadow: inset 3px 0 0 var(--home-rust), 0 10px 16px -10px rgba(140, 48, 24, .5);
}

.hv7-blk-new.hv7-set {
    animation: hv7-pop .62s var(--home-ease);
}

@keyframes hv7-pop {
    0% { box-shadow: inset 3px 0 0 var(--home-rust), 0 0 0 8px rgba(189, 67, 33, .28); }
    100% { box-shadow: inset 3px 0 0 var(--home-rust), 0 0 0 0 rgba(189, 67, 33, 0); }
}

/* idle glint — one block at a time, driven by the clock */
.hv7-blk::after {
    content: "";
    position: absolute;
    top: -4px;
    bottom: -4px;
    left: -46%;
    width: 34%;
    background: linear-gradient(100deg, transparent, rgba(255, 250, 241, .85), transparent);
    transform: skewX(-18deg);
    opacity: 0;
}

.hv7-blk.hv7-glint::after {
    left: 112%;
    opacity: .95;
    transition: left .95s var(--home-ease), opacity .95s ease;
}

/* ---- arrival chips ---- */

.hv7-chip {
    position: absolute;
    left: 255px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid var(--home-rust);
    background: var(--home-paper);
    color: var(--home-rust-dark);
    font: 600 13px/1 var(--home-mono);
    letter-spacing: .03em;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .35s ease, transform .5s var(--home-ease);
    z-index: 7;
}

.hv7-chip.hv7-chip-on {
    opacity: 1;
    transform: none;
}

/* GEN n rises at the world's right edge — its chips arrive on the left */
.hv7-site[data-hv7-g="3"] .hv7-chip {
    left: auto;
    right: 251px;
    transform: translateX(8px);
}

.hv7-site[data-hv7-g="3"] .hv7-chip.hv7-chip-on {
    transform: none;
}

/* ---- build cranes ---- */

.hv7-crane {
    position: absolute;
    left: 0;
    width: 340px;
    height: 48px;
    opacity: 0;
    transition: opacity .45s ease;
    z-index: 3;
}

.hv7-crane.hv7-crane-on {
    opacity: 1;
}

.hv7-crane i {
    display: block;
    font-style: normal;
}

.hv7-mast {
    position: absolute;
    left: 169px;
    top: 8px;
    width: 2px;
    height: 40px;
    background: var(--home-ink);
}

.hv7-mast::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 0;
    width: 12px;
    height: 2px;
    background: var(--home-ink);
}

.hv7-jib {
    position: absolute;
    left: 171px;
    top: 8px;
    width: 64px;
    height: 2px;
    background: var(--home-ink);
    transform-origin: left center;
}

.hv7-trolley {
    position: absolute;
    left: 0;
    top: -3px;
    width: 8px;
    height: 8px;
    background: var(--home-ink);
}

.hv7-cable {
    position: absolute;
    left: 3px;
    top: 8px;
    width: 1px;
    height: 15px;
    background: var(--home-ink);
}

.hv7-cable::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -4px;
    width: 7px;
    height: 4px;
    border: 1px solid var(--home-ink);
    border-top: 0;
}

/* ---- ghost blocks: GEN n keeps assembling out of frame ---- */

.hv7-ghost {
    position: absolute;
    left: 95px;
    width: 150px;
    height: 32px;
    border: 1px dashed var(--home-rust);
    background: color-mix(in srgb, var(--home-rust) 6%, transparent);
    opacity: 0;
    z-index: 1;
}

/* ---- ground furniture: names, plaques, constructs links ---- */

.hv7-name {
    position: absolute;
    left: 20px;
    top: 324px;
    width: 300px;
    color: var(--home-ink);
    font: 700 20px/1.1 var(--home-mono);
    letter-spacing: .02em;
    opacity: .35;
    transition: opacity .45s ease;
}

.hv7-site.hv7-site-up .hv7-name {
    opacity: 1;
}

.hv7-name::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    margin-top: 5px;
    background: var(--home-rust);
    transition: width .5s var(--home-ease);
}

.hv7-site.hv7-sel .hv7-name::after {
    width: 46px;
}

.hv7-plq {
    position: absolute;
    left: 20px;
    top: 360px;
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hv7-line {
    color: var(--home-muted);
    font: 400 13px/1.35 var(--home-sans);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .4s ease, transform .55s var(--home-ease);
}

.hv7-line.hv7-line-on {
    opacity: 1;
    transform: none;
}

.hv7-line.hv7-line-own {
    color: var(--home-ink);
    font-weight: 600;
}

.hv7-link {
    position: absolute;
    top: 285px;
    height: 1px;
    background: var(--home-line);
    opacity: 0;
    z-index: 1;
}

.hv7-link::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -4px;
    border-left: 7px solid var(--home-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

.hv7-link span {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    color: var(--home-muted);
    font: 600 13px/1 var(--home-mono);
    letter-spacing: .07em;
    white-space: nowrap;
}

/* ---- HUD: pinned top-LEFT so GEN n can assemble out of the top-right ---- */

.hv7-hud {
    position: absolute;
    top: 12px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 8px 12px;
    z-index: 8;
    pointer-events: none;
}

.hv7-hud span {
    padding: 3px 7px;
    background: var(--home-paper);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--home-line) 55%, transparent);
    color: var(--home-muted);
    font: 600 13px/1.3 var(--home-mono);
    letter-spacing: .07em;
    white-space: nowrap;
}

.hv7-hud .hv7-hud-r.hv7-busy {
    color: var(--home-rust-dark);
}

@media (max-width: 540px) {
    .hv7-hud .hv7-hud-l {
        display: none;
    }
}

/* ---- reduced motion: composed final state, no travel ---- */

@media (prefers-reduced-motion: reduce) {
    .hv7-blk::after {
        display: none;
    }

    .hv7-blk-new.hv7-set {
        animation: none;
    }

    .hv7-chip,
    .hv7-line,
    .hv7-arclab,
    .hv7-name,
    .hv7-name::after,
    .hv7-crane {
        transition: none;
    }
}

/* ---- forced colors: the decorative stage steps aside ---- */

@media (forced-colors: active) {
    .hv7-stage {
        display: none;
    }
}