/**
 * Nevada Movers - Animation System
 * Unified animations for all templates
 * Version: 1.0.0
 */

/* ============================================
   BASE ANIMATION SETUP
   ============================================ */

/* Hide all animatable elements by default */
h1:not(.banner-content h1),
h2,
h3,
.service-card,
.pricing-card-full,
.licensed-card,
.truck-item,
.route-card-city,
.nearby-city-card,
.testimonial-card,
.neighborhood-card,
.lead-paragraph,
.seo-content-wrapper {
    opacity: 0;
}

/* Elements waiting for animation */
.animate-on-scroll {
    opacity: 0;
    transition: none;
}

/* Elements that have been animated */
.animate-on-scroll.animated {
    opacity: 1;
}

/* Banner elements have their own animation (always visible) */
.banner-content h1,
.banner-content p,
.banner-content .button,
.banner-content a {
    opacity: 1;
}

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

/* Fade In Up - For headings */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Down - For subheadings */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In Left - For content blocks */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade In Right - For content blocks */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale In - For cards and items */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide Up - For sections */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Headings (H1, H2) */
.animate-heading.animated {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Subheadings (H3, H4) */
.animate-subheading.animated {
    animation: fadeInDown 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Paragraphs and text blocks */
.animate-text.animated {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Content from left */
.animate-left.animated {
    animation: fadeInLeft 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Content from right */
.animate-right.animated {
    animation: fadeInRight 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}


/* Full sections */
.animate-section.animated {
    animation: slideUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ============================================
   STAGGER DELAYS (for sequential animations)
   ============================================ */

.animate-delay-1 { animation-delay: 0.1s !important; }
.animate-delay-2 { animation-delay: 0.2s !important; }
.animate-delay-3 { animation-delay: 0.3s !important; }
.animate-delay-4 { animation-delay: 0.4s !important; }
.animate-delay-5 { animation-delay: 0.5s !important; }
.animate-delay-6 { animation-delay: 0.6s !important; }
.animate-delay-7 { animation-delay: 0.7s !important; }
.animate-delay-8 { animation-delay: 0.8s !important; }

/* ============================================
   SPECIFIC ELEMENT ANIMATIONS
   ============================================ */

/* Banner animations */
.banner-content h1 {
    animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards;
}

.banner-content p {
    animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s backwards;
}

.banner-content .button,
.banner-content a {
    animation: fadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.6s backwards;
}

/* ============================================
   HOVER ENHANCEMENTS
   ============================================ */

.animate-card.animated:hover {
    transform: translateY(-8px) scale(1.02);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .animate-heading,
    .animate-subheading,
    .animate-text,
    .animate-left,
    .animate-right,
    .animate-card,
    .animate-section {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATION
   ============================================ */

.animate-on-scroll {
    will-change: opacity, transform;
}

.animate-on-scroll.animated {
    will-change: auto;
}