/* ===== Scroll Animation Base Styles ===== */

/* Global fade-out for main content elements ONLY - More specific selectors */
main h1, main h2, main h3,
main .support-item,
main .box,
main .what-we-do,
main .mission-statement,
main .newsletter-section,
main .blog-section h2, 
main .blog-card, 
main .blog-section .view-all-btn,
main .our-story, 
main .our-mission, 
main .difference-container, 
main .carousel-section,
main .story-text, 
main .story-image, 
main .mission-text, 
main .mission-image,
main .carousel-card, 
main .impact-stats .stat-item,
main .contact-hero, 
main .contact-split-content .text-content, 
main .contact-split-content .image-content, 
main .contact-form-container,
main .form-group, 
main .form-submit-btn,
main .hero-banner, 
main .rotating-boxes-section .rotating-box,
main .content-section, 
main .split-section .text-section, 
main .split-section .image-section,
main .forschools .content-section, 
main .forschools .three-column-section, 
main .forschools .column,
main .forschools .split-section .text-section, 
main .forschools .split-section .image-section,
main .card, 
main .info-card, 
main .benefit-item,
main .policy-container h1, 
main .policy-container h2, 
main .policy-container p,
main .saltcommunity .content-section, 
main .saltcommunity .image-text-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Don't hide elements that are specifically marked as no-animation */
.no-animate {
    opacity: 1 !important;
    transform: none !important;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    /* Override global fade-out for reduced motion users */
    main h1, main h2, main h3,
    main .support-item,
    main .box,
    main .what-we-do,
    main .mission-statement,
    main .newsletter-section,
    main .blog-section h2, 
    main .blog-card, 
    main .blog-section .view-all-btn,
    main .our-story, 
    main .our-mission, 
    main .difference-container, 
    main .carousel-section,
    main .story-text, 
    main .story-image, 
    main .mission-text, 
    main .mission-image,
    main .carousel-card, 
    main .impact-stats .stat-item,
    main .contact-hero, 
    main .contact-split-content .text-content, 
    main .contact-split-content .image-content, 
    main .contact-form-container,
    main .form-group, 
    main .form-submit-btn,
    main .hero-banner, 
    main .rotating-boxes-section .rotating-box,
    main .content-section, 
    main .split-section .text-section, 
    main .split-section .image-section,
    main .forschools .content-section, 
    main .forschools .three-column-section, 
    main .forschools .column,
    main .forschools .split-section .text-section, 
    main .forschools .split-section .image-section,
    main .card, 
    main .info-card, 
    main .benefit-item,
    main .policy-container h1, 
    main .policy-container h2, 
    main .policy-container p,
    main .saltcommunity .content-section, 
    main .saltcommunity .image-text-section {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Base animation classes that can be added to any element */
.fade-in {
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* When element becomes visible */
.fade-in.animated,
.fade-in-up.animated,
.fade-in-down.animated,
.fade-in-left.animated,
.fade-in-right.animated {
    opacity: 1;
    transform: translateY(0) translateX(0);
}

/* ===== New bounceIn animation for special elements ===== */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(30px);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05) translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ===== Enhanced animations for specific elements ===== */

/* Title animations */
.support-title.animated {
    animation: titleBounce 0.8s ease-out;
}

@keyframes titleBounce {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    60% {
        opacity: 1;
        transform: translateY(5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Support item animations - individual timing */
.support-item.animated {
    animation: supportItemSlide 0.8s ease-out;
}

@keyframes supportItemSlide {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Box animations - individual timing */
.box.animated {
    animation: boxSlide 0.8s ease-out;
}

@keyframes boxSlide {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Rotating box animations */
.rotating-box.animated {
    animation: rotatingBoxSlide 0.8s ease-out;
}

@keyframes rotatingBoxSlide {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Blog card animations */
.blog-card.animated {
    animation: blogCardSlide 0.8s ease-out;
}

@keyframes blogCardSlide {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Form group animations */
.form-group.animated {
    animation: formGroupSlide 0.6s ease-out;
}

@keyframes formGroupSlide {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Benefit item animations */
.benefit-item.animated {
    animation: benefitItemSlide 0.7s ease-out;
}

@keyframes benefitItemSlide {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Text section slide from left */
.text-section.animated {
    animation: textSectionSlide 0.8s ease-out;
}

@keyframes textSectionSlide {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Image section slide from right */
.image-section.animated {
    animation: imageSectionSlide 0.8s ease-out;
}

@keyframes imageSectionSlide {
    0% {
        opacity: 0;
        transform: translateX(30px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* What we do section animation */
.what-we-do.animated {
    animation: whatWeDoSlide 0.8s ease-out;
}

@keyframes whatWeDoSlide {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Banner scale animation */
.hero-banner.animated, .contact-hero.animated {
    animation: bannerScale 1s ease-out;
}

@keyframes bannerScale {
    0% {
        opacity: 0;
        transform: scale(0.98) translateY(15px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Content section fade */
.content-section.animated {
    animation: contentFade 0.8s ease-out;
}

@keyframes contentFade {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mission statement animation */
.mission-statement.animated {
    animation: missionStatementFade 1s ease-out;
}

@keyframes missionStatementFade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Newsletter section animation */
.newsletter-section.animated {
    animation: newsletterFade 1s ease-out;
}

@keyframes newsletterFade {
    0% {
        opacity: 0;
        transform: translateY(25px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Utility animation delay classes */
.animate-delay-1 {
    animation-delay: 0.1s;
}

.animate-delay-2 {
    animation-delay: 0.2s;
}

.animate-delay-3 {
    animation-delay: 0.3s;
}

.animate-fast {
    animation-duration: 0.4s !important;
}

.animate-slow {
    animation-duration: 1.2s !important;
}

/* Mobile optimizations */
@media (max-width: 768px) {
    /* Reduce animation intensity on mobile */
    .fade-in-up {
        transform: translateY(20px);
    }
    
    .fade-in-down {
        transform: translateY(-20px);
    }
    
    .fade-in-left,
    .fade-in-right {
        transform: translateX(0) translateY(15px);
    }
    
    /* Faster animations on mobile */
    .fade-in,
    .fade-in-up,
    .fade-in-down,
    .fade-in-left,
    .fade-in-right {
        transition-duration: 0.6s;
    }
    
    /* Reduce stagger delays on mobile */
    .support-item.animated {
        animation-duration: 0.6s;
    }
    
    .rotating-box.animated {
        animation-duration: 0.6s;
    }
    
    .blog-card.animated {
        animation-duration: 0.6s;
    }
}