/* Core timing tokens */
:root {
  --motion-view-transition: 200ms;
  --motion-card-appear: 150ms;
  --motion-data-update: 300ms;
  --motion-button-press: 100ms;
  --motion-modal-open: 200ms;
}

/* View transition: fade + slight lift */
.motion-view-enter {
  animation: alidade-view-enter var(--motion-view-transition) ease-out both;
}

/* Card appears: opacity only */
.motion-card-appear {
  animation: alidade-card-appear var(--motion-card-appear) ease-out both;
}

/* Data update flash */
.motion-data-update {
  animation: alidade-data-flash var(--motion-data-update) ease-out both;
}

/* Button press */
.motion-pressable:active {
  transform: scale(0.97);
  transition: transform var(--motion-button-press) ease-out;
}

/* Modal open */
.motion-modal-enter {
  animation: alidade-modal-enter var(--motion-modal-open) ease-out both;
}

@keyframes alidade-view-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes alidade-card-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes alidade-data-flash {
  0% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.25); }
  100% { box-shadow: 0 0 0 0 rgba(56, 189, 248, 0); }
}

@keyframes alidade-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@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;
  }
}