/**
 * SECTION TRANSITION — chromatic curtain + solid typographic overlay.
 *
 * Progressive enhancement:
 *   Default (no JS / reduced motion / narrow viewport): the section is
 *   invisible and takes no space, so sections butt directly. When the
 *   JS module boots and qualifies (GSAP + wide viewport + motion allowed)
 *   it adds .is-live, which reveals the pinned scroll stage.
 *
 * Motion:
 *   - Curtain (.flood) rises from below the pinned viewport, holds full-
 *     cover, then continues off the top. Pure translateY, GPU compositing.
 *   - Word (.word) is HTML text with a big fluid clamp and CSS scale +
 *     opacity. Solid fill, no outline, no rotation — matches the
 *     "process." wipe voice.
 *   - Dust (.dust) is a canvas overlay driven by the module; canvas
 *     positioning lives here.
 *
 * Colors are set per-transition via inline CSS custom properties:
 *   --st-flood       — the curtain color
 *   --st-word-color  — the word fill color
 *   --st-outgoing    — background of the section leaving (fallback fill
 *                      before curtain arrives, so nothing flashes)
 */
.section-transition {
    display: none;
    position: relative;
}
.section-transition.is-live {
    display: block;
    height: 100vh;
    overflow: hidden;
    background: var(--st-outgoing, transparent);
    pointer-events: none;
    /* The pinned wire-spirit canvas sits at z-index: 0 (position: fixed).
       The transition must paint above it so the flood, word, and dust
       aren't hidden by the wire. Header nav (z-index: 100) still wins. */
    z-index: 10;
}

/* Full-viewport panel of the incoming color, slid off-screen bottom
   until the pinned scroll drives it into place. */
.section-transition__flood {
    position: absolute;
    inset: 0;
    background: var(--st-flood, var(--paper));
    transform: translate3d(0, 100%, 0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Shared display-type sizing for the word and its optional flankers.
   All three lines match so they read as one editorial mass — the same
   principle as the old process wipe (Figma 46:769). */
.section-transition {
    --st-type-size: clamp(6rem, 20vw, 18rem);
}

/* The signature word — solid fill, centered, dominant scale. */
.section-transition__word {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    place-items: center;
    padding-inline: var(--gutter);
    font-family: var(--font-display);
    font-weight: 900;
    /* Fluid: ~96px on narrow desktop, up to ~288px at 1440+. Scales in
       real time via the module's transform, so this is the ceiling size. */
    font-size: var(--st-type-size);
    line-height: 0.85;
    letter-spacing: -0.045em;
    color: var(--st-word-color, var(--paper));
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transform: scale(0.15);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    /* Text sits above the flood so it's visible during the hold */
    z-index: 1;
}

/* Hero variant of the word — mega display type sized to bleed off both
   sides of the viewport, matching Figma node 46:769 (section-promo). At
   1440 the word "process" renders at 900px Museo Sans 700, -0.08em
   tracking, line-height 0.556, coming out ~2837px wide inside a 1440
   frame — 698.5px of symmetric bleed off each side. The fluid clamp
   holds those proportions from mobile up. Padding-inline: 0 overrides
   the base gutter so the word can extend fully to the viewport edges;
   the section's overflow:hidden clips at the frame. */
.section-transition__word--mega {
    font-size: clamp(6rem, 62.5vw, 56.25rem);
    line-height: 0.556;
    letter-spacing: -0.08em;
    font-weight: var(--wt-display, 700);
    padding-inline: 0;
}

/* Hero mode: the word is anchored to the OUTGOING section color and
   the flood rises late to cover it and hand off to the incoming color.
   Inverts the default z-order so the curtain paints over the word as
   it rises (the word stays behind, dissolving into the incoming color
   rather than floating on top of it). */
.section-transition[data-transition-hero] .section-transition__word { z-index: 0; }
.section-transition[data-transition-hero] .section-transition__flood { z-index: 3; }

/* Hero-zoom stage — the SVG "camera". The module animates the viewBox
   every scrubbed frame: pan across the mega word, then a target-locked
   dive into a solid ink region of a glyph until the letter color fills
   the frame. SVG text re-renders as vectors at each zoom step, so the
   type stays crisp from full-bleed word to 10x+ magnification — the
   reason this is not a scaled <p> (compositor blur) or WebGL text
   (MSDF softening at extreme zoom). */
.section-transition__zoom {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0;
    will-change: opacity;
    pointer-events: none;
}
.section-transition__zoom-text {
    font-family: var(--font-display);
    font-weight: var(--wt-display, 700);
    /* font-size is an SVG presentation attribute (user units), NOT CSS
       px — CSS px is viewport-relative and would shrink glyphs as the
       viewBox tightens. Attribute font-size="900" matches Figma 46:769
       (section-promo) 1:1 in user space; the camera W0 = viewport width
       so establish renders at true 900px with edge bleed. */
    letter-spacing: -0.08em; /* Figma tracking -72px at 900 */
    fill: var(--st-word-color, var(--dark-gray));
}

/* Optional flanking headline lines that stack tightly above and below
   the center word to form a three-line editorial mass (the old wipe
   composition: "our / process / scales" reading as one shape). Each
   flanker glides horizontally across the pinned viewport, fading in on
   arrival and out on exit; the JS module owns the drift via the
   individual `translate` property so it composes with the CSS transform
   here (which anchors the flanker above or below center). */
.section-transition__flanker {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: var(--st-type-size);
    line-height: 1;
    letter-spacing: -0.045em;
    color: var(--st-word-color, var(--paper));
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    /* Baseline anchor: center the line on top:50%. The offset below
       nudges by ~half a line-height so top/bottom flankers sit tightly
       around the word with the same negative-leading feel as the Figma
       comp. Values are in em so they scale with --st-type-size. */
    transform: translate3d(0, -50%, 0);
    will-change: transform, translate, opacity;
    z-index: 1;
    user-select: none;
    pointer-events: none;
}
.section-transition__flanker--top {
    transform: translate3d(0, calc(-50% - 0.55em), 0);
}
.section-transition__flanker--bottom {
    transform: translate3d(0, calc(-50% + 0.55em), 0);
}

/* Dust particle canvas, above word so bursts read against it. */
.section-transition__dust {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* Reduced motion / narrow viewport: hard-hide anything the module
   would otherwise animate, so nothing flickers on the way in. */
@media (prefers-reduced-motion: reduce) {
    .section-transition { display: none !important; }
}