.hl {
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat; background-size: 100% 0.32em; background-position: 0 88%;
  padding: 0 0.04em; color: var(--color-accent-text);
}

@keyframes swap-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes hl-draw { from { background-size: 0% 0.32em; } }
@keyframes reveal { from { opacity: 0; transform: translateY(40px); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.8s 0.1s var(--ease) both; }
  .rise-2 { animation: rise 0.8s 0.3s var(--ease) both; }
  .hl { animation: hl-draw 1s 0.6s cubic-bezier(0.6, 0, 0.2, 1) both; }
  .swap { animation: swap-in 0.45s var(--ease) both; }

  @supports (animation-timeline: view()) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }

  .reveal.is-pending { opacity: 0; transform: translateY(40px); }
  .reveal.is-revealed { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}