/* ═══════════════════════════════════════════════════════════════════
   FYM Casino — Slot Engine FX layer
   ───────────────────────────────────────────────────────────────────
   Companion to slot-engine.js's 2026-06 upgrade. Three families:

   1. Reel physics — settle bounce on every reel stop
   2. Win spotlight — losing symbols dim + desaturate while winners pulse
   3. Idle attract — slow shine sweep across a resting machine

   Base slot styling lives in style.css (~5500). This file only adds
   the new motion/spotlight layers so it can ship + cache-bust alone.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Reel settle bounce ───────────────────────────────────────────
   Applied to .slot-reel for 380ms at stop. Animates the reel (not the
   strip) so it can't fight the strip's transform bookkeeping. */
.slot-reel.reel-landed {
  animation: slotReelSettle 340ms cubic-bezier(0.22, 1.6, 0.36, 1);
}
@keyframes slotReelSettle {
  0%   { transform: translateY(-7px); }
  55%  { transform: translateY(2.5px); }
  80%  { transform: translateY(-1px); }
  100% { transform: translateY(0); }
}

/* Motion blur while spinning — symbols streak, sells the speed. */
.slot-reel.spinning .slot-symbol-img,
.slot-reel.spinning .slot-symbol {
  filter: blur(1.6px) brightness(1.08);
}
.slot-reel.reel-anticipation .slot-symbol-img,
.slot-reel.reel-anticipation .slot-symbol {
  filter: blur(2.2px) brightness(1.15) saturate(1.2);
}

/* ── 2. Win spotlight ────────────────────────────────────────────────
   .win-show on .slot-reels-container while highlightWins is active.
   Non-winning cells fall back; winners scale-pulse with a gold ring. */
.slot-reels-container.win-show .slot-cell:not(.slot-win) {
  filter: brightness(0.42) saturate(0.45);
  transition: filter 280ms ease-out;
}
.slot-reels-container.win-show .slot-cell.slot-win {
  filter: none;
  z-index: 3;
}
.slot-reels-container.win-show .slot-cell.slot-win .slot-symbol {
  animation: slotWinPulse 900ms ease-in-out infinite;
}
@keyframes slotWinPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
/* Gold spotlight ring behind each winning symbol. */
.slot-reels-container.win-show .slot-cell.slot-win::before {
  content: '';
  position: absolute;
  inset: 4%;
  border-radius: 14px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent-hi, #f0c94c) 28%, transparent) 0%,
    transparent 70%);
  animation: slotWinRing 900ms ease-in-out infinite;
  pointer-events: none;
}
@keyframes slotWinRing {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ── 3. Idle attract shine ───────────────────────────────────────────
   .slot-idle-shine pulsed onto .slot-machine every ~9s while resting.
   A diagonal light band sweeps across — the machine breathes. */
.slot-machine { position: relative; }
.slot-machine.slot-idle-shine::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    color-mix(in srgb, var(--accent-hi, #f0c94c) 9%, transparent) 47%,
    color-mix(in srgb, #ffffff 14%, transparent) 50%,
    color-mix(in srgb, var(--accent-hi, #f0c94c) 9%, transparent) 53%,
    transparent 70%);
  background-size: 250% 100%;
  background-position: 120% 0;
  animation: slotIdleShine 1.5s ease-in-out forwards;
  border-radius: inherit;
}
@keyframes slotIdleShine {
  from { background-position: 120% 0; opacity: 0.9; }
  to   { background-position: -120% 0; opacity: 0; }
}

/* ═══════════════════ Casino juice — other games ════════════════════ */

/* Plinko: landed bucket pops + flashes. `.landed` is set by
   _renderBuckets on the bucket the ball fell into. */
.plinko-bucket.landed {
  animation: plinkoBucketPop 480ms cubic-bezier(0.22, 1.8, 0.36, 1);
}
@keyframes plinkoBucketPop {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(5px) scale(1.18); filter: brightness(1.6); }
  60%  { transform: translateY(-2px) scale(0.96); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

/* Mines: gem sparkle ring on safe reveal. */
.mines-tile { position: relative; }
.mines-gem-sparkle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle,
    rgba(34, 197, 94, 0.45) 0%, transparent 65%);
  animation: minesGemSparkle 620ms ease-out forwards;
}
@keyframes minesGemSparkle {
  0%   { opacity: 1; transform: scale(0.4); }
  70%  { opacity: 0.6; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Crash: debris burst at the bust moment. */
.crash-debris-burst {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 0;
  height: 0;
  z-index: 8;
  pointer-events: none;
}
.crash-debris {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: linear-gradient(135deg, #ff7a45, #d92b2b);
  box-shadow: 0 0 8px rgba(255, 100, 50, 0.8);
  animation: crashDebrisFly var(--dd, 0.7s) cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes crashDebrisFly {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 50px)) rotate(260deg) scale(0.4); opacity: 0; }
}

/* Reduced motion: skip the loops, keep the state changes. */
@media (prefers-reduced-motion: reduce) {
  .slot-reel.reel-landed,
  .slot-reels-container.win-show .slot-cell.slot-win .slot-symbol,
  .slot-reels-container.win-show .slot-cell.slot-win::before,
  .slot-machine.slot-idle-shine::after,
  .plinko-bucket.landed,
  .mines-gem-sparkle,
  .crash-debris {
    animation: none;
  }
  .slot-reel.spinning .slot-symbol-img,
  .slot-reel.spinning .slot-symbol {
    filter: none;
  }
}

/* ── FYM Slots (classic machine) anticipation + win-mult ─────────
   Near-miss hold on the third reel: gold pulse while the riser
   plays (the +600ms used to be silent dead air). */
.reel-container.anticipation {
    animation: fymSlotAnticipation 0.55s ease-in-out infinite;
    border-radius: 8px;
}
@keyframes fymSlotAnticipation {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 201, 76, 0); }
    50%      { box-shadow: 0 0 18px 4px rgba(240, 201, 76, 0.55),
                           inset 0 0 12px rgba(240, 201, 76, 0.25); }
}
.slots-result .win-mult {
    font-size: 0.72em;
    opacity: 0.85;
    color: var(--accent-hi, #f4d66b);
    margin-left: 4px;
}