/* Animations for the start page. Loaded on top of styles.css.
   Everything here only applies under html.anim, which is never set when the
   visitor prefers reduced motion. Motion stays inside the brand: short, soft
   ease out, no bounce, no scale, no glow. */

/* Reveal on scroll. The script marks the elements, so nothing is hidden without it. */
.anim [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 320ms var(--ease), transform 320ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.anim [data-reveal].is-in { opacity: 1; transform: none; }

/* Switching coach or stage: the new content rises in instead of jumping. */
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.anim .answer-body:not([hidden]),
.anim .frag:not([hidden]),
.anim .js-clause,
.anim .js-note { animation: rise-in 240ms var(--ease); }

/* Pills slide their fill instead of snapping. */
.anim .pill { transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }

/* Accent words in headings draw a short underline once they are in view. */
.anim .heading-lg .accent, .anim .display .accent { background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 92% / 0 3px; transition: background-size 320ms var(--ease) 200ms; }
.anim .is-in .accent, .anim .hero.is-in .accent { background-size: 100% 3px; }