/* Scaleezy motion tokens. Shared by every module and both brands.
   Rules: durations 100/150/200/300 only; enter ease-out, exit ease-in;
   animate transform and opacity only; no infinite decorative loops.
   Mark functional loops (spinners, indeterminate progress, live activity)
   with data-motion="functional" so reduced-motion leaves them running. */

:root {
  --motion-100: 100ms;
  --motion-150: 150ms;
  --motion-200: 200ms;
  --motion-300: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}

/* Overlay enter/exit (slide-over from the trailing edge, popover fade). */
.sz-enter {
  transition: transform var(--motion-200) var(--ease-out), opacity var(--motion-200) var(--ease-out);
}
.sz-exit {
  transition: transform var(--motion-150) var(--ease-in), opacity var(--motion-150) var(--ease-in);
}

/* Hover/press feedback on controls: colour only, never scale. */
.sz-control {
  transition: background-color var(--motion-150) var(--ease-standard),
              border-color var(--motion-150) var(--ease-standard),
              color var(--motion-150) var(--ease-standard);
}

/* Functional loop for spinners and indeterminate bars. */
@keyframes sz-spin {
  to { transform: rotate(360deg); }
}
.sz-spinner[data-motion="functional"] {
  animation: sz-spin 800ms linear infinite;
}

/* Skeleton pulse: opacity only, so it degrades to a static block. */
@keyframes sz-pulse {
  50% { opacity: 0.55; }
}
.sz-skeleton {
  animation: sz-pulse 1.5s ease-in-out infinite;
}

/* data-motion="functional" may sit on the animated element or on any ancestor (a busy button
   wrapping a spinner icon); the exemption covers descendants too. */
@media (prefers-reduced-motion: reduce) {
  *:not([data-motion="functional"]):not([data-motion="functional"] *),
  *:not([data-motion="functional"]):not([data-motion="functional"] *)::before,
  *:not([data-motion="functional"]):not([data-motion="functional"] *)::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sz-skeleton {
    animation: none;
    opacity: 0.7;
  }
}