/* ===========================================================================
   MADDS · Who We Are — section background artwork
   ===========================================================================

   One generated background per section, all drawn in the site palette
   (deep indigo ink #080A2B / #260D4E · magenta #B51BB5 · orange #F0A400 ·
   violet #AC20BC · cyan #43D2E0 · blue #3C6CFF) so no two sections look alike
   but the page still reads as one design.

   hero        hero-illuminate.webp    light trails / lens flare, "Illuminate"
   about       about-roof.webp         faint cyan circuit + network texture
   story       story-horizon.webp      sunrise glow on a dark skyline (horizon line)
   vision      vision-road.webp        a long road at dawn, cool cyan tint
   mission     mission-blueprint.webp  blueprint grid, warm magenta/orange tint
   belief      belief-strand.webp      glowing flowing strands (the strand)
   why         why-mesh.webp           soft indigo→magenta mesh + grain + panel shapes
   cta         cta-burst.webp          orange glow rising behind magenta rings

   How it is layered
   -----------------
   Each image sits in a pseudo-element at z-index -1 inside the section's own
   stacking context, so it paints above the section's background and below its
   content — no markup or layout changes needed. Every layer carries the dark
   veil from the design notes (rgba(8,10,43,.85) → .60) so the white text stays
   readable, and its strength is a per-section opacity.

   Load gently: the image fades in once, then a background-attachment: fixed
   parallax keeps the sections feeling connected while you scroll (desktop only —
   fixed backgrounds are ignored/janky on mobile, so small screens just scroll).

   Artwork lives in static/images/whoweare/ · WebP · 1600px wide · 11–44 KB each.
   Swap any file for a photo later — the names and sizes are the contract.

   Loaded from whoweare.html, after about-us.css.
   =========================================================================== */

/* ---------- shared layer ---------------------------------------------- */

.hero.hu-hero::before,
.sect.about::before,
.sect.story::before,
.sect.belief::before,
.sect.why::before,
.cta::before,
.vm__panel--vision::after,
.vm__panel--mission::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;                    /* behind the copy, above the section bg */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    pointer-events: none;
}

/* the sections that host a layer need their own stacking context so z-index:-1
   cannot escape behind the page background */
.hero.hu-hero,
.sect.about,
.sect.story,
.sect.belief,
.sect.why,
.cta {
    position: relative;
    z-index: 0;
}

/* desktop parallax */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
    .hero.hu-hero::before,
    .sect.about::before,
    .sect.story::before,
    .sect.belief::before,
    .sect.why::before,
    .cta::before {
        background-attachment: fixed;
    }
}

/* ---------- fade in ---------------------------------------------------- */

@keyframes ww-bg-in-12 { from { opacity: 0; } to { opacity: .12; } }
@keyframes ww-bg-in-18 { from { opacity: 0; } to { opacity: .18; } }
@keyframes ww-bg-in-30 { from { opacity: 0; } to { opacity: .30; } }
@keyframes ww-bg-in-45 { from { opacity: 0; } to { opacity: .45; } }
@keyframes ww-bg-in-55 { from { opacity: 0; } to { opacity: .55; } }

/* ---------- 1 · hero — "Illuminate" ----------------------------------- */

.hero.hu-hero::before {
    background-image:
        linear-gradient(rgba(8, 10, 43, .85), rgba(8, 10, 43, .60)),
        url("../images/whoweare/hero-illuminate.webp");
    opacity: .55;
    animation: ww-bg-in-55 1.1s ease;
}

/* ---------- 2 · about the company — "one roof" ------------------------- */
/* kept faint and pinned to the right so the copy stays perfectly clear */

.sect.about::before {
    background-image:
        linear-gradient(90deg, rgba(8, 10, 43, .92), rgba(8, 10, 43, .68)),
        url("../images/whoweare/about-roof.webp");
    background-position: right center;
    background-size: 58% auto;
    opacity: .12;
    animation: ww-bg-in-12 1.1s ease;
}

/* ---------- 3 · our story — "the horizon line" ------------------------ */

.sect.story::before {
    background-image:
        linear-gradient(rgba(8, 10, 43, .85), rgba(8, 10, 43, .60)),
        url("../images/whoweare/story-horizon.webp");
    opacity: .45;
    animation: ww-bg-in-45 1.1s ease;
}

/* ---------- 4 · vision & mission — the split -------------------------- */
/* two different tints on purpose: cool cyan forward-look against a warm build */

.vm__panel--vision::after {
    background-image:
        linear-gradient(rgba(247, 242, 253, .62), rgba(247, 242, 253, .38)),
        url("../images/whoweare/vision-road.webp");
    background-position: 62% center;
    opacity: .18;
    animation: ww-bg-in-18 1.1s ease;
}

.vm__panel--mission::after {
    background-image:
        linear-gradient(rgba(8, 10, 43, .85), rgba(8, 10, 43, .60)),
        url("../images/whoweare/mission-blueprint.webp");
    opacity: .30;
    animation: ww-bg-in-30 1.1s ease;
}

/* ---------- 5 · our belief — "the strand" ----------------------------- */

.sect.belief::before {
    background-image:
        linear-gradient(rgba(8, 10, 43, .85), rgba(8, 10, 43, .60)),
        url("../images/whoweare/belief-strand.webp");
    opacity: .45;
    animation: ww-bg-in-45 1.1s ease;
}

/* ---------- 6 · why choose us — "the fold" ---------------------------- */

.sect.why::before {
    background-image:
        linear-gradient(rgba(8, 10, 43, .85), rgba(8, 10, 43, .60)),
        url("../images/whoweare/why-mesh.webp");
    opacity: .45;
    animation: ww-bg-in-45 1.1s ease;
}

/* ---------- 7 · call to action ---------------------------------------- */

.cta::before {
    background-image:
        linear-gradient(rgba(8, 10, 43, .85), rgba(8, 10, 43, .60)),
        url("../images/whoweare/cta-burst.webp");
    opacity: .55;
    animation: ww-bg-in-55 1.1s ease;
}

/* ---------- no motion, no parallax ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .hero.hu-hero::before,
    .sect.about::before,
    .sect.story::before,
    .sect.belief::before,
    .sect.why::before,
    .cta::before,
    .vm__panel--vision::after,
    .vm__panel--mission::after {
        animation: none;
    }
}