/* css/animations.css - Animaciones heráldicas y reactivas */

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.4));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(251, 191, 36, 0.8));
    transform: scale(1.03);
  }
}

@keyframes gem-float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes float-subtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes crown-shine {
  0% {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 25px rgba(254, 240, 138, 1)) brightness(1.2);
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
  }
}

@keyframes score-bump {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.25);
    color: #34d399;
    text-shadow: 0 0 20px #34d399;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes score-bump-down {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.2);
    color: #f87171;
    text-shadow: 0 0 20px #f87171;
  }
  100% {
    transform: scale(1);
  }
}

@keyframes banner-wave {
  0%, 100% {
    transform: perspective(600px) rotateY(0deg);
  }
  50% {
    transform: perspective(600px) rotateY(3deg);
  }
}

@keyframes ticker-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes book-shelf-fill {
  from {
    width: 0%;
  }
  to {
    width: var(--target-width, 100%);
  }
}

/* Clases de utilidad de animación */
.animate-glow {
  animation: pulse-glow 3s infinite ease-in-out;
}

.animate-float {
  animation: float-subtle 4s infinite ease-in-out;
}

.animate-crown {
  animation: crown-shine 2.5s infinite ease-in-out;
}

.score-changed-up {
  animation: score-bump 0.8s ease-out;
}

.score-changed-down {
  animation: score-bump-down 0.8s ease-out;
}

.house-banner-wave {
  animation: banner-wave 6s infinite ease-in-out;
}