/* =============================================
   TAPJARX-DEPLOY — ANIMATIONS
   ============================================= */

/* ---- GLOW PULSE ---- */
@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ---- CELL PULSE ---- */
@keyframes cell-pulse {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---- SIGNAL RIPPLE ---- */
@keyframes ripple {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ---- GLITCH TEXT ---- */
@keyframes glitch {
  0%, 90%, 100% { transform: none; opacity: 1; }
  92% { transform: translateX(-3px) skewX(-2deg); opacity: 0.8; }
  94% { transform: translateX(3px) skewX(2deg); opacity: 0.9; }
  96% { transform: translateX(-2px); opacity: 0.7; }
}

/* ---- SCAN LINE ---- */
@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

/* ---- TOAST ---- */
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toast-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* ---- FADE IN ---- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- SLIDE UP ---- */
@keyframes slide-up {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- NODE FLOAT ---- */
@keyframes node-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ---- BLINK ---- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ---- ROTATE SLOW ---- */
@keyframes rotate-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---- HIT FLASH ---- */
@keyframes hit-flash {
  0%   { filter: brightness(3) saturate(2); }
  100% { filter: brightness(1) saturate(1); }
}

/* ---- COMBO POP ---- */
@keyframes combo-pop {
  0%   { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 0.9; }
}

/* ---- WRONG SHAKE ---- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* ---- APPLY CLASSES ---- */
.anim-glow-pulse   { animation: glow-pulse 2s ease-in-out infinite; }
.anim-glitch       { animation: glitch 4s infinite; }
.anim-fade-in      { animation: fade-in 0.4s ease-out both; }
.anim-slide-up     { animation: slide-up 0.5s ease-out both; }
.anim-node-float   { animation: node-float 3s ease-in-out infinite; }
.anim-blink        { animation: blink 1s step-end infinite; }
.anim-rotate-slow  { animation: rotate-slow 8s linear infinite; }
.anim-shake        { animation: shake 0.4s ease-out; }
.anim-combo-pop    { animation: combo-pop 0.4s ease-out; }

/* ---- SCAN OVERLAY (applied per screen) ---- */
.scan-overlay {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.scan-overlay::after {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 40px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(0,191,255,0.04),
    transparent
  );
  animation: scan 3s linear infinite;
}

/* ---- CARD HOVER ---- */
.game-card {
  animation: fade-in 0.5s ease-out both;
}
.game-card:nth-child(1) { animation-delay: 0.05s; }
.game-card:nth-child(2) { animation-delay: 0.1s; }
.game-card:nth-child(3) { animation-delay: 0.15s; }
.game-card:nth-child(4) { animation-delay: 0.2s; }
.game-card:nth-child(5) { animation-delay: 0.25s; }