/**
 * Unified animation tokens — orchestrated motion across the app.
 */
:root {
  --dur-instant: 100ms;
  --dur-4: 600ms;
  --dur-5: 1000ms;
  --ease-linear: linear;
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Page transition choreography */
body.page-exit {
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}

body.page-enter-ready {
  animation: page-content-in var(--dur-3) var(--ease-out) forwards;
}

@keyframes page-content-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* List stagger enter */
.list-item-enter {
  opacity: 0;
  transform: translateY(8px);
  animation: list-item-enter var(--dur-3) var(--ease-out) forwards;
}

.list-item-enter:nth-child(1) { animation-delay: 0ms; }
.list-item-enter:nth-child(2) { animation-delay: 50ms; }
.list-item-enter:nth-child(3) { animation-delay: 100ms; }
.list-item-enter:nth-child(4) { animation-delay: 150ms; }
.list-item-enter:nth-child(5) { animation-delay: 200ms; }
.list-item-enter:nth-child(n+6) { animation-delay: 250ms; }

@keyframes list-item-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal choreography */
.modal-overlay {
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-out);
}

.modal-overlay.is-visible,
.modal-overlay.visible {
  opacity: 1;
}

.modal-content {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-emphasized);
  transition-delay: 100ms;
}

.modal-content.is-visible,
.modal-content.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.modal-overlay.is-exiting,
.modal-overlay.exiting {
  opacity: 0;
  transition-duration: var(--dur-2);
}

.modal-content.is-exiting,
.modal-content.exiting {
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition-duration: var(--dur-2);
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  body.page-exit,
  body.page-enter-ready {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .list-item-enter {
    animation: none;
    opacity: 1;
    transform: none;
  }
}