/* 1. Film Grain */
.film-grain {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    pointer-events: none;
    z-index: 99999;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* 3. Smooth Scroll (Lenis Base) */
html.lenis, html.lenis body { height: auto; width: 100vw; overflow-x: hidden; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* 4. Intersection Observer Reveal Animations */
.pre-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.slide-in-left.pre-reveal { transform: translateX(-40px); }
.slide-in-right.pre-reveal { transform: translateX(40px); }

.active-reveal {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* 5. Cross-Document View Transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 0.4s ease-out both; }
::view-transition-new(root) { animation: fade-in 0.4s ease-in both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }