/* Shared report motion (js/lib/motion.js adds .has-motion). Rules: ease-out,
   short, opacity/transform only, and every animation ENDS on the static page
   (no hidden state waits on scroll or JS), so a screenshot at any moment shows
   the final state. Nothing counts, grows or fills. Off under
   prefers-reduced-motion and in print. */
@media (prefers-reduced-motion: no-preference) {
  :root { --m-ease: cubic-bezier(.2, .7, .2, 1); }

  /* Loading skeleton: a slow pulse, not a shimmer. */
  .report-loading i { animation: m-pulse 1.6s ease-in-out infinite; }
  .report-loading i:nth-child(2) { animation-delay: .15s; }
  .report-loading i:nth-child(3) { animation-delay: .3s; }
  .report-loading i:nth-child(4) { animation-delay: .45s; }
  @keyframes m-pulse { 50% { opacity: .45; } }

  /* The two rules of the hero draw left to right; the border moves to a pseudo-element so it can scale. */
  .has-motion .hero__nums, .has-motion .month-timeline { position: relative; border-top-color: transparent; }
  .has-motion .hero__nums::before, .has-motion .month-timeline::before {
    content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; background: var(--gs-line);
    transform-origin: left; animation: m-rule .6s var(--m-ease);
  }
  .has-motion .hero__nums::before { background: var(--gs-ink); }
  @keyframes m-rule { from { transform: scaleX(0); } }

  /* Switching answers: the matched brand is highlighted left to right. */
  .has-motion .m-sweep mark {
    background-color: transparent;
    background-image: linear-gradient(color-mix(in srgb, var(--gs-accent-on-ink) 26%, transparent), color-mix(in srgb, var(--gs-accent-on-ink) 26%, transparent));
    background-repeat: no-repeat; background-position: left; animation: m-mark .6s var(--m-ease) .1s backwards;
  }
  @keyframes m-mark { from { background-size: 0 100%; } to { background-size: 100% 100%; } }

  /* Press feedback. */
  .btn, .agency-bar__btn, .quote-card__try { transition: opacity .15s ease, transform .15s ease, border-color .15s ease; }
  .btn:active, .agency-bar__btn:active { transform: translateY(1px); }
}
@media print { .has-motion mark, .has-motion .hero__nums::before, .has-motion .month-timeline::before { animation: none !important; } }