/* ============================================================
   INDAGO Labs — Animations CSS
   Animaciones y transiciones del sitio
   ============================================================ */

/* ============================================================
   AOS — Configuración de overrides
   ============================================================ */
[data-aos] {
  pointer-events: none;
}
[data-aos].aos-animate {
  pointer-events: auto;
}

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

/* Fade Up — Para elementos de sección */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In — Simple */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Scale In — Para stats y números */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Left */
@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide Right */
@keyframes slide-right {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Pulse suave — Para botones de urgencia */
@keyframes pulse-subtle {
  0%, 100% { box-shadow: 0 4px 14px rgba(217,119,6,0.35); }
  50%       { box-shadow: 0 4px 24px rgba(217,119,6,0.55); }
}

.pulse-subtle {
  animation: pulse-subtle 2.5s ease-in-out infinite;
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Timeline node pulse — Al revelar una fase */
@keyframes node-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Checkmark draw — Success en formulario */
@keyframes check-draw {
  from { stroke-dashoffset: 40; }
  to   { stroke-dashoffset: 0; }
}

/* ============================================================
   CLASES DE ANIMACIÓN
   ============================================================ */
.animate-fade-up {
  animation: fade-up 0.6s var(--ease-out) both;
}

.animate-fade-in {
  animation: fade-in 0.4s ease both;
}

/* Delays para stagger */
.delay-100 { animation-delay: 0.10s; }
.delay-150 { animation-delay: 0.15s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }

/* ============================================================
   HOVER TRANSITIONS REFINADAS
   ============================================================ */

/* Link con arrow que se mueve */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--blue-primary);
  text-decoration: none;
  transition: gap var(--duration-base) var(--ease-out),
              color var(--duration-fast) ease;
}
.link-arrow:hover {
  color: var(--blue-hover);
  gap: var(--space-3);
}
.link-arrow svg {
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}
.link-arrow:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   LOADING SPINNER (para form submit)
   ============================================================ */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}

/* ============================================================
   SUCCESS CHECK (formulario enviado)
   ============================================================ */
.success-check {
  width: 56px;
  height: 56px;
  background: var(--green-light);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.success-check svg .checkmark {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: check-draw 0.5s var(--ease-out) 0.2s both;
}