/**
 * Animation Improvements CSS
 * 
 * Improved animation speeds and performance optimizations
 * Applied by default for better user experience
 * 
 * @author: Senior Software Engineer
 * @version: 1.0.0
 * @date: 2025-01-05
 */

/* ============================================================================
   IMPROVED ANIMATION VARIABLES
   ============================================================================ */

:root {
    /* Faster, more responsive timing */
    --animation-duration-ultra-fast: 75ms;
    --animation-duration-fast: 100ms;
    --animation-duration-normal: 150ms;
    --animation-duration-slow: 250ms;
    --animation-duration-extra-slow: 400ms;
    
    /* Better easing functions */
    --animation-easing-snappy: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --animation-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --animation-easing-bounce-subtle: cubic-bezier(0.68, -0.15, 0.265, 1.15);
    --animation-easing-elastic-subtle: cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

/* ============================================================================
   HERO SECTION IMPROVEMENTS
   ============================================================================ */

/* Speed up slow hero animations */
.hero-gradient-animated {
    animation-duration: 8s !important; /* was 15s - 2x faster */
}

.event-list-hero__bg--animated {
    animation-duration: 8s !important; /* was 15s - 2x faster */
}

.event-list-hero__floating-icons .event-list-hero__icon {
    animation-duration: 10s !important; /* was 18s - 1.8x faster */
}

.event-list-hero__scroll-indicator {
    animation-duration: 1.2s !important; /* was 2s - 1.7x faster */
}

/* Improve hero element transitions */
.hero-actions .btn {
    transition: all var(--animation-duration-fast) var(--animation-easing-smooth) !important;
}

.event-stats-grid .stat-card {
    transition: transform var(--animation-duration-fast) var(--animation-easing-smooth) !important;
}

/* ============================================================================
   SECTION ANIMATION IMPROVEMENTS
   ============================================================================ */

/* Gallery section - faster stagger */
.gallery-item:nth-child(1) { animation-delay: 0.05s !important; /* was 0.1s */ }
.gallery-item:nth-child(2) { animation-delay: 0.08s !important; /* was 0.2s */ }
.gallery-item:nth-child(3) { animation-delay: 0.11s !important; /* was 0.3s */ }
.gallery-item:nth-child(4) { animation-delay: 0.14s !important; /* was 0.4s */ }
.gallery-item:nth-child(5) { animation-delay: 0.17s !important; /* was 0.5s */ }
.gallery-item:nth-child(6) { animation-delay: 0.20s !important; /* was 0.6s */ }

/* Sponsors section - faster stagger */
.sponsor-tier:nth-child(1) { animation-delay: 0.05s !important; /* was 0.1s */ }
.sponsor-tier:nth-child(2) { animation-delay: 0.08s !important; /* was 0.2s */ }
.sponsor-tier:nth-child(3) { animation-delay: 0.11s !important; /* was 0.3s */ }
.sponsor-tier:nth-child(4) { animation-delay: 0.14s !important; /* was 0.4s */ }
.sponsor-tier:nth-child(5) { animation-delay: 0.17s !important; /* was 0.5s */ }

/* Program section - faster stagger */
.program-item:nth-child(1) { animation-delay: 0.05s !important; /* was 0.2s */ }
.program-item:nth-child(2) { animation-delay: 0.10s !important; /* was 0.4s */ }
.program-item:nth-child(3) { animation-delay: 0.15s !important; /* was 0.6s */ }
.program-item:nth-child(4) { animation-delay: 0.20s !important; /* was 0.8s */ }
.program-item:nth-child(5) { animation-delay: 0.25s !important; /* was 1.0s */ }
.program-item:nth-child(6) { animation-delay: 0.30s !important; /* was 1.2s */ }

/* Route timeline - faster stagger */
.modern-timeline-item:nth-child(1) { animation-delay: 0.05s !important; /* was 0.1s */ }
.modern-timeline-item:nth-child(2) { animation-delay: 0.08s !important; /* was 0.2s */ }
.modern-timeline-item:nth-child(3) { animation-delay: 0.11s !important; /* was 0.3s */ }
.modern-timeline-item:nth-child(4) { animation-delay: 0.14s !important; /* was 0.4s */ }
.modern-timeline-item:nth-child(5) { animation-delay: 0.17s !important; /* was 0.5s */ }
.modern-timeline-item:nth-child(6) { animation-delay: 0.20s !important; /* was 0.6s */ }

/* Registration race cards - faster stagger */
.race-card[data-tier-id]:nth-child(1) { animation-delay: 0.05s !important; }
.race-card[data-tier-id]:nth-child(2) { animation-delay: 0.08s !important; /* was 0.1s */ }
.race-card[data-tier-id]:nth-child(3) { animation-delay: 0.11s !important; /* was 0.2s */ }

/* ============================================================================
   FORM ANIMATION IMPROVEMENTS
   ============================================================================ */

/* Form fields */
.form-field {
    animation-duration: var(--animation-duration-normal) !important;
    animation-timing-function: var(--animation-easing-smooth) !important;
}

.form-field:focus-within {
    animation-duration: var(--animation-duration-fast) !important;
}

/* Form buttons */
.form-button,
.btn {
    transition: all var(--animation-duration-fast) var(--animation-easing-smooth) !important;
}

.form-button:hover,
.btn:hover {
    transition-duration: var(--animation-duration-ultra-fast) !important;
}

/* Form steppers */
.form-stepper__progress-fill {
    transition: width var(--animation-duration-normal) var(--animation-easing-smooth) !important;
}

/* ============================================================================
   SCROLL ANIMATION IMPROVEMENTS
   ============================================================================ */

/* Overview section animations */
.overview-section .fade-in-up {
    animation-duration: var(--animation-duration-normal) !important;
    animation-timing-function: var(--animation-easing-smooth) !important;
}

/* Statistics counters */
.stat-number[data-counter-target] {
    transition: all var(--animation-duration-slow) var(--animation-easing-smooth) !important;
}

/* Section titles */
.section-title,
.section-header h2,
.section-header h3 {
    animation-duration: var(--animation-duration-normal) !important;
    animation-timing-function: var(--animation-easing-smooth) !important;
}

/* ============================================================================
   COUNTDOWN TIMER IMPROVEMENTS
   ============================================================================ */

.timer-seconds.flip {
    animation-duration: var(--animation-duration-normal) !important;
    animation-timing-function: var(--animation-easing-smooth) !important;
}

.countdown-timer.is-complete .timer-message {
    animation-duration: 2s !important; /* was using slow variable */
}

/* ============================================================================
   MICRO-INTERACTION IMPROVEMENTS
   ============================================================================ */

/* Hover effects */
.stat-card:hover,
.race-card:hover,
.gallery-item:hover,
.sponsor-logo:hover {
    transition: transform var(--animation-duration-fast) var(--animation-easing-smooth) !important;
}

/* Button interactions */
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover {
    transition: all var(--animation-duration-ultra-fast) var(--animation-easing-smooth) !important;
}

/* Card interactions */
.card:hover,
.info-card:hover,
.program-item:hover {
    transition: all var(--animation-duration-fast) var(--animation-easing-smooth) !important;
}

/* ============================================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================================ */

/* Use transform and opacity for better performance */
.fade-in-up,
.slide-in-left,
.slide-in-right,
.scale-in,
.gallery-item,
.program-item,
.sponsor-tier,
.stat-card {
    will-change: transform, opacity;
}

/* Optimize frequently animated elements */
.hero-gradient-animated,
.event-list-hero__bg--animated,
.countdown-timer .timer-seconds,
.form-button--loading::after {
    will-change: transform;
}

/* Remove will-change after animations complete */
.animation-complete {
    will-change: auto;
}

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

@media (prefers-reduced-motion: reduce) {
    /* Override improvements for users who prefer reduced motion */
    :root {
        --animation-duration-ultra-fast: 0.01ms;
        --animation-duration-fast: 0.01ms;
        --animation-duration-normal: 0.01ms;
        --animation-duration-slow: 0.01ms;
        --animation-duration-extra-slow: 0.01ms;
    }
    
    /* Keep essential functional transitions */
    .form-field__label,
    .dropdown-menu,
    .modal {
        transition-duration: 0.15s !important;
    }
}

/* ============================================================================
   MOBILE OPTIMIZATIONS
   ============================================================================ */

@media (max-width: 768px) {
    /* Reduce animation complexity on mobile for better performance */
    :root {
        --animation-duration-normal: 120ms;
        --animation-duration-slow: 200ms;
    }
    
    /* Disable expensive animations on mobile */
    .hero-gradient-animated,
    .event-list-hero__bg--animated {
        animation: none !important;
        background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%) !important;
    }
    
    /* Simplify hover effects */
    .stat-card:hover,
    .race-card:hover,
    .gallery-item:hover {
        transform: none !important;
    }
}

@media (max-width: 480px) {
    /* Further optimizations for very small screens */
    .gallery-item,
    .program-item,
    .sponsor-tier {
        animation-delay: 0s !important; /* Remove stagger on very small screens */
    }
}

/* ============================================================================
   ANIMATION STATE CLASSES
   ============================================================================ */

/* Classes for JavaScript-controlled animation states */
.animations-paused * {
    animation-play-state: paused !important;
}

.animations-resumed * {
    animation-play-state: running !important;
}

.no-transitions * {
    transition: none !important;
}

/* ============================================================================
   DEBUG HELPERS (Remove in production)
   ============================================================================ */

/* Uncomment for debugging animation performance */
/*
.debug-animations * {
    outline: 1px solid rgba(255, 0, 0, 0.3) !important;
}

.debug-animations *:hover {
    outline-color: rgba(255, 0, 0, 0.8) !important;
}
*/