/* ==========================================================================
   DECOR — soft background shapes for sections
   ==========================================================================
   Add `decor` (the clip + stacking context) plus a variant to an article or
   element group:
     .decor-blob     one soft --blob-a blob off the left, slowly drifting
     .decor-wash     a soft --blob-b wash off the right edge
     .decor-swirls   two swirl arcs off a DARK band's lower corners
   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%; }
}


/* Vertically centred rather than pinned to the top, so it sits behind the
   content on a tall row. `translate` (not `transform`) so the centring
   composes with the drift animation's transform instead of being overwritten. */
.decor-blob::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-a) 0%, transparent 78%);
    opacity: 0.55;
    animation: blobDrift 42s ease-in-out -9s infinite;
}
@keyframes blobDrift {
    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-blob::before { animation: none; }
}

/* The wash bleeds off the RIGHT edge, vertically centred. `--decor-wash-w` is
   its width as a share of the section and `--decor-wash-out` how far it hangs
   off the right: the defaults suit a half-width column; a full-width band wants
   a smaller share. It fades to `transparent`, not the band colour, so it never
   paints an opaque rectangle over what is behind it. */
.decor-wash {
    --decor-wash-w: 110%;
    --decor-wash-out: -52%;
    --decor-wash-strength: 1;
}
.decor-wash::before {
    right: var(--decor-wash-out);
    top: 50%;
    translate: 0 -50%;
    width: var(--decor-wash-w);
    height: auto;
    aspect-ratio: 1326 / 768;
    background: radial-gradient(closest-side, var(--blob-b) 7%, transparent 100%);
    opacity: var(--decor-wash-strength);
}

/* ---- Swirls (dark bands) -----------------------------------------------
   Add `decor decor-swirls` to a `.bg-ink`/`.bg-dark` band. The arcs are
   images/swirl-shape.svg and swirl-shape-2.svg; each carries its own paint, so
   a site recolours them by replacing the files.

   ⚠ The SVG canvases are mostly empty: the art fills 30.5% × 49% and 51% ×
   54.5% of them, centred. `background-size` scales each until its art fills
   the element (100/30.5 = 328%, 100/51 = 196%), so the element's box IS the
   arc. Do NOT tint them with `mask-image` — masking a box this size while
   animating it froze the renderer. */
.decor-swirls {
    /* A soft bloom under each arc lifts its corner; raise it for more presence,
       `transparent` for the arc alone. ⚠ It must fade to transparent INSIDE its
       box (`farthest-side … 78%`), or the pseudo-element's square corners cut
       the fade and show as a hard-edged lighter rectangle. */
    --swirl-bloom: rgb(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%;
        animation: swirlDriftA 55s ease-in-out -18s infinite;
    }
    &::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%;
        animation: swirlDriftB 70s ease-in-out -41s infinite;
    }
}
@keyframes swirlDriftA {
    0%   { transform: rotate(0deg)   translate(0, 0)     scale(1); }
    33%  { transform: rotate(120deg) translate(5%, -4%)  scale(1.12); }
    66%  { transform: rotate(240deg) translate(-4%, 5%)  scale(0.9); }
    100% { transform: rotate(360deg) translate(0, 0)     scale(1); }
}
@keyframes swirlDriftB {
    0%   { transform: rotate(0deg)    translate(0, 0)    scale(1); }
    33%  { transform: rotate(-120deg) translate(-5%, 4%) scale(0.9); }
    66%  { transform: rotate(-240deg) translate(4%, -5%) scale(1.14); }
    100% { transform: rotate(-360deg) translate(0, 0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .decor-swirls::before, .decor-swirls::after { animation: none; }
}