/* Walker Agency motion. All movement is off for visitors who choose reduced motion.
   Only opacity and transform are animated. */
@media (prefers-reduced-motion: no-preference) {

  /* 1. Hero entrance (the .mv class is added by motion.js, so nothing hides without JS) */
  @keyframes mvUp { from { opacity: 0; transform: translateY(16px); } }
  .mv .hero-copy  { animation: mvUp .6s ease-out backwards; }
  .mv .quote-card { animation: mvUp .6s ease-out .15s backwards; }

  /* 3. Buttons: lift 2px on hover, back to 0 on press. Mobile sticky bar is left alone. */
  .btn:not(.mobile-bar .btn) { transition: transform .2s ease, box-shadow .2s ease; }
  @media (hover: hover) {
    .btn:not(.mobile-bar .btn):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(8, 22, 41, .22); }
  }
  .btn:not(.mobile-bar .btn):active { transform: translateY(0); box-shadow: 0 3px 8px rgba(8, 22, 41, .16); }

  /* 4. Cards: lift 3px with a soft shadow */
  .mv-c { transition: transform .25s ease, box-shadow .25s ease; }
  @media (hover: hover) {
    .mv-c:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(12, 31, 58, .12); }
  }

  /* 2. Scroll reveal (classes added by motion.js; removed again once the reveal finishes) */
  .mv-r { opacity: 0; transform: translateY(20px); transition: none; }
  .mv-r.mv-in { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }

  /* 5. Carrier logos: seamless strip, only built when the logos don't fit on one line */
  .mv-strip { flex: 1 1 100%; overflow: hidden; }
  .mv-track { display: flex; align-items: center; width: max-content; animation: mvScroll 40s linear infinite; }
  .mv-track img { flex: none; margin-right: 40px; }
  .mv-strip:hover .mv-track { animation-play-state: paused; }
  @keyframes mvScroll { to { transform: translateX(-50%); } }

  /* 7. Quote form: step change and progress bar */
  @keyframes mvStep { from { opacity: 0; transform: translateX(12px); } }
  .mv-qs .step:not([hidden]) { animation: mvStep .3s ease-out; }
  .progress span { position: relative; overflow: hidden; }
  .progress span.on { background: var(--line); }
  .progress span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .4s ease-out; }
  .progress span.on::after { transform: scaleX(1); }
}