/* Presentation effects: image fade-in, offscreen animation pause, paint hints. */

/* headings: quiet single fade, JS-gated so no-JS users see a settled page */
html.afx .afx-h { opacity: 0; }
html.afx .afx-h.afx-h-in { opacity: 1; transition: opacity 0.6s ease; }

html.afx img.afx-wait { opacity: 0; }
html.afx img.afx-in { animation: afx-img-in 0.45s ease both; }
@keyframes afx-img-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* sections far outside the viewport stop animating entirely */
.afx-asleep *,
.afx-asleep *::before,
.afx-asleep *::after { animation-play-state: paused !important; }

/* pre-rasterize the continuously-animated surfaces */
.s-how-it-works [class*="track"],
.s-hero canvas { will-change: transform; }

/* price pill: reserve space so the fetch never shifts the nav */
.an-px { display: inline-block; min-width: 38px; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  html.afx img.afx-wait, html.afx img.afx-in { opacity: 1; animation: none; }
}