/* ══════════════════════════════════════════════════════════════════
   BEDELAU CONTINUOUS BACKGROUND CANVAS

   THE CORE IDEA
   Sections do not own backgrounds. One canvas spans the entire page
   behind every section, and the sections themselves are transparent.
   That is what makes real continuity possible: a shape can genuinely
   cross a section boundary because there is no opaque rectangle for it
   to disappear behind.

       ┌─ .bd-world ────────────────────────┐
       │  .bd-world__bg   (z 0)  wash+shapes│
       │  <sections>      (z 1)  transparent│
       │  .bd-world__fg   (z 2)  overlaps   │
       └────────────────────────────────────┘

   Shape primitives are reused from geometry.css (.geo--quarter,
   --half, --arc, --ring, --dot, --blob, --spark …), which already
   covers the vocabulary the brief asks for.
   ══════════════════════════════════════════════════════════════════ */

.bd-world {
    position: relative;
    /* Clips sideways bleed without creating a scroll container — unlike
       overflow:hidden, `clip` leaves vertical flow and fixed children alone. */
    overflow-x: clip;
}
@supports not (overflow: clip) {
    .bd-world { overflow-x: hidden; }
}

/* ── Layers ──────────────────────────────────────────────────────── */
.bd-world__bg,
.bd-world__fg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;      /* keeps canvas shapes inside the page box */
}
.bd-world__bg { z-index: 0; }

/* Foreground: the few shapes allowed to sit *over* section edges, which
   is what makes boundaries read as overlapping rather than stacked. */
.bd-world__fg { z-index: 2; }

/* Sections ride above the canvas; content rides above everything.
   .bd-marquee and .bd-strip MUST be listed here: they are static blocks,
   and a positioned element (the canvas, z-index 0) always paints over a
   static one in the same stacking context — which was washing the divider
   band out until it was given a position of its own. */
.bd-landing .bd-section,
.bd-landing .bd-hero,
.bd-landing .bd-cta,
.bd-landing .bd-marquee,
.bd-landing .bd-strip { position: relative; z-index: 1; }
.bd-landing .bd-shell { position: relative; z-index: 3; }

/* ── Layer 1 — base wash ─────────────────────────────────────────────
   A single element the height of the page. Each radial sits at a
   different vertical band, so scrolling reads as a colour narrative:
   blue → orange → green → warm → blue → red → convergence.  (§9)   */
.bd-world__wash {
    position: absolute;
    inset: 0;
    background:
        /* hero — primary blue establishes the brand */
        radial-gradient(70% 30% at 12% 2%,   rgba(41,182,246,.20), transparent 62%),
        radial-gradient(50% 18% at 88% 7%,   rgba(250,133,0,.10),  transparent 60%),
        /* about → competition — secondary orange takes over */
        radial-gradient(60% 16% at 92% 19%,  rgba(250,133,0,.16),  transparent 62%),
        radial-gradient(45% 12% at 6%  25%,  rgba(41,182,246,.10), transparent 60%),
        /* timeline — green, growth */
        radial-gradient(65% 16% at 4%  38%,  rgba(12,138,103,.16), transparent 62%),
        radial-gradient(40% 12% at 96% 44%,  rgba(250,133,0,.10),  transparent 60%),
        /* awards — energetic warm around the dark island */
        radial-gradient(70% 14% at 50% 54%,  rgba(250,133,0,.14),  transparent 66%),
        /* judges — calm blue */
        radial-gradient(55% 14% at 90% 66%,  rgba(41,182,246,.13), transparent 62%),
        /* terms + faq — quiet red / neutral */
        radial-gradient(50% 12% at 8%  78%,  rgba(240,71,47,.09),  transparent 60%),
        radial-gradient(45% 10% at 92% 86%,  rgba(12,138,103,.10), transparent 60%),
        /* the ground everything sits on */
        linear-gradient(180deg, #FDFEFF 0%, #F6FAFD 38%, #F9FBFD 62%, #FCFDFE 100%);
}

/* ── Layer 5 — micro grain, keeps large flat areas from banding ───── */
.bd-world__grain {
    position: absolute;
    inset: 0;
    opacity: .30;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ── Canvas shapes ───────────────────────────────────────────────────
   Positioned as a percentage of the *whole page*, deliberately
   straddling section boundaries.                                    */
.bd-cshape {
    position: absolute;
    will-change: transform;
}

/* Depth is expressed as opacity + blur as well as parallax speed, so
   far layers genuinely recede instead of just moving slower. */
.bd-cshape--far  { filter: blur(1.5px); }
.bd-cshape--mid  { filter: blur(.5px); }

/* ── The dark Awards island ──────────────────────────────────────────
   Not a full-bleed band: an inset, heavily-rounded block so the canvas
   stays visible around it and shapes can overlap its corners.        */
.bd-landing .bd-section--ink { background: transparent; }
.bd-landing .bd-section--ink::before {
    content: '';
    position: absolute;
    inset: 0 clamp(10px, 2.6vw, 46px);
    background:
        radial-gradient(90% 60% at 18% 8%, rgba(41,182,246,.16), transparent 60%),
        radial-gradient(70% 50% at 88% 92%, rgba(250,133,0,.14), transparent 60%),
        var(--ink);
    border-radius: clamp(24px, 3.4vw, 52px);
    z-index: -1;   /* behind this section's content, above the page canvas */
}

/* ── The Final CTA block ─────────────────────────────────────────────
   Curved top edge so the page resolves into it rather than butting
   against a hard horizontal line.                                    */
.bd-landing .bd-cta { background: transparent; }
/* Deep, desaturated navy-blue rather than the vivid cyan-blue this used to
   be: at full-bleed size that brightness was genuinely uncomfortable, and
   it left no contrast headroom for white text. */
.bd-landing .bd-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70% 55% at 22% 8%, rgba(41,182,246,.16), transparent 62%),
        linear-gradient(165deg, #10456B 0%, #0C3A5B 52%, #0A3049 100%);
    border-radius: clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px) 0 0;
    z-index: -1;
}

/* ── Curved boundary pieces ──────────────────────────────────────────
   Big soft arcs that sit *between* sections, so the eye reads a curve
   rather than an edge.                                               */
.bd-boundary {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    width: min(1600px, 150%);
    aspect-ratio: 3 / 1;
    border-radius: 50%;
    pointer-events: none;
}

/* ── Density control ─────────────────────────────────────────────── */
@media (max-width: 991px) {
    .bd-cshape--sm { display: none; }
    .bd-world__grain { opacity: .2; }
}
@media (max-width: 767px) {
    /* Keep the colour story and a couple of large forms; drop the rest so
       mobile stays fast and uncluttered. */
    .bd-cshape:not(.bd-cshape--keep) { display: none; }
    .bd-world__fg { display: none; }
    .bd-world__grain { display: none; }
    .bd-landing .bd-section--ink::before { inset: 0 6px; border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .bd-cshape { transform: none !important; }
}