/* Ambient Glow Primitive
 * Reusable background glow for active glass blocks. The host remains transparent/light;
 * pseudo-elements render the gradient aura behind the block.
 * Color emphasis must be rendered as ambient background glow, not by recoloring the foreground surface.
 */
.ambient-glow {
    --ambient-glow-color-a: rgba(251, 146, 60, 0.8);
    --ambient-glow-color-b: rgba(239, 68, 68, 0.7);
    --ambient-glow-opacity: 0;
    --ambient-glow-inset: -40%;
    --ambient-glow-blur: 30px;
    --ambient-glow-before-opacity: var(--ambient-glow-opacity);
    --ambient-glow-after-opacity: 0;
    --ambient-glow-before-background: radial-gradient(circle at 20% 20%, var(--ambient-glow-color-a), transparent 60%),
        radial-gradient(circle at 80% 40%, var(--ambient-glow-color-b), transparent 55%),
        radial-gradient(circle at 40% 80%, var(--ambient-glow-color-a), transparent 55%);
    --ambient-glow-after-background: radial-gradient(circle at 20% 30%, var(--ambient-glow-color-a), transparent 60%),
        radial-gradient(circle at 80% 20%, var(--ambient-glow-color-b), transparent 55%),
        radial-gradient(circle at 50% 80%, var(--ambient-glow-color-a), transparent 55%);

    position: relative;
    isolation: isolate;
    overflow: visible;
}

.ambient-glow::before,
.ambient-glow::after {
    content: '';
    position: absolute;
    inset: var(--ambient-glow-inset);
    z-index: -1;
    opacity: 0;
    filter: blur(var(--ambient-glow-blur));
    transition: opacity 450ms ease;
    pointer-events: none;
    transform: translateZ(0);
}

.ambient-glow::before {
    background: var(--ambient-glow-before-background);
    opacity: var(--ambient-glow-before-opacity);
    animation: ambientGlowWarmFlow 10s ease-in-out infinite;
}

.ambient-glow::after {
    background: var(--ambient-glow-after-background);
    opacity: var(--ambient-glow-after-opacity);
    animation: ambientGlowCoolFlow 12s ease-in-out infinite;
}

.ambient-glow--manual,
.ambient-glow.manual-mode {
    --ambient-glow-color-a: rgba(251, 146, 60, 0.8);
    --ambient-glow-color-b: rgba(239, 68, 68, 0.7);
    --ambient-glow-opacity: 0.9;
}

.ambient-glow--success {
    --ambient-glow-color-a: rgba(34, 197, 94, 0.78);
    --ambient-glow-color-b: rgba(16, 185, 129, 0.64);
    --ambient-glow-opacity: 0.72;
}

.ambient-glow--battle,
.ambient-glow.battle-mode {
    --ambient-glow-color-a: rgba(56, 189, 248, 0.76);
    --ambient-glow-color-b: rgba(59, 130, 246, 0.68);
    --ambient-glow-opacity: 0.85;
}

.ambient-glow--coral {
    --ambient-glow-color-a: rgba(251, 113, 133, 0.76);
    --ambient-glow-color-b: rgba(249, 115, 22, 0.62);
    --ambient-glow-opacity: 0.78;
}

.ambient-glow--coral-alt {
    --ambient-glow-color-a: rgba(244, 114, 182, 0.72);
    --ambient-glow-color-b: rgba(248, 113, 113, 0.66);
    --ambient-glow-opacity: 0.74;
}

.ambient-glow--orange {
    --ambient-glow-color-a: rgba(251, 146, 60, 0.78);
    --ambient-glow-color-b: rgba(245, 158, 11, 0.68);
    --ambient-glow-opacity: 0.78;
}

.ambient-glow--danger {
    --ambient-glow-before-opacity: 0.82;
    --ambient-glow-before-background: radial-gradient(circle at 22% 26%, rgba(248, 113, 113, 0.82), transparent 58%),
        radial-gradient(circle at 78% 38%, rgba(239, 68, 68, 0.68), transparent 55%),
        radial-gradient(circle at 46% 82%, rgba(244, 63, 94, 0.58), transparent 55%);
}

.ambient-glow--warning {
    --ambient-glow-before-opacity: 0.78;
    --ambient-glow-before-background: radial-gradient(circle at 22% 24%, rgba(251, 191, 36, 0.8), transparent 58%),
        radial-gradient(circle at 76% 36%, rgba(245, 158, 11, 0.66), transparent 55%),
        radial-gradient(circle at 44% 82%, rgba(249, 115, 22, 0.54), transparent 55%);
}

.ambient-glow--info {
    --ambient-glow-after-opacity: 0.74;
    --ambient-glow-after-background: radial-gradient(circle at 22% 28%, rgba(56, 189, 248, 0.76), transparent 58%),
        radial-gradient(circle at 78% 34%, rgba(59, 130, 246, 0.64), transparent 55%),
        radial-gradient(circle at 48% 82%, rgba(45, 212, 191, 0.52), transparent 55%);
}

@keyframes ambientGlowWarmFlow {
    0% {
        transform: translate3d(-10%, -5%, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(6%, 8%, 0) rotate(6deg);
    }
    100% {
        transform: translate3d(-8%, -4%, 0) rotate(-4deg);
    }
}

@keyframes ambientGlowCoolFlow {
    0% {
        transform: translate3d(8%, 6%, 0) rotate(0deg);
    }
    50% {
        transform: translate3d(-6%, -8%, 0) rotate(-6deg);
    }
    100% {
        transform: translate3d(4%, -5%, 0) rotate(4deg);
    }
}