/* ===== BLUR GLOW BACKGROUND ===== */
/* 
 * Reusable ambient glow effect using blurred gradient backdrop
 * 
 * Usage:
 * 1. Add .blur-glow-wrapper to the parent container
 * 2. Add <div class="blur-glow"></div> inside as first child
 * 3. IMPORTANT: Set position:relative on the foreground content element
 *    to ensure it layers above the glow effect
 * 
 * Example:
 * <div class="my-section blur-glow-wrapper">
 *     <div class="blur-glow"></div>
 *     <div class="my-content">...</div>  <!-- needs position:relative -->
 * </div>
 * 
 * CSS:
 * .my-content { position: relative; }
 */

.blur-glow-wrapper {
    position: relative;
}

.blur-glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    isolation: isolate;
}

.blur-glow::before {
    content: '';
    flex: 1;
    max-width: 85rem;
    height: 20rem;
    background-image: linear-gradient(220deg,
            var(--color-purple-200) 30%,
            var(--color-yellow-300) 50%,
            var(--color-blue-200) 70%);
    filter: blur(120px);
    animation: blur-glow-float 20s ease-in-out infinite;
    will-change: transform;
}

@keyframes blur-glow-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    25% {
        transform: translate(2%, -3%) scale(1.02);
    }

    50% {
        transform: translate(-1%, 2%) scale(0.98);
    }

    75% {
        transform: translate(-2%, -1%) scale(1.01);
    }
}

@media (min-width: 768px) {
    .blur-glow::before {
        height: 24rem;
    }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .blur-glow::before {
        animation: none;
    }
}