/* cursor.css — le look du curseur custom. Variables surchageables par site (--cz-accent, --cz-ring-size). */
:root {
  --cz-accent: #d8ff3e;        /* couleur du point (mettre la couleur d'accent du site) */
  --cz-ring: 38px;             /* diamètre de l'anneau au repos */
  --cz-dot: 7px;               /* diamètre du point */
}

/* on masque le curseur natif SEULEMENT quand le custom est actif (jamais sur tactile/reduced-motion) */
html.cz-on, html.cz-on * { cursor: none !important; }

.cz-dot, .cz-ring {
  position: fixed; top: 0; left: 0; z-index: 2147483647; pointer-events: none;
  margin-left: calc(var(--cz-dot) / -2); margin-top: calc(var(--cz-dot) / -2);
  will-change: transform; transition: opacity .25s ease;
}
.cz-dot {
  width: var(--cz-dot); height: var(--cz-dot); border-radius: 50%;
  background: var(--cz-accent);
  /* difference = le point INVERSE le fond → lisible sur clair ET sombre (le truc « premium ») */
  mix-blend-mode: difference;
}
.cz-ring {
  width: var(--cz-ring); height: var(--cz-ring); border-radius: 50%;
  margin-left: calc(var(--cz-ring) / -2); margin-top: calc(var(--cz-ring) / -2);
  border: 1.5px solid color-mix(in srgb, var(--cz-accent) 70%, transparent);
  mix-blend-mode: difference;
  display: grid; place-items: center;
  transition: width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1),
              background .3s ease, border-color .3s ease, opacity .25s ease;
}
.cz-label {
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: .04em; text-transform: uppercase;
  color: #000; opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}

/* survol d'un lien / bouton / [data-cursor] : l'anneau gonfle et se remplit */
html.cz-hover .cz-ring {
  width: calc(var(--cz-ring) * 1.7); height: calc(var(--cz-ring) * 1.7);
  background: var(--cz-accent); border-color: var(--cz-accent);
}
html.cz-hover .cz-dot { opacity: 0; }            /* le point s'efface, l'anneau prend le relais */
html.cz-haslabel .cz-ring {
  width: auto; height: auto; min-width: calc(var(--cz-ring) * 1.7); min-height: calc(var(--cz-ring) * 1.7);
  padding: 12px 16px; border-radius: 999px;
}
html.cz-haslabel .cz-label { opacity: 1; transform: scale(1); }

/* clic : petit feedback de compression */
html.cz-down .cz-ring { transform: translate(var(--x,0), var(--y,0)) scale(.82); }