/* 
   Horizon MW - Modern Warfare 2 Remastered Mod
   style-animations.css - Animations et transitions
*/

/* ===== Animation Classes ===== */
.animated {
    opacity: 0;
}

.fade-in {
    animation: fadeIn 1s ease forwards;
}

.slide-up {
    animation: slideUp 1s ease forwards;
}

.slide-up-delay {
    animation: slideUp 1s ease 0.3s forwards;
}

.fade-in-delay {
    animation: fadeIn 1s ease 0.6s forwards;
}

.pulse-glow {
    animation: pulseGlow 3s infinite;
}

.pulse-infinite {
    animation: pulse 2s infinite;
}

/* ===== Reveal on Scroll Classes ===== */
.reveal-fade {
    opacity: 0;
    transition: all 0.8s ease;
}

.reveal-fade.active {
    opacity: 1;
}

.reveal-slide-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.8s ease;
}

.reveal-slide-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.8s ease;
}

.reveal-slide-up {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease;
}

.reveal-slide-down {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s ease;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s ease;
}

.reveal-rotate {
    opacity: 0;
    transform: rotate(-10deg);
    transition: all 0.8s ease;
}

.reveal-slide-left.active,
.reveal-slide-right.active,
.reveal-slide-up.active,
.reveal-slide-down.active {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.reveal-rotate.active {
    opacity: 1;
    transform: rotate(0);
}

/* ===== Delay Classes ===== */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

/* ===== Animation Keyframes ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes rotate {
    from {
        opacity: 0;
        transform: rotate(-10deg);
    }
    to {
        opacity: 1;
        transform: rotate(0);
    }
}

@keyframes pulse {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0% {
        filter: drop-shadow(0 0 5px rgba(227, 31, 31, 0.5));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(227, 31, 31, 0.8));
    }
    100% {
        filter: drop-shadow(0 0 5px rgba(227, 31, 31, 0.5));
    }
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(227, 31, 31, 0.5);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(227, 31, 31, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(227, 31, 31, 0);
    }
}

/* ===== Typing Animation ===== */
.typing-animation {
    display: inline-block;
    overflow: hidden;
    border-right: 2px solid var(--primary-color);
    white-space: nowrap;
    margin: 0 auto;
    animation: 
        typing 3.5s steps(40, end),
        blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--primary-color); }
}

/* ===== Counter Animation ===== */
.counting {
    display: inline-block;
    overflow: hidden;
}

/* ===== Hover Effects ===== */
.hover-scale {
    transition: var(--transition-normal);
}

.hover-scale:hover {
    transform: scale(1.05);
}

.hover-glow {
    transition: var(--transition-normal);
}

.hover-glow:hover {
    box-shadow: 0 0 15px rgba(227, 31, 31, 0.5);
}

.hover-shift {
    transition: var(--transition-normal);
}

.hover-shift:hover {
    transform: translateY(-5px);
}

/* ===== Parallax Effect ===== */
.parallax-section {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ===== Scroll Trigger Script ===== */
/* 
   Pour l'activation des animations au scroll, 
   ce script doit être inclus dans le fichier JS:
   
   document.addEventListener('DOMContentLoaded', function() {
       // Fonction pour observer les éléments
       const observer = new IntersectionObserver((entries) => {
           entries.forEach(entry => {
               if (entry.isIntersecting) {
                   entry.target.classList.add('active');
               }
           });
       }, { threshold: 0.1 });
       
       // Observer tous les éléments avec animation
       document.querySelectorAll('.reveal-fade, .reveal-slide-left, .reveal-slide-right, .reveal-slide-up, .reveal-slide-down, .reveal-scale, .reveal-rotate').forEach(el => {
           observer.observe(el);
       });
       
       // Fonction pour les compteurs
       function startCounting() {
           document.querySelectorAll('.stat-value').forEach(counter => {
               const target = +counter.getAttribute('data-count');
               const duration = 2000; // ms
               const step = target / duration * 10;
               let current = 0;
               
               const updateCounter = () => {
                   if (current < target) {
                       current += step;
                       if (current > target) current = target;
                       counter.textContent = Math.floor(current).toLocaleString();
                       requestAnimationFrame(updateCounter);
                   }
               };
               
               updateCounter();
           });
       }
       
       // Observer pour les compteurs
       const statsObserver = new IntersectionObserver((entries) => {
           entries.forEach(entry => {
               if (entry.isIntersecting) {
                   startCounting();
                   statsObserver.disconnect();
               }
           });
       });
       
       const statsSection = document.querySelector('.community-stats');
       if (statsSection) {
           statsObserver.observe(statsSection);
       }
   });
*/