/* ============================================================
   PYQUEST - ANIMATIONS.CSS
   Glitch, pulse, shake, fade, code-rain, crack, level-up
   ============================================================ */

/* ============================================================
   GLITCH EFFECT
   ============================================================ */

@keyframes glitch {
  0%, 100% {
    text-shadow:
      0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  5% {
    clip-path: inset(25% 0 60% 0);
    transform: translate(-3px, 2px);
  }
  10% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(3px, -2px);
    text-shadow:
      -0.05em 0 0 rgba(255, 0, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 255, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(70% 0 10% 0);
    transform: translate(-2px, 1px);
  }
  25% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
}

.glitch {
  position: relative;
  animation: glitch 4s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-before 4s infinite;
  color: #ff0055;
  clip-path: inset(30% 0 50% 0);
  transform: translateX(-3px);
}

.glitch::after {
  animation: glitch-after 4s infinite;
  color: #00ffff;
  clip-path: inset(60% 0 20% 0);
  transform: translateX(3px);
}

@keyframes glitch-before {
  0%, 90%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  92% { clip-path: inset(20% 0 60% 0); transform: translate(-4px, 2px); }
  94% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -2px); }
  96% { clip-path: inset(40% 0 40% 0); transform: translate(-3px); }
  98% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

@keyframes glitch-after {
  0%, 88%, 100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  90% { clip-path: inset(50% 0 30% 0); transform: translate(5px, -3px); }
  93% { clip-path: inset(10% 0 70% 0); transform: translate(-5px, 3px); }
  96% { clip-path: inset(80% 0 5% 0); transform: translate(3px); }
  99% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

/* ============================================================
   HP BAR SHAKE
   ============================================================ */

@keyframes hp-shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-6px); }
  20% { transform: translateX(6px); }
  30% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  50% { transform: translateX(-2px); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
}

.shake {
  animation: hp-shake 0.5s ease-in-out;
}

/* ============================================================
   PULSE EFFECTS
   ============================================================ */

@keyframes node-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(6, 182, 212, 0);
  }
}

@keyframes xp-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@keyframes level-up-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.8);
    transform: scale(1.02);
  }
}

/* ============================================================
   FADE TRANSITIONS
   ============================================================ */

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.fade-in {
  animation: fade-in 0.3s ease forwards;
}

.fade-in-up {
  animation: fade-in-up 0.4s ease forwards;
}

.fade-in-scale {
  animation: fade-in-scale 0.3s ease forwards;
}

/* Screen transition */
@keyframes screen-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen.active {
  animation: screen-enter 0.25s ease forwards;
}

/* ============================================================
   CRACK EFFECT (wrong answer)
   ============================================================ */

@keyframes crack-flash {
  0% { background: rgba(239, 68, 68, 0); }
  20% { background: rgba(239, 68, 68, 0.15); }
  100% { background: rgba(239, 68, 68, 0); }
}

.crack-flash {
  animation: crack-flash 0.4s ease-in-out;
}

/* ============================================================
   CORRECT FLASH
   ============================================================ */

@keyframes correct-flash {
  0% { background: rgba(34, 197, 94, 0); }
  20% { background: rgba(34, 197, 94, 0.12); }
  100% { background: rgba(34, 197, 94, 0); }
}

.correct-flash {
  animation: correct-flash 0.4s ease-in-out;
}

/* ============================================================
   STAR APPEAR
   ============================================================ */

@keyframes star-pop {
  0% { transform: scale(0) rotate(-45deg); opacity: 0; }
  70% { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

.star-icon {
  display: inline-block;
  font-size: 36px;
  opacity: 0;
}

.star-icon.appear {
  animation: star-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.star-icon.appear-delay-1 { animation-delay: 0.1s; }
.star-icon.appear-delay-2 { animation-delay: 0.25s; }
.star-icon.appear-delay-3 { animation-delay: 0.4s; }

/* ============================================================
   STREAK BANNER ANIMATION
   ============================================================ */

@keyframes streak-enter {
  from { transform: translateX(-50%) translateY(-100%); }
  to { transform: translateX(-50%) translateY(0); }
}

@keyframes streak-exit {
  from { transform: translateX(-50%) translateY(0); opacity: 1; }
  to { transform: translateX(-50%) translateY(-120%); opacity: 0; }
}

.streak-banner.entering {
  animation: streak-enter 0.3s ease forwards;
}

.streak-banner.exiting {
  animation: streak-exit 0.3s ease forwards;
}

/* ============================================================
   BUTTON RIPPLE
   ============================================================ */

@keyframes btn-ripple {
  from { transform: scale(0.95); opacity: 0.6; }
  to { transform: scale(1); opacity: 1; }
}

.btn:active {
  animation: btn-ripple 0.1s ease;
}

/* ============================================================
   XP GAIN FLOAT
   ============================================================ */

@keyframes xp-float {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-60px); opacity: 0; }
}

.xp-float-label {
  position: fixed;
  font-family: var(--font-pixel);
  font-size: 11px;
  color: #22c55e;
  text-shadow: 0 0 10px #22c55e;
  pointer-events: none;
  z-index: 300;
  animation: xp-float 1.2s ease-out forwards;
}

/* ============================================================
   CODE BLOCK TYPING
   ============================================================ */

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.code-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  vertical-align: text-bottom;
  animation: cursor-blink 1s infinite;
}

/* ============================================================
   NAME BINDING PAIR FLASH
   ============================================================ */

@keyframes pair-correct {
  0% { background: rgba(34, 197, 94, 0.3); }
  100% { background: rgba(34, 197, 94, 0.08); }
}

@keyframes pair-wrong {
  0% { background: rgba(239, 68, 68, 0.3); }
  100% { background: rgba(239, 68, 68, 0.0); }
}

.pair-correct-flash {
  animation: pair-correct 0.6s ease forwards;
}

.pair-wrong-flash {
  animation: pair-wrong 0.6s ease forwards;
}

/* ============================================================
   BOSS NODE SPECIAL GLOW
   ============================================================ */

@keyframes boss-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4), 0 0 20px rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.7), 0 0 40px rgba(239, 68, 68, 0.3);
  }
}

.encounter-boss.encounter-available {
  animation: boss-glow 2s ease-in-out infinite;
}

/* ============================================================
   OPTION BUTTON SELECTED STATE
   ============================================================ */

@keyframes option-select {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.option-btn.selected {
  animation: option-select 0.15s ease;
}