/* ============================================================================
   Shared hero effects — animated aurora, WebGL mesh-gradient container, and a
   darkened image layer. Add class `fx-hero` to a hero <section>, then include
   any of: .hero-aurora (CSS fallback), .hero-gradient (WebGL mount) + .hero-scrim,
   or .hero-bg (image). Page content must sit in .container / .hero-inner.
   ============================================================================ */
.fx-hero { position: relative; overflow: hidden; background: #06251c; }
.fx-hero > .container,
.fx-hero .hero-inner,
.fx-hero > .container > * { position: relative; z-index: 2; }

/* Animated aurora base (CSS-only fallback / when no gradient) */
.fx-hero .hero-aurora {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 48% at 22% 32%, rgba(16, 185, 129, 0.42), transparent 60%),
        radial-gradient(42% 52% at 78% 24%, rgba(13, 156, 111, 0.30), transparent 60%),
        radial-gradient(46% 58% at 62% 88%, rgba(16, 185, 129, 0.24), transparent 62%),
        radial-gradient(40% 50% at 45% 55%, rgba(45, 212, 191, 0.18), transparent 60%);
    filter: blur(48px);
    animation: heroAurora 20s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes heroAurora {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3%, -4%, 0) scale(1.12); }
    100% { transform: translate3d(-3%, 3%, 0) scale(1.06); }
}

/* WebGL mesh-gradient mount point */
.fx-hero .hero-gradient { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fx-hero .hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, rgba(6, 20, 15, 0.62) 0%, rgba(6, 20, 15, 0.34) 45%, rgba(6, 20, 15, 0.10) 100%);
}

/* Image layer (darkened for legibility) */
.fx-hero .hero-bg { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: center; }
.fx-hero .hero-bg::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(125deg, rgba(8, 17, 31, 0.92) 0%, rgba(8, 17, 31, 0.82) 42%, rgba(8, 17, 31, 0.60) 100%);
}

/* When the WebGL gradient is present, hide the CSS aurora underneath it. */
.fx-hero:has(.hero-gradient) .hero-aurora { display: none; }

/* Slider heroes (home/services): the shared gradient replaces the per-slide
   photo, so the animated background is consistent behind every slide. */
.fx-hero .hero-slide-bg { display: none; }
.fx-hero .hero-slide { z-index: 2; }

@media (prefers-reduced-motion: reduce) { .fx-hero .hero-aurora { animation: none; } }