/* ============================================================
   ANIMATIONS CSS — RM Solutions Mx
   Keyframes y clases de animación para toda la plataforma.
   Estilo Apple-like: limpio, rápido y elegante.
   ============================================================ */

/* ---- Keyframes Principales ---- */

/* Trazado de líneas del logotipo SVG */
@keyframes strokeDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* Aparición con desplazamiento hacia arriba */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aparición simple */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Aparición con desplazamiento desde la derecha */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Escala sutil */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Pulso del indicador de scroll */
@keyframes scrollPulse {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.3;
    transform: scaleY(0.6);
    transform-origin: top;
  }
}

/* Rotación suave para loading */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Clases de Animación Reutilizables ---- */

/* Estado inicial: invisible y desplazado */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

/* Estado activo: visible y en posición */
.animate-on-scroll--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variantes de dirección */
.animate-on-scroll--left {
  transform: translateX(-30px);
}

.animate-on-scroll--left.animate-on-scroll--visible {
  transform: translateX(0);
}

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

.animate-on-scroll--right.animate-on-scroll--visible {
  transform: translateX(0);
}

.animate-on-scroll--scale {
  transform: scale(0.95);
}

.animate-on-scroll--scale.animate-on-scroll--visible {
  transform: scale(1);
}

/* ---- Retrasos escalonados para grids ---- */
.stagger-1 { transition-delay: 0.05s; }
.stagger-2 { transition-delay: 0.1s; }
.stagger-3 { transition-delay: 0.15s; }
.stagger-4 { transition-delay: 0.2s; }
.stagger-5 { transition-delay: 0.25s; }
.stagger-6 { transition-delay: 0.3s; }
.stagger-7 { transition-delay: 0.35s; }
.stagger-8 { transition-delay: 0.4s; }
.stagger-9 { transition-delay: 0.45s; }

/* ---- Animación de loading spinner ---- */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-text);
  border-radius: var(--border-radius-full);
  animation: spin 0.6s linear infinite;
}

/* ---- Preferencia de movimiento reducido ---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .hero__logo svg path,
  .hero__logo svg line,
  .hero__logo svg polyline,
  .hero__logo svg polygon,
  .hero__logo svg rect {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none;
  }
}