/**
 * Hirakata — fondo de página reactivo al hover de imágenes.
 * Reutiliza --page-bg / --page-fg (mismas vars que el home slider).
 * Aplica en todo el sitio salvo el home, que usa su propia mecánica por scroll.
 */
:root {
  --page-bg: #FFFFFF;
  --page-fg: #000000;
  --hk-hover-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Salida (vuelta a blanco) más larga que la entrada: el ojo percibe la subida
     a blanco como más abrupta que la bajada al color con la misma duración. */
  --hk-hover-dur: 700ms;
}

/* hk-hover-on la pone el JS mientras hay una imagen bajo el cursor. */
body.hk-hover-on {
  --hk-hover-dur: 450ms;
}

/* La clase la agrega image-hover-bg.js (no en el home, no si reduced-motion sin JS). */
body.hk-hover-active {
  background-color: var(--page-bg);
  transition: background-color var(--hk-hover-dur) var(--hk-hover-ease);
}

/* Sugerencia visual de que la imagen es interactiva. */
body.hk-hover-active [data-hk-hover-bg] {
  cursor: pointer;
}

/* Superficies con fondo blanco propio que taparían el cambio de fondo del
   body: el header sticky, las secciones del home, la sección del archive de
   /proyectos/ (#brxe-721e6c, fondo #FFFFFF) y los slides de carruseles.
   Con el hover activo siguen el color de página con la misma transición. */
body.hk-hover-active #brxe-abe5ee,
body.hk-hover-active #brxe-7da31d,
body.hk-hover-active #brxe-901870,
body.hk-hover-active #brxe-721e6c,
body.hk-hover-active .splide__slide {
  background-color: var(--page-bg);
  transition: background-color var(--hk-hover-dur) var(--hk-hover-ease);
}

@media (prefers-reduced-motion: reduce) {
  body.hk-hover-active {
    transition: none;
  }
}