/*
 * Motion for the shared game pieces. Every animation lives behind
 * `prefers-reduced-motion: no-preference`, so reduced-motion users get the final state instantly
 * (globals.css also clamps animation durations as a safety net).
 */

/* ── Board lines: a newly completed line draws itself in. ── */
.lineDraw {
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .lineDraw {
    animation: line-draw 700ms cubic-bezier(0.3, 0.7, 0.2, 1) 250ms both;
  }
}
@keyframes line-draw {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ── Up-next tile: a slow cyan breathing glow. ── */
@media (prefers-reduced-motion: no-preference) {
  .nextGlow {
    animation: next-glow 1.6s ease-in-out infinite;
  }
}
@keyframes next-glow {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgb(34 211 238 / 0.9),
      0 0 18px -4px rgb(34 211 238 / 0.55);
  }
  50% {
    box-shadow:
      0 0 0 2px rgb(34 211 238 / 1),
      0 0 30px 0 rgb(34 211 238 / 0.8);
  }
}

/* ── Confetti: pieces fall and tumble once, then stay hidden. ── */
.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.piece {
  position: absolute;
  top: -8%;
  display: block;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .piece {
    animation: confetti-fall var(--dur, 2.4s) cubic-bezier(0.25, 0.6, 0.4, 1) var(--delay, 0s) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti {
    display: none;
  }
}
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift, 0px), 115vh, 0) rotate(var(--spin, 540deg));
  }
}

/* ── Countdown bar fill follows the clock smoothly between 100 ms ticks. ── */
@media (prefers-reduced-motion: no-preference) {
  .barFill {
    transition:
      width 120ms linear,
      background-color 300ms ease;
  }
  .urgent {
    animation: urgent 0.9s ease-in-out infinite;
  }
}
@keyframes urgent {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.45);
  }
}

/* ── "Locked in" shimmer across the picked answer while it waits for the server. ── */
.shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.18), transparent);
  transform: translateX(-120%) skewX(-20deg);
}
@media (prefers-reduced-motion: no-preference) {
  .shimmer::after {
    animation: shimmer 1.1s ease-in-out infinite;
  }
}
@keyframes shimmer {
  to {
    transform: translateX(320%) skewX(-20deg);
  }
}

/* ── Celebration toast: pops in, holds, floats away. ── */
@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast 2.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
  }
}
@keyframes toast {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.6);
  }
  14% {
    opacity: 1;
    transform: translateY(0) scale(1.08);
  }
  22% {
    transform: scale(1);
  }
  80% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
  }
}