/*
 * Global Cinematic Background System
 * Dim 1-3 backgrounds are managed by CombatBackground.js.
 * This file defines the static CSS structure (keyframes, base styles).
 * CombatBackground.js drives animations via CSS Custom Properties.
 */

.combat-arena {
    position: relative;
    background: var(--clr-combat-bg);
    border-radius: 8px;
    z-index: 1;
}

/* Ensure cards and indicators sit above background */
.vs-indicator, .targeting-link-container {
    position: relative;
    z-index: 10 !important;
}

/* =============================================
 * CombatBackground.js — Static Keyframes
 * Driven by CSS Custom Properties set on elements.
 * ============================================= */

/* Breathing: slow drift applied to the mid layer.
 * Vars (set on the element): --cb-scale, --cb-tx, --cb-ty, --cb-rotate, --cb-skew */
@keyframes combat-bg-breathe {
    0%, 100% {
        transform: scale(1) translate(0, 0) rotate(var(--cb-rotate, 0deg)) skew(var(--cb-skew, 0deg));
    }
    50% {
        transform: scale(var(--cb-scale, 1.03))
                   translate(var(--cb-tx, 5px), var(--cb-ty, -5px))
                   rotate(var(--cb-rotate, 0deg))
                   skew(var(--cb-skew, 0deg));
    }
}

/* Pulse: opacity + brightness cycle applied to the flora layer.
 * Vars (set on the element): --cb-opacity-min, --cb-opacity-max, --cb-brightness-max, --cb-saturation-max */
@keyframes combat-bg-pulse {
    0%, 100% {
        opacity: var(--cb-opacity-min, 0.5);
        filter: brightness(1) saturate(1);
    }
    50% {
        opacity: var(--cb-opacity-max, 1);
        filter: brightness(var(--cb-brightness-max, 1.8)) saturate(var(--cb-saturation-max, 1.2));
    }
}

/* Secondary flora drift (sand-drift, smoke-rise).
 * Vars (set on the element): --cb-sec-tx, --cb-sec-ty */
@keyframes combat-bg-secondary {
    0%   { transform: translate(calc(-1 * var(--cb-sec-tx, 0px)), calc(-1 * var(--cb-sec-ty, 0px))); }
    100% { transform: translate(var(--cb-sec-tx, 0px), var(--cb-sec-ty, 0px)); }
}

/* God rays rotation — simple 360° spin */
@keyframes combat-bg-rays-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Bubble particle field and individual bubbles */
.combat-bg-bubble-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.combat-bg-bubble {
    position: absolute;
    bottom: -10%;
    width: var(--cb-bubble-size);
    height: var(--cb-bubble-size);
    border-radius: 50%;
    opacity: var(--cb-bubble-opacity);
    filter: blur(var(--cb-bubble-blur));
    mix-blend-mode: var(--cb-bubble-blend-mode);
    will-change: transform, opacity;
    background: radial-gradient(
        circle at 30% 30%,
        var(--cb-bubble-highlight) 0%,
        var(--cb-bubble-mid) 55%,
        var(--cb-bubble-outer) 100%
    );
    animation: combat-bg-bubble-rise var(--cb-bubble-duration) infinite var(--cb-bubble-timing);
    animation-delay: var(--cb-bubble-delay);
    animation-fill-mode: both;
}

@keyframes combat-bg-bubble-rise {
    0% {
        transform: translateY(0) translateX(0) scale(var(--cb-bubble-scale-start));
        opacity: 0;
    }
    15% {
        opacity: var(--cb-bubble-opacity);
    }
    100% {
        transform: translateY(calc(-1 * var(--cb-bubble-rise-distance))) translateX(var(--cb-bubble-drift-x)) scale(var(--cb-bubble-scale-end));
        opacity: 0;
    }
}

/* Legacy animations (retained) */
@keyframes rays-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes dim-card-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(139, 115, 50, 0.2); }
    50% { box-shadow: 0 0 20px rgba(0, 242, 255, 0.4); }
}