/* MilliMark's complete motion vocabulary. State changes are instant by default. */
@media (prefers-reduced-motion: no-preference){
  /* 1. Screen-to-screen: first run, tabs, and Gym exercise advance. */
  .panel.on,#mm-first-run.anim,.mm-screen-advance{animation:mm-screen-in 200ms ease-out}
  .seg,.home-session-track{scroll-behavior:smooth}
  @keyframes mm-screen-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}

  /* 2. In-place confirmation. */
  :is(.btn.done,.ci.done,.todo.done .tick,.th-log-set.is-done){transition:background-color 150ms ease-out,color 150ms ease-out,border-color 150ms ease-out,opacity 150ms ease-out}
  .mm-switch-knob{transition:transform 150ms ease-out}
  #p-nutrition .vr-tab-indicator{transition:transform 150ms ease-out,width 150ms ease-out}

  /* 3. Button press. */
  .ld-wrap .ld-chip,.ld-wrap .ld-like,.ld-wrap .ld-btn,.ld-wrap .ld-box,button{transition:transform 60ms linear,background-color 200ms ease,color 200ms ease,border-color 200ms ease}
  button:active{transform:scale(.98)!important}

  /* 4. Bottom sheets and dialogs. */
  .modal:not([hidden]){animation:mm-backdrop-in 250ms cubic-bezier(.2,.8,.2,1)}
  .modal:not([hidden]) .sheet,.head-modal{animation:mm-dialog-in 250ms cubic-bezier(.2,.8,.2,1)}
  @keyframes mm-backdrop-in{from{opacity:0}to{opacity:1}}
  @keyframes mm-dialog-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

  /* 5. Theme toggle. */
  :is(.ld-wrap,.lb-dialog,.lb-page,html,body,.masthead,.bnav,.card,.page,.sheet,input,select,textarea){transition-property:background-color,color,border-color;transition-duration:200ms;transition-timing-function:ease}

  /* 6. Hold-to-sign. */
  #mm-first-run [data-holding=true] .fr-ring{animation:fr-sign-fill 1.5s linear forwards}
  @keyframes fr-sign-fill{from{stroke-dashoffset:358.142}to{stroke-dashoffset:0}}

  /* 7. Week-ready cascade: 60 ms stagger and one glow. */
  #mm-first-run.fr-week-ready :is(.row,.card){animation:mm-week-in 200ms ease-out both}
  #mm-first-run.fr-week-ready :is(.row,.card):nth-of-type(2){animation-delay:60ms}
  #mm-first-run.fr-week-ready :is(.row,.card):nth-of-type(3){animation-delay:120ms}
  #mm-first-run.fr-week-ready :is(.row,.card):nth-of-type(4){animation-delay:180ms}
  #mm-first-run.fr-week-ready .row:first-of-type{animation-name:mm-week-in,mm-week-glow;animation-duration:200ms,200ms;animation-timing-function:ease-out,ease-out}
  @keyframes mm-week-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
  @keyframes mm-week-glow{from{box-shadow:0 0 0 2px var(--amber)}to{box-shadow:0 0 0 0 transparent}}

  /* 8. Rest timer numeral tick and ring drain. */
  [data-rest-time].mm-rest-tick{animation:mm-rest-tick 1s linear}
  [data-rest-ring]{transition:stroke-dashoffset 1s linear}
  @keyframes mm-rest-tick{0%,100%{opacity:1}50%{opacity:.72}}

  /* 9. Current set outline moves to the next row. */
  .th-log-set{transition:outline-color 150ms ease-out,background-color 150ms ease-out}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}
  #mm-first-run [data-holding=true] .fr-ring{stroke-dashoffset:358.142}
}