/* * Canonical preset: lib/animations.ts → swoopUp * * Pricing page title block (`.pricing-title`) entrance animation on load. * Reuses the same rise / fade-up keyframes and stagger timings as the * home hero so all three pricing routes feel consistent on first paint. * * Loaded by `app/(legacy)/pricing/layout.tsx`; React 19 hoists the link * into so keyframes apply before first paint. */ @keyframes wf-home-hero-rise { from { opacity: 0; transform: translateY(110%); } to { opacity: 1; transform: translateY(0); } } @keyframes wf-home-hero-fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .wf-body .pricing-title .pricing-heading-label, .wf-body .pricing-title .heading-one { animation: wf-home-hero-rise 850ms cubic-bezier(0.22, 1, 0.36, 1) both; } .wf-body .pricing-title .pricing-heading-label { animation-delay: 120ms; } .wf-body .pricing-title .heading-one { animation-delay: 260ms; } .wf-body .pricing-title .pricing-heading-deco, .wf-body .pricing-title .pricing-heading-deco-2 { animation: wf-home-hero-fade-up 800ms cubic-bezier(0.22, 1, 0.36, 1) both; } .wf-body .pricing-title .pricing-heading-deco { animation-delay: 200ms; } .wf-body .pricing-title .pricing-heading-deco-2 { animation-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .wf-body .pricing-title .pricing-heading-label, .wf-body .pricing-title .heading-one, .wf-body .pricing-title .pricing-heading-deco, .wf-body .pricing-title .pricing-heading-deco-2 { animation: none; opacity: 1; transform: none; } }