@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px); 
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(100px) scale(0.7) rotate(-10deg);
    filter: blur(15px);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-10px) scale(1.1) rotate(5deg);
    filter: blur(5px);
  }
  70% {
    opacity: 0.9;
    transform: translateY(0) scale(0.95) rotate(-2deg);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

/* Animación de desplazamiento del texto */
@keyframes scroll {
  0% {
    transform: translateX(100%); /* El texto comienza fuera de la vista por la derecha */
  }
  33% {
    transform: translateX(0); /* El texto estará completamente visible */
  }
  66% {
    transform: translateX(-100%); /* El texto se moverá hacia la izquierda, fuera de la vista */
  }
  100% {
    transform: translateX(100%); /* El texto reaparece por la derecha */
  }
}

@keyframes shake {
  0% {
    transform: translateX(0) scale(1); 
    box-shadow: 0 0 10px rgba(212, 172, 75, 0.6); 
    filter: brightness(1); 
  }
  25% {
    transform: translateX(-15px) rotate(-5deg) scale(1.2); 
    box-shadow: 0 0 20px rgba(212, 172, 75, 1), 0 0 40px rgba(212, 172, 75, 0.6); 
    filter: brightness(1.3); 
  }
  50% {
    transform: translateX(15px) rotate(5deg) scale(1.2); 
    box-shadow: 0 0 20px rgba(212, 172, 75, 1), 0 0 40px rgba(212, 172, 75, 0.6);
    filter: brightness(1.3); 
  }
  75% {
    transform: translateX(-10px) rotate(-3deg) scale(1.15); 
    box-shadow: 0 0 15px rgba(212, 172, 75, 0.8); 
    filter: brightness(1.2);
  }
  100% {
    transform: translateX(0) scale(1); 
    box-shadow: 0 0 10px rgba(212, 172, 75, 0.6); 
    filter: brightness(1); 
  }
}

.btn.shake {
  animation: shake 1s ease-in-out infinite; 
}

.fade-in {
  opacity: 0;
  transform: translateY(30px); 
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.animated-element {
  animation: fadeIn 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  display: inline-block;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: #d4ac4b;
}