/* ==========================================================================
   Animated Gradient — CSS Radial Gradient Blobs
   Three blurred radial gradient blobs on a dark base.
   JS injects .gradient-bg__blobs div and animates positions via rAF.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   BASE — shared structure for all gradient presets
   ══════════════════════════════════════════════════════════════════════════ */

[class*="gradient-bg--"] {
    position: relative;
    overflow: hidden;
}

/* Content sits above gradient + grain */
[class*="gradient-bg--"] > *:not(.gradient-bg__blobs) {
    position: relative;
    z-index: 2;
}

/* ══════════════════════════════════════════════════════════════════════════
   GRADIENT BLOBS DIV — injected by js/animated-gradient.js
   ══════════════════════════════════════════════════════════════════════════ */

.gradient-bg__blobs {
    position: absolute;
    inset: -60px;              /* extend beyond edges so blur doesn't clip */
    z-index: 0;
    pointer-events: none;
    background-color: #4A1E05; /* dark warm brown base */
    filter: blur(60px) brightness(1.0);
    will-change: background-image;
}

/* When JS is active, hide the static CSS fallback */
.gradient-bg--active {
    background-image: none !important;
    background-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   GRAIN OVERLAY — static SVG feTurbulence noise
   Sits on top of everything (z-index 1, between blobs and content)
   ══════════════════════════════════════════════════════════════════════════ */

[class*="gradient-bg--"]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ══════════════════════════════════════════════════════════════════════════
   CSS FALLBACK — visible when JS is disabled or hasn't loaded yet
   Static radial gradient approximation
   ══════════════════════════════════════════════════════════════════════════ */

.gradient-bg--warm-orange {
    background-color: #4A1E05;
    background-image:
        radial-gradient(circle at 50% 50%, #FFAA2F 0%, #FFAA2F 22%, rgba(0,0,0,0) 60%),
        radial-gradient(circle at 78% 50%, #FA8518 0%, #FA8518 22%, rgba(0,0,0,0) 60%),
        radial-gradient(circle at 36% 64%, #E55F10 0%, #E55F10 22%, rgba(0,0,0,0) 60%);
    filter: blur(60px);
}

/* Remove filter from section when JS is active (filter is on the blob div) */
.gradient-bg--warm-orange.gradient-bg--active {
    filter: none;
}

/* ── Respect reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .gradient-bg__blobs {
        /* Show static position, no animation */
        background-image:
            radial-gradient(circle at 50% 50%, #FFAA2F 0%, #FFAA2F 22%, rgba(0,0,0,0) 60%),
            radial-gradient(circle at 78% 50%, #FA8518 0%, #FA8518 22%, rgba(0,0,0,0) 60%),
            radial-gradient(circle at 36% 64%, #E55F10 0%, #E55F10 22%, rgba(0,0,0,0) 60%);
    }
}