/* =============================
   SCROLL ANIMATIONS - LAYOUT SAFE
   100% Safe - Won't affect any layout
   ============================= */

/* Main Animation: Fade & Slide Up */
.animate-fade-up {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
    /* Explicitly preserve display - don't let animation touch it */
    display: inherit !important;
}

.animate-fade-up.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger effect for multiple items */
.animate-fade-up:nth-child(1) { transition-delay: 0s !important; }
.animate-fade-up:nth-child(2) { transition-delay: 0.15s !important; }
.animate-fade-up:nth-child(3) { transition-delay: 0.3s !important; }
.animate-fade-up:nth-child(4) { transition-delay: 0.45s !important; }
.animate-fade-up:nth-child(5) { transition-delay: 0.6s !important; }
.animate-fade-up:nth-child(6) { transition-delay: 0.75s !important; }

/* Scale animation for pamphlet cards */
.animate-scale {
    opacity: 0 !important;
    transform: scale(0.9) !important;
    transition: opacity 0.7s ease, transform 0.7s ease !important;
    display: inherit !important;
}

.animate-scale.visible {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.animate-scale:nth-child(1) { transition-delay: 0s !important; }
.animate-scale:nth-child(2) { transition-delay: 0.2s !important; }
.animate-scale:nth-child(3) { transition-delay: 0.4s !important; }
.animate-scale:nth-child(4) { transition-delay: 0.6s !important; }

/* Side slide animations for two-column section */
.animate-slide-left {
    opacity: 0 !important;
    transform: translateX(-50px) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
    display: inherit !important;
}

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

.animate-slide-right {
    opacity: 0 !important;
    transform: translateX(50px) !important;
    transition: opacity 0.8s ease, transform 0.8s ease !important;
    display: inherit !important;
}

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

/* Title animation - simple fade up, no underline */
.animate-title-underline {
    opacity: 0 !important;
    transform: translateY(-20px) !important;
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

.animate-title-underline.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =============================
   MOBILE OPTIMIZATION
   ============================= */
@media (max-width: 768px) {
    /* Simplify side slides on mobile */
    .animate-slide-left,
    .animate-slide-right {
        transform: translateY(20px) !important;
    }
    
    .animate-slide-left.visible,
    .animate-slide-right.visible {
        transform: translateY(0) !important;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .animate-fade-up,
    .animate-scale,
    .animate-slide-left,
    .animate-slide-right,
    .animate-title-underline {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}