/**
 * XoXo Cards - Animations CSS
 * 
 * Animations pour les cartes, les effets visuels et les transitions.
 * 
 * @package XoXo_Cards
 * @since 2.0.0
 */

/* ============================
   Keyframes
   ============================ */

/* Reveal d'une carte au pack opening */
@keyframes revealCard {
    0% {
        opacity: 0;
        transform: scale(0.8) rotateY(180deg);
    }
    60% {
        opacity: 1;
        transform: scale(1.05) rotateY(0deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

/* Pulse glow pour les cartes XoXo et Club */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 5px var(--glow-color, rgba(255, 69, 0, 0.3));
    }
    50% {
        box-shadow: 0 0 20px var(--glow-color, rgba(255, 69, 0, 0.6)),
                    0 0 40px var(--glow-color, rgba(255, 69, 0, 0.3));
    }
}

/* Sparkle pour les cartes XoXo - LEGACY pre-Builder v5.8.0 (table xoxo_cards_visual_effects, non consomme runtime)
 * v5.8.7 [TACHE 120] : keyframe conserve mais utilise par la classe renommee .xoxo-effect-twinkle-gold ci-dessous.
 * Le slug `sparkle` ayant ete remplace par `twinkle`, la legacy CSS suit la meme convention. */
@keyframes sparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

/* Border rotate pour les cartes Club */
@keyframes borderRotate {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Holographic shift pour les cartes Rares */
@keyframes holographicShift {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* Float particles */
@keyframes floatParticles {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(720deg);
        opacity: 0;
    }
}

/* Rainbow shift pour les cartes Evenement */
@keyframes rainbowShift {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* Shine move */
@keyframes shineMove {
    0% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* Fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scale pulse */
@keyframes scalePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Pack bounce */
@keyframes packBounce {
    0% { transform: scale(1); }
    20% { transform: scale(1.15); }
    40% { transform: scale(0.95); }
    60% { transform: scale(1.05); }
    80% { transform: scale(0.98); }
    100% { transform: scale(1); }
}

/* ============================
   Effets visuels par niveau
   ============================ */

/* Glow - XoXo (Orange) */
.xoxo-effect-glow-orange {
    --glow-color: rgba(255, 69, 0, 0.5);
    animation: pulseGlow 2s ease-in-out infinite;
}

/* Glow - Club (Violet) */
.xoxo-effect-glow-purple {
    --glow-color: rgba(139, 0, 255, 0.5);
    animation: pulseGlow 1.5s ease-in-out infinite;
}

/* Twinkle (ex-Sparkle) - XoXo (Dore) - LEGACY (renomme v5.8.7 [TACHE 120]) */
.xoxo-effect-twinkle-gold {
    position: relative;
    overflow: visible;
}

.xoxo-effect-twinkle-gold::before,
.xoxo-effect-twinkle-gold::after {
    content: '\2726';
    position: absolute;
    color: var(--xoxo-rares);
    font-size: 16px;
    animation: sparkle 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

.xoxo-effect-twinkle-gold::before {
    top: 10%;
    right: -5px;
    animation-delay: 0s;
}

.xoxo-effect-twinkle-gold::after {
    bottom: 20%;
    left: -5px;
    animation-delay: 1.5s;
}

/* Animated Border - Club */
.xoxo-effect-border-animated {
    border: 3px solid transparent;
    background-image: linear-gradient(var(--xoxo-bg), var(--xoxo-bg)),
                      linear-gradient(45deg, var(--xoxo-club), var(--xoxo-rares), var(--xoxo-club));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 200%;
    animation: borderRotate 4s ease-in-out infinite;
}

/* Holographic - Rares */
.xoxo-effect-holographic {
    position: relative;
    overflow: hidden;
}

.xoxo-effect-holographic::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        45deg,
        rgba(255, 0, 0, 0.1),
        rgba(255, 127, 0, 0.1),
        rgba(255, 255, 0, 0.1),
        rgba(0, 255, 0, 0.1),
        rgba(0, 0, 255, 0.1),
        rgba(139, 0, 255, 0.1)
    );
    background-size: 400% 400%;
    animation: holographicShift 5s ease infinite;
    pointer-events: none;
    z-index: 5;
    border-radius: inherit;
    mix-blend-mode: overlay;
}

/* Particles - Rares Premium */
.xoxo-effect-particles-gold {
    position: relative;
    overflow: visible;
}

/* Rainbow - Evenement */
.xoxo-effect-rainbow {
    animation: rainbowShift 3s linear infinite;
}

/* Shine - Evenement */
.xoxo-effect-shine {
    position: relative;
    overflow: hidden;
}

.xoxo-effect-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(25deg);
    animation: shineMove 2s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}

/* ============================
   Animations d'interface
   ============================ */

/* Entree des cartes dans la grille */
.xoxo-card-item {
    animation: fadeInUp 0.4s ease forwards;
    opacity: 0;
}

.xoxo-card-item:nth-child(1) { animation-delay: 0.05s; }
.xoxo-card-item:nth-child(2) { animation-delay: 0.1s; }
.xoxo-card-item:nth-child(3) { animation-delay: 0.15s; }
.xoxo-card-item:nth-child(4) { animation-delay: 0.2s; }
.xoxo-card-item:nth-child(5) { animation-delay: 0.25s; }
.xoxo-card-item:nth-child(6) { animation-delay: 0.3s; }
.xoxo-card-item:nth-child(7) { animation-delay: 0.35s; }
.xoxo-card-item:nth-child(8) { animation-delay: 0.4s; }
.xoxo-card-item:nth-child(n+9) { animation-delay: 0.45s; }

/* Reveal des cartes de pack */
.xoxo-reveal-card:nth-child(1) { animation-delay: 0.1s; }
.xoxo-reveal-card:nth-child(2) { animation-delay: 0.3s; }
.xoxo-reveal-card:nth-child(3) { animation-delay: 0.5s; }
.xoxo-reveal-card:nth-child(4) { animation-delay: 0.7s; }
.xoxo-reveal-card:nth-child(5) { animation-delay: 0.9s; }
.xoxo-reveal-card:nth-child(6) { animation-delay: 1.1s; }
.xoxo-reveal-card:nth-child(7) { animation-delay: 1.3s; }
.xoxo-reveal-card:nth-child(8) { animation-delay: 1.5s; }
.xoxo-reveal-card:nth-child(9) { animation-delay: 1.7s; }
.xoxo-reveal-card:nth-child(10) { animation-delay: 1.9s; }
.xoxo-reveal-card:nth-child(n+11) { animation-delay: 2.0s; }

/* Pack opening animation */
.xoxo-pack-opening-anim {
    animation: packBounce 0.8s ease;
}

/* Shake pour les erreurs */
.xoxo-shake {
    animation: shake 0.5s ease;
}

/* ============================
   Performance : IntersectionObserver
   ============================ */
.xoxo-card-item.xoxo-not-visible {
    animation: none;
    opacity: 0;
}

/* Reduire les animations si l'utilisateur le prefere */
@media (prefers-reduced-motion: reduce) {
    .xoxo-card-item,
    .xoxo-reveal-card,
    .xoxo-effect-glow-orange,
    .xoxo-effect-glow-purple,
    .xoxo-effect-twinkle-gold, /* v5.8.7 [TACHE 120] ex-sparkle-gold */
    .xoxo-effect-border-animated,
    .xoxo-effect-holographic,
    .xoxo-effect-holographic::before,
    .xoxo-effect-rainbow,
    .xoxo-effect-shine::after,
    .xoxo-effect-particles-gold {
        animation: none !important;
        opacity: 1;
    }
    
    .xoxo-effect-twinkle-gold::before, /* v5.8.7 [TACHE 120] ex-sparkle-gold */
    .xoxo-effect-twinkle-gold::after {
        display: none;
    }
}