/* Motion: short, purposeful, transform/opacity only (hardware-accelerated).
   Everything here is gated by prefers-reduced-motion in base.css. */

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade-slide-in-right {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fade-slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-28px); }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.85); }
  70%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes check-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes bounce-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40% { transform: translateY(-7px); opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes press-feedback {
  0%   { transform: scale(1); }
  50%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.anim-enter {
  animation: fade-slide-up var(--dur-slow) var(--ease-out) both;
}

.anim-stagger > * {
  opacity: 0;
  animation: fade-slide-up var(--dur-base) var(--ease-out) both;
}

.anim-stagger > *:nth-child(1) { animation-delay: 0ms; }
.anim-stagger > *:nth-child(2) { animation-delay: 70ms; }
.anim-stagger > *:nth-child(3) { animation-delay: 140ms; }
.anim-stagger > *:nth-child(4) { animation-delay: 210ms; }
.anim-stagger > *:nth-child(5) { animation-delay: 280ms; }
.anim-stagger > *:nth-child(6) { animation-delay: 350ms; }

.anim-pop {
  animation: pop-in var(--dur-slow) var(--ease-out) both;
}

/* Screen transitions, driven by classes the state machine toggles */
.screen.is-entering {
  animation: fade-slide-in-right var(--dur-base) var(--ease-out) both;
}

.screen.is-leaving {
  animation: fade-slide-out-left var(--dur-base) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-entering,
  .screen.is-leaving,
  .anim-enter,
  .anim-pop,
  .anim-stagger > * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}