/**
 * EcoVoyager Shared Animations
 * Centralized keyframe animations used across all homepage sections
 * 
 * SETUP: Enqueue this file globally in functions.php:
 * 
 * function ecovoyager_enqueue_shared_animations() {
 *     wp_enqueue_style(
 *         'ecovoyager-shared-animations',
 *         get_template_directory_uri() . '/css/ecovoyager-shared-animations.css',
 *         array(),
 *         '1.0.0'
 *     );
 * }
 * add_action('wp_enqueue_scripts', 'ecovoyager_enqueue_shared_animations');
 * 
 * USAGE: After adding this file, remove the duplicate @keyframes from each
 * section file and update animation references to use these shared names.
 */

/* ============================================
   DIAMOND PULSE
   Used in: Section headers (decorative diamond)
   ============================================ */
@keyframes ecovoyagerDiamondPulse {
    0%, 100% { 
        transform: rotate(45deg) scale(1); 
        opacity: 1; 
    }
    50% { 
        transform: rotate(45deg) scale(1.2); 
        opacity: 0.7; 
    }
}

/* Hero variant - slightly larger scale */
@keyframes ecovoyagerDiamondPulseHero {
    0%, 100% { 
        transform: rotate(45deg) scale(1); 
        opacity: 1; 
    }
    50% { 
        transform: rotate(45deg) scale(1.3); 
        opacity: 0.7; 
    }
}

/* ============================================
   FLOATING ELEMENTS - ROTATE/BOB
   Used in: Floating compass decorations
   ============================================ */
@keyframes ecovoyagerFloatRotate {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-30px) rotate(15deg); 
    }
}

/* Slower/subtler variant for hero */
@keyframes ecovoyagerFloatRotateSlow {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-25px) rotate(10deg); 
    }
}

/* Gentle variant for testimonials/blog */
@keyframes ecovoyagerFloatRotateGentle {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-15px) rotate(8deg); 
    }
}

/* ============================================
   FLOATING ELEMENTS - HORIZONTAL SWAY
   Used in: Floating leaf/globe decorations
   ============================================ */
@keyframes ecovoyagerFloatSway {
    0%, 100% { 
        transform: translateX(0) rotate(-5deg); 
    }
    50% { 
        transform: translateX(20px) rotate(5deg); 
    }
}

/* Gentler variant */
@keyframes ecovoyagerFloatSwayGentle {
    0%, 100% { 
        transform: translateX(0); 
    }
    50% { 
        transform: translateX(10px); 
    }
}

/* ============================================
   FLOATING ELEMENTS - DOTS DRIFT
   Used in: Floating dot pattern decorations
   ============================================ */
@keyframes ecovoyagerFloatDots {
    0%, 100% { 
        transform: translate(0, 0); 
        opacity: 0.06; 
    }
    50% { 
        transform: translate(15px, -20px); 
        opacity: 0.1; 
    }
}

/* ============================================
   PROGRESS/INDICATOR ANIMATIONS
   Used in: Carousel dots, progress indicators
   ============================================ */
@keyframes ecovoyagerProgressRing {
    0% { 
        transform: scale(1); 
        opacity: 1; 
    }
    100% { 
        transform: scale(1.8); 
        opacity: 0; 
    }
}

/* ============================================
   FADE IN ANIMATIONS
   Used in: Scroll reveal, content entrance
   ============================================ */
@keyframes ecovoyagerFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

/* ============================================
   REDUCED MOTION SUPPORT
   Respects user's accessibility preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}