/* ============================================================================= animations.css — the motion layer. Trimmed to the effects main.js actually drives. Start-states apply ONLY under .reveal-ready (set on by head.php), so JS-less visitors see everything at rest. Reveal rules are gated the same way plus the toggle class, so they always out-specify the start-state (never use an `html` element selector on a start-state: it inflates specificity and the reveal can't win). Every effect no-ops under prefers-reduced-motion (see base.css). The scroll-linked effects (text-write, parallax-band, parallax-drift, scroll-grow, card-slide-in, logo-marquee) need js/animations.js and were removed with it. Re-copy both from the starter kit's animations/ folder when a section needs them. ============================================================================= */ /* Durations are 1.6s, up from the .7s these shipped with (2.1s was a shade too slow) — the brief was subtlety, and a long quiet fade reads better than a quick one. The .d2/.d3 delays are unchanged: at this duration they only need to break the simultaneity, not separate the items. ── fade-up — default card/section entrance (add .d2/.d3 for row stagger) ───── */ .reveal-ready .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); } .reveal-ready .fade-up.in { opacity: 1; transform: none; } .reveal-ready .fade-up.d2 { transition-delay: .12s; } .reveal-ready .fade-up.d3 { transition-delay: .24s; } .reveal-ready .fade-up.no-move { transform: none; } /* ── slide-in-from-side — alternate direction per card with .from-right ──────── */ .reveal-ready .slide-in-from-side { opacity: 0; transform: translateX(-48px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); } .reveal-ready .slide-in-from-side.from-right { transform: translateX(48px); } .reveal-ready .slide-in-from-side.in { opacity: 1; transform: none; } /* ── reveal-block — whole-element fade+rise (for things that can't be split) ──── */ .reveal-ready .reveal-block { opacity: 0; transform: translateY(24px); transition: opacity 1.6s var(--ease), transform 1.6s var(--ease); } .reveal-ready .reveal-block.in { opacity: 1; transform: none; } /* ── letter-fade — small headline/eyebrow lift-in (CSS-only, self-completing) ── */ .reveal-ready .letter-fade { opacity: 0; transform: translateY(10px); animation: letter-fade 1.6s var(--ease) .1s forwards; } @keyframes letter-fade { to { opacity: 1; transform: none; } }