/* Scroll-in animations. Elements are fully visible by default so content never depends on JavaScript to be seen (good for SEO / no-JS visitors). site.js adds the "js" class to , which is what actually arms the hidden-until-revealed state, then reveals each element via IntersectionObserver. */ .reveal, .reveal-sm, .reveal-word, .reveal-scale, .reveal-right, .reveal-fade { opacity: 1; transform: none; } .js .reveal, .js .reveal-sm, .js .reveal-word, .js .reveal-scale, .js .reveal-right, .js .reveal-fade { opacity: 0; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .js .reveal { transform: translateY(24px); } .js .reveal-sm { transform: translateY(16px); } .js .reveal-word { transform: translateY(18px); transition-duration: 0.5s; } .js .reveal-scale { transform: scale(0.92); } .js .reveal-right { transform: translateX(24px); } .js .reveal-fade { transform: none; } .js .reveal.is-visible, .js .reveal-sm.is-visible, .js .reveal-word.is-visible, .js .reveal-scale.is-visible, .js .reveal-right.is-visible, .js .reveal-fade.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal-sm, .js .reveal-word, .js .reveal-scale, .js .reveal-right, .js .reveal-fade { transition: none !important; opacity: 1 !important; transform: none !important; } } /* Homepage hero: the yellow curved line draws itself in from left to right. pathLength="1" on the normalizes its length to 1 unit, so a dash of length 1 with 1 unit of offset hides it entirely, and animating the offset to 0 "draws" it across — the classic SVG line-draw technique. */ .hero-line { stroke-dashoffset: 0; } .js .hero-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.5s cubic-bezier(0.65, 0, 0.35, 1); } .js .hero-line.is-visible { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .js .hero-line { transition: none !important; stroke-dashoffset: 0 !important; } }