:root { --hero-rise: 10px; --hero-duration: 800ms; --hero-stagger: 250ms; --hero-ease: cubic-bezier(0.22, 1, 0.36, 1); }  .fr-hero-section-romeo__heading { opacity: 0; transform: translateY(var(--hero-rise)); animation: heroFadeUp var(--hero-duration) var(--hero-ease) forwards; animation-delay: calc(var(--hero-stagger) * 0); }  .fr-hero-section-romeo__lede { opacity: 0; transform: translateY(var(--hero-rise)); animation: heroFadeUp var(--hero-duration) var(--hero-ease) forwards; animation-delay: calc(var(--hero-stagger) * 1); }  .btn--primary { opacity: 0; transform: translateY(var(--hero-rise)); animation: heroFadeUp var(--hero-duration) var(--hero-ease) forwards; } .btn--primary:nth-of-type(1) { animation-delay: calc(var(--hero-stagger) * 2); } .btn--primary:nth-of-type(2) { animation-delay: calc(var(--hero-stagger) * 3); } @keyframes heroFadeUp { to { opacity: 1; transform: translateY(0); } }  @media (prefers-reduced-motion: reduce) { .fr-hero-section-romeo__heading, .fr-hero-section-romeo__lede, .hero-buttons .btn--primary { animation: none; opacity: 1; transform: none; } }