/* IL CURSORE — il quadratino di bybang.co, rifatto uguale (chiesto da Francesco il 18/10/2026), con due differenze sue:
   tutto SQUADRATO, tranne il pallino sulle cose che si aprono (chiesto da lui il 18/10) e la posizione 1:1 col mouse (da loro insegue, qui ⛔).
   Col mouse sostituisce SEMPRE il cursore del sistema; col dito non esiste niente.
   Gli stati, che mette src/cursore.js:
   · a riposo            quadrato 16 px bianco in «difference»: sul crema esce nero, sul nero chiaro
   · .cursore--voce      su voci di menu, marchio e bottoni prende la misura della voce e la inverte: è l'evidenziazione
   · .cursore--chiaro    la stessa voce sul fondo chiaro: il riquadro è arancio, ⛔ nero
   · .cursore--rientra   per 300 ms dopo una voce: torna a 16 px senza rimbalzo
   · .cursore--testo     sul testo diventa un'asticella 3×26, il cursore di testo
   · .cursore--foto      sulle foto e sulle voci che si aprono il quadrato diventa un pallino, con la parola sopra («Apri») che sale parola per parola
   · .cursore--apri      sulle foto che si ingrandiscono diventa 34 px coi due triangoli d'angolo, l'icona «ingrandisci»
   · .cursore--info      sulle voci dei servizi diventa un cerchio di 36 px con la «i» dentro: cliccando si saprà di più (Francesco, 19/10/2026)
   Le curve sono le loro, rimbalzo compreso: lo ha chiesto «proprio uguale». */
.cursore{display:none}
@media (hover:hover) and (pointer:fine){
  html.con-cursore,html.con-cursore *{cursor:none!important}
  .cursore{--l:16px;--a:16px;display:block;position:fixed;top:0;left:0;z-index:1300;width:var(--l);height:var(--a);
    pointer-events:none;mix-blend-mode:difference;opacity:0;will-change:transform;
    transition:opacity .18s,width .52s cubic-bezier(.68,-.48,.28,1.48),height .52s cubic-bezier(.68,-.48,.28,1.48)}
  .cursore--visibile{opacity:1}
  .cursore__forma{position:absolute;inset:0;background:#fff;transform:scale(1);
    transition:opacity .22s cubic-bezier(.68,-.48,.28,1.48),transform .52s cubic-bezier(.68,-.48,.28,1.48),border-radius .3s cubic-bezier(.16,1,.3,1)}
  /* sulle cose che si aprono (card, voci dei servizi) il quadrato diventa un PALLINO (Francesco, 18/10/2026:
     «il quadrato che diventa un pallino»; il mirino coi quattro angoli era «troppo sporco») */
  .cursore--foto .cursore__forma{border-radius:50%;transform:scale(1.25)}
  /* dove si scrive (i campi del modulo) diventa la «I» del testo, e lampeggia come il cursore di una pagina: si capisce che lì si scrive
     (Francesco, 21/10/2026: «non si capisce l'interazione se non metti l'icona del testo»). L'asticella sola resta per il testo da leggere */
  .cursore--scrivi{transition:opacity .18s,width .26s cubic-bezier(.65,0,.35,1),height .26s cubic-bezier(.65,0,.35,1)}
  .cursore--scrivi .cursore__forma{clip-path:polygon(0 0,100% 0,100% 2px,calc(50% + 1px) 2px,calc(50% + 1px) calc(100% - 2px),100% calc(100% - 2px),100% 100%,0 100%,0 calc(100% - 2px),calc(50% - 1px) calc(100% - 2px),calc(50% - 1px) 2px,0 2px);
    animation:cursore-lampo 1.06s steps(1) infinite}
  @keyframes cursore-lampo{0%,55%{opacity:1}56%,100%{opacity:.15}}
  .cursore--testo .cursore__forma{transform:scaleY(1.08)}
  .cursore--testo{transition:opacity .18s,width .26s cubic-bezier(.65,0,.35,1),height .26s cubic-bezier(.65,0,.35,1)}
  /* sulle voci il salto di misura è grande (16 → 150 px): il rimbalzo all'indietro portava la larghezza sotto zero e il cursore
     SPARIVA (Francesco, 19/10/2026: «non deve sparire, deve allargarsi»). Lì, e al rientro, una curva che solo rallenta, in .2 s */
  .cursore--voce,.cursore--rientra{transition:opacity .18s,width .2s cubic-bezier(.16,1,.3,1),height .2s cubic-bezier(.16,1,.3,1)}

  /* i due triangoli d'angolo, neri dentro il bianco: in «difference» il nero lascia passare la pagina */
  .cursore__spigolo{position:absolute;width:50%;height:50%;background:#000;opacity:0;
    transition:opacity .22s cubic-bezier(.68,-.48,.28,1.48),transform .52s cubic-bezier(.68,-.48,.28,1.48)}
  .cursore__spigolo--no{top:0;left:0;clip-path:polygon(0 0,100% 0,0 100%);transform-origin:0 0;transform:scale(.18)}
  .cursore__spigolo--se{right:0;bottom:0;clip-path:polygon(100% 0,100% 100%,0 100%);transform-origin:100% 100%;transform:scale(.18)}
  .cursore--apri .cursore__spigolo{opacity:1}
  .cursore--apri .cursore__spigolo--no{transform:translate3d(-3px,-3px,0) scale(1)}
  .cursore--apri .cursore__spigolo--se{transform:translate3d(3px,3px,0) scale(1)}

  /* la «i» d'informazione: cerchio PIENO nel nero di casa con la «i» crema, ⛔ in «difference» — provato in difference,
     sopra le lettere arancio e le didascalie la «i» si mescolava con quello che c'era sotto e non si leggeva più */
  /* sul colore pieno (data-cartellino-pieno: la fascia arancio del portfolio) la «difference» darebbe un pallino azzurro:
     lì il pallino e la parola sono crema, come le scritte della fascia */
  /* una voce sul fondo CHIARO si evidenzia in arancio, ⛔ in nero (Francesco, 19/10/2026): in «multiply» l'arancio tinge il crema
     e il testo scuro resta scuro sopra, leggibile. Sul fondo scuro resta la «difference» */
  .cursore--chiaro{mix-blend-mode:multiply}
  .cursore--chiaro .cursore__forma{background:var(--arancio,#FF6037)}
  .cursore--pieno{mix-blend-mode:normal}
  .cursore--pieno .cursore__forma{background:var(--crema,#F5F4ED)}
  .cursore--pieno .cursore__parola{color:var(--crema,#F5F4ED)}
  /* sulla fascia arancio a fine progetto (.chiusa): quadrato pieno nel nero di casa, come le scritte della fascia */
  .cursore--scuro{mix-blend-mode:normal}
  .cursore--scuro .cursore__forma{background:var(--nero,#351E1C)}
  .cursore--info{mix-blend-mode:normal}
  .cursore--info .cursore__forma{border-radius:50%;background:var(--nero,#351E1C)}
  .cursore__info{position:absolute;left:50%;top:50%;width:3px;height:15px;margin:-7.5px 0 0 -1.5px;opacity:0;transform:scale(.4);
    transition:opacity .22s cubic-bezier(.68,-.48,.28,1.48),transform .52s cubic-bezier(.68,-.48,.28,1.48)}
  .cursore__info::before,.cursore__info::after{content:"";position:absolute;left:0;width:3px;background:var(--crema,#F5F4ED)}
  .cursore__info::before{top:0;height:3px;border-radius:50%}
  .cursore__info::after{bottom:0;height:9.5px}
  .cursore--info .cursore__info{opacity:1;transform:scale(1)}

  /* la parola sopra: le parole salgono una dopo l'altra, 24 ms fra l'una e l'altra, e scendono al contrario */
  .cursore__parola{position:absolute;left:50%;bottom:calc(100% + 8px);width:176px;max-height:31.2px;overflow:hidden;padding:4px;
    transform:translateX(-50%);color:#fff;text-align:center;text-wrap:balance;
    font:500 14px/15.6px var(--sans);letter-spacing:-.04em}
  .cursore__p{display:inline-block;overflow:hidden;vertical-align:top;margin:0 .12em}
  .cursore__p i{display:inline-block;font-style:normal;transform:translateY(115%);
    transition:transform .3s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i)*24ms)}
  .cursore--parlante .cursore__p i{transform:translateY(0)}
  .cursore--congeda .cursore__p i{transform:translateY(115%);transition-delay:calc((var(--n) - var(--i) - 1)*24ms)}
}
@media (prefers-reduced-motion:reduce){.cursore,.cursore *{transition:none!important}}