/* Scroll-reveal animation base + variants */ [data-reveal] { opacity: 0; transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } [data-reveal].is-revealed { opacity: 1; transform: none; } /* Variants — initial offset */ [data-reveal="fade-up"] { transform: translateY(2rem); } [data-reveal="fade-in"] { /* opacity-only, no transform offset */ } [data-reveal="scale-in"] { transform: scale(0.96); } /* Stagger children inside a revealed container */ [data-reveal].is-revealed [data-reveal]:not(.is-revealed) { /* children start animating after parent is revealed */ } /* No-JS fallback: when JavaScript is disabled, .no-js stays on and all [data-reveal] elements are visible immediately. With JS enabled, .no-js is removed before first paint and the IntersectionObserver handles reveal animations. */ .no-js [data-reveal] { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }