/* Cursore circolare (6/11): un anello al posto del puntatore, solo col mouse. Logica in js/cursore.js, mappa (di tutti e due) in js/cursore.md.
 * Lo stato lo sceglie il JS e lo scrive in data-stato: riposo, link, apri, vedi, vai, trascina, testo
 * (regola in progetto/brand/scelte/cursore.md). */

html.cursore-attivo, html.cursore-attivo * { cursor: none !important; }

.cursore {
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  position: fixed; left: 0; top: 0; z-index: 2147483000;
  width: 0; height: 0; pointer-events: none;
  opacity: 0; transition: opacity 160ms ease;
}
html.cursore-attivo .cursore.is-dentro { opacity: 1; }

.cursore__anello {
  position: absolute; left: 0; top: 0;
  width: var(--d, 28px); height: var(--d, 28px);
  translate: -50% -50%;
  border-radius: 50%;
  display: grid; place-items: center;
  /* filo osso + un'ombra scura di un pixel: si legge anche sopra le foto chiare */
  box-shadow: inset 0 0 0 1px var(--anello, var(--osso)), 0 0 0 1px rgb(6 5 6 / 0.3), var(--alone, 0 0 0 transparent);
  background-color: var(--riempi, transparent);
  transition: width 240ms var(--curva), height 240ms var(--curva), background-color 180ms ease, box-shadow 180ms ease, scale 120ms ease-out;
}
.cursore__testo {
  font: 500 10px/1 var(--font-dato); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--testo, var(--vuoto)); text-shadow: var(--ombra-testo, none); opacity: 0; transition: opacity 140ms ease; white-space: nowrap;
}

.cursore[data-stato="link"]     { --d: 40px; --anello: var(--scintilla); --riempi: rgb(255 241 230 / 0.08); }
/* le tre funzioni con la parola, dalla più debole: la stessa luce (scintilla) sempre più piena. Il malva resta a trascina */
.cursore[data-stato="apri"]     { --d: 60px; --anello: var(--scintilla); --testo: var(--scintilla); --ombra-testo: 0 0 6px rgb(6 5 6 / 0.8); }
.cursore[data-stato="vedi"]     { --d: 60px; --anello: var(--scintilla); --riempi: rgb(255 241 230 / 0.18); --testo: var(--scintilla); --ombra-testo: 0 0 6px rgb(6 5 6 / 0.8); --alone: 0 0 24px rgba(255, 241, 230, 0.16); }
.cursore[data-stato="vai"]      { --d: 64px; --anello: transparent; --riempi: var(--scintilla); --testo: var(--vuoto); --alone: 0 0 24px rgba(255, 241, 230, 0.22); }
.cursore:is([data-stato="vai"], [data-stato="vedi"], [data-stato="apri"]) .cursore__testo { opacity: 1; }
.cursore[data-stato="trascina"] { --d: 56px; --anello: var(--malva); }
.cursore[data-stato="testo"]    { --d: 6px;  --anello: transparent; --riempi: var(--osso); }
.cursore.is-premuto .cursore__anello { scale: 0.88; }

/* cuscino della tappa (solo home): l'arco si riempie coi colpi di rotella, chiuso = la tappa si lascia */
.cursore__arco {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
  rotate: -90deg; overflow: visible; opacity: 0; transition: opacity 200ms ease;
}
.cursore__arco circle { fill: none; }
.cursore__arco .fondo { stroke: var(--polvere-900); stroke-width: 1; }
.cursore__arco .pieno { stroke: var(--scia); stroke-width: 1.5; stroke-dasharray: 169.65; stroke-dashoffset: 169.65; }
.cursore.is-preme .cursore__arco { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cursore__anello { transition: background-color 180ms ease, box-shadow 180ms ease; }
}