/* ════════════════════════════════════════════════════
   NEXT PLAY — interactions.css
   Estilos de la capa de ratón (ver js/interactions.js).

   Todo lo de aquí es opcional por diseño: los valores por
   defecto de las variables dejan la web en su estado normal,
   así que si el JS no llega a ejecutarse no se nota nada.
   ════════════════════════════════════════════════════ */

/* ═══ Foco de luz que sigue al cursor ═══
   Un único elemento fijo que solo cambia de posición por variables:
   no provoca reflow y no intercepta clics. Se enciende únicamente
   sobre las secciones oscuras (lo activa el IntersectionObserver). */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 3;
  width: 44rem; height: 44rem; margin: -22rem 0 0 -22rem;
  translate: var(--gx, 50vw) var(--gy, 50vh);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side,
              rgba(198,241,63,.10), rgba(198,241,63,.04) 42%, transparent 72%);
  opacity: 0; transition: opacity .5s ease;
  mix-blend-mode: screen;
}
.cursor-glow.on { opacity: 1; }

/* ═══ Sombra del producto del hero ═══
   El desplazamiento lo escribe el JS (--sx / --sy) siguiendo al cursor.
   El transform lo gestiona GSAP, aquí solo se toca la sombra. */
.prod {
  box-shadow:
    var(--sx, 0px) var(--sy, 28px) 60px rgba(16,16,18,.34),
    0 0 0 1px rgba(16,16,18,.05);
  transition: box-shadow .35s ease-out;
}

/* ═══ Tilt de los proyectos ═══
   La tarjeta inclina su imagen y una luz la barre siguiendo al cursor.
   Sin JS las variables valen 0 y la tarjeta se ve plana y correcta. */
.case-art {
  transform: perspective(1000px)
             rotateX(var(--tilt-x, 0deg))
             rotateY(var(--tilt-y, 0deg));
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  will-change: transform;
}
.case.tilting .case-art {
  transition: transform .12s linear, box-shadow .5s var(--ease);
  box-shadow: 0 40px 80px rgba(0,0,0,.36);
}
/* Brillo que recorre la pieza según dónde esté el ratón */
.case-art::after {
  content: ''; position: absolute; inset: 0; z-index: 4;
  pointer-events: none; opacity: 0;
  transition: opacity .4s ease;
  background: linear-gradient(105deg,
              transparent 0%,
              rgba(255,255,255,.13) calc(var(--sheen-x, 50%) - 14%),
              rgba(255,255,255,.20) var(--sheen-x, 50%),
              rgba(255,255,255,.13) calc(var(--sheen-x, 50%) + 14%),
              transparent 100%);
}
.case.tilting .case-art::after { opacity: 1; }

/* ═══ Botones magnéticos ═══
   El desplazamiento va topado en JS (±10 px), así que el botón se
   acerca al cursor pero nunca se escapa de debajo del puntero. */
.magnetic {
  transform: translate(var(--pull-x, 0px), var(--pull-y, 0px));
  transition: transform .1s linear, background-color .3s ease, color .3s ease;
}

/* ═══ Cortafuegos ═══
   En táctil y con movimiento reducido nada de esto debe quedar activo,
   aunque el JS ya no lo monte: así una caché antigua tampoco molesta. */
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
  .case-art { transform: none; }
  .magnetic { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-glow { display: none; }
  .case-art { transform: none; transition: none; }
  .case-art::after { display: none; }
  .magnetic { transform: none; transition: none; }
  .prod { transition: none; }
}