/* ═══════════════════════════ ALL KEYFRAMES ═══════════════════════════ */

/* ── Screen transitions ── */
@keyframes slideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}
@keyframes slideOutRight {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(100%); opacity: 0; }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ── Curtain ── */
@keyframes curtainDrop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes curtainRise {
  from { transform: translateY(0); }
  to   { transform: translateY(-100%); }
}

/* ── Score roll ── */
@keyframes rollOut {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-130%); opacity: 0; }
}
@keyframes rollIn {
  from { transform: translateY(130%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes scorePulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

/* ── Pick buttons ── */
@keyframes pickBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.88); }
  60%  { transform: scale(1.12); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1.04); }
}

/* ── Result: pick entry ── */
@keyframes pickEntryLeft {
  from { transform: translateX(-220%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@keyframes pickEntryRight {
  from { transform: translateX(220%);  opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ── Result: loser fade ── */
@keyframes loserFade {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: .35; transform: scale(0.88); }
}

/* ── Result: banner reveal ── */
@keyframes resultReveal {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.06); }
  80%  { transform: scale(0.97); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Confetti fall ── */
@keyframes confettiFall {
  0%  { transform: translateY(-10vh) rotate(0deg)   scaleX(1);    opacity: 1; }
  60% { opacity: 1; }
  100%{ transform: translateY(110vh) rotate(780deg) scaleX(-1);   opacity: 0; }
}

/* ── Typewriter character ── */
@keyframes twChar {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Floating (trophy/emoji) ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ── Pulsing highlight (active player) ── */
@keyframes pulsingHighlight {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}

/* ── Button shimmer ── */
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(200%); }
}

/* ── Title emoji spin ── */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Shake (draw game over) ── */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(8px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(6px); }
  75%       { transform: translateX(-3px); }
  90%       { transform: translateX(3px); }
}

/* ── Fade in generic ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════ REDUCED MOTION ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  /* Replace all slides with fades */
  .screen.s-exiting.dir-fwd,
  .screen.s-exiting.dir-back  { animation: fadeOutSimple var(--dur-fast) var(--ease-in)  forwards; }
  .screen.s-entering.dir-fwd,
  .screen.s-entering.dir-back { animation: fadeInSimple  var(--dur-fast) var(--ease-out) forwards; }

  #curtain.drop { animation-duration: var(--dur-fast); }
  #curtain.rise { animation-duration: var(--dur-fast); }

  .confetti-piece    { display: none; }
  .gameover-trophy   { animation: none; }
  .handoff-icon      { animation: none; }
  .title-emoji       { animation: none; }
  .score-roll.pulse  { animation: none; }
  .tw-char { opacity: 1; transform: none; animation: none; }
}

@keyframes fadeOutSimple {
  to { opacity: 0; }
}
@keyframes fadeInSimple {
  from { opacity: 0; }
  to   { opacity: 1; }
}