/* ============================================
   Animated Aurora Background
   Per-page ACF toggle (Aurora Background → On).
   A fixed, full-viewport, pointer-reactive WebGL aurora in the brand orange
   (#F65B1B, same as the header Contact button) on black. Sits behind all page
   content; the content wrapper + section roots are made see-through when enabled
   so the aurora shows through while scrolling. Falls back to an animated CSS
   gradient when WebGL is unavailable.
   ============================================ */

.aurora-bg {
    position: fixed;
    inset: 0;
    z-index: -1;            /* behind page content, above the body background */
    pointer-events: none;   /* never intercept clicks or scrolling */
    background-color: #000;  /* base, and what shows before the canvas paints */
    overflow: hidden;
    contain: strict;
}

.aurora-bg__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- Reveal the fixed aurora through the page ---
   The content wrapper and section roots are opaque black by default, which would
   cover the aurora. Make them transparent only when the page opts in. Inner
   cards/panels keep their own backgrounds, so text contrast is preserved. */
body.has-aurora-bg .site-content-wrap {
    background-color: transparent;
}

body.has-aurora-bg .page-section,
body.has-aurora-bg .about-section,
body.has-aurora-bg .documents-section,
body.has-aurora-bg .quote-section,
body.has-aurora-bg .recent-news-section,
body.has-aurora-bg .cta-section {
    /* !important needed: several section roots set their own opaque background
       with higher-specificity selectors (e.g. .banner-section.page-section). */
    background-color: transparent !important;
}

/* The banner's dark scrim (.banner-overlay, rgba(0,0,0,.4)) exists to keep text
   readable over a background image/video. With the aurora on, the section is
   see-through and there is no media to darken — the scrim would only mute the
   aurora — so drop it. */
body.has-aurora-bg .banner-overlay {
    display: none;
}

/* --- Keep the footer out of the way of the transparent wrap ---
   The footer normally uses a sticky "slide-out" reveal (see Footer.css) that
   relies on the opaque .site-content-wrap covering it until you scroll to the
   bottom. With the wrap made transparent above, that sticky footer would show
   through behind every section. Drop it back into normal flow so it sits at the
   page bottom — it keeps its own gradient background, so the aurora stops there. */
body.has-aurora-bg .site-footer {
    position: relative;
    z-index: 1;
}

/* --- CSS fallback: drifting orange glows when WebGL is unavailable --- */
.aurora-bg.is-fallback .aurora-bg__canvas {
    display: none;
}

.aurora-bg.is-fallback::before,
.aurora-bg.is-fallback::after {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(38% 45% at 25% 30%, rgba(246, 91, 27, 0.45), transparent 60%),
        radial-gradient(42% 50% at 75% 65%, rgba(246, 91, 27, 0.30), transparent 62%),
        radial-gradient(35% 40% at 55% 85%, rgba(255, 150, 80, 0.22), transparent 60%);
    filter: blur(48px);
    animation: aurora-drift 22s ease-in-out infinite alternate;
    will-change: transform;
}

.aurora-bg.is-fallback::after {
    animation-duration: 31s;
    animation-direction: alternate-reverse;
    opacity: 0.7;
    mix-blend-mode: screen;
}

@keyframes aurora-drift {
    0%   { transform: translate3d(-4%, -3%, 0) scale(1.05) rotate(0deg); }
    50%  { transform: translate3d(3%, 2%, 0) scale(1.16) rotate(6deg); }
    100% { transform: translate3d(5%, -2%, 0) scale(1.08) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .aurora-bg.is-fallback::before,
    .aurora-bg.is-fallback::after {
        animation: none;
    }
}