/* interactive.css — capa GLOBAL de interactividad (js/interactive.js).
   Solo da movimiento/respuesta al puntero sobre el contenido ya existente:
   tilt 3D, glow que sigue al cursor, parallax del hero y botones magnéticos.
   NO cambia ni agrega información. Mejora progresiva + respeta reduced-motion. */

/* ---- Tilt 3D + glow que sigue al puntero (data-tilt) ----
   Incluye opacity en la transición para no pisar el fade del [data-reveal]
   cuando un elemento es a la vez revelable y tilteable (tarjetas de contacto). */
[data-tilt]{
  position:relative;
  will-change:transform;
  transition:transform .35s var(--ease), opacity .6s var(--ease);
}
[data-tilt].is-tilting{transition:transform .08s linear}
[data-tilt]::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%), rgba(79,124,255,.18), transparent 70%);
  opacity:0;
  transition:opacity .3s var(--ease);
}
[data-tilt].is-lit::after{opacity:1}

/* ---- Glow simple, sin tilt (data-glow) ---- */
[data-glow]{position:relative}
[data-glow]::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(320px 320px at var(--mx,50%) var(--my,50%), rgba(79,124,255,.15), transparent 70%);
  opacity:0;
  transition:opacity .35s var(--ease);
}
[data-glow].is-lit::after{opacity:1}

/* ---- Botones magnéticos (data-magnetic) ---- */
[data-magnetic]{will-change:transform}

/* ---- Parallax del hero (data-parallax) — solo con puntero fino ----
   Usa la propiedad independiente `translate` (no `transform`) para que conviva
   con el `transform` del [data-reveal] sin pisarse. Sin transición: seguimiento
   inmediato del puntero (el retorno es un desplazamiento mínimo). */
@media (hover:hover) and (pointer:fine){
  [data-parallax]{will-change:translate}
}

@media (prefers-reduced-motion:reduce){
  [data-tilt],[data-glow],[data-magnetic],[data-parallax]{transform:none !important;translate:none !important}
  [data-tilt]::after,[data-glow]::after{display:none}
}