/* ==========================================================================
   Gato persiguiendo el láser — estilos del componente
   Solo depende de .cat-laser-root; se puede pegar en cualquier sitio.
   ========================================================================== */

.cat-laser-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* la página sigue siendo usable */
  z-index: 9998;
}

/* --------------------------------------------------------------------------
   EL GATO
   La hoja es una GRILLA de --cat-cols x --cat-rows cuadros (una sola fila
   superaría el límite de textura de las GPU móviles). El JS toma esos dos
   valores del manifiesto.
   --cat-fw / --cat-fh = tamaño EN PANTALLA de un cuadro. Cambiando solo
   --cat-fw se reescala todo (el background-size se deriva con calc()).
   -------------------------------------------------------------------------- */
.cat-laser-cat {
  --cat-fw: 120px;
  --cat-fh: 132px; /* 120 * (220/200) */
  --cat-cols: 10;  /* columnas de la grilla; el JS lo toma del manifiesto */
  --cat-rows: 1;

  position: absolute;
  top: 0;
  left: 0;
  width: var(--cat-fw);
  height: var(--cat-fh);

  background-image: -webkit-image-set(
    url('assets/cat-sprites.png') 1x,
    url('assets/cat-sprites@2x.png') 2x
  );
  background-image: image-set(
    url('assets/cat-sprites.png') 1x,
    url('assets/cat-sprites@2x.png') 2x
  );
  background-repeat: no-repeat;
  background-size: calc(var(--cat-fw) * var(--cat-cols))
                   calc(var(--cat-fh) * var(--cat-rows));
  background-position: 0 0;

  transform-origin: 50% 85%; /* pivota cerca de las patas, no del centro */
  will-change: transform, background-position;

  /* SIN transition en transform: el rAF ya escribe cada cuadro y una
     transition compite con él (produce arrastre y retraso perceptible). */

  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}

/* --------------------------------------------------------------------------
   EL PUNTO LÁSER
   -------------------------------------------------------------------------- */
.cat-laser-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px; /* centrado real sobre el punto */
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    #fff 0%,
    #ff5a5a 35%,
    #e01b1b 60%,
    rgba(224, 27, 27, 0) 72%
  );
  box-shadow:
    0 0 10px 3px rgba(255, 40, 40, 0.75),
    0 0 26px 10px rgba(255, 40, 40, 0.35);
  will-change: transform;
}

.cat-laser-dot::after {
  /* halo suave que respira */
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 60, 60, 0.28) 0%, rgba(255, 60, 60, 0) 70%);
  animation: catLaserPulse 1.6s ease-in-out infinite;
}

@keyframes catLaserPulse {
  0%, 100% { transform: scale(1);   opacity: 0.85; }
  50%      { transform: scale(1.5); opacity: 0.35; }
}

/* --------------------------------------------------------------------------
   ACCESIBILIDAD
   Si el usuario pidió menos movimiento, se apaga por completo.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cat-laser-root { display: none; }
}