/* ============================================================
   animations.css
   Semua efek animasi visual: flash layar merah/hijau,
   score pop-up melayang, pulse ring, dan keyframes lainnya.
   ============================================================ */

/* ── Screen Flash Overlay ── */
#flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 998;
  opacity: 0;
}

#flash.red-flash   { animation: redFlash .4s; }
#flash.green-flash { animation: greenFlash .4s; }

@keyframes redFlash {
  0%   { opacity: 0; background: #ff3366; }
  30%  { opacity: .25; }
  100% { opacity: 0; background: #ff3366; }
}

@keyframes greenFlash {
  0%   { opacity: 0; background: #00ff9d; }
  30%  { opacity: .15; }
  100% { opacity: 0; background: #00ff9d; }
}

/* ── Floating Score Pop ── */
.score-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Orbitron', monospace;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--green);
  pointer-events: none;
  z-index: 999;
  animation: scorePop .7s forwards;
}

@keyframes scorePop {
  0%   { opacity: 1; transform: translate(-50%, -50%)  scale(.8); }
  50%  { opacity: 1; transform: translate(-50%, -80%)  scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -120%) scale(1); }
}

/* ── Pulse Ring (utility, e.g. active category) ── */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(0,212,255,.4); }
  50%     { box-shadow: 0 0 0 8px transparent; }
}