/* Motion layer on top of /app.css (also used by /tour/demo/). Small, quick, and off for reduce-motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes m-up { from { opacity: 0; transform: translateY(12px); } }
  @keyframes m-fade { from { opacity: 0; } }
  @keyframes m-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
  @keyframes m-fill { from { transform: scaleX(0); } }
  @keyframes m-bounce { 0% { transform: translateY(18px) scale(.9); opacity: 0; } 60% { transform: translateY(-6px) scale(1.03); opacity: 1; } 100% { transform: none; } }
  @keyframes m-pulse { 50% { opacity: .55; } }

  /* Screens ease in when they are drawn. The fixed bottom bar stays put. */
  #app > :not(.bottombar):not(.toast) { animation: m-up .42s cubic-bezier(.2, .7, .2, 1) both; }
  #app > :nth-child(2) { animation-delay: .04s; } #app > :nth-child(3) { animation-delay: .08s; }
  #app > :nth-child(4) { animation-delay: .12s; } #app > :nth-child(5) { animation-delay: .16s; }
  #app > :nth-child(n+6) { animation-delay: .2s; }
  #step-body { animation: m-up .38s cubic-bezier(.2, .7, .2, 1) both; }

  /* Dashboard tiles and finding cards arrive in a quick cascade. */
  .kpi { animation: m-up .45s cubic-bezier(.2, .7, .2, 1) both; }
  .kpi:nth-child(2) { animation-delay: .04s; } .kpi:nth-child(3) { animation-delay: .08s; } .kpi:nth-child(4) { animation-delay: .12s; }
  .kpi:nth-child(5) { animation-delay: .16s; } .kpi:nth-child(n+6) { animation-delay: .2s; }
  .finding:nth-child(-n+8) { animation: m-up .4s cubic-bezier(.2, .7, .2, 1) both; }
  .finding:nth-child(2) { animation-delay: .05s; } .finding:nth-child(3) { animation-delay: .1s; } .finding:nth-child(n+4) { animation-delay: .15s; }

  /* Score bars fill, big scores and grades pop. */
  .bar > i { transform-origin: left center; animation: m-fill .9s cubic-bezier(.2, .7, .2, 1) both .1s; }
  .big-score .num { display: inline-block; animation: m-pop .55s cubic-bezier(.3, 1.4, .5, 1) both .05s; }
  .big-score .grade, .done-card .grade { animation: m-pop .5s cubic-bezier(.3, 1.6, .5, 1) both .2s; }

  /* A chosen answer pops; new photos pop in. */
  .score-btn[aria-pressed="true"] { animation: m-pop .32s cubic-bezier(.3, 1.6, .5, 1); }
  .thumb { animation: m-pop .3s cubic-bezier(.3, 1.6, .5, 1); }
  .item { transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease; }

  /* Step chips glide between states; buttons give a little on press. */
  .step-chip { transition: background-color .2s ease, border-color .2s ease, transform .2s ease; }
  .step-chip[aria-current="step"] { transform: translateY(-1px); }
  .step-chip .dot { transition: background-color .3s ease, transform .3s ease; }
  .step-chip.done .dot { transform: scale(1.25); }
  .btn:active { transform: translateY(2px) scale(.98); }

  /* Calendar and lists fade in; the running drink timer breathes. */
  .cal-cell { animation: m-fade .3s ease both; }
  .timer-time.running { animation: m-pulse 1s ease-in-out infinite; }
  .done-card .mascot { animation: m-bounce .8s cubic-bezier(.3, 1.4, .5, 1) both .1s; }
  .lightbox { animation: m-fade .2s ease both; }
  .lightbox img { animation: m-pop .3s cubic-bezier(.3, 1.4, .5, 1) both; }
}