/* Motion. Feedback 100-150ms, state 150-300ms, overlays 300-500ms. transform/opacity only. */
:root {
  --dur-feedback: 120ms;
  --dur-state: 200ms;
  --dur-overlay: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.btn {
  transition: transform var(--dur-feedback) var(--ease);
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.toast {
  animation: toast-in var(--dur-state) var(--ease);
  transition: opacity var(--dur-feedback) var(--ease);
}

.toast[data-leaving] {
  opacity: 0;
}

.dialog[open] {
  animation: dialog-in var(--dur-overlay) var(--ease);
}

.dialog[open]::backdrop {
  animation: backdrop-in var(--dur-overlay) var(--ease);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dialog-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-feedback: 0ms;
    --dur-state: 0ms;
    --dur-overlay: 0ms;
  }

  .btn,
  .toast {
    transition: none;
  }

  .btn:active:not(:disabled) {
    transform: none;
  }

  .toast,
  .dialog[open],
  .dialog[open]::backdrop {
    animation: none;
  }
}