/* ============================================================
   Ferrari Metals — ambient light
   ============================================================ */

/* ---------- Per-block palettes ----------
   Nothing is shared between blocks on purpose: every value below belongs to
   exactly one block, so changing it can never move anything else. */
:root {
    /* About */
    --about-veil: #6f7cff;
    --about-rule: #6f7cff;
    --about-pool: #9a68ff;
    --about-pool-2: #6f7cff;
    --about-edge: #c25cff;

    /* Crop Applications */
    --crop-veil: #3f92f0;
    --crop-rule: #24a8dd;
    --crop-pool: #3f92f0;
    --crop-pool-2: #6f7cff;
    --crop-pool-3: #6f7cff;

    /* Substrate Farming */
    --substrate-veil: #c25cff;
    --substrate-rule: #9a68ff;
    --substrate-pool: #c25cff;
    --substrate-pool-2: #3c18df;

    /* Patented Bending Machine */
    --bender-pool: #1f9fd8;
    --bender-pool-2: #7a5cf0;

    /* About page — Welcome */
    --welcome-veil: #6f7cff;
    --welcome-rule: #6f7cff;
    --welcome-pool: #9a68ff;
    --welcome-pool-2: #6f7cff;

    /* About page — What We Offer */
    --offer-veil: #c25cff;
    --offer-rule: #9a68ff;
    --offer-pool: #c25cff;
    --offer-pool-2: #7a5cf0;

    /* About page — Engineering & Fabrication */
    --engineering-veil: #3f92f0;
    --engineering-rule: #24a8dd;
    --engineering-pool: #3f92f0;
    --engineering-pool-2: #1cbfb8;

    /* About page — Field Installation */
    --field-veil: #c25cff;
    --field-rule: #9a68ff;
    --field-pool: #c25cff;
    --field-pool-2: #7a5cf0;

    /* About page — Field Installation step rules */
    --step-rule: #cdd9ee;

    /* Featured Projects */
    --projects-veil: #1cbfb8;
    --projects-rule: #24a8dd;
    --projects-pool: #1cbfb8;
    --projects-pool-2: #6d8eff;

    /* Why Choose */
    --why-pool: #3f92f0;
    --why-pool-2: #1cbfb8;
    --why-rule: #1cbfb8;
    --why-node: #6f7cff;
}

/* ---------- Cursor-lit cell palette ---------- */
:root {
    --cell-core: #bcd2ff;
    --cell-halo: #4d79e8;
    --cell-sheen: #6f9bff;
    --cell-sheen-radius: 360px;
    --cell-radius: 620px;
    --cell-core-violet: #d6c6ff;
    --cell-halo-violet: #7a5cf0;
    --cell-sheen-violet: #9a7bff;
}

/* ---------- Lit block edge ----------
   Both edges always exist; --lit-top-o / --lit-bottom-o decide which shows. */
.lit-edge {
    --lit-tint: #3f92f0;
    --lit-rule-tint: #6f7cff;
    --lit-rule-o: 0.9;
    --lit-veil-o: 0.2;
    --lit-rule-peak: 50%;
    --lit-rule-spread: 38%;
    --lit-veil-x: 50%;
    --lit-rule-peak-b: var(--lit-rule-peak);
    --lit-rule-spread-b: var(--lit-rule-spread);
    --lit-veil-x-b: var(--lit-veil-x);
    --lit-veil-w: 68.5%;
    --lit-veil-h: 36.5%;
    --lit-top-o: 1;
    --lit-bottom-o: 0;
    position: relative;
    isolation: isolate;
}
.lit-edge::before,
.lit-edge::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.lit-edge::before {
    opacity: var(--lit-rule-o);
    background:
        linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--lit-rule-tint) calc(18% * var(--lit-top-o)), transparent) calc(var(--lit-rule-peak) - var(--lit-rule-spread)),
            color-mix(in srgb, var(--lit-rule-tint) calc(62% * var(--lit-top-o)), transparent) calc(var(--lit-rule-peak) - var(--lit-rule-spread) * 0.42),
            color-mix(in srgb, var(--lit-rule-tint) calc(100% * var(--lit-top-o)), transparent) var(--lit-rule-peak),
            color-mix(in srgb, var(--lit-rule-tint) calc(62% * var(--lit-top-o)), transparent) calc(var(--lit-rule-peak) + var(--lit-rule-spread) * 0.42),
            color-mix(in srgb, var(--lit-rule-tint) calc(18% * var(--lit-top-o)), transparent) calc(var(--lit-rule-peak) + var(--lit-rule-spread)),
            transparent 100%) top / 100% 1px no-repeat,
        linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--lit-rule-tint) calc(18% * var(--lit-bottom-o)), transparent) calc(var(--lit-rule-peak-b) - var(--lit-rule-spread-b)),
            color-mix(in srgb, var(--lit-rule-tint) calc(62% * var(--lit-bottom-o)), transparent) calc(var(--lit-rule-peak-b) - var(--lit-rule-spread-b) * 0.42),
            color-mix(in srgb, var(--lit-rule-tint) calc(100% * var(--lit-bottom-o)), transparent) var(--lit-rule-peak-b),
            color-mix(in srgb, var(--lit-rule-tint) calc(62% * var(--lit-bottom-o)), transparent) calc(var(--lit-rule-peak-b) + var(--lit-rule-spread-b) * 0.42),
            color-mix(in srgb, var(--lit-rule-tint) calc(18% * var(--lit-bottom-o)), transparent) calc(var(--lit-rule-peak-b) + var(--lit-rule-spread-b)),
            transparent 100%) bottom / 100% 1px no-repeat;
}
.lit-edge::after {
    z-index: -4;
    opacity: var(--lit-veil-o);
    background:
        radial-gradient(var(--lit-veil-w) var(--lit-veil-h) at var(--lit-veil-x) 0%,
            color-mix(in srgb, var(--lit-tint) calc(100% * var(--lit-top-o)), transparent) 0%,
            color-mix(in srgb, var(--lit-tint) calc(42% * var(--lit-top-o)), transparent) 42%,
            color-mix(in srgb, var(--lit-tint) calc(14% * var(--lit-top-o)), transparent) 68%,
            transparent 100%),
        radial-gradient(var(--lit-veil-w) var(--lit-veil-h) at var(--lit-veil-x-b) 100%,
            color-mix(in srgb, var(--lit-tint) calc(100% * var(--lit-bottom-o)), transparent) 0%,
            color-mix(in srgb, var(--lit-tint) calc(42% * var(--lit-bottom-o)), transparent) 42%,
            color-mix(in srgb, var(--lit-tint) calc(14% * var(--lit-bottom-o)), transparent) 68%,
            transparent 100%);
}

/* ---------- Cursor-lit cells ---------- */
.lit-cells {
    --lit-ring-o: 0.6;
    --lit-sheen-o: 0.09;
    --lit-divider-o: 0.8;
}
.lit-cells--violet {
    --cell-core: var(--cell-core-violet);
    --cell-halo: var(--cell-halo-violet);
    --cell-sheen: var(--cell-sheen-violet);
}

.lit-cells > * {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative;
}
.lit-cells > *::before,
.lit-cells > *::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-slow);
}
.lit-cells > *::after {
    z-index: 1;
    padding: 1px;
    background: radial-gradient(var(--cell-radius) circle at var(--mouse-x) var(--mouse-y),
        var(--cell-core) 0%,
        var(--cell-halo) 14%,
        color-mix(in srgb, var(--cell-halo) 62%, transparent) 22%,
        color-mix(in srgb, var(--cell-halo) 38%, transparent) 30%,
        color-mix(in srgb, var(--cell-halo) 21%, transparent) 38%,
        color-mix(in srgb, var(--cell-halo) 10%, transparent) 47%,
        color-mix(in srgb, var(--cell-halo) 4%, transparent) 58%,
        color-mix(in srgb, var(--cell-halo) 0%, transparent) 74%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
}
.lit-cells > *::before {
    z-index: 2;
    background: radial-gradient(var(--cell-sheen-radius) circle at var(--mouse-x) var(--mouse-y),
        var(--cell-sheen) 0%,
        color-mix(in srgb, var(--cell-sheen) 70%, transparent) 14%,
        color-mix(in srgb, var(--cell-sheen) 42%, transparent) 26%,
        color-mix(in srgb, var(--cell-sheen) 22%, transparent) 38%,
        color-mix(in srgb, var(--cell-sheen) 9%, transparent) 52%,
        color-mix(in srgb, var(--cell-sheen) 3%, transparent) 66%,
        color-mix(in srgb, var(--cell-sheen) 0%, transparent) 82%);
}
.lit-cells:hover > *::after { opacity: var(--lit-ring-o); }
.lit-cells > *:hover::before { opacity: var(--lit-sheen-o); }

.spec-row--4.lit-cells { column-gap: 5px; }
.spec-row--4.lit-cells .spec-row__item:not(:first-child) {
    border-left: 1px solid transparent;
    border-image: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--cell-halo) calc(22% * var(--lit-divider-o)), transparent) 16%,
        color-mix(in srgb, var(--cell-halo) calc(85% * var(--lit-divider-o)), transparent) 50%,
        color-mix(in srgb, var(--cell-halo) calc(22% * var(--lit-divider-o)), transparent) 84%,
        transparent 100%) 1;
}

/* ---------- Why-Choose timeline decorations ----------
   Not a primitive: the block's light is .lit-pool like everywhere else, and
   these are the three pieces only a timeline has. */
.lit-why {
    --rail-tint: color-mix(in srgb, var(--why-pool) 58%, transparent);
}
.lit-why .timeline::before {
    background: linear-gradient(90deg,
        var(--why-pool-2) 0%,
        color-mix(in srgb, var(--why-pool-2) 58%, transparent) 20%,
        color-mix(in srgb, var(--why-pool) 58%, transparent) 50%,
        color-mix(in srgb, var(--why-node) 58%, transparent) 80%,
        var(--why-node) 100%);
}

.lit-why .timeline__node::after {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: -1;
    pointer-events: none;
    opacity: var(--lit-node-o);
    background: radial-gradient(closest-side circle,
        color-mix(in srgb, var(--why-node) 55%, transparent) 0%,
        color-mix(in srgb, var(--why-node) 22%, transparent) 42%,
        color-mix(in srgb, var(--why-node) 0%, transparent) 78%);
    transition: opacity var(--t-slow);
}
.lit-why .timeline__text::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--why-node) 44%, transparent) 30%,
        color-mix(in srgb, var(--why-node) 44%, transparent) 70%,
        transparent 100%);
}
.lit-why .timeline__item.is-up .timeline__text::before { bottom: 0; }
.lit-why .timeline__item.is-down .timeline__text::before { top: 0; }

.lit-why .timeline__item:hover .timeline__node::after,
.lit-why .timeline__item:focus-within .timeline__node::after { opacity: 1; }

/* ---------- Ambient pools ---------- */
.lit-pool {
    position: relative;
    isolation: isolate;
    --pool-tint: #9a68ff;
    --pool-tint-2: #c25cff;
    --pool-rule: #9a68ff;
    --pool-o: 0.5;
    --pool-o-2: 0.42;
    --pool-rule-o: 0;
    --pool-rule-h: 1px;
    --pool-rule-dir: 90deg;
    --pool-w: 62%;
    --pool-h: 82%;
    --pool-x: 100%;
    --pool-y: 100%;
    --pool-w-2: 45%;
    --pool-h-2: 64%;
    --pool-x-2: 70%;
    --pool-y-2: 102%;
    --pool-tint-3: #6f7cff;
    --pool-o-3: 0;
    --pool-w-3: 46%;
    --pool-h-3: 90%;
    --pool-x-3: 2%;
    --pool-y-3: 104%;
}

.lit-pool,
.lit-glow::before {
    background-image:
        linear-gradient(var(--pool-rule-dir),
            transparent 30%,
            color-mix(in srgb, var(--pool-rule) calc(14% * var(--pool-rule-o)), transparent) 56%,
            color-mix(in srgb, var(--pool-rule) calc(46% * var(--pool-rule-o)), transparent) 80%,
            color-mix(in srgb, var(--pool-rule) calc(100% * var(--pool-rule-o)), transparent) 100%),
        radial-gradient(var(--pool-w-2) var(--pool-h-2) at var(--pool-x-2) var(--pool-y-2),
            color-mix(in srgb, var(--pool-tint-2) calc(38% * var(--pool-o-2) * var(--pool-gain, 1)), transparent) 0%,
            color-mix(in srgb, var(--pool-tint-2) calc(15% * var(--pool-o-2) * var(--pool-gain, 1)), transparent) 38%,
            color-mix(in srgb, var(--pool-tint-2) calc(4% * var(--pool-o-2) * var(--pool-gain, 1)), transparent) 66%,
            color-mix(in srgb, var(--pool-tint-2) 0%, transparent) 88%),
        radial-gradient(var(--pool-w-3) var(--pool-h-3) at var(--pool-x-3) var(--pool-y-3),
            color-mix(in srgb, var(--pool-tint-3) calc(38% * var(--pool-o-3) * var(--pool-gain, 1)), transparent) 0%,
            color-mix(in srgb, var(--pool-tint-3) calc(15% * var(--pool-o-3) * var(--pool-gain, 1)), transparent) 38%,
            color-mix(in srgb, var(--pool-tint-3) calc(4% * var(--pool-o-3) * var(--pool-gain, 1)), transparent) 66%,
            color-mix(in srgb, var(--pool-tint-3) 0%, transparent) 88%),
        radial-gradient(var(--pool-w) var(--pool-h) at var(--pool-x) var(--pool-y),
            color-mix(in srgb, var(--pool-tint) calc(38% * var(--pool-o) * var(--pool-gain, 1)), transparent) 0%,
            color-mix(in srgb, var(--pool-tint) calc(16% * var(--pool-o) * var(--pool-gain, 1)), transparent) 36%,
            color-mix(in srgb, var(--pool-tint) calc(5% * var(--pool-o) * var(--pool-gain, 1)), transparent) 62%,
            color-mix(in srgb, var(--pool-tint) 0%, transparent) 86%);
    background-repeat: no-repeat;
    background-size: 100% var(--pool-rule-h), 100% 100%, 100% 100%, 100% 100%;
    background-position: 0 100%, 0 0, 0 0, 0 0;
}
.lit-glow { display: none; }


/* ============================================================
   One class per block — every number that block uses, in one place.
   The mechanisms above draw; these only set values.
   ============================================================ */

/* About — indigo corner light, bottom right. */
.lit-about {
    --lit-tint: var(--about-veil);
    --lit-rule-tint: var(--about-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0;
    --lit-rule-o: 0.9;
    --lit-veil-o: 0.24;
    --lit-rule-peak: 68%;
    --lit-rule-spread: 30%;
    --lit-veil-x: 68%;

    --pool-tint: var(--about-pool);
    --pool-tint-2: var(--about-pool-2);
    --pool-o: 0.75;
    --pool-o-2: 0.62;
    --pool-w: 62%;
    --pool-h: 82%;
    --pool-x: 100%;
    --pool-y: 100%;
    --pool-w-2: 45%;
    --pool-h-2: 64%;
    --pool-x-2: 70%;
    --pool-y-2: 102%;
    --pool-rule: var(--about-edge);
    --pool-rule-o: 0.8;
    --pool-rule-dir: 90deg;
}

/* Why Choose — both pools moved onto the bottom edge, in two hues, with the
   rule tied to the teal one on the right. Same two primitives as every other
   lit block: .lit-pool draws, this only sets values. */
.lit-why {
    --pool-tint: var(--why-pool);
    --pool-tint-2: var(--why-pool-2);
    --pool-o: 0.5;
    --pool-o-2: 0.5;
    --pool-w: 69%;
    --pool-h: 62%;
    --pool-x: 64%;
    --pool-y: 100%;
    --pool-w-2: 52%;
    --pool-h-2: 62%;
    --pool-x-2: 94%;
    --pool-y-2: 100%;
    --pool-rule: var(--why-rule);
    --pool-rule-o: 0.9;
    --pool-rule-h: 2px;
    --pool-rule-dir: 90deg;
    --lit-node-o: 0.35;
}

/* Crop — the widest wash on the page, entering from the upper left.
   Lit on both edges, so both rules are dialled down. */
.lit-crop {
    --lit-tint: var(--crop-veil);
    --lit-rule-tint: var(--crop-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0.55;
    --lit-rule-o: 0.42;
    --lit-veil-o: 0.2;
    --lit-rule-peak: 78%;
    --lit-rule-spread: 44%;
    --lit-veil-x: 78%;
    --lit-rule-peak-b: 6%;
    --lit-rule-spread-b: 40%;
    --lit-veil-x-b: 6%;

    --pool-tint: var(--crop-pool);
    --pool-tint-2: var(--crop-pool-2);
    --pool-o: 0.42;
    --pool-o-2: 0.5;
    --pool-w: 54%;
    --pool-h: 144%;
    --pool-x: 96%;
    --pool-y: -6%;
    --pool-w-2: 34%;
    --pool-h-2: 96%;
    --pool-x-2: 66%;
    --pool-y-2: -4%;
    --pool-tint-3: var(--crop-pool-3);
    --pool-o-3: 0.22;
    --pool-w-3: 46%;
    --pool-h-3: 90%;
    --pool-x-3: 2%;
    --pool-y-3: 104%;
    --pool-rule-o: 0;
}

/* Substrate — two violets set apart along the top edge. */
.lit-substrate {
    --lit-tint: var(--substrate-veil);
    --lit-rule-tint: var(--substrate-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0;
    --lit-rule-o: 0.9;
    --lit-veil-o: 0.2;
    --lit-rule-peak: 38%;
    --lit-rule-spread: 48%;
    --lit-veil-x: 38%;

    --pool-tint: var(--substrate-pool);
    --pool-tint-2: var(--substrate-pool-2);
    --pool-o: 0.46;
    --pool-o-2: 0.56;
    --pool-w: 56%;
    --pool-h: 174%;
    --pool-x: 30%;
    --pool-y: -8%;
    --pool-w-2: 67%;
    --pool-h-2: 46%;
    --pool-x-2: 69%;
    --pool-y-2: -2%;
    --pool-rule-o: 0;
}

/* Bending machine — cold machine light against the warm sand of the clip,
   entering from the left.
   Both pools are anchored on the left and bottom edges, so the only line
   that cuts them is the block boundary. They also have to reach zero above
   the banner's lower edge, a little past halfway up the block: the clip is
   opaque and hides whatever is behind it, so a pool still carrying strength
   at that height would appear all at once along the video's bottom edge. */
.lit-bender {
    --pool-tint: var(--bender-pool);
    --pool-tint-2: var(--bender-pool-2);
    --pool-o: 0.45;
    --pool-o-2: 0.44;
    --pool-w: 90%;
    --pool-h: 57%;
    --pool-x: 0%;
    --pool-y: 104%;
    --pool-w-2: 133%;
    --pool-h-2: 66%;
    --pool-x-2: 5%;
    --pool-y-2: 94%;
    --pool-rule: var(--bender-pool);
    --pool-rule-o: 0.9;
    --pool-rule-h: 1px;
    --pool-rule-dir: 270deg;
}
.lit-bender .lit-cells {
    --lit-ring-o: 0.8;
    --lit-sheen-o: 0.11;
}
.lit-bender .bender__aside {
    border-left: 1px solid transparent;
    border-image: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--bender-pool-2) 20%, transparent) 14%,
        color-mix(in srgb, var(--bender-pool-2) 72%, transparent) 50%,
        color-mix(in srgb, var(--bender-pool-2) 20%, transparent) 86%,
        transparent 100%) 1;
}

/* Projects — teal over a wide sky-blue companion. */
.lit-projects {
    --lit-tint: var(--projects-veil);
    --lit-rule-tint: var(--projects-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0;
    --lit-rule-o: 0.9;
    --lit-veil-o: 0.2;
    --lit-rule-peak: 81%;
    --lit-rule-spread: 60%;
    --lit-veil-x: 81%;

    --pool-tint: var(--projects-pool);
    --pool-tint-2: var(--projects-pool-2);
    --pool-o: 0.46;
    --pool-o-2: 0.34;
    --pool-w: 62%;
    --pool-h: 90%;
    --pool-x: 92%;
    --pool-y: -8%;
    --pool-w-2: 103%;
    --pool-h-2: 92%;
    --pool-x-2: 51%;
    --pool-y-2: 0%;
    --pool-rule-o: 0;
}

/* About page. Bands lit from alternating sides so the page reads as a sequence
   rather than as one wash: right, then left. Same two primitives and the same
   one-class-per-block rule as the home page. */
.lit-welcome {
    --lit-tint: var(--welcome-veil);
    --lit-rule-tint: var(--welcome-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0;
    --lit-rule-o: 0.9;
    --lit-veil-o: 0.24;
    --lit-rule-peak: 70%;
    --lit-rule-spread: 32%;
    --lit-veil-x: 70%;

    --pool-tint: var(--welcome-pool);
    --pool-tint-2: var(--welcome-pool-2);
    --pool-o: 0.62;
    --pool-o-2: 0.5;
    --pool-w: 60%;
    --pool-h: 88%;
    --pool-x: 100%;
    --pool-y: 100%;
    --pool-w-2: 44%;
    --pool-h-2: 66%;
    --pool-x-2: 72%;
    --pool-y-2: 104%;
    --pool-rule: var(--welcome-pool);
    --pool-rule-o: 0.85;
    --pool-rule-h: 1px;
    --pool-rule-dir: 90deg;
}

.lit-offer {
    --lit-tint: var(--offer-veil);
    --lit-rule-tint: var(--offer-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0;
    --lit-rule-o: 0.85;
    --lit-veil-o: 0.22;
    --lit-rule-peak: 62%;
    --lit-rule-spread: 44%;
    --lit-veil-x: 62%;

    --pool-tint: var(--offer-pool);
    --pool-tint-2: var(--offer-pool-2);
    --pool-o: 0.55;
    --pool-o-2: 0.46;
    --pool-w: 58%;
    --pool-h: 80%;
    --pool-x: 96%;
    --pool-y: 102%;
    --pool-w-2: 46%;
    --pool-h-2: 62%;
    --pool-x-2: 66%;
    --pool-y-2: 104%;
    --pool-rule: var(--offer-rule);
    --pool-rule-o: 0.85;
    --pool-rule-h: 1px;
    --pool-rule-dir: 90deg;
}

.lit-engineering {
    --lit-tint: var(--engineering-veil);
    --lit-rule-tint: var(--engineering-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0.55;
    --lit-rule-o: 0.85;
    --lit-veil-o: 0.2;
    --lit-rule-peak: 24%;
    --lit-rule-spread: 40%;
    --lit-veil-x: 24%;
    --lit-rule-peak-b: 14%;
    --lit-veil-x-b: 14%;

    --pool-tint: var(--engineering-pool);
    --pool-tint-2: var(--engineering-pool-2);
    --pool-o: 0.5;
    --pool-o-2: 0.44;
    --pool-w: 66%;
    --pool-h: 74%;
    --pool-x: 0%;
    --pool-y: 100%;
    --pool-w-2: 50%;
    --pool-h-2: 58%;
    --pool-x-2: 14%;
    --pool-y-2: 104%;
    --pool-rule-o: 0;
}

.lit-field {
    --lit-tint: var(--field-veil);
    --lit-rule-tint: var(--field-rule);
    --lit-top-o: 1;
    --lit-bottom-o: 0;
    --lit-rule-o: 0.85;
    --lit-veil-o: 0.22;
    --lit-rule-peak: 68%;
    --lit-rule-spread: 42%;
    --lit-veil-x: 68%;

    --pool-tint: var(--field-pool);
    --pool-tint-2: var(--field-pool-2);
    --pool-o: 0.55;
    --pool-o-2: 0.46;
    --pool-w: 58%;
    --pool-h: 80%;
    --pool-x: 96%;
    --pool-y: 102%;
    --pool-w-2: 46%;
    --pool-h-2: 62%;
    --pool-x-2: 66%;
    --pool-y-2: 104%;
    --pool-rule-o: 0;
}

/* ---------- Field-installation step rules ----------
   One faint cool-white rule over every plate, all three identical at rest.
   The rule leans toward the pointer: --mouse-x is written per plate by the
   tracker in motion.js, the lean is a third of the distance from the resting
   offset, and it is clamped so the rule can never slide off its own plate.
   The notch mask cuts the rule around the badge. */
.field-steps li {
    --srule-tint: var(--step-rule);
    --srule-rest: 46%;
    --srule-w: 33%;
    --srule-o: 0.28;
    --srule-x: clamp(16%,
        calc(var(--srule-rest) + (var(--mouse-x, var(--srule-rest)) - var(--srule-rest)) * 0.34),
        84%);
}

/* ============================================================
   Ambient below the fold-out
   ============================================================
   These belong here rather than in adaptive.css, which is where every other
   media query lives. ambient.css is loaded last and its selectors are the most
   specific on the page, so the same rules written in adaptive.css lose the
   cascade and do nothing — that is exactly how a divider meant for desktop
   columns survived into a stacked phone layout as a hairline pressed against
   the copy. Ambient's own responsive behaviour is kept with ambient. */
@media (max-width: 992px) {
    /* Every pool radius is a share of its own block. On a wide, short desktop
       band that is a shallow ellipse — light spilling across a floor. On a
       narrow band four screens tall it is a column smeared down one edge: the
       block's aspect ratio decides the shape, not the light. Viewport widths
       keep a wash page-shaped however tall the block it sits in grows.
       Positions stay per-block — they anchor the light to an edge, which is
       still the right frame of reference. */
    .lit-pool {
        --pool-w: 104vw;
        --pool-h: 54vw;
        --pool-w-2: 76vw;
        --pool-h-2: 42vw;
        --pool-w-3: 72vw;
        --pool-h-3: 46vw;
    }
    .lit-edge {
        --lit-veil-w: 116vw;
        --lit-veil-h: 44vw;
    }

    /* The light moves off the block and onto a sticky layer. A pool painted on
       a block four screens tall is only ever seen at its two ends; pinned to
       the viewport it stays lit the whole way down.

       The layer itself is zero-height and the screenful of light is painted by
       its ::before, anchored upward from it. That split is the point: a sticky
       box can only travel inside its containing block minus its own height, so
       an in-flow box a screen tall would have to carry a negative margin of
       the same screen to stay out of the layout — and that negative margin is
       exactly what lets it keep going until the block's bottom edge has passed
       the top of the window, sliding the light out and leaving the join
       between two blocks black. At zero height the travel ends on the block's
       own bottom edge, so the light settles there and keeps the boundary lit.

       clip-path keeps each block's light inside it. Without it the next
       block's layer, still parked at its top with a screen of light drawn
       upward, paints over the one above and the two read as a doubled glow
       with a gap between them. It has to be clip-path and not overflow:
       hidden, which would make the section a scroll container and kill the
       sticky outright. */
    /* The block keeps its own bottom hairline and hands over only the pools.
       The rule is the last layer of the shared background and is positioned at
       the bottom of whatever paints it — on a sticky screenful that is the
       bottom of the window, so it read as a bright line drawn across the
       middle of the page. It is the one layer that really does belong to the
       block's edge, so it is restated here and switched off on the layer. */
    .lit-pool {
        clip-path: inset(0);
        background-image:
            linear-gradient(var(--pool-rule-dir),
                transparent 30%,
                color-mix(in srgb, var(--pool-rule) calc(14% * var(--pool-rule-o)), transparent) 56%,
                color-mix(in srgb, var(--pool-rule) calc(46% * var(--pool-rule-o)), transparent) 80%,
                color-mix(in srgb, var(--pool-rule) calc(100% * var(--pool-rule-o)), transparent) 100%);
        background-size: 100% var(--pool-rule-h);
        background-position: 0 100%;
    }
    .lit-glow {
        display: block;
        position: sticky;
        top: 100vh;
        top: 100svh;
        height: 0;
        z-index: -3;
        pointer-events: none;
    }
    /* Dropped by the block's own bottom padding. A sticky box travels inside
       its containing block, which is the section's content box, so it comes to
       rest a padding short of the block's real bottom edge and the light stopped
       with a strip of unlit ground under it. Offsetting the painted box by the
       same padding lands it on the edge; clip-path keeps it from going past. */
    .lit-glow::before {
        content: "";
        position: absolute;
        inset: auto 0 calc(var(--section-pad) * -1);
        height: 100vh;
        height: 100svh;
        --pool-rule-o: 0;
        --pool-gain: 1.75;
    }

    /* Component rules that only make sense beside a desktop column. */
    .lit-bender .bender__aside { border-left: none; }
    .spec-row--4.lit-cells .spec-row__item:not(:first-child),
    .spec-row--3.lit-cells .spec-row__item:not(:first-child) {
        border-left: none;
        border-image: none;
    }
}