/* zaxfun — VIÑETAS VIVAS EN LAS TARJETAS (Pieza 2 del acabado premium).
 *
 * El aspecto de lo que monta `js/vinetas.js`. Aquí no hay ni un selector que
 * apunte a algo escrito en el `index.html`: el `<canvas>` lo añade el JS y la
 * clase `.zx-viva` la pone él. Si el JavaScript no llega a correr, esta hoja no
 * cambia nada y la portada es la de siempre, con sus fotos.
 *
 * LA FOTO NO SE VA: se queda debajo. La viñeta se funde encima al apuntar la
 * tarjeta y se retira al salir, así que el estado en reposo —el que ve
 * cualquiera que llega y el que sale en una captura— sigue siendo el `og.png`
 * del juguete, con su título horneado.
 */

.vineta {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Debajo del brillo que cruza (`.juguete-imagen::after`), para que ese
     destello pase también por encima de la escena. */
  z-index: 1;
  opacity: 0;
  /* Se va más despacio de lo que viene: al salir el puntero, un corte seco se
     lee como que la tarjeta se apagó. */
  transition: opacity .34s ease;
  pointer-events: none;
}

.juguete.zx-viva .vineta { opacity: 1; transition-duration: .22s; }

/* La foto de debajo se acerca despacio mientras la escena está encima
   (`acercarse`, en `hub.css`). No se toca: durante el cruce de .22s las dos se
   ven a la vez y el movimiento de las dos capas va en el mismo sentido. */

@media (prefers-reduced-motion: reduce) {
  /* `vinetas.js` ya se sale sin hacer nada —ni siquiera crea el lienzo—, pero
     esto queda de segunda barrera por si alguien cambia el ajuste del sistema
     con la portada abierta. */
  .vineta { display: none; }
}