/* ============================================================
   hzn-horizon.css — #horizon · "THE FORGE"  (prefix hzn-)

   Companion to js/hzn-horizon.js.

   Five materials are tapped from five taps, fall down five
   launders, converge in one machined tundish, and are poured
   through a sprue into a mould. The mould IS the sentence:
   "ASI for science and engineering" fills with light from the
   baseline up, flashes at the strike, and cools into one piece
   of warm bone metal. At the strike the five tap rails weld
   into ONE unbroken hairline with five visible joints — five
   separate inputs resolving into one system.

   The light is INSIDE the letterforms, never behind them.

   Everything here is scoped to .home-horizon-system.hzn-live —
   the class the JS adds at init. Without JS, or under
   forced-colors, the original markup in index.html renders on
   its own. The five property spans and the core line are never
   removed, never duplicated and never clipped: they ARE the
   scene's typography, restyled in place.
   ============================================================ */

/* ------------------------------------------------------------
   0 · TYPE FLOOR REPAIR (applies live or not)

   home-v2.css sets .home-horizon-core span to .78rem = 12.48px,
   which is below the 13px floor. It is a real violation the
   moment the fallback markup is shown (no-JS / forced-colors),
   so it is corrected here for every state of this section.
   ------------------------------------------------------------ */

.home-vision-page .home-horizon-core > span {
    font-size: .82rem;
}

/* ------------------------------------------------------------
   1 · GO LIVE — the figure becomes a plate
   ------------------------------------------------------------ */

.home-horizon-system.hzn-live {
    position: relative;
    display: block;
    min-height: 0;
    margin-top: clamp(3rem, 6.2vw, 5.5rem);
    gap: 0;
    isolation: isolate;
}

/* ------------------------------------------------------------
   2 · THE STAGE — a dark well sunk into the section ink
   ------------------------------------------------------------ */

.hzn-stage {
    position: relative;
    width: 100%;
    height: 40rem;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
}

.hzn-well {
    position: absolute;
    inset: -7% 0;
    z-index: 0;
    background:
        radial-gradient(58% 62% at 49% 46%, #040404 0%, #070706 38%, #0b0a09 68%, #100f0d 100%),
        linear-gradient(to top, rgba(126, 44, 21, .20) 0%, rgba(126, 44, 21, .06) 20%, rgba(126, 44, 21, 0) 42%);
    -webkit-mask-image: radial-gradient(53% 53% at 50% 50%, #000 0%, #000 36%, rgba(0, 0, 0, .60) 74%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(53% 53% at 50% 50%, #000 0%, #000 36%, rgba(0, 0, 0, .60) 74%, rgba(0, 0, 0, 0) 100%);
}

/* out-of-focus furnace light — the deepest focal plane */

.hzn-bloom {
    position: absolute;
    z-index: 1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    will-change: opacity, transform;
    transition: opacity 1.05s var(--home-ease), transform 1.05s var(--home-ease);
}

/* The falloff is shaped INTO the gradient rather than produced by a
   blur() filter. A 56–70px blur over a 1180px box costs a full-surface
   re-raster on every composited frame, which halved the build to 30fps
   on the machines this will be reviewed on. Same image, no filter. */

.hzn-bloom--a {
    background: radial-gradient(closest-side,
        rgba(189, 67, 33, .60) 0%, rgba(189, 67, 33, .40) 22%,
        rgba(189, 67, 33, .17) 46%, rgba(189, 67, 33, .05) 68%,
        rgba(189, 67, 33, 0) 86%);
}

.hzn-bloom--b {
    background: radial-gradient(closest-side,
        rgba(240, 154, 120, .38) 0%, rgba(240, 154, 120, .24) 24%,
        rgba(240, 154, 120, .10) 48%, rgba(240, 154, 120, .03) 70%,
        rgba(240, 154, 120, 0) 88%);
}

.hzn-bloom--c {
    background: radial-gradient(closest-side,
        rgba(140, 48, 24, .46) 0%, rgba(140, 48, 24, .30) 24%,
        rgba(140, 48, 24, .13) 50%, rgba(140, 48, 24, .04) 72%,
        rgba(140, 48, 24, 0) 90%);
}

.hzn-parallax {
    position: absolute;
    inset: 0;
    z-index: 1;
    transform: translate3d(0, 0, 0);
    transition: transform 1.1s cubic-bezier(.16, .8, .28, 1);
    will-change: transform;
}

.hzn-fire,
.hzn-front {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hzn-fire { z-index: 2; }
.hzn-front { z-index: 6; }

/* the plate stamp — flush left, inside the frame, above everything
   the mechanism draws. Decorative: the real reading order lives in
   the untouched markup. */

.hzn-stamp {
    position: absolute;
    z-index: 5;
    margin: 0;
    /* the settled colour, stated literally. The JS fades this in and
       dips it at the strike, but never caps it below 1 — the stamp is
       secondary text on the dark well, not a watermark, so it has to
       clear the same contrast floor as the labels under it. */
    color: #a9a397;
    font-family: var(--home-mono);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .28em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    will-change: opacity;
}

/* compact: five index marks stand at the head of the five taps */

.hzn-marks {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.hzn-marks b {
    position: absolute;
    display: block;
    color: var(--home-rust-light);
    font-family: var(--home-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1;
    text-align: center;
    text-indent: .16em;
    opacity: 0;
    will-change: opacity;
}

.hzn-grain {
    position: absolute;
    inset: 0;
    z-index: 8;
    opacity: .10;
    pointer-events: none;
    mix-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 96px 96px;
    -webkit-mask-image: radial-gradient(64% 62% at 50% 50%, #000 0%, #000 30%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(64% 62% at 50% 50%, #000 0%, #000 30%, rgba(0, 0, 0, .5) 70%, rgba(0, 0, 0, 0) 100%);
}

/* ------------------------------------------------------------
   3 · THE FIVE TAPS — the original property spans, restyled
   ------------------------------------------------------------ */

.hzn-live .home-horizon-properties {
    display: block;
    border: 0;
}

.hzn-live[data-hzn-mode="wide"] .home-horizon-properties {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 4;
    pointer-events: none;
}

.hzn-tap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.hzn-live[data-hzn-mode="wide"] .hzn-tap {
    position: absolute;
    opacity: .16;
    pointer-events: auto;
    cursor: pointer;
    transform: translate3d(0, 5px, 0);
    will-change: opacity, transform;
}

.hzn-tap:focus-visible {
    outline: 2px solid var(--home-rust-light);
    outline-offset: 8px;
}

.hzn-idx {
    display: block;
    color: var(--home-rust-light);
    font-family: var(--home-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1;
    text-indent: .2em;
    transition: color .35s var(--home-ease);
}

.hzn-rule {
    display: block;
    width: 0;
    height: 1px;
    margin: .68rem 0 .66rem;
    background: linear-gradient(to right, rgba(240, 154, 120, 0), rgba(240, 154, 120, .9), rgba(240, 154, 120, 0));
}

.hzn-live .home-horizon-properties span {
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    color: #e2dccf;
    font-family: var(--home-mono);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .055em;
    line-height: 1.34;
    text-transform: uppercase;
    text-wrap: balance;
    transition: color .35s var(--home-ease);
}

.hzn-live .home-horizon-properties span::before {
    display: none;
}

.hzn-tap[data-hzn-on="1"] span { color: var(--home-white); }
.hzn-tap[data-hzn-on="1"] .hzn-idx { color: var(--home-white); }

/* The five property strings are the only words this layer prints under a
   tap. An earlier draft added a morphology sub-caption per property; it
   was visible body copy at compact widths that the section's own markup
   never says, so it is gone — the illustration is described instead by
   the visually-hidden .hzn-sr paragraph the JS writes. */

/* ------------------------------------------------------------
   4 · THE CASTING — the original core line, restyled
   ------------------------------------------------------------ */

.hzn-live .home-horizon-core {
    position: absolute;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    max-width: none;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    text-align: center;
}

.hzn-live .home-horizon-core::before,
.hzn-live .home-horizon-core::after,
.hzn-live .home-horizon-core > i {
    display: none;
}

/* the casting itself — light lives inside the letterforms */

.hzn-live .home-horizon-core > strong,
.hzn-ghost .hzn-t {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding-bottom: .1em;
    font-family: var(--home-sans);
    font-size: clamp(2.75rem, 7.6cqi, 7rem);
    font-weight: 700;
    font-style: normal;
    line-height: .92;
    letter-spacing: -.055em;
    text-align: center;
    text-transform: none;
    overflow-wrap: normal;
}

.hzn-live .home-horizon-core > strong {
    position: relative;
    z-index: 2;
    order: 1;
    background-image: linear-gradient(to bottom, #1b1916 0%, #1b1916 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    will-change: transform;
}

.hzn-ghost {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    pointer-events: none;
}

.hzn-ghost .hzn-t {
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
}

/* the empty mould: a cavity pressed into the dark */
.hzn-mold {
    color: #14120e;
    text-shadow: 0 -1px 0 rgba(255, 250, 241, .06), 0 2px 5px rgba(0, 0, 0, .98);
}

/* radiated heat, three falloffs so the bloom never reads as a box */
.hzn-haze { color: #dc4711; filter: blur(62px); opacity: 0; transform: scale(1.1); }
.hzn-far  { color: #ff6a22; filter: blur(25px); opacity: 0; transform: scale(1.03); }
.hzn-near { color: #ffc078; filter: blur(6px);  opacity: 0; }

/* the foundry stamp under the casting: the original core span */

.hzn-live .home-horizon-core > span {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    width: 100%;
    margin-top: clamp(1.55rem, 2.35cqi, 2.5rem);
    color: var(--home-rust-light);
    font-family: var(--home-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .26em;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0;
    will-change: opacity;
}

.hzn-live .home-horizon-core > span::before,
.hzn-live .home-horizon-core > span::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: var(--hzn-rw, 0px);
    height: 1px;
    background: linear-gradient(to right, rgba(240, 154, 120, 0), rgba(240, 154, 120, .75));
}

.hzn-live .home-horizon-core > span::after {
    background: linear-gradient(to left, rgba(240, 154, 120, 0), rgba(240, 154, 120, .75));
}

/* graceful degradation if background-clip:text is unavailable */

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .hzn-live .home-horizon-core > strong {
        background: none;
        color: var(--home-white);
        -webkit-text-fill-color: currentColor;
    }

    .hzn-ghost { display: none; }
}

/* ------------------------------------------------------------
   5 · THE FOOT BAND — result line + the only control.
   Deliberately OUTSIDE the plate: the climax image carries no UI.
   ------------------------------------------------------------ */

/* Both items pack LEFT. The site's persistent "Pause animations" pill is
   fixed to the bottom-right corner at z-index 900, so a control parked at
   the right end of this band is covered — and unclickable — every time the
   band passes through the bottom of the viewport. Keeping the control
   inboard of the result line puts it permanently out of that corner. */

.hzn-foot {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 1.5rem 2.6rem;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    padding-top: 1.15rem;
    border-top: 1px solid #3b362f;
}

.hzn-result {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: .85rem;
    color: #c8c2b7;
    font-family: var(--home-mono);
    font-size: .82rem;
    font-weight: 500;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .8s var(--home-ease);
    will-change: opacity;
}

.hzn-result i {
    flex: 0 0 auto;
    color: var(--home-rust-light);
    font-style: normal;
    letter-spacing: .26em;
}

.hzn-result span { color: var(--home-white); }

/* .hzn-live scopes this to (0,2,0) so it beats home-v2.css's page-level
   `.home-vision-page button { font: inherit }` (0,1,1) — without it the
   only control in the layer paints at 16px Geist sans instead of the
   13.12px mono the whole foot band is set in. */

.hzn-live .hzn-replay {
    flex: 0 0 auto;
    padding: .58rem 1.05rem;
    border: 1px solid #4b4841;
    background: none;
    color: #c8c2b7;
    font-family: var(--home-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .2em;
    line-height: 1;
    text-indent: .2em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color .3s var(--home-ease), border-color .3s var(--home-ease);
}

.hzn-live .hzn-replay:hover {
    border-color: var(--home-rust-light);
    color: var(--home-white);
}

.hzn-live .hzn-replay:focus-visible {
    outline: 2px solid var(--home-rust-light);
    outline-offset: 3px;
}

/* ------------------------------------------------------------
   6 · COMPACT — a designed alternative, not a squeeze.
   The picture keeps the argument (five feeders welding onto one
   thickening runner, one vessel, one casting); the five strings
   move to a proper legend band under the plate, keyed 01–05.
   ------------------------------------------------------------ */

.hzn-live[data-hzn-mode="compact"] .home-horizon-properties {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 2rem;
    margin-top: 1.5rem;
    padding-top: 1.35rem;
    border-top: 1px solid #3b362f;
}

.hzn-live[data-hzn-cols="1"] .home-horizon-properties {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.05rem;
}

.hzn-live[data-hzn-mode="compact"] .hzn-tap {
    position: static;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: .3rem .8rem;
    text-align: left;
    cursor: pointer;
}

.hzn-live[data-hzn-mode="compact"] .hzn-idx { grid-column: 1; grid-row: 1; }
.hzn-live[data-hzn-mode="compact"] .home-horizon-properties span { grid-column: 2; grid-row: 1; text-wrap: pretty; }
.hzn-live[data-hzn-mode="compact"] .hzn-rule { display: none; }

.hzn-live[data-hzn-mode="compact"] .hzn-foot { margin-top: 1.4rem; }

.hzn-live[data-hzn-mode="compact"] .home-horizon-core > strong,
.hzn-live[data-hzn-mode="compact"] .hzn-ghost .hzn-t {
    font-size: clamp(1.85rem, 11.4cqi, 3.15rem);
    letter-spacing: -.048em;
    line-height: .95;
}

.hzn-live[data-hzn-mode="compact"] .home-horizon-core > span {
    margin-top: clamp(1.35rem, 4.4cqi, 2rem);
    gap: .7rem;
    letter-spacing: .2em;
}

/* ------------------------------------------------------------
   7 · SCREEN-READER NOTES
   ------------------------------------------------------------ */

.hzn-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ------------------------------------------------------------
   8 · REDUCED MOTION — the composed frame, no sweep, no drift
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .hzn-bloom,
    .hzn-parallax,
    .hzn-result,
    .hzn-idx,
    .hzn-live .home-horizon-properties span {
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   9 · FORCED COLORS — retire the stage, restore the markup
   ------------------------------------------------------------ */

@media (forced-colors: active) {
    .hzn-stage,
    .hzn-ghost,
    .hzn-rule {
        display: none !important;
    }

    /* Both tracks are minmax(0, …): a hard rem minimum on a two-column
       grid cannot shrink, so the second column would push the casting off
       the right edge of any viewport narrower than its own floor — and
       because .home-horizon-system.hzn-live is (0,2,0) it would do that
       while OUTRANKING home-v2.css's own narrow-width stacking rule for
       .home-horizon-system. The ratio still governs above the breakpoint. */

    .home-horizon-system.hzn-live {
        display: grid;
        grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
        align-items: center;
        gap: clamp(3rem, 8vw, 8rem);
        margin-top: clamp(4rem, 8vw, 7rem);
    }

    .hzn-live .home-horizon-properties {
        position: static !important;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin: 0;
        padding: 0;
        border-top: 1px solid CanvasText;
    }

    .hzn-live .hzn-tap {
        position: static !important;
        display: block;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        opacity: 1 !important;
        transform: none !important;
        text-align: left;
    }

    .hzn-live .hzn-idx {
        display: inline;
        margin-right: .75rem;
    }

    .hzn-live .home-horizon-properties span {
        display: block;
        min-height: 4.5rem;
        padding: 1rem 0;
        border-bottom: 1px solid CanvasText;
        color: CanvasText;
        text-wrap: wrap;
    }

    .hzn-live .home-horizon-core {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 30rem;
        padding: 2rem 1rem;
        border: 1px solid CanvasText;
        color: CanvasText;
    }

    .hzn-live .home-horizon-core > strong {
        order: 0;
        position: static;
        background-image: none !important;
        transform: none !important;
        color: CanvasText;
        -webkit-text-fill-color: currentColor;
        font-size: clamp(2.6rem, 5.2vw, 5.4rem);
    }

    .hzn-live .home-horizon-core > span {
        order: 0;
        display: block;
        margin: 0 0 1rem;
        color: CanvasText;
        opacity: 1 !important;
    }

    .hzn-live .home-horizon-core > span::before,
    .hzn-live .home-horizon-core > span::after {
        display: none;
    }

    /* The whole foot band goes with the stage. Its result line only ever
       resolves as the animation settles, and replay() is a no-op in this
       mode (it deactivates and returns), so keeping the band would offer
       a focusable, ButtonFace-styled control that cannot act. */

    .hzn-live .hzn-foot {
        display: none;
    }
}

/* The forced-colors layout above restores the ORIGINAL two-column figure.
   Below the site's own stacking breakpoint that figure is one column in
   home-v2.css, and it has to be one column here too or the casting is
   pushed off-screen — body has overflow-x: clip, so it cannot be scrolled
   back into view. Mirrors home-v2.css's @media (max-width: 1180px). */

@media (forced-colors: active) and (max-width: 1180px) {
    .home-horizon-system.hzn-live {
        grid-template-columns: minmax(0, 1fr);
    }
}