/* ========================================
   EMOTIONIART - ANIMATIONS.CSS
   Animaciones Avanzadas y Efectos
   ======================================== */

/* ===== ANIMACIONES DE ENTRADA ===== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

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

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

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

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

/* ===== ANIMACIONES DE ESCALA ===== */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInUp {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes scaleOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

/* ===== ANIMACIONES DE FLOTACIÓN ===== */
@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-15px) rotate(2deg);
  }
}

@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes floatHorizontal {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

/* ===== ANIMACIONES DE PULSO Y DESTELLO ===== */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 180, 255, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(0, 180, 255, 0);
  }
}

@keyframes pulseSecondary {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 64, 129, 0.4);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 15px rgba(255, 64, 129, 0);
  }
}

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

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0.3;
  }
}

/* ===== ANIMACIONES DE GIRO Y ROTACIÓN ===== */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateReverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinSlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

/* ===== ANIMACIONES DE REBOTE ===== */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

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

@keyframes bounceOut {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(0.3);
  }
}

/* ===== ANIMACIONES DE GLITCH ===== */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}

@keyframes glitchColor {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* ===== ANIMACIONES DE TEXTO ===== */
@keyframes textGlow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(0, 180, 255, 0.5),
                 0 0 20px rgba(0, 180, 255, 0.3),
                 0 0 30px rgba(0, 180, 255, 0.2);
  }
  50% {
    text-shadow: 0 0 20px rgba(0, 180, 255, 0.8),
                 0 0 40px rgba(0, 180, 255, 0.6),
                 0 0 60px rgba(0, 180, 255, 0.4);
  }
}

@keyframes textSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes textTyping {
  from { width: 0; }
  to { width: 100%; }
}

/* ===== ANIMACIONES DE DEGRADADO ===== */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gradientRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== ANIMACIONES DE PARTÍCULAS ===== */
@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 1;
  }
  50% {
    transform: translateY(-50px) translateX(20px);
    opacity: 0.5;
  }
}

@keyframes particleDrift {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(5px, 15px);
  }
  50% {
    transform: translate(15px, 5px);
  }
  75% {
    transform: translate(5px, -15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ===== ANIMACIONES DE CARD HOVER ===== */
@keyframes cardHover {
  0% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }
  100% {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  }
}

@keyframes cardShine {
  0% {
    background-position: -500% 0;
  }
  100% {
    background-position: 500% 0;
  }
}

/* ===== ANIMACIONES DE BOTÓN ===== */
@keyframes buttonShine {
  0% {
    background-position: -500% 0;
  }
  100% {
    background-position: 500% 0;
  }
}

@keyframes buttonRipple {
  0% {
    transform: scale(0);
    opacity: 0.5;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

/* ===== ANIMACIONES DE ICONOS ===== */
@keyframes iconBounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

@keyframes iconWiggle {
  0%, 7% { transform: rotateZ(0); }
  15% { transform: rotateZ(-5deg); }
  20% { transform: rotateZ(4deg); }
  25% { transform: rotateZ(-4deg); }
  30% { transform: rotateZ(3deg); }
  35% { transform: rotateZ(-3deg); }
  40% { transform: rotateZ(2deg); }
  45% { transform: rotateZ(-2deg); }
  50% { transform: rotateZ(1deg); }
  55% { transform: rotateZ(-1deg); }
  60%, 100% { transform: rotateZ(0); }
}

/* ===== CLASES UTILITARIAS DE ANIMACIÓN ===== */
.animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
.animate-fade-in-down { animation: fadeInDown 0.8s ease-out forwards; }
.animate-fade-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
.animate-fade-in-right { animation: fadeInRight 0.8s ease-out forwards; }
.animate-slide-in-up { animation: slideInUp 0.8s ease-out forwards; }
.animate-slide-in-down { animation: slideInDown 0.8s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease-out forwards; }
.animate-scale-in-up { animation: scaleInUp 0.8s ease-out forwards; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-float-subtle { animation: floatSubtle 3s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s infinite; }
.animate-pulse-slow { animation: pulseSlow 3s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }
.animate-bounce-in { animation: bounceIn 0.8s ease-out forwards; }
.animate-rotate { animation: rotate 2s linear infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-spin-slow { animation: spinSlow 2s ease-in-out infinite; }
.animate-glitch { animation: glitch 0.3s linear infinite; }
.animate-text-glow { animation: textGlow 2s ease-in-out infinite; }
.animate-gradient-shift { animation: gradientShift 3s ease infinite alternate; }

/* ===== ANIMACIONES CON RETRASO ===== */
.animate-delay-100 { animation-delay: 0.1s !important; }
.animate-delay-200 { animation-delay: 0.2s !important; }
.animate-delay-300 { animation-delay: 0.3s !important; }
.animate-delay-400 { animation-delay: 0.4s !important; }
.animate-delay-500 { animation-delay: 0.5s !important; }
.animate-delay-600 { animation-delay: 0.6s !important; }
.animate-delay-700 { animation-delay: 0.7s !important; }
.animate-delay-800 { animation-delay: 0.8s !important; }
.animate-delay-900 { animation-delay: 0.9s !important; }
.animate-delay-1000 { animation-delay: 1s !important; }

/* ===== ANIMACIONES EN HOVER ===== */
.hover-scale:hover { transform: scale(1.05); transition: transform 0.3s ease; }
.hover-rotate:hover { transform: rotate(5deg); transition: transform 0.3s ease; }
.hover-lift:hover { transform: translateY(-5px); transition: transform 0.3s ease; }
.hover-glow:hover { box-shadow: 0 0 30px rgba(0, 180, 255, 0.6); transition: box-shadow 0.3s ease; }

/* ===== ANIMACIONES DE SCROLL ===== */
.scroll-reveal { opacity: 0; transform: translateY(30px); }
.scroll-reveal.visible { opacity: 1; transform: translateY(0); animation: fadeInUp 0.8s ease-out forwards; }

/* ===== ANIMACIONES DE CARGA ===== */
@keyframes loadingDots {
  0%, 20% { opacity: 0; }
  40% { opacity: 1; }
  60%, 100% { opacity: 0; }
}

.loading-dot { animation: loadingDots 1.4s infinite both; }
.loading-dot:nth-child(1) { animation-delay: 0s; }
.loading-dot:nth-child(2) { animation-delay: 0.2s; }
.loading-dot:nth-child(3) { animation-delay: 0.4s; }

/* ===== ANIMACIONES DE TRANSICIÓN DE PÁGINA ===== */
@keyframes pageTransitionIn {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pageTransitionOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.05);
  }
}

.page-transition { animation: pageTransitionIn 0.6s ease-out forwards; }

/* ===== Efecto de Escritura (Typewriter) ===== */
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 100% { border-right-color: transparent; }
  50% { border-right-color: white; }
}

.typewriter {
  overflow: hidden;
  border-right: 3px solid var(--primary);
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

/* ===== Efecto Neon ===== */
@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 5px var(--primary),
                 0 0 10px var(--primary),
                 0 0 20px var(--primary);
  }
  50% {
    text-shadow: 0 0 10px var(--primary),
                 0 0 20px var(--primary),
                 0 0 40px var(--primary),
                 0 0 80px var(--primary);
  }
}

.neon-text { animation: neonPulse 2s ease-in-out infinite; }