/* Moxie homepage motion: grand-opening countdown, pickup route, symptom picker.
   Every movement sits behind prefers-reduced-motion: no-preference. */

/* Countdown badge */
.hero__badge .mx-count{display:inline-block;margin-left:.35em;padding-left:.45em;border-left:2px solid #1b3a5740;font-variant-numeric:tabular-nums}
.hero__badge .mx-count b{font-weight:800}
.mx-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60}
.mx-confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:0}

/* Pickup route */
.collect .route{position:relative}
.mx-truck{position:absolute;left:0;top:0;width:46px;height:30px;z-index:2;pointer-events:none;opacity:0;will-change:transform}
.collect .route__pin{transition:background-color .3s ease,color .3s ease}
.collect .route li.mx-reached .route__pin{background:var(--moxie-blue,#4690cd);color:#fff}

@media (prefers-reduced-motion:no-preference){
  .hero__badge .mx-count b{display:inline-block;animation:mx-flip .6s cubic-bezier(.3,1.4,.5,1) .4s both}
  .mx-confetti i{animation:mx-fall var(--d,2.6s) cubic-bezier(.25,.4,.5,1) var(--w,0s) forwards}
  .collect .route li.mx-reached .route__pin{animation:mx-pop .45s cubic-bezier(.3,1.6,.5,1)}
  .collect .route li h3,.collect .route li p{transition:opacity .4s ease,transform .4s ease}
  .collect .route.mx-armed li:not(.mx-reached) h3,.collect .route.mx-armed li:not(.mx-reached) p{opacity:.5;transform:translateY(4px)}

  /* Symptom picker */
  .pick{transition:transform .15s ease,border-color .15s ease,box-shadow .2s ease}
  .pick:active{transform:scale(.985)}
  .pick[aria-pressed=true] .pick__box{animation:mx-pop .4s cubic-bezier(.3,1.6,.5,1)}
  .pick[aria-pressed=true] .pick__box:after{animation:mx-tick .3s ease-out .08s both}
  .ask .tally:not([hidden]){animation:mx-rise .35s ease-out}
  .tally__n.mx-bump{display:inline-block;animation:mx-bump .4s cubic-bezier(.3,1.6,.5,1)}
  .tally__btn.mx-ping{animation:mx-ping 1.1s ease-out}
}

@keyframes mx-flip{0%{transform:translateY(-.6em) rotateX(90deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes mx-fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x,0),105vh) rotate(var(--r,540deg))}}
@keyframes mx-pop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes mx-tick{0%{opacity:0;transform:rotate(40deg) scale(.3)}100%{opacity:1;transform:rotate(40deg) scale(1)}}
@keyframes mx-rise{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:none}}
@keyframes mx-bump{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
@keyframes mx-ping{0%{box-shadow:0 0 0 0 #e8833acc}100%{box-shadow:0 0 0 16px #e8833a00}}

@media (max-width:520px){
  .hero__badge:has(.mx-count){white-space:normal;display:inline-block}
  .hero__badge .mx-count{border-left:0;margin-left:0;padding-left:0}
  .hero__badge .mx-count:before{content:"· "}
}