/* ==========================================================================
   Card Face Animations
   12 named, subtle, looping animations applied to revealed card faces.
   Each animation targets elements inside the card face container.
   CSS custom properties allow runtime config from admin panel.
   ========================================================================== */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .anim-gentle-glow,
    .anim-breathing,
    .anim-rgb-cycle,
    .anim-sequential-highlight,
    .anim-shimmer,
    .anim-ember-pulse,
    .anim-float-drift,
    .anim-neon-flicker,
    .anim-shadow-depth,
    .anim-color-shift,
    .anim-sparkle,
    .anim-wave {
        animation: none !important;
    }
    .anim-gentle-glow *,
    .anim-breathing *,
    .anim-rgb-cycle *,
    .anim-sequential-highlight *,
    .anim-shimmer *,
    .anim-ember-pulse *,
    .anim-float-drift *,
    .anim-neon-flicker *,
    .anim-shadow-depth *,
    .anim-color-shift *,
    .anim-sparkle *,
    .anim-wave * {
        animation: none !important;
    }
}

/* ---------- 1. Gentle Glow ---------- */
.anim-gentle-glow .rc-pip,
.anim-gentle-glow .rc-rank,
.anim-gentle-glow .rc-suit-corner {
    animation: gentleGlow var(--anim-speed, 3s) ease-in-out infinite;
}

@keyframes gentleGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(calc(1 + var(--anim-intensity, 0.3))); }
}

/* ---------- 2. Breathing ---------- */
.anim-breathing {
    animation: breathing var(--anim-speed, 4s) ease-in-out infinite;
}

@keyframes breathing {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(var(--anim-scale, 1.03)); }
}

/* ---------- 3. RGB Cycle ---------- */
.anim-rgb-cycle .rc-pip,
.anim-rgb-cycle .rc-rank,
.anim-rgb-cycle .rc-suit-corner {
    animation: rgbCycle var(--anim-speed, 8s) linear infinite;
}

@keyframes rgbCycle {
    0% { filter: hue-rotate(0deg); }
    50% { filter: hue-rotate(var(--anim-range, 30deg)); }
    100% { filter: hue-rotate(0deg); }
}

/* ---------- 4. Sequential Highlight ---------- */
.anim-sequential-highlight .rc-pip {
    animation: seqHighlight var(--anim-speed, 2s) ease-in-out infinite;
}

.anim-sequential-highlight .rc-pip:nth-child(5) { animation-delay: calc(var(--anim-delay, 0.15s) * 1); }
.anim-sequential-highlight .rc-pip:nth-child(6) { animation-delay: calc(var(--anim-delay, 0.15s) * 2); }
.anim-sequential-highlight .rc-pip:nth-child(7) { animation-delay: calc(var(--anim-delay, 0.15s) * 3); }
.anim-sequential-highlight .rc-pip:nth-child(8) { animation-delay: calc(var(--anim-delay, 0.15s) * 4); }
.anim-sequential-highlight .rc-pip:nth-child(9) { animation-delay: calc(var(--anim-delay, 0.15s) * 5); }
.anim-sequential-highlight .rc-pip:nth-child(10) { animation-delay: calc(var(--anim-delay, 0.15s) * 6); }
.anim-sequential-highlight .rc-pip:nth-child(11) { animation-delay: calc(var(--anim-delay, 0.15s) * 7); }
.anim-sequential-highlight .rc-pip:nth-child(12) { animation-delay: calc(var(--anim-delay, 0.15s) * 8); }
.anim-sequential-highlight .rc-pip:nth-child(13) { animation-delay: calc(var(--anim-delay, 0.15s) * 9); }
.anim-sequential-highlight .rc-pip:nth-child(14) { animation-delay: calc(var(--anim-delay, 0.15s) * 10); }

@keyframes seqHighlight {
    0%, 70%, 100% { opacity: 1; filter: brightness(1); }
    35% { opacity: 1; filter: brightness(1.5); }
}

/* ---------- 5. Shimmer ---------- */
.anim-shimmer {
    position: relative;
    overflow: hidden;
}

.anim-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        var(--anim-angle, 135deg),
        transparent 0%,
        rgba(255, 255, 255, 0.08) 45%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.08) 55%,
        transparent 100%
    );
    animation: shimmer var(--anim-speed, 3s) ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%); }
    100% { transform: translateX(100%) translateY(100%); }
}

/* ---------- 6. Ember Pulse ---------- */
.anim-ember-pulse .rc-pip,
.anim-ember-pulse .rc-rank,
.anim-ember-pulse .rc-suit-corner {
    animation: emberPulse var(--anim-speed, 4s) ease-in-out infinite;
}

@keyframes emberPulse {
    0%, 100% { filter: hue-rotate(0deg) brightness(1); }
    50% { filter: hue-rotate(var(--anim-warmth, 20deg)) brightness(1.15); }
}

/* ---------- 7. Float Drift ---------- */
.anim-float-drift .rc-pip {
    animation: floatDrift var(--anim-speed, 6s) ease-in-out infinite;
}

.anim-float-drift .rc-pip:nth-child(odd) {
    animation-direction: reverse;
}

@keyframes floatDrift {
    0% { translate: 0 0; }
    25% { translate: calc(var(--anim-radius, 2px)) calc(var(--anim-radius, 2px) * -1); }
    50% { translate: 0 calc(var(--anim-radius, 2px)); }
    75% { translate: calc(var(--anim-radius, 2px) * -1) 0; }
    100% { translate: 0 0; }
}

/* ---------- 8. Neon Flicker ---------- */
.anim-neon-flicker .rc-pip,
.anim-neon-flicker .rc-rank,
.anim-neon-flicker .rc-suit-corner {
    animation: neonFlicker var(--anim-speed, 2s) steps(5, end) infinite;
}

@keyframes neonFlicker {
    0%, 100% { opacity: 1; }
    20% { opacity: calc(1 - var(--anim-variance, 0.15)); }
    40% { opacity: 1; }
    60% { opacity: calc(1 - var(--anim-variance, 0.15) * 0.5); }
    80% { opacity: 1; }
}

/* ---------- 9. Shadow Depth ---------- */
.anim-shadow-depth {
    animation: shadowDepth var(--anim-speed, 3s) ease-in-out infinite;
}

@keyframes shadowDepth {
    0%, 100% {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    }
    50% {
        filter: drop-shadow(0 4px calc(var(--anim-blur, 8px)) rgba(0, 0, 0, 0.5));
    }
}

/* ---------- 10. Color Shift ---------- */
.anim-color-shift .rc-pip,
.anim-color-shift .rc-rank,
.anim-color-shift .rc-suit-corner {
    animation: colorShift var(--anim-speed, 5s) ease-in-out infinite;
}

@keyframes colorShift {
    0%, 100% { color: var(--accent-1); }
    50% { color: var(--accent-2); }
}

/* ---------- 11. Sparkle ---------- */
.anim-sparkle .rc-pip {
    animation: sparkle var(--anim-speed, 1s) ease-in-out infinite;
}

.anim-sparkle .rc-pip:nth-child(odd) { animation-delay: 0.3s; }
.anim-sparkle .rc-pip:nth-child(3n) { animation-delay: 0.6s; }
.anim-sparkle .rc-pip:nth-child(4n) { animation-delay: 0.1s; }

@keyframes sparkle {
    0%, 85%, 100% { filter: brightness(1); }
    90% { filter: brightness(1.8); }
}

/* ---------- 12. Wave ---------- */
.anim-wave .rc-pip {
    animation: wave var(--anim-speed, 4s) ease-in-out infinite;
}

.anim-wave .rc-pip:nth-child(5) { animation-delay: 0s; }
.anim-wave .rc-pip:nth-child(6) { animation-delay: 0.1s; }
.anim-wave .rc-pip:nth-child(7) { animation-delay: 0.2s; }
.anim-wave .rc-pip:nth-child(8) { animation-delay: 0.3s; }
.anim-wave .rc-pip:nth-child(9) { animation-delay: 0.4s; }
.anim-wave .rc-pip:nth-child(10) { animation-delay: 0.5s; }
.anim-wave .rc-pip:nth-child(11) { animation-delay: 0.6s; }
.anim-wave .rc-pip:nth-child(12) { animation-delay: 0.7s; }
.anim-wave .rc-pip:nth-child(13) { animation-delay: 0.8s; }
.anim-wave .rc-pip:nth-child(14) { animation-delay: 0.9s; }

@keyframes wave {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 calc(var(--anim-amplitude, 3px) * -1); }
}