/* ============================================================ * reveal.css — scroll-reveal animations (progressive enhancement) * Initial-hidden state only applies when JS adds `reveal-on` to * . Without JS, content stays fully visible. * ============================================================ */ /* hidden/initial state — only when JS is active */ body.reveal-on .reveal:not(.is-visible) { opacity: 0; transform: translateY(16px); } /* revealed state */ body.reveal-on .reveal.is-visible { opacity: 1; transform: none; } /* the transition itself (safe to apply unconditionally) */ .reveal { transition: opacity 0.5s ease, transform 0.5s ease; will-change: opacity, transform; } /* gentle stagger for cards inside grids */ body.reveal-on .grid .reveal:nth-child(2) { transition-delay: 0.06s; } body.reveal-on .grid .reveal:nth-child(3) { transition-delay: 0.12s; } body.reveal-on .grid .reveal:nth-child(4) { transition-delay: 0.18s; } body.reveal-on .grid .reveal:nth-child(n + 5) { transition-delay: 0.24s; } /* reduced motion — content just appears, no transition */ @media (prefers-reduced-motion: reduce) { .reveal, body.reveal-on .grid .reveal { transition: none; transition-delay: 0s; } body.reveal-on .reveal:not(.is-visible) { opacity: 1; transform: none; } }