/* Conexia — Micro-interacciones Round 2
   - Hero spotlight (mouse-follow gradient)
   - Magnetic buttons
   - Scroll reveal stagger
   Cargar DESPUÉS de cx-fx.css */

/* ════════════ HERO SPOTLIGHT ════════════ */
/* Gradient radial sutil siguiendo el cursor.
   El JS define --mx y --my en heros marcados.
   Stack: behind content, above page bg. */
.cx-mx-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 350ms ease;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(47, 107, 255, 0.12),
    rgba(14, 165, 233, 0.06) 30%,
    transparent 65%
  );
  /* Bleed full-viewport */
  left: 50%;
  top: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100%;
  transform: translateX(-50%);
}
.cx-mx-spotlight.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cx-mx-spotlight { display: none; }
}
@media (hover: none), (pointer: coarse) {
  /* Mobile/touch: no spotlight (no hay cursor) */
  .cx-mx-spotlight { display: none; }
}

/* ════════════ MAGNETIC BUTTONS ════════════ */
/* Los botones con cx-mx-magnetic siguen sutilmente el cursor.
   El JS aplica transforms en hover. */
.cx-mx-magnetic {
  transition: transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.cx-mx-magnetic:not(:hover) {
  transform: translate(0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .cx-mx-magnetic { transition: none !important; transform: none !important; }
}
@media (hover: none), (pointer: coarse) {
  .cx-mx-magnetic { transition: none !important; transform: none !important; }
}

/* ════════════ SCROLL REVEAL ════════════ */
/* Elementos con cx-mx-reveal entran con fade + slide cuando aparecen en viewport.
   JS añade .is-in al cruzar el threshold. */
.cx-mx-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.cx-mx-reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger: el JS aplica un delay según el índice. Variantes CSS para los primeros 8: */
.cx-mx-reveal[data-mx-delay="1"] { transition-delay: 60ms; }
.cx-mx-reveal[data-mx-delay="2"] { transition-delay: 120ms; }
.cx-mx-reveal[data-mx-delay="3"] { transition-delay: 180ms; }
.cx-mx-reveal[data-mx-delay="4"] { transition-delay: 240ms; }
.cx-mx-reveal[data-mx-delay="5"] { transition-delay: 300ms; }
.cx-mx-reveal[data-mx-delay="6"] { transition-delay: 360ms; }
.cx-mx-reveal[data-mx-delay="7"] { transition-delay: 420ms; }
.cx-mx-reveal[data-mx-delay="8"] { transition-delay: 480ms; }

@media (prefers-reduced-motion: reduce) {
  .cx-mx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}