/* ============================================================
   PAGE AMBIENCE  -  one continuous backdrop for the whole page
   ============================================================
   The homepage used to read as a stack of separate blocks: every
   section painted its own background, drew its own vignette and
   capped itself with a gold hairline.

   Just as important: an earlier version put the glow INSIDE each
   section behind `overflow:hidden`, so every glow was sliced off
   at the section boundary and you saw a hard horizontal seam at
   each join. The glow now lives on ONE element that spans the
   entire document, so nothing is ever cut at a boundary.

     #wrapper    one flat ground for the whole page
     .page-amb   absolute, full-document glow + grid  <- continuous
     .sec-amb    per-section motes only (no glow, nothing to clip)

   Sections that own a picture or video (hero, farming zones,
   stages) keep their own background and are untouched.
   ============================================================ */

/* the page already sits on --bg-dark-1 (#010314); reuse it so the
   transparent sections match the ones that keep an image background */
#wrapper { position: relative; background: var(--bg-dark-1, #010314); }

/* ---- the continuous layer: one element, full document height ---- */
.page-amb {
    --amb-grid: 72px;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Seven glows spread down the page so every section sits on some
       colour, on ONE element spanning the whole document - so they
       scroll with the content and are never clipped at a section join.
       Alphas are deliberately strong enough to actually read on the
       #010314 ground; the earlier .07-.08 values looked like nothing. */
    background:
        radial-gradient(1200px 820px at 14%  9%,  rgba(184, 114, 30, .17), transparent 60%),
        radial-gradient(1050px 740px at 86% 22%,  rgba(116,  84, 214, .15), transparent 60%),
        radial-gradient(1250px 860px at 20% 37%,  rgba(184, 114, 30, .15), transparent 60%),
        radial-gradient(1050px 740px at 82% 51%,  rgba(116,  84, 214, .14), transparent 60%),
        radial-gradient(1200px 820px at 24% 65%,  rgba(184, 114, 30, .15), transparent 60%),
        radial-gradient(1050px 740px at 80% 79%,  rgba(116,  84, 214, .13), transparent 60%),
        radial-gradient(1100px 760px at 30% 92%,  rgba(184, 114, 30, .13), transparent 60%);
    /* glows: fade out behind the header (top 150px) and over the last
       ~1000px so the page ends on the plain ground before the footer */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 1000px), transparent calc(100% - 430px));
            mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 1000px), transparent calc(100% - 430px));
    animation: pageAmbBreathe 18s ease-in-out infinite alternate;
}
/* the grid is its own layer so it can fade out on a different schedule:
   gone behind the header and gone well before the footer (the last
   section has a 100px bottom margin that used to expose it) */
.page-amb::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px var(--amb-grid)),
        repeating-linear-gradient(0deg,  rgba(255,255,255,.016) 0 1px, transparent 1px var(--amb-grid));
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 1500px), transparent calc(100% - 450px));
            mask-image: linear-gradient(to bottom, transparent 0, #000 150px, #000 calc(100% - 1500px), transparent calc(100% - 450px));
}
/* a slow brightness breathe - opacity only, so it can never cause overflow */
@keyframes pageAmbBreathe {
    from { opacity: .82; }
    to   { opacity: 1; }
}

/* content always above the backdrop */
#wrapper > #content,
#wrapper > footer { position: relative; z-index: 1; }
/* the header keeps the template's absolute / fixed positioning (mobile bar,
   sticky .smaller header) and must paint above the content layer */
#wrapper > header { z-index: 1001; }

/* ---- per-section motes ---- */
.has-amb { position: relative; }
/* transparent so the shared ground runs straight through.
   element+class keeps this winning regardless of stylesheet order. */
section.has-amb { background: transparent; }
.has-amb > .container,
.has-amb > .fz-container { position: relative; z-index: 2; }

.sec-amb {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;      /* only clips the motes now - nothing visible */
    pointer-events: none;
}
.sec-amb span {
    position: absolute;
    display: block;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: var(--secondary-color, #d19b25);
    opacity: 0;
    animation: ambFloat var(--dur, 15s) linear var(--delay, 0s) infinite;
}
.sec-amb span:nth-child(1) { --dur: 17s; --delay: 0s;   left: 12%; top: 88%; }
.sec-amb span:nth-child(2) { --dur: 13s; --delay: 2.5s; left: 30%; top: 94%; }
.sec-amb span:nth-child(3) { --dur: 19s; --delay: 5s;   left: 52%; top: 90%; }
.sec-amb span:nth-child(4) { --dur: 15s; --delay: 1.5s; left: 68%; top: 96%; }
.sec-amb span:nth-child(5) { --dur: 21s; --delay: 4s;   left: 84%; top: 86%; }
.sec-amb span:nth-child(6) { --dur: 12s; --delay: 6.5s; left: 94%; top: 92%; }
@keyframes ambFloat {
    0%   { transform: translateY(0) scale(1); opacity: 0; }
    12%  { opacity: .6; }
    88%  { opacity: .22; }
    100% { transform: translateY(-520px) scale(.5); opacity: 0; }
}

/* ---- drop the hard block separators ---- */
.hr-section::before, .hr-section::after,
.sr-section::before, .sr-section::after { display: none; }

@media (prefers-reduced-motion: reduce) {
    .page-amb { animation: none; }
    .sec-amb span { animation: none; opacity: .3; }
}
@media (max-width: 767px) {
    .sec-amb span { display: none; }
    .page-amb { --amb-grid: 48px; }
}