/** * animations.css — Scroll animation system * * All animated elements start in their "hidden" state. * The Intersection Observer in animations.js adds .is-visible * to trigger the transition. * * .no-js on makes everything visible without JS. * (Defined in base.css as the universal fallback rule.) */ /* ── FADE UP ─────────────────────────────────────────────────── */ .anim--fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .anim--fade-up.is-visible { opacity: 1; transform: translateY(0); } /* ── FADE IN ─────────────────────────────────────────────────── */ .anim--fade-in { opacity: 0; transition: opacity 0.8s ease; } .anim--fade-in.is-visible { opacity: 1; } /* ── STAGGER PARENT ──────────────────────────────────────────── */ /* Children inside .anim--stagger get cascading delays. nth-child rules cover up to 10 items; JS sets inline transition-delay for anything beyond that. */ .anim--stagger > * { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .anim--stagger.is-visible > * { opacity: 1; transform: translateY(0); } .anim--stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; } .anim--stagger.is-visible > *:nth-child(2) { transition-delay: 0.10s; } .anim--stagger.is-visible > *:nth-child(3) { transition-delay: 0.20s; } .anim--stagger.is-visible > *:nth-child(4) { transition-delay: 0.30s; } .anim--stagger.is-visible > *:nth-child(5) { transition-delay: 0.40s; } .anim--stagger.is-visible > *:nth-child(6) { transition-delay: 0.50s; } .anim--stagger.is-visible > *:nth-child(7) { transition-delay: 0.60s; } .anim--stagger.is-visible > *:nth-child(8) { transition-delay: 0.70s; } .anim--stagger.is-visible > *:nth-child(9) { transition-delay: 0.80s; } .anim--stagger.is-visible > *:nth-child(10) { transition-delay: 0.90s; } /* ── REDUCED MOTION RESPECT ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .anim--fade-up, .anim--fade-in, .anim--stagger > * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } .scroll-indicator__wheel { animation: none !important; } }