@layer components { /* Hidden only when JS confirms it's running (.js-ready on ) */ .js-ready .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease-out, transform 0.7s ease-out; } .reveal.is-revealed { opacity: 1; transform: none; } /* After reveal animation completes, remove transition so it doesn't interfere with hover effects */ .reveal.is-revealed.is-reveal-done { transition: none; } /* Slide-only variant for elements with backdrop-filter (opacity + blur = visual glitch) */ .js-ready .reveal--slide { transform: translateY(32px); transition: transform 0.7s ease-out; } .reveal--slide.is-revealed { transform: none; } /* Staggered children — each child delays slightly */ .reveal-group > .reveal:nth-child(1) { transition-delay: 0s; } .reveal-group > .reveal:nth-child(2) { transition-delay: 0.1s; } .reveal-group > .reveal:nth-child(3) { transition-delay: 0.12s; } .reveal-group > .reveal:nth-child(4) { transition-delay: 0.15s; } .reveal-group > .reveal:nth-child(5) { transition-delay: 0.18s; } .reveal-group > .reveal:nth-child(6) { transition-delay: 0.2s; } .reveal-group > .reveal:nth-child(7) { transition-delay: 0.22s; } .reveal-group > .reveal:nth-child(8) { transition-delay: 0.24s; } .reveal-group > .reveal:nth-child(9) { transition-delay: 0.26s; } .reveal-group > .reveal:nth-child(10) { transition-delay: 0.28s; } .reveal-group > .reveal:nth-child(11) { transition-delay: 0.3s; } .reveal-group > .reveal:nth-child(12) { transition-delay: 0.32s; } /* Accessibility: skip animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; will-change: auto; } } }