/**
 * THREE CHANCES — motion + selection-highlight layer for the web client.
 *
 * Implements design/motion.md against design/tokens.css. Every duration and curve
 * is a token (--tc-duration-*, --tc-ease-*); nothing here hard-codes a timing
 * outside that set. All transform-based motion has a prefers-reduced-motion
 * fallback at the bottom.
 *
 * AVAILABILITY vs OUTCOME (the reconciliation, see motion.md):
 *   Availability status uses the DESATURATED --tc-mine / --tc-foe tints as a thin
 *   2px static ring + a glyph (✓ yours, 🔒 taken-by-opponent), no glow, no motion.
 *   Outcome (win/loss) keeps the vivid --tc-win / --tc-loss thick glowing ring +
 *   animated badge (✓ / ✗). Different tint, thickness, glyph and motion, so a
 *   "taken" card never reads as a live win/loss.
 */

/* ================================================================== *
 * SELECTION HIGHLIGHT STATES  (draft + swap)
 * ================================================================== */

/* Your taken/chosen card — calm green ring, ✓ badge. No glow. */
.tc-slot--mine .tc-card,
.tc-card.is-drop {
  box-shadow: 0 0 0 2px var(--tc-mine), var(--tc-shadow-card);
}
/* Opponent's taken card — calm red ring + slight desaturate + lock badge. */
.tc-slot--taken .tc-card {
  box-shadow: 0 0 0 2px var(--tc-foe), var(--tc-shadow-card);
  filter: grayscale(0.4) brightness(0.72);
}

/* Non-colour cue: a corner glyph badge on every highlighted card. */
.tc-availtag {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 4;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  color: var(--tc-surface-table, #0d0f14);
  animation: tc-tag-in var(--tc-duration-base) var(--tc-ease-pop) both;
}
.tc-availtag--mine { background: var(--tc-mine); }
.tc-availtag--mine::before { content: var(--tc-mine-glyph, '✓'); }
.tc-availtag--foe {
  background: var(--tc-foe);
  font-size: 8px;
}
.tc-availtag--foe::before { content: var(--tc-foe-glyph, '🔒'); }

@keyframes tc-tag-in {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ================================================================== *
 * 1 · DEAL-IN  (draft) — staggered entrance. Simplified from the arc-fan
 * in motion.md to a fade+scale+lift; see the note in motion.md.
 * ================================================================== */
.tc-slots--deal .tc-slot {
  animation: tc-deal-in var(--tc-duration-reveal) var(--tc-ease-enter) both;
  animation-delay: calc(var(--tc-stagger) * var(--i, 0));
}
@keyframes tc-deal-in {
  from { transform: translateY(14px) scale(0.86); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* 2 · Draft hover/select feedback (open slots aren't .tc-card--interactive). */
.tc-slot--open .tc-card { transition: transform var(--tc-duration-fast) var(--tc-ease-standard), box-shadow var(--tc-duration-fast) var(--tc-ease-standard); }
.tc-slot--open:hover .tc-card { transform: translateY(-4px); box-shadow: var(--tc-shadow-card), 0 0 16px var(--tc-gold-glow); }
.tc-slot--open:active .tc-card { transform: translateY(-1px); transition-duration: var(--tc-duration-instant); }

/* ================================================================== *
 * 14/15/16 · SWAP — sheet enter, blind reveal, opponent indicator
 * ================================================================== */
.tc-sheet { animation: tc-sheet-in var(--tc-duration-scene) var(--tc-ease-enter) both; }
@keyframes tc-sheet-in {
  from { transform: translateY(32px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* The swapper-only reveal flip is provided by swap.css (.tc-swap-reveal__card /
   tc-reveal-pop). We just make sure the drawn card carries that class in markup. */

/* Opponent "swap occurred" note slides down from the top edge. */
.tc-swapnote--occurred { animation: tc-note-in var(--tc-duration-base) var(--tc-ease-enter) both; }
@keyframes tc-note-in {
  from { transform: translateY(-16px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* ================================================================== *
 * 5 · 3-2-1 COUNTDOWN  (once at match start)
 * ================================================================== */
.tc-countdown {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(5, 6, 9, 0.55);
  backdrop-filter: blur(1px);
}
.tc-countdown__num {
  font-family: var(--tc-font-display, Georgia, serif);
  font-size: 96px;
  line-height: 1;
  color: var(--tc-gold);
  opacity: 0.6;
  animation: tc-count var(--tc-duration-scene) var(--tc-ease-standard) both;
}
@keyframes tc-count {
  0% { transform: scale(0.9); opacity: 0; }
  30% { opacity: 0.6; }
  70% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* ================================================================== *
 * 4 · BOTH LOCKED IN  — two face-down cards + a unison gold pulse
 * ================================================================== */
.tc-lockin .tc-card { animation: tc-lockin-pulse var(--tc-duration-base) var(--tc-ease-standard) 1; }
@keyframes tc-lockin-pulse {
  0%, 100% { box-shadow: var(--tc-shadow-card); }
  50% { box-shadow: var(--tc-shadow-card), 0 0 20px var(--tc-gold-glow-strong); }
}

/* ================================================================== *
 * 6 · REVEAL FLIP  — both cards flip on the Y axis, in unison
 * ================================================================== */
.tc-flip { animation: tc-flip var(--tc-duration-reveal) var(--tc-ease-standard) both; transform-origin: 50% 50%; backface-visibility: hidden; }
@keyframes tc-flip {
  0% { transform: rotateY(90deg); }
  100% { transform: rotateY(0deg); }
}

/* 7 · WINNER RESOLUTION — the card FLIPS, then (a beat later) the winner lifts
 * and the loser shakes. Both are one `animation` list so the flip isn't lost. */
.tc-card.is-winner.tc-flip {
  animation:
    tc-flip var(--tc-duration-reveal) var(--tc-ease-standard) both,
    tc-winner-rise var(--tc-duration-base) var(--tc-ease-standard) var(--tc-duration-reveal) both;
}
@keyframes tc-winner-rise { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* Badge scales in on the overshoot curve, after the flip has landed. */
.tc-card__badge { animation: tc-badge-pop var(--tc-duration-base) var(--tc-ease-pop) both; animation-delay: var(--tc-duration-reveal); }
@keyframes tc-badge-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 8 · WIN FLASH + PARTICLES  (player's own win only) */
.tc-flash {
  position: absolute; inset: 0; z-index: 15; pointer-events: none;
  background: var(--tc-win); opacity: 0;
  animation: tc-flash var(--tc-duration-reveal) var(--tc-ease-exit) 1;
}
@keyframes tc-flash { 0% { opacity: 0; } 20% { opacity: 0.08; } 100% { opacity: 0; } }
.tc-particles { position: absolute; inset: 0; z-index: 16; pointer-events: none; overflow: hidden; }
.tc-particle {
  position: absolute; bottom: 40%; left: 50%;
  width: 6px; height: 6px; border-radius: 999px; background: var(--tc-gold);
  animation: tc-particle var(--tc-duration-celebrate) var(--tc-ease-exit) both;
}
@keyframes tc-particle {
  from { transform: translate(0, 0) scale(1); opacity: 0.9; }
  to { transform: translate(var(--dx, 0), var(--dy, -120px)) scale(0.3); opacity: 0; }
}

/* 9 · LOSS SHAKE + VIGNETTE  (player's own loss only) — flip, then shake. */
.tc-card.is-loser.tc-shake {
  animation:
    tc-flip var(--tc-duration-reveal) var(--tc-ease-standard) both,
    tc-shake calc(var(--tc-duration-base) * 1.5) var(--tc-ease-standard) var(--tc-duration-reveal) 1;
}
@keyframes tc-shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

/* 10 · ROUND TRANSITION — outgoing screen accelerates away. */
.tc-exit { animation: tc-exit var(--tc-duration-base) var(--tc-ease-exit) both; }
@keyframes tc-exit { to { transform: translateY(18px); opacity: 0; } }

/* ================================================================== *
 * 11 · MATCH-END BADGE  — result glyph scales in with overshoot
 * ================================================================== */
.tc-result-glyph { animation: tc-result var(--tc-duration-celebrate) var(--tc-ease-pop) both; }
@keyframes tc-result { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* 12 · STREAK INCREMENT — a single pulse; armed streak breathes. */
.tc-streak-pulse { animation: tc-streak-pulse var(--tc-duration-reveal) var(--tc-ease-standard) 1; }
@keyframes tc-streak-pulse { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 18px var(--tc-gold-glow-strong); } }
.tc-breathe { animation: tc-breathe calc(var(--tc-duration-scene) * 4) var(--tc-ease-standard) infinite; }
@keyframes tc-breathe { 0%,100% { box-shadow: 0 0 10px var(--tc-gold-glow); } 50% { box-shadow: 0 0 22px var(--tc-gold-glow-strong); } }

/* ================================================================== *
 * 13 · TIMER WARNING  — pulse under CONFIG.timers.warnAtSeconds
 * ================================================================== */
.tc-clock--warn { animation: tc-clock-warn var(--tc-duration-celebrate) var(--tc-ease-standard) infinite; }
@keyframes tc-clock-warn { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.tc-clock__bang { color: var(--tc-loss); font-weight: 700; animation: tc-badge-pop var(--tc-duration-base) var(--tc-ease-pop) both; }

/* ================================================================== *
 * REDUCED MOTION — drop transforms/particles; keep opacity cues only.
 * (Token durations already collapse to ~1ms; this removes the movement.)
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .tc-slots--deal .tc-slot,
  .tc-sheet,
  .tc-swapnote--occurred,
  .tc-countdown__num,
  .tc-lockin .tc-card,
  .tc-flip,
  .tc-card.is-winner,
  .tc-card__badge,
  .tc-availtag,
  .tc-result-glyph,
  .tc-exit { animation: none; }

  .tc-particles,
  .tc-flash { display: none; }

  .tc-card.is-loser.tc-shake { animation: none; }
  .tc-clock--warn,
  .tc-breathe,
  .tc-streak-pulse { animation: none; }

  /* Non-colour cues must remain instant, not vanish. */
  .tc-availtag { opacity: 1; transform: none; }
}