/** * Landing Page Animations — shared across landing-pages/template-*.php * Enqueued only on pages whose carries the "shr-lp-anim" class * (see shr_lp_anim_body_class() in functions.php) — everything here is * scoped under that class, so nothing leaks onto other pages, and this * file itself is only enqueued where the class can apply. * * Effect 1 — Hero entrance: eyebrow → title → body → CTA row fade up * one at a time, 0.5s apart. Hero visual fades+scales in on its own * timing. * * Effect 2 — Scroll reveal: any element with .shr-anim-reveal fades up * once when it first enters the viewport. The per-page inline script * (IntersectionObserver) toggles .shr-anim-in and sets a small stagger * delay based on position within its data-shr-anim-group. */ @keyframes shr-anim-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes shr-anim-fade-scale { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* ── Hero — sequential one-at-a-time reveal ── */ body.shr-lp-anim .shr-anim-hero-1, body.shr-lp-anim .shr-anim-hero-2, body.shr-lp-anim .shr-anim-hero-3, body.shr-lp-anim .shr-anim-hero-4 { opacity: 0; animation: shr-anim-fade-up 0.5s ease-out forwards; } body.shr-lp-anim .shr-anim-hero-1 { animation-delay: 0s; } body.shr-lp-anim .shr-anim-hero-2 { animation-delay: 0.5s; } body.shr-lp-anim .shr-anim-hero-3 { animation-delay: 1s; } body.shr-lp-anim .shr-anim-hero-4 { animation-delay: 1.5s; } body.shr-lp-anim .shr-anim-hero-visual { opacity: 0; animation: shr-anim-fade-scale 0.7s ease-out 0.3s forwards; } /* ── Scroll-triggered section reveal ── */ body.shr-lp-anim .shr-anim-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } body.shr-lp-anim .shr-anim-reveal.shr-anim-in { opacity: 1; transform: translateY(0); } /* ── Respect reduced-motion preference: show content normally ── */ @media (prefers-reduced-motion: reduce) { body.shr-lp-anim .shr-anim-hero-1, body.shr-lp-anim .shr-anim-hero-2, body.shr-lp-anim .shr-anim-hero-3, body.shr-lp-anim .shr-anim-hero-4, body.shr-lp-anim .shr-anim-hero-visual, body.shr-lp-anim .shr-anim-reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } }