/* animation.css — the effects layer and the opening ceremony.

   The motion itself lives in JS (render/animations.js, render/effects.js) because the Web
   Animations API is what gives interruptible, cancellable animations; this file only
   provides the surfaces they animate. Anything here that does move is a CSS transition on
   a hover or focus affordance, where CSS is the better tool.

   Note that the reduced-motion block in tokens.css does NOT cover the JS animations —
   `prefers-reduced-motion` in CSS reaches CSS transitions and animations only. The
   matching JS half is in render/motion.js. Both are needed. */

/* ------------------------------------------------------------- effects layer */

.vm-fx {
  position: fixed;
  inset: 0;
  pointer-events: none;      /* never intercepts a tap meant for a card */
  overflow: hidden;
  /* Above the overlays, so the victory burst radiates over the result panel rather than
     being hidden behind it. See the stacking-order note in base.css. */
  z-index: 1100;
}

/* A cloned card in flight. Sized inline from the original's bounding box. */
.vm-fx-card {
  position: fixed;
  border-radius: 9px;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.6));
}

.vm-fx-card .vm-card-svg { width: 100%; height: 100%; display: block; }

/* A rising figure: "+2", "+10", "+2 held". */
.vm-fx-float {
  position: fixed;
  font-weight: 800;
  font-size: clamp(18px, 4.4vw, 30px);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.75);
}

.vm-fx-float.is-good { color: var(--vm-good); }
.vm-fx-float.is-warn { color: var(--vm-warn); font-size: clamp(13px, 3vw, 19px); }

/* Streak-win particles. Plain DOM dots: at a dozen particles a canvas costs more to set
   up than it saves, and this way they inherit the accent colour for free. */
.vm-fx-dot {
  position: fixed;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vm-accent);
  box-shadow: 0 0 12px var(--vm-accent);
}

/* ------------------------------------------------------------- dealer draw */

/* The draw is played on the real board now, so almost nothing is needed here: the cards
   are ordinary `.vm-slot`s laid out by render/board.js, tilted by --vm-slot-tilt, and the
   toss and the reveal are Web Animations driven from ui/dealer-draw.js. What remains is
   the note beside the cards, the letter-count label stuck to a drawn card, and the lift
   that marks a card as drawn.

   The whole modal that used to live here — backdrop, panel, seats, its own card markup —
   is gone. It duplicated the card component and it blocked the interface. */

.vm-draw-note {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(46ch, 96%);
  text-align: center;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--vm-border);
  /* Opaque, not tinted. With forty cards on the table there is always a card back behind
     this, and at 88% the pattern showed through and fought the text. */
  background: var(--vm-surface);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.5);
  color: var(--vm-text-dim);
  font-size: clamp(11px, 2.4vw, 14px);
  font-weight: 600;
  line-height: 1.35;
  /* Never a dialog: it cannot be clicked, so it cannot take a tap meant for a card
     underneath it. */
  pointer-events: none;
  z-index: 800;
}

.vm-draw-note.is-verdict {
  color: var(--vm-text);
  border-color: var(--vm-accent);
  background: color-mix(in srgb, var(--vm-accent) 22%, var(--vm-surface));
}

.vm-draw-note.is-tie {
  color: var(--vm-text);
  border-color: var(--vm-warn, #ffcc00);
}

.vm-draw-note[hidden] { display: none; }

/* The letter count, stuck to the card it was counted from. It rides the card's tilt, the
   way a label on a card would. The rule counts letters only, so "Was - Were" is 7. */
.vm-draw-count {
  position: absolute;
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--vm-accent);
  color: #04121f;
  font-size: clamp(9px, 1.7vw, 12px);
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
  pointer-events: none;
}

/* While the draw is running the dealer is not decided YET as far as the player is
   concerned — the engine settled it when the game was created, but that is not something
   the table should be announcing before the cards are turned over. Hidden rather than
   removed, so the rail does not jump when it appears. */
.vm-is-drawing .vm-badge.is-dealer { visibility: hidden; }

/* A drawn card sits above the toss and slightly proud of it, so the two cards being
   compared are findable at a glance among the ones still face-down. */
.vm-slot.is-drawn {
  z-index: 700;
}

.vm-slot.is-drawn .vm-card {
  box-shadow: 0 0 0 2px var(--vm-accent), 0 10px 26px rgb(0 0 0 / 0.55);
  border-radius: 9px;
}