/* VTS Design System — Motion (Layer: foundations)
   Standardized durations, easings, and shared enter/exit keyframes.
   Guidelines:
   - micro-interactions (hover, color, press): fast (150ms)
   - small overlays / content changes: normal (250ms)
   - large surfaces (drawers, meters, carousels): slow (400ms)
   - enter = ease-out (decelerate), springs only for tactile marks
   Honors prefers-reduced-motion. */

:root {
  --p-motion-duration-fast: 150ms; /* @kind other */
  --p-motion-duration-normal: 250ms; /* @kind other */
  --p-motion-duration-slow: 400ms; /* @kind other */
  --p-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --p-motion-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* @kind other */
  --p-motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
}

/* ---- Shared enter/exit keyframes ---- */
@keyframes p-fade-in { from { opacity: 0; } }
@keyframes p-fade-out { to { opacity: 0; } }
@keyframes p-scale-in { from { opacity: 0; transform: scale(0.96); } }
/* dropdown panels anchored to a trigger */
@keyframes p-overlay-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
/* modal dialogs */
@keyframes p-dialog-in { from { opacity: 0; transform: scale(0.95) translateY(12px); } }
@keyframes p-slide-down-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes p-slide-up-in { from { opacity: 0; transform: translateY(8px); } }
/* toasts (right-anchored default) */
@keyframes p-toast-in { from { opacity: 0; transform: translateX(110%); } }
@keyframes p-toast-out { to { opacity: 0; transform: translateX(110%); } }
/* tactile pop for checkmarks, badges */
@keyframes p-pop-in { from { opacity: 0; transform: scale(0.4); } }
@keyframes p-chip-out { to { opacity: 0; transform: scale(0.8); } }
/* meters growing in */
@keyframes p-grow-x { from { transform: scaleX(0); } }
/* drawers per edge */
@keyframes p-drawer-in-left { from { transform: translateX(-100%); } }
@keyframes p-drawer-in-right { from { transform: translateX(100%); } }
@keyframes p-drawer-in-top { from { transform: translateY(-100%); } }
@keyframes p-drawer-in-bottom { from { transform: translateY(100%); } }

/* ---- Accessibility: collapse all motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}