/*
  motion.css
  Global motion tokens + reduced-motion safety.
  - Keep animations lightweight: prefer opacity/transform.
  - Components should opt-in using helper classes.
*/

:root{
  --qr-anim-fast: 140ms;
  --qr-anim-med: 220ms;
  --qr-anim-slow: 320ms;
  --qr-ease: cubic-bezier(.2,.8,.2,1);
}

/* Opt-in helpers */
.qr-anim{ transition-timing-function: var(--qr-ease); }

.qr-fade{
  transition-property: opacity;
  transition-duration: var(--qr-anim-med);
}

.qr-slide{
  transition-property: transform, opacity;
  transition-duration: var(--qr-anim-med);
}

.qr-color{
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: var(--qr-anim-slow);
}

/*
  Theme switches can temporarily add this class to enable smooth transitions
  without making every element permanently animate.
*/
html.qr-theme-anim *,
html.qr-theme-anim *::before,
html.qr-theme-anim *::after{
  transition-timing-function: var(--qr-ease);
  transition-duration: var(--qr-anim-slow);
  transition-property: color, background-color, border-color, box-shadow, fill, stroke;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}