/* ============================================================================ animations.css — Scroll-reveal + reduced-motion rules ---------------------------------------------------------------------------- Progressive-enhancement motion for the VIEW layer. Every duration and easing value is referenced from a tokens.css design token (--motion-* 0.2–0.6s and --easing) — NO hard-coded timing or visual literals (R4.2, R5.2, R14.1). NO-JS / FAILURE SAFETY (R14.2, R14.5): Elements carrying [data-reveal] are fully VISIBLE by default. Only when js/ui.js confirms the IntersectionObserver path is active does it add the `reveal-enabled` class to ; ONLY under `html.reveal-enabled` do reveal elements start hidden/translated and then transition to visible when ui.js adds `.is-visible`. So with JavaScript disabled or failed, content stays authored-visible and readable. Reduced motion (R14.3): under prefers-reduced-motion the pre-reveal state is neutralized and non-essential transitions are disabled. ============================================================================ */ /* --------------------------------------------------------------------------- 1. REVEAL — authored-visible by default (no-JS safe) --------------------------------------------------------------------------- */ [data-reveal] { opacity: 1; transform: none; } /* Only once JS signals it is driving reveals do we hide the pre-reveal state. */ html.reveal-enabled [data-reveal] { opacity: 0; transform: translateY(var(--space-md)); transition: opacity var(--motion-base) var(--easing), transform var(--motion-base) var(--easing); will-change: opacity, transform; } /* ui.js adds .is-visible once per element on first intersection (R14.4). */ html.reveal-enabled [data-reveal].is-visible { opacity: 1; transform: none; } /* Optional staggered variants for grids of cards (still token-timed). */ html.reveal-enabled [data-reveal][data-reveal-delay="1"] { transition-delay: var(--motion-fast); } html.reveal-enabled [data-reveal][data-reveal-delay="2"] { transition-delay: var(--motion-base); } html.reveal-enabled [data-reveal][data-reveal-delay="3"] { transition-delay: var(--motion-slow); } /* --------------------------------------------------------------------------- 2. HOVER MOTION — button/card interactions, token-timed (The component rules in styles.css own the resting/hover appearance; these confirm the shared motion vocabulary for elements that only animate here.) --------------------------------------------------------------------------- */ .btn, .card, .role-card, .step-card, .testimonial-card, .nav-cta { transition: transform var(--motion-fast) var(--easing), box-shadow var(--motion-fast) var(--easing); } /* --------------------------------------------------------------------------- 3. REDUCED MOTION — disable/limit non-essential motion (R14.3) --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Reveal elements are always shown, with no entrance transition. */ html.reveal-enabled [data-reveal], [data-reveal] { opacity: 1; transform: none; transition: none; } /* Neutralize non-essential motion across the board. */ *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }