/* ===== SCROLL REVEALS (Native CSS with Fallback) ===== */
.reveal-section {
    opacity: 0;
    transform: translateY(40px);
    /* Fallback transition for IntersectionObserver */
    transition: opacity 0.8s cubic-bezier(0.23, 1, 0.32, 1), transform 0.8s cubic-bezier(0.23, 1, 0.32, 1), filter 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.reveal-section.fallback-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
        @keyframes section-reveal {
            0% { opacity: 0; transform: translateY(60px) scale(0.98); filter: blur(4px); }
            15% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
            85% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
            100% { opacity: 0; transform: translateY(-60px) scale(0.98); filter: blur(4px); }
        }
        
        .reveal-section {
            opacity: 1; 
            transform: none;
            transition: none;
            animation: section-reveal linear both;
            animation-timeline: view(block);
            animation-range: cover;
        }
    }
}