/* ==========================================================================
   animations.css — Keyframes, clases de animacion, scroll-triggered
   Todas las animaciones respetan prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

/* Aparicion desde abajo con fade */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aparicion desde la izquierda */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Aparicion desde la derecha */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Escala desde pequeno */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Flotacion suave para particulas del hero */
@keyframes float {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-20px) translateX(10px);
  }
  50% {
    transform: translateY(-10px) translateX(-5px);
  }
  75% {
    transform: translateY(-25px) translateX(8px);
  }
}

/* Movimiento lento de orbs del hero */
@keyframes orbMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -20px) scale(1.05);
  }
  50% {
    transform: translate(-15px, 15px) scale(0.95);
  }
  75% {
    transform: translate(20px, 10px) scale(1.02);
  }
}

/* Rotacion continua (para bordes de gradiente conico) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Scroll horizontal infinito para el logo carousel */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Deslizamiento hacia abajo (accordion, menus) */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 500px;
  }
}

/* Crecimiento de linea (timeline) */
@keyframes growLine {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}

/* Pulso suave (indicadores, notificaciones) */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Pulso de brillo (glow pulsante para botones destacados) */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(38, 161, 123, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(38, 161, 123, 0.5), 0 0 60px rgba(98, 126, 234, 0.2);
  }
}

/* Aparicion con rebote suave */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Parpadeo sutil (cursores, indicadores live) */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ==========================================================================
   CLASES DE ANIMACION SCROLL-TRIGGERED
   Funcionan con IntersectionObserver: se anade la clase .visible al entrar
   en el viewport.
   ========================================================================== */

/* Estado inicial: oculto, desplazado hacia abajo */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s var(--ease-out-expo),
    transform 0.6s var(--ease-out-expo);
  will-change: opacity, transform;
}

/* Estado visible: completamente visible, posicion normal */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Variantes de direccion */
.animate-on-scroll--left {
  opacity: 0;
  transform: translateX(-30px);
}

.animate-on-scroll--right {
  opacity: 0;
  transform: translateX(30px);
}

.animate-on-scroll--scale {
  opacity: 0;
  transform: scale(0.9);
}

/* --- Clases de stagger (retraso escalonado) ------------------------------ */
/* Cada .stagger-N anade un retraso incremental para efecto cascada */

.stagger-1 { transition-delay: 100ms; }
.stagger-2 { transition-delay: 200ms; }
.stagger-3 { transition-delay: 300ms; }
.stagger-4 { transition-delay: 400ms; }
.stagger-5 { transition-delay: 500ms; }
.stagger-6 { transition-delay: 600ms; }

/* --- Clases de animacion continua ---------------------------------------- */

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

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-glow {
  animation: glowPulse 3s ease-in-out infinite;
}

.animate-spin {
  animation: spin 8s linear infinite;
}

.animate-spin--slow {
  animation: spin 20s linear infinite;
}

.animate-blink {
  animation: blink 1.5s ease-in-out infinite;
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO — deshabilitar TODAS las animaciones
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  /* Eliminar todas las animaciones */
  .animate-on-scroll,
  .animate-on-scroll--left,
  .animate-on-scroll--right,
  .animate-on-scroll--scale {
    opacity: 1;
    transform: none;
    transition-duration: 0.01ms;
  }

  .animate-float,
  .animate-pulse,
  .animate-glow,
  .animate-spin,
  .animate-spin--slow,
  .animate-blink {
    animation: none;
  }

  .hero__orbs::before,
  .hero__orbs::after {
    animation: none;
  }

  .hero__particle {
    animation: none;
  }

  .logo-carousel__track {
    animation: none;
  }

  .cta-final__button::before {
    animation: none;
  }

  .stagger-1,
  .stagger-2,
  .stagger-3,
  .stagger-4,
  .stagger-5,
  .stagger-6 {
    transition-delay: 0ms;
  }
}