/* Professional Animations CSS */

/* Keyframes - Efectos de Entrada */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}

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

@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-50px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-180deg) scale(0.8); }
  to { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes flipIn {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0deg); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Keyframes - Animaciones de Texto */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  50% { border-color: transparent; }
}

@keyframes textGlow {
  0%, 100% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
  50% { text-shadow: 0 0 20px currentColor, 0 0 30px currentColor, 0 0 40px currentColor; }
}

@keyframes textPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Keyframes - Efectos Especiales */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

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

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-5deg); }
  30% { transform: rotate(3deg); }
  45% { transform: rotate(-2deg); }
  60% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

@keyframes rubberBand {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}

/* Clases de Animación - Efectos de Entrada */
.fade-in { animation: fadeIn 1s ease-out forwards; }
.slide-in-left { animation: slideInLeft 1s ease-out forwards; }
.slide-in-right { animation: slideInRight 1s ease-out forwards; }
.slide-in-up { animation: slideInUp 1s ease-out forwards; }
.slide-in-down { animation: slideInDown 1s ease-out forwards; }
.scale-in { animation: scaleIn 0.8s ease-out forwards; }
.bounce-in { animation: bounceIn 1.2s ease-out forwards; }
.rotate-in { animation: rotateIn 1s ease-out forwards; }
.flip-in { animation: flipIn 0.8s ease-out forwards; }
.zoom-in { animation: zoomIn 0.6s ease-out forwards; }

/* Clases de Animación - Texto */
.typewriter {
  overflow: hidden;
  border-right: 2px solid currentColor;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.1em;
  animation: typewriter 3s steps(40, end), blink 0.75s step-end infinite;
}

.text-glow { animation: textGlow 2s ease-in-out infinite; }
.text-pulse { animation: textPulse 2s ease-in-out infinite; }

/* Clases de Animación - Efectos Especiales */
.float { animation: float 3s ease-in-out infinite; }
.pulse { animation: pulse 2s ease-in-out infinite; }
.shake { animation: shake 1s ease-in-out; }
.wobble { animation: wobble 1s ease-in-out; }
.heartbeat { animation: heartbeat 1.5s ease-in-out infinite; }
.rubber-band { animation: rubberBand 1s ease-in-out; }

/* Efectos Hover */
.hover-float:hover { animation: float 1s ease-in-out infinite; }
.hover-pulse:hover { animation: pulse 1s ease-in-out infinite; }
.hover-bounce:hover { animation: bounceIn 0.6s ease-out; }
.hover-shake:hover { animation: shake 0.5s ease-in-out; }

/* Modificadores de Retraso */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-1000 { animation-delay: 1s; }

.animation-duration-fast { animation-duration: 0.5s; }
.animation-duration-normal { animation-duration: 1s; }
.animation-duration-slow { animation-duration: 2s; }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}