/* ============================================================
   LINUXQUEST - ANIMATIONS.CSS
   ============================================================ */

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

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

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

.glitch::before {
  color: rgba(0, 255, 65, 0.5);
  clip-path: inset(30% 0 50% 0);
  transform: translateX(-2px);
  animation: glitch-before 5s infinite;
}

.glitch::after {
  color: rgba(0, 200, 255, 0.4);
  clip-path: inset(60% 0 20% 0);
  transform: translateX(2px);
  animation: glitch-after 5s infinite;
}

@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(-3px, 1px); }
  95% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
  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(4px, -2px); }
  94% { clip-path: inset(10% 0 70% 0); transform: translate(-4px, 2px); }
  99% { clip-path: inset(0 0 100% 0); transform: translate(0); }
}

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

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

@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 255, 65, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(0, 255, 65, 0); }
}

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

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

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

@keyframes fade-in-scale {
  from { opacity: 0; transform: scale(0.92); }
  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; }

@keyframes screen-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes correct-flash {
  0%   { background: rgba(0, 255, 65, 0); }
  20%  { background: rgba(0, 255, 65, 0.1); }
  100% { background: rgba(0, 255, 65, 0); }
}

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

@keyframes star-pop {
  0%   { transform: scale(0) rotate(-30deg); opacity: 0; }
  70%  { transform: scale(1.2) 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; }

@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; }

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

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

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

.term-cursor {
  display: inline-block;
  width: 8px;
  height: 1em;
  background: #00ff41;
  vertical-align: text-bottom;
  animation: cursor-blink 1s step-end infinite;
  margin-left: 2px;
}

@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; }

@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; }

@keyframes pair-correct {
  0%   { background: rgba(0, 255, 65, 0.3); }
  100% { background: rgba(0, 255, 65, 0.08); }
}

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

/* Scan line overlay for terminal feel */
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}

.hp-fill.danger {
  background: linear-gradient(90deg, #7f1d1d, #dc2626);
  animation: danger-pulse 1s ease-in-out infinite;
}

@keyframes danger-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.hp-fill.critical {
  background: linear-gradient(90deg, #450a0a, #ef4444);
  animation: danger-pulse 0.5s ease-in-out infinite;
}