/**
 * template-animations.css - Centralized Animation System
 * Shared animation styles for all templates
 * Used by: destinations, featured-packages, testimonials, and other components
 * Version: 1.0.0 - Performance Optimized
 */

/* ==================== CORE ANIMATION VARIABLES ==================== */
:root {
    /* Animation Timing */
    --anim-duration-fast: 0.3s;
    --anim-duration-base: 0.5s;
    --anim-duration-slow: 0.8s;
    --anim-duration-stagger: 0.15s;
    
    /* Animation Easing */
    --anim-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --anim-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --anim-ease-elegant: cubic-bezier(0.165, 0.84, 0.44, 1);
    --anim-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Animation Distances */
    --anim-translate-sm: 20px;
    --anim-translate-md: 30px;
    --anim-translate-lg: 50px;
    
    /* Animation Scales */
    --anim-scale-sm: 0.95;
    --anim-scale-md: 0.9;
    --anim-scale-lg: 0.8;
}

/* ==================== BASE ANIMATION CLASSES ==================== */

/* Core card animation state */
.card-animate {
    opacity: 0;
    transform: translateY(var(--anim-translate-md)) scale(var(--anim-scale-sm));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

/* Animated in state */
.card-animate-in,
.card-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ==================== STAGGER ANIMATION DELAYS ==================== */
.stagger-delay-1 { transition-delay: calc(var(--anim-duration-stagger) * 1); }
.stagger-delay-2 { transition-delay: calc(var(--anim-duration-stagger) * 2); }
.stagger-delay-3 { transition-delay: calc(var(--anim-duration-stagger) * 3); }
.stagger-delay-4 { transition-delay: calc(var(--anim-duration-stagger) * 4); }
.stagger-delay-5 { transition-delay: calc(var(--anim-duration-stagger) * 5); }
.stagger-delay-6 { transition-delay: calc(var(--anim-duration-stagger) * 6); }
.stagger-delay-7 { transition-delay: calc(var(--anim-duration-stagger) * 7); }
.stagger-delay-8 { transition-delay: calc(var(--anim-duration-stagger) * 8); }

/* ==================== SLIDE ANIMATIONS ==================== */

/* Slide from left */
.slide-in-left {
    opacity: 0;
    transform: translateX(calc(var(--anim-translate-lg) * -1));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.slide-in-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from right */
.slide-in-right {
    opacity: 0;
    transform: translateX(var(--anim-translate-lg));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.slide-in-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

/* Slide from bottom */
.slide-in-up {
    opacity: 0;
    transform: translateY(var(--anim-translate-lg));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.slide-in-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from top */
.slide-in-down {
    opacity: 0;
    transform: translateY(calc(var(--anim-translate-lg) * -1));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.slide-in-down.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* ==================== FADE ANIMATIONS ==================== */

/* Basic fade in */
.fade-in {
    opacity: 0;
    transition: opacity var(--anim-duration-base) var(--anim-ease-smooth);
}

.fade-in.animate-in {
    opacity: 1;
}

/* Fade with scale */
.fade-scale-in {
    opacity: 0;
    transform: scale(var(--anim-scale-md));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.fade-scale-in.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* ==================== BOUNCE ANIMATIONS ==================== */

/* Bounce in */
.bounce-in {
    opacity: 0;
    transform: scale(var(--anim-scale-lg));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-bounce),
        transform var(--anim-duration-slow) var(--anim-ease-bounce);
}

.bounce-in.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* ==================== ROTATE ANIMATIONS ==================== */

/* Rotate fade in */
.rotate-in {
    opacity: 0;
    transform: rotate(-10deg) scale(var(--anim-scale-sm));
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.rotate-in.animate-in {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ==================== FLIP ANIMATIONS ==================== */

/* Flip in Y */
.flip-in-y {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.flip-in-y.animate-in {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
}

/* Flip in X */
.flip-in-x {
    opacity: 0;
    transform: perspective(400px) rotateX(90deg);
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-smooth),
        transform var(--anim-duration-base) var(--anim-ease-smooth);
}

.flip-in-x.animate-in {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
}

/* ==================== TEMPLATE-SPECIFIC ANIMATIONS ==================== */

/* Destination Card Animations */
.destination-card-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-elegant),
        transform var(--anim-duration-base) var(--anim-ease-elegant);
}

/* Tour Package Card Animations */
.tour-card-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-elegant),
        transform var(--anim-duration-base) var(--anim-ease-elegant);
}

/* Testimonial Card Animations */
.testimonial-card-animated {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: 
        opacity var(--anim-duration-base) var(--anim-ease-elegant),
        transform var(--anim-duration-base) var(--anim-ease-elegant);
}

/* ==================== HOVER ANIMATIONS ==================== */

/* Hover lift effect */
.hover-lift {
    transition: transform var(--anim-duration-fast) var(--anim-ease-out);
}

.hover-lift:hover {
    transform: translateY(-8px);
}

/* Hover scale effect */
.hover-scale {
    transition: transform var(--anim-duration-fast) var(--anim-ease-out);
}

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

/* Hover glow effect */
.hover-glow {
    transition: box-shadow var(--anim-duration-fast) var(--anim-ease-out);
}

.hover-glow:hover {
    box-shadow: 0 8px 25px rgba(30, 136, 229, 0.3);
}

/* ==================== LOADING ANIMATIONS ==================== */

/* Skeleton loading */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 2s infinite;
    border-radius: 8px;
}

@keyframes skeleton-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Pulse animation */
.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Spinner animation */
.spinner {
    animation: spinner 1s linear infinite;
}

@keyframes spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==================== KEYFRAME ANIMATIONS ==================== */

/* Float animation */
.float {
    animation: float 6s ease-in-out infinite;
}

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

/* Wave animation */
.wave {
    animation: wave 4s ease-in-out infinite;
}

@keyframes wave {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-5px) rotate(1deg);
    }
    75% {
        transform: translateY(3px) rotate(-1deg);
    }
}

/* Shake animation */
.shake {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ==================== CHAIN ANIMATIONS ==================== */

/* Sequential reveal */
.reveal-sequence .card-animate:nth-child(1) { transition-delay: 0.1s; }
.reveal-sequence .card-animate:nth-child(2) { transition-delay: 0.2s; }
.reveal-sequence .card-animate:nth-child(3) { transition-delay: 0.3s; }
.reveal-sequence .card-animate:nth-child(4) { transition-delay: 0.4s; }
.reveal-sequence .card-animate:nth-child(5) { transition-delay: 0.5s; }
.reveal-sequence .card-animate:nth-child(6) { transition-delay: 0.6s; }
.reveal-sequence .card-animate:nth-child(7) { transition-delay: 0.7s; }
.reveal-sequence .card-animate:nth-child(8) { transition-delay: 0.8s; }

/* ==================== RESPONSIVE ANIMATIONS ==================== */

/* Reduce animations on mobile for performance */
@media (max-width: 768px) {
    :root {
        --anim-duration-fast: 0.2s;
        --anim-duration-base: 0.3s;
        --anim-duration-slow: 0.4s;
        --anim-duration-stagger: 0.1s;
        --anim-translate-sm: 15px;
        --anim-translate-md: 20px;
        --anim-translate-lg: 30px;
    }
    
    /* Simplify animations on mobile */
    .card-animate,
    .slide-in-left,
    .slide-in-right,
    .slide-in-up,
    .slide-in-down {
        transform: translateY(var(--anim-translate-sm));
    }
    
    .bounce-in,
    .flip-in-y,
    .flip-in-x {
        animation: none;
        transition: opacity var(--anim-duration-fast) ease;
    }
}

/* ==================== ACCESSIBILITY ==================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .card-animate,
    .slide-in-left,
    .slide-in-right,
    .slide-in-up,
    .slide-in-down,
    .fade-in,
    .fade-scale-in,
    .bounce-in,
    .rotate-in,
    .flip-in-y,
    .flip-in-x {
        opacity: 1;
        transform: none;
        transition: none;
    }
    
    .float,
    .wave,
    .pulse,
    .spinner {
        animation: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .skeleton {
        background: linear-gradient(90deg, #000000 25%, #333333 50%, #000000 75%);
    }
}

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

/* GPU acceleration for smooth animations */
.card-animate,
.slide-in-left,
.slide-in-right,
.slide-in-up,
.slide-in-down,
.fade-scale-in,
.bounce-in,
.rotate-in,
.flip-in-y,
.flip-in-x,
.hover-lift,
.hover-scale {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reset will-change after animation */
.card-animate-in,
.animate-in {
    will-change: auto;
}

/* ==================== UTILITY CLASSES ==================== */

/* Animation control */
.no-animation { 
    animation: none !important; 
    transition: none !important; 
}

.animation-paused { 
    animation-play-state: paused !important; 
}

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

/* Visibility utilities */
.invisible { opacity: 0; }
.visible { opacity: 1; }

/* Transform utilities */
.transform-none { transform: none !important; }
.transform-gpu { transform: translateZ(0); }

/* ==================== DEBUG HELPERS ==================== */

/* Debug mode - add .debug-animations to body */
.debug-animations .card-animate,
.debug-animations .slide-in-left,
.debug-animations .slide-in-right,
.debug-animations .slide-in-up,
.debug-animations .slide-in-down {
    border: 2px dashed #ff0000;
    position: relative;
}

.debug-animations .card-animate::before {
    content: 'ANIMATING';
    position: absolute;
    top: 0;
    left: 0;
    background: #ff0000;
    color: #ffffff;
    padding: 2px 4px;
    font-size: 10px;
    font-weight: bold;
    z-index: 9999;
}

.debug-animations .animate-in::before {
    content: 'ANIMATED';
    background: #00ff00;
    color: #000000;
}