/* ============================================
   Scroll Reveal Animations - Global
   ============================================ */

/* Base class for scroll-reveal elements */
.scroll-reveal {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    background-color: #ffffff !important;
}

/* Revealed state */
.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for child elements */
.scroll-reveal-stagger > * {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: #ffffff !important;
}

.scroll-reveal-stagger.revealed > *:nth-child(1) {
    transition-delay: 0.1s;
}

.scroll-reveal-stagger.revealed > *:nth-child(2) {
    transition-delay: 0.2s;
}

.scroll-reveal-stagger.revealed > *:nth-child(3) {
    transition-delay: 0.3s;
}

.scroll-reveal-stagger.revealed > *:nth-child(4) {
    transition-delay: 0.4s;
}

.scroll-reveal-stagger.revealed > *:nth-child(5) {
    transition-delay: 0.5s;
}

.scroll-reveal-stagger.revealed > *:nth-child(6) {
    transition-delay: 0.6s;
}

.scroll-reveal-stagger.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* Section-level animations */
section.scroll-reveal-section {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    background-color: #ffffff !important;
    /* Ensure animated content does not bleed into adjacent sections */
    position: relative;
    overflow: hidden;
}

section.scroll-reveal-section.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Performance optimization */
.scroll-reveal,
.scroll-reveal-stagger,
.scroll-reveal-section {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .scroll-reveal {
        transform: translateY(40px);
    }
    
    section.scroll-reveal-section {
        transform: translateY(50px);
    }
}