/* animations.css — Card slide-in, resolve flash, token pop, transitions  */

/* ── Card slide-in (path building) ───────────────────────────────────── */

@keyframes card-slide-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.path-card--entering {
  animation: card-slide-in 280ms var(--transition-normal) both;
}

/* ── Active card entrance ─────────────────────────────────────────────── */

@keyframes card-focus-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.card--entering {
  animation: card-focus-in 220ms ease both;
}

/* ── Resolve flash (yellow/red/blue per box type) ─────────────────────── */

@keyframes resolve-flash-event {
  0%   { background: var(--color-event-bg); }
  40%  { background: rgba(212, 168, 67, 0.35); }
  100% { background: var(--color-event-bg); }
}

@keyframes resolve-flash-choice {
  0%   { background: var(--color-choice-bg); }
  40%  { background: rgba(192, 57, 43, 0.35); }
  100% { background: var(--color-choice-bg); }
}

@keyframes resolve-flash-option {
  0%   { background: var(--color-option-bg); }
  40%  { background: rgba(91, 141, 217, 0.35); }
  100% { background: var(--color-option-bg); }
}

.card-box--event.resolving {
  animation: resolve-flash-event 500ms ease;
}

.card-box--choice.resolving {
  animation: resolve-flash-choice 500ms ease;
}

.card-box--option.resolving {
  animation: resolve-flash-option 500ms ease;
}

/* ── Token gain pop ───────────────────────────────────────────────────── */

@keyframes token-gain {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@keyframes token-lose {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.7) rotate(-8deg); }
  60%  { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}

.resource__count--gaining {
  animation: token-gain 380ms ease;
  color: var(--color-food);
}

.resource__count--losing {
  animation: token-lose 380ms ease;
  color: var(--color-health);
}

/* ── Health pip loss ──────────────────────────────────────────────────── */

@keyframes pip-lose {
  0%   { transform: scale(1); background: var(--color-health); }
  50%  { transform: scale(1.6); background: var(--color-health); }
  100% { transform: scale(1); background: transparent; border: 1px solid var(--color-border-strong); }
}

.health-pip--losing {
  animation: pip-lose 400ms ease forwards;
}

/* ── Toast notification ───────────────────────────────────────────────── */

@keyframes toast-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  25%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* ── Phase transition (morning ☀ → evening 🌙) ───────────────────────── */

@keyframes phase-change {
  0%   { opacity: 1; transform: translateY(0); }
  40%  { opacity: 0; transform: translateY(-8px); }
  60%  { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

.phase-bar__phase--transitioning {
  animation: phase-change 500ms ease both;
}

/* ── Pawn movement on expedition track ───────────────────────────────── */

/* Handled via CSS transition on .expedition-track__pawn:
   transition: left 380ms ease;  (set in layout.css)                      */

/* ── Explorer death ───────────────────────────────────────────────────── */

@keyframes explorer-death {
  0%   { opacity: 1; filter: grayscale(0); }
  100% { opacity: 0.3; filter: grayscale(1); }
}

.explorer-panel--dying {
  animation: explorer-death 600ms ease forwards;
}

/* ── Modal entrance ───────────────────────────────────────────────────── */

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

.modal {
  animation: modal-slide-up 280ms ease both;
}

/* ── Screen transitions ───────────────────────────────────────────────── */

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

.screen--entering {
  animation: screen-fade-in 300ms ease both;
}

/* ── Reduced motion override ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
  }
}