/*
 * fx-cursor: cursor autoral sobre fotos full-bleed. js/fx-cursor.js soma
 * .fx-cursor-on em <html> só enquanto o mouse (hover:hover + pointer:fine)
 * está sobre o alvo — sem JS, o cursor padrão do sistema nunca é escondido.
 */
.fx-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid var(--gold, #a88c58);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0);
  transition: opacity .2s ease, transform .12s ease-out;
}

@media (hover:hover) and (pointer:fine) {
  html.fx-cursor-on,
  html.fx-cursor-on .page-hero-media,
  html.fx-cursor-on .hero-picture,
  html.fx-cursor-on .gold-frame,
  html.fx-cursor-on .artwork-window {
    cursor: none;
  }

  html.fx-cursor-on .fx-cursor {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce), (hover:none), (pointer:coarse) {
  .fx-cursor {
    display: none;
  }
}