/* ============================================
   ANIMATIONS - PLACEHOLDER
   L'ÉQUIPE Football Agency

   Note: Advanced animations will be added in Phase 3-5
   This file contains basic CSS animations only
   ============================================ */


/* ============================================
   BASIC TRANSITIONS
   ============================================ */

/* Smooth Transitions for Interactive Elements */
a,
button,
.btn,
.nav-link,
.service-card,
.stat-card,
.client-logo,
.form-control {
    transition: all var(--duration-fast) var(--ease-default);
}


/* ============================================
   HOVER EFFECTS
   ============================================ */

/* Card Hover Lift */
.service-card:hover,
.stat-card:hover,
.client-logo:hover {
    transform: translateY(var(--hover-lift));
}

/* Button Hover Scale */
.btn:hover {
    transform: scale(var(--hover-scale));
}


/* ============================================
   FADE IN ANIMATION (Basic)
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

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


/* ============================================
   SCROLL REVEAL CLASSES (Will be triggered by JS)
   ============================================ */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--duration-slow) var(--ease-default);
}

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


/* ============================================
   STAGGER DELAYS
   ============================================ */

.reveal:nth-child(1) { transition-delay: 0ms; }
.reveal:nth-child(2) { transition-delay: 100ms; }
.reveal:nth-child(3) { transition-delay: 200ms; }
.reveal:nth-child(4) { transition-delay: 300ms; }
.reveal:nth-child(5) { transition-delay: 400ms; }
.reveal:nth-child(6) { transition-delay: 500ms; }


/* ============================================
   LOADING SPINNER (Future Use)
   ============================================ */

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spinner {
    animation: spin 1s linear infinite;
}


/* ============================================
   PULSE ANIMATION
   ============================================ */

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}


/* ============================================
   HARDWARE ACCELERATION
   ============================================ */

.hero-section,
#formationCanvas,
.service-card,
.stat-card,
.btn {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}


/* ============================================
   HERO SECTION ANIMATIONS
   ============================================ */

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

.hero-fade-in {
    opacity: 0;
    animation: heroFadeIn 0.8s ease-out forwards;
}


/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero-fade-in {
        opacity: 1;
        transform: none;
        animation: none;
    }
}