/* Subtle, premium motion only. Respects prefers-reduced-motion via theme.css tokens. [data-animate] is visible by default — this is the safe fallback for no-JS browsers, search engine crawlers that don't scroll, and any tool that renders the page without dispatching real scroll events. The hidden pre-animation state only applies once site.js confirms JS is running by adding "js" to , so the reveal is a pure progressive enhancement and never a way to hide content. */ .js [data-animate] { opacity: 0; transform: translateY(18px); transition: opacity var(--sd-motion-slow) var(--sd-easing), transform var(--sd-motion-slow) var(--sd-easing); } .js [data-animate].in-view { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .js [data-animate] { opacity: 1; transform: none; transition: none; } } .sd-float { animation: sd-float 6s ease-in-out infinite; } @keyframes sd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .sd-float { animation: none; } } .sd-fade-scale { animation: sd-fade-scale var(--sd-motion-slow) var(--sd-easing); } @keyframes sd-fade-scale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }