/* 
======================================================
🎮 gameAnimations.css
Handles all character-specific and gameplay animations
======================================================
*/

.foundation-bg {
  visibility: hidden;
}


/* ===================== 🛡️ Guard Shake Animation ===================== */
@keyframes guardShake {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 0); }
  40% { transform: translate(2px, 0); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 0); }
  100% { transform: translate(0, 0); }
}

.card.guard-shake {
  animation: guardShake 0.4s ease-in-out;
}

/* ===================== 🔥 Illusionist Suit Burn Effects ===================== */

/* 🔥 Fire effect animation that pulses and fades over time */
@keyframes blueFlameAnimation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fire-wrapper {
  position: absolute;
  top: 40%; /* adjust as needed */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3em;
  height: 3em;
  pointer-events: none;
  z-index: 5;
}

.fire-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.blue-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 100, 255, 0.5); /* Blue tint */
  mix-blend-mode: color; /* This is what colors the GIF */
  pointer-events: none;
}


/* ===================== ❄️ Foundation Invisibility (Unrelated) ===================== */
.illusion-invisible-foundation {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}


/* ===================== ❄️ Joker Animation ===================== */
@keyframes joker-reveal-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(720deg); }
}

/* or this:
@keyframes joker-reveal-spin {
  0%   { transform: rotateY(0deg); }
  80%  { transform: rotateY(720deg); }
  100% { transform: rotateY(660deg); }
} */

.card.joker-reveal-spin {
  animation: joker-reveal-spin 0.2s ease-out;
}

@keyframes joker-reveal-flip {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

.card.joker-reveal-flip {
  animation: joker-reveal-flip 0.1s ease-out;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}


/* ===================== ❄️ Ice Witch Animation ===================== */
/* 🔵 Frost Overlay (video container) */
.frost-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 4s linear;
  z-index: 12;
  overflow: hidden;
}

/* 🧊 Frost Video Styling */
.frost-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#overlay-video {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
  transition: opacity 10s ease;
  pointer-events: none;
}