/* ==========================================================================
   DECOR — soft background blobs for sections   (visual only)
   ==========================================================================
   Reusable decorative gradient blobs, echoing the hero. Add `decor` (sets the
   clip + stacking context) plus a variant on a section/article/group:
     .decor-cyan   one soft cyan blob, top-left (light sections, e.g. quote)
     .decor-red    a soft red wash off the right edge
   The hero draws its own blobs; this is for the other sections.
   ========================================================================== */
.decor {
    position: relative; overflow: clip; isolation: isolate;
    > * { position: relative; z-index: 1; }
    &::before, &::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
}


/* Light section: a single soft cyan blob off the LEFT, vertically centred on
   the section and slowly drifting. Centred rather than pinned to the top so it
   sits behind the content on a tall row instead of hugging the corner.

   `translate` rather than `transform: translateY(-50%)`, so the centring
   composes with the drift animation's `transform` instead of being
   overwritten by it. */
.decor-cyan::before {
    left: -14%;
    top: 50%;
    translate: 0 -50%;
    width: 44vw; height: 38vw; max-width: 760px; max-height: 650px;
    background: radial-gradient(closest-side, var(--blob-cyan) 0%, transparent 78%);
    opacity: 0.55;
    animation: cyanDrift 42s ease-in-out -9s infinite;
}
@keyframes cyanDrift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(5%, -6%) scale(1.09); }
    66%  { transform: translate(-4%, 5%) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .decor-cyan::before { animation: none; }
}

/* Light section: a soft red/pink wash bleeding off the RIGHT edge.
   Measured off the Home board's SECURE 2.0 column (the light half of the split
   band): an ellipse 1326 x 768, radial `#ecb9b9` at offset 0.07 fading to the
   band's own `#fbfaf9` at offset 1, start (0.5, 0.5) to end (0.5, 1) so the
   radius is half the height. Against the 1200-wide half it sits left 42% and
   1320 wide, i.e. it hangs 624 (52% of the half) off the right edge and is
   vertically centred on the section.

   Those proportions are the defaults below, exposed as dials because the same
   motif appears on full-width bands too (Complex Plan Design's "Built to hold
   up", Consulting & Actuarial's "Actuaries on staff"), where the section is
   1800 rather than 1200 and the wash wants to be correspondingly smaller a
   share of it. `--decor-red-w` is its width as a share of the section and
   `--decor-red-out` how far it hangs off the right.

   The gradient ends at `transparent`, not at the band colour: fading to
   transparent is visually identical over any light band and does not paint an
   opaque rectangle over whatever is behind it. */
.decor-red {
    --decor-red-w: 110%;
    --decor-red-out: -52%;
    --decor-red-strength: 1;
    &::before {
        right: var(--decor-red-out);
        top: 50%;
        translate: 0 -50%;
        width: var(--decor-red-w);
        height: auto;
        aspect-ratio: 1326 / 768;
        background: radial-gradient(closest-side, var(--blob-pink) 7%, transparent 100%);
        opacity: var(--decor-red-strength);
    }
}

/* ---- Swirl decor (shared dark "difference" band) ------------------------ */
/* Two large organic swirl arcs bleeding off a dark band's lower corners, drawn
   from the shared brand SVGs. Add `decor decor-swirls` to a `.bg-ink`/
   `.bg-dark` band. `.decor` supplies the clip + stacking context.

   ⚠ THE PENPOT SVG EXPORTS ARE MOSTLY EMPTY CANVAS. Measured by rasterising
   each file and scanning for non-transparent pixels:

     swirl-shape.svg    art fills 30.5% × 49%   of the canvas, centred
     swirl-shape-2.svg  art fills 51%   × 54.5% of the canvas, centred

   So `background-size: contain` drew the arc at a THIRD of the box and the
   rest as transparent padding — which is why these read as "missing" on every
   band that asked for them, not just the one that got reported. The file is
   fine; the canvas is padded. `background-size` now scales each file until its
   art exactly fills the element (100 / 30.5 = 328%, 100 / 51 = 196%), and
   because the art is centred in its canvas, `center` is all the positioning
   that is needed. The element's own box therefore IS the arc: its width and
   aspect-ratio are the arc's, straight off the board.

   PLACEMENT IS BY EYE, not off the board. The two exported files don't
   correspond 1:1 to the board's swirl groups — their ids trace back to the
   Home board, and each group carries a rotation in its clip-path that the flat
   export doesn't preserve — so reproducing the board's coordinates put the arc
   98% off the left edge. What the comp shows is the impression: one large arc
   bleeding off the LOWER LEFT and one off the LOWER RIGHT, each roughly a
   third of the band wide, cut off by the band's bottom edge. That is what
   these values draw. (Earlier they were hung off the TOP corners, which is
   wrong in any reading of the comp.)

   Recolouring is not needed and not possible from here: each file carries its
   own paint (a #135380 → #00335c gradient at 37% opacity, clipped to the arc).
   Do NOT reach for `mask-image` to tint them — masking a box this size while
   animating it froze the renderer outright. */
.decor-swirls {
    /* The arc alone carries the SVG's own 37% opacity, which over #04203F is
    a ~6-point lift — real, but close to invisible on a compressed screen.
    A soft radial bloom sits UNDER each arc to lift its corner the way the
    comp does, and this is the dial for both: raise it to make the swirls
    more present, set it to `transparent` for the arc on its own.
    ⚠ The bloom MUST fade to transparent inside its own box:
    `farthest-side … transparent 78%` at `100% 100%`. With `closest-side` at
    `150% 150%` the transparent point falls beyond the element's edge, the
    rectangle cuts the fade off, and because these pseudo-elements carry
    `border-radius: 0` for the arc you get a hard-edged lighter rectangle on
    the navy band — visible as a "background" that is the bloom's box, not the
    swirl. */
    --swirl-bloom: rgba(255, 255, 255, 0.10);
    &::before, &::after {
        content: "";
        position: absolute;
        z-index: 0;
        pointer-events: none;
        border-radius: 0;              /* .decor::before/::after default to 50% */
        background-repeat: no-repeat;
        background-position: center;
    }
    &::before {
        left: -12%;
        bottom: -12%;
        width: 34%;
        aspect-ratio: 417 / 670;
        background-image:
            url("/files/structure/images/swirl-shape.svg"),
            radial-gradient(farthest-side, var(--swirl-bloom) 0%, transparent 78%);
        background-size: 328% auto, 100% 100%;
    }
    &::after {
        left: 74%;
        bottom: -12%;
        width: 34%;
        aspect-ratio: 698 / 746;
        background-image:
            url("/files/structure/images/swirl-shape-2.svg"),
            radial-gradient(farthest-side, var(--swirl-bloom) 0%, transparent 78%);
        background-size: 196% auto, 100% 100%;
    }
}
/* The swirls stand still: they used to turn and drift (Bob, 10 Oct 2026: "stop
   spinning backgrounds"). */