/*
 * ─────────────────────────────────────────────────────────────────
 *  SINAPSYS — ANIMATIONS
 *  Keyframes, fade-in por scroll, snap-in con stagger,
 *  hero animated background, y @media prefers-reduced-motion.
 * ─────────────────────────────────────────────────────────────────
 */

/* ─── KEYFRAMES ─── */

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

/* Pulso del punto en el eyebrow del hero */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.5); }
}

/* Flotación suave de la neurona decorativa del hero */
@keyframes float {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%       { transform: translateY(-52%) translateX(8px); }
}

/*
 * Gradiente animado del hero — desplaza el background-position a través
 * de un gradiente de 400% × 400% con los 4 colores oficiales de marca.
 */
@keyframes gradientBG {
  0%   { background-position:   0%  50%; }
  50%  { background-position: 100%  50%; }
  100% { background-position:   0%  50%; }
}

/*
 * Gradiente animado de cards y secciones — idéntica mecánica a gradientBG
 * pero con diferentes duraciones por elemento para evitar sincronía visual.
 */
@keyframes gradientCard {
  0%   { background-position:   0%  50%; }
  50%  { background-position: 100%  50%; }
  100% { background-position:   0%  50%; }
}


/* ─── FADE-IN POR SCROLL (IntersectionObserver) ─── */

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─── SNAP-IN CARDS ─── */
/*
 * Cards de Especialidades, Testimonios y Planes usan esta variante:
 * entran desde la izquierda con un easing spring para dar la
 * ilusión de "encajar" en su posición.
 * translateX(-32px): desplazamiento más perceptible y visible.
 * Duración 0.8s: más fluida y elegante, sin resultar lenta.
 */

.snap-card.fade-in {
  transform: translateX(-32px);
}

.snap-card.fade-in.visible {
  transform: translateX(0);
  transition:
    opacity 0.8s var(--ease-spring),
    transform 0.8s var(--ease-spring);
}


/* ─── STAGGER DELAYS — ESPECIALIDADES ─── */
/*
 * Las 6 cards se animan por columnas para reforzar la lectura izq→der.
 * Delays actualizados para coherencia con duración 0.8s.
 */
.services-grid .snap-card:nth-child(1) { transition-delay:   0ms; }
.services-grid .snap-card:nth-child(2) { transition-delay: 100ms; }
.services-grid .snap-card:nth-child(3) { transition-delay: 200ms; }
.services-grid .snap-card:nth-child(4) { transition-delay: 100ms; }
.services-grid .snap-card:nth-child(5) { transition-delay: 200ms; }
.services-grid .snap-card:nth-child(6) { transition-delay: 300ms; }


/* ─── STAGGER DELAYS — TESTIMONIOS ─── */
/*
 * Fila 1 (cards 1-3): escalonado normal.
 * Fila 2 (cards 4-5): reinicia el delay (misma lógica visual).
 */
.testimonials-grid .snap-card:nth-child(1) { transition-delay:   0ms; }
.testimonials-grid .snap-card:nth-child(2) { transition-delay: 110ms; }
.testimonials-grid .snap-card:nth-child(3) { transition-delay: 220ms; }
.testimonials-grid .snap-card:nth-child(4) { transition-delay: 110ms; }
.testimonials-grid .snap-card:nth-child(5) { transition-delay: 220ms; }


/* ─── STAGGER DELAYS — PLANES ─── */
/*
 * Las 3 pricing cards entran en secuencia izq→der.
 */
.pricing-grid .snap-card:nth-child(1) { transition-delay:   0ms; }
.pricing-grid .snap-card:nth-child(2) { transition-delay: 120ms; }
.pricing-grid .snap-card:nth-child(3) { transition-delay: 240ms; }


/* ─── ACCESIBILIDAD: prefers-reduced-motion ─── */
/*
 * Los usuarios que han solicitado reducir el movimiento en su SO
 * reciben solo transiciones de color/opacidad. Todos los transforms
 * y keyframes con movimiento se neutralizan.
 */
@media (prefers-reduced-motion: reduce) {

  /* Entrada de elementos por scroll — solo fade, sin desplazamiento */
  .snap-card.fade-in,
  .fade-in {
    transform: none !important;
    transition: opacity 0.4s ease !important;
  }

  /* Gradiente animado del hero — fijo en posición inicial */
  .hero { animation: none !important; background-position: 0% 50% !important; }

  /* Hover de cards — solo color, sin transformaciones */
  .service-card,
  .testimonial-card,
  .pricing-card,
  .service-icon-wrap,
  .service-tag,
  .t-avatar,
  .about-card-main {
    transition: border-color 0.2s, box-shadow 0.2s !important;
    transform: none !important;
  }

  /* Keyframes con movimiento → deshabilitados */
  @keyframes fadeUp      { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pulse       { 0%, 100% { opacity: 1; } }
  @keyframes float       { 0%, 100% { transform: translateY(-50%); } }
  @keyframes gradientBG  { 0%, 100% { background-position: 0% 50%; } }
  @keyframes gradientCard { 0%, 100% { background-position: 0% 50%; } }
}