/* ========================================
   ANIMATIONS GLOBALES
   ======================================== 
   
   Extrait de : public/assets/css/index-modern.css
   Date d'extraction : 2026-04-15
   Utilisé par : Toutes les pages
   Impact : FAIBLE (animations globales)
   
   REFACTORING CSS - Phase 2
   
   Contient :
   - Animations d'entrée (fadeInUp)
   - Animations de brillance (shine)
   - Animations de pulsation (pulse)
   - Délais d'animation pour les cartes
   ======================================== */

/* Animation d'entrée par le bas */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Application de l'animation aux cartes streamers */
.streamer-mini-card {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Délais d'animation en cascade */
.streamer-mini-card:nth-child(1) { animation-delay: 0.05s; }
.streamer-mini-card:nth-child(2) { animation-delay: 0.1s; }
.streamer-mini-card:nth-child(3) { animation-delay: 0.15s; }
.streamer-mini-card:nth-child(4) { animation-delay: 0.2s; }
.streamer-mini-card:nth-child(5) { animation-delay: 0.25s; }
.streamer-mini-card:nth-child(6) { animation-delay: 0.3s; }
.streamer-mini-card:nth-child(7) { animation-delay: 0.35s; }
.streamer-mini-card:nth-child(8) { animation-delay: 0.4s; }
.streamer-mini-card:nth-child(9) { animation-delay: 0.45s; }
.streamer-mini-card:nth-child(10) { animation-delay: 0.5s; }

/* Animation de brillance au survol */
.streamer-mini-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
    z-index: 2;
    pointer-events: none;
}

.streamer-mini-card:hover::before {
    left: 100%;
}

/* Animation de pulsation */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 111, 177, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 111, 177, 0);
    }
}

/* Animation de rotation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Animation de flottement */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Animation de glow */
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(255, 111, 177, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 111, 177, 0.8);
    }
}

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

/* Animation de bounce */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-15px);
    }
    60% {
        transform: translateY(-7px);
    }
}

/* Animation de fade in */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Animation de fade out */
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* Animation de slide in from right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Animation de slide out to right */
@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Animation de scale up */
@keyframes scaleUp {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Animation de scale down */
@keyframes scaleDown {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.8);
        opacity: 0;
    }
}