/* ================================================================== *
 * Slogan Cursore
 *
 * Due pezzi, e fanno due lavori diversi.
 *
 *   Il punto sta dove sta il mouse. Sempre, senza un fotogramma di
 *   ritardo: e' quello che si usa per mirare, e un mirino che insegue non
 *   e' un mirino. Sei pixel, pieno.
 *
 *   L'anello arriva dopo. E' lui a fare il lavoro che di solito si chiama
 *   "premium" e che in realta' e' una cosa sola: un ritardo racconta un
 *   peso, e una cosa che ha un peso sembra un oggetto invece di un disegno.
 *   Cambia forma a seconda di cosa c'e' sotto - piu' largo su un
 *   collegamento, pieno su un pulsante, una barretta su un campo di testo,
 *   con dentro una parola sulle schede da aprire.
 *
 * Il colore, di regola, non e' un colore: e' 'mix-blend-mode: difference',
 * che inverte quello che ha sotto. Su questo sito - nero e avorio, senza
 * niente in mezzo - vuol dire che un elemento solo si legge su tutte e due
 * le meta' della tavolozza, senza una riga di CSS per sezione. Sulle
 * fotografie fa quello che fa la differenza: le ribalta, e siccome qui sono
 * tutte desaturate e scure il cursore ci resta chiaro sopra.
 * ================================================================== */

.slgn-cur {
  --cur-anello: 32px;
  --cur-punto: 6px;
  --cur-tinta: #ece9e1;
  --cur-ease: cubic-bezier(.22, .72, .2, 1);

  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483000;
  pointer-events: none;

  /* Il cursore non e' contenuto della pagina: chi la ascolta non deve
     sentirselo leggere, e chi la stampa non deve trovarselo stampato. */
  opacity: 0;
  transition: opacity .2s var(--cur-ease);
}

.slgn-cur.is-dentro { opacity: 1; }

.slgn-cur__punto,
.slgn-cur__anello {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;

  /* Il posizionamento e' tutto in 'translate3d' scritto da JavaScript: la
     meta' che riporta il centro sul puntatore sta qui, in coda, cosi' vale
     anche quando l'anello cambia misura. */
  will-change: transform;
}

.slgn-cur__punto {
  width: var(--cur-punto);
  height: var(--cur-punto);
  margin: calc(var(--cur-punto) / -2) 0 0 calc(var(--cur-punto) / -2);
  background: var(--cur-tinta);
  transition: opacity .18s var(--cur-ease), transform .18s var(--cur-ease);
}

.slgn-cur__anello {
  display: grid;
  place-items: center;
  width: var(--cur-anello);
  height: var(--cur-anello);
  margin: calc(var(--cur-anello) / -2) 0 0 calc(var(--cur-anello) / -2);
  border: 1px solid var(--cur-tinta);
  transition:
    width .34s var(--cur-ease),
    height .34s var(--cur-ease),
    margin .34s var(--cur-ease),
    border-radius .34s var(--cur-ease),
    background-color .24s var(--cur-ease),
    opacity .2s var(--cur-ease);
}

.slgn-cur__testo {
  color: var(--cur-tinta);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s var(--cur-ease), transform .2s var(--cur-ease);
}

/* Per differenza: il cursore non ha un colore suo, ha il contrario di
   quello che tocca. */
.slgn-cur--differenza { mix-blend-mode: difference; }

/* Il colore fisso vuole un'ombra: senza, su un fondo dello stesso tono
   sparirebbe, ed e' l'unico difetto che la differenza non ha. */
.slgn-cur--fisso .slgn-cur__punto,
.slgn-cur--fisso .slgn-cur__anello {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}


/* ------------------------------------------------------------------ *
 * Gli stati
 *
 * Sono sette, e ognuno risponde a una domanda diversa: cosa succede se
 * clicco qui? Un cursore che non cambia mai forma non risponde, e allora
 * tanto vale quello di sistema - che almeno la manina ce l'ha.
 * ------------------------------------------------------------------ */

/* -- Collegamento: l'anello si allarga e si assottiglia -- */
.slgn-cur[data-stato="link"] .slgn-cur__anello {
  width: calc(var(--cur-anello) * 1.5);
  height: calc(var(--cur-anello) * 1.5);
  margin: calc(var(--cur-anello) * -0.75) 0 0 calc(var(--cur-anello) * -0.75);
}

.slgn-cur[data-stato="link"] .slgn-cur__punto { transform: scale(.6); }

/* -- Pulsante: l'anello si riempie -- *
 *
 * E' l'unico stato pieno, ed e' voluto: un pulsante e' l'unica cosa in
 * pagina che fa succedere qualcosa invece di portare altrove. Il punto
 * sparisce perche' dentro a una macchia piena non si vedrebbe comunque. */
.slgn-cur[data-stato="azione"] .slgn-cur__anello {
  width: calc(var(--cur-anello) * 1.35);
  height: calc(var(--cur-anello) * 1.35);
  margin: calc(var(--cur-anello) * -0.675) 0 0 calc(var(--cur-anello) * -0.675);
  background: var(--cur-tinta);
}

.slgn-cur[data-stato="azione"] .slgn-cur__punto { opacity: 0; }

/* -- Da aprire: l'anello diventa una pastiglia con dentro una parola -- *
 *
 * Sulle schede dei progetti e sulle righe dei lavori. E' il momento in cui
 * il cursore smette di essere un segno e diventa un'etichetta: dice cosa
 * succede al clic, che su una scheda intera cliccabile non e' ovvio. */
.slgn-cur[data-stato="apri"] .slgn-cur__anello {
  width: 5.6rem;
  height: 5.6rem;
  margin: -2.8rem 0 0 -2.8rem;
  background: var(--cur-tinta);
}

.slgn-cur[data-stato="apri"] .slgn-cur__punto { opacity: 0; }

.slgn-cur[data-stato="apri"] .slgn-cur__testo,
.slgn-cur[data-stato="trascina"] .slgn-cur__testo {
  opacity: 1;
  transform: none;
}

/* La parola dentro al disco pieno e' scura, in tutte e due le modalita'.
 *
 * Qui avevo sbagliato il ragionamento, e si vedeva: davo alla parola la
 * stessa tinta del disco pensando che la fusione l'avrebbe ribaltata. Non
 * funziona cosi'. 'mix-blend-mode' fonde l'elemento intero contro quello che
 * ha sotto - i figli fra loro si disegnano normalmente, uno sopra l'altro -
 * quindi una parola color tinta sopra un disco color tinta e' una parola
 * invisibile, prima ancora che la fusione entri in gioco.
 *
 * Scura sul disco chiaro: dopo la fusione resta scura sul chiaro, che e'
 * quello che serve. */
.slgn-cur[data-stato="apri"] .slgn-cur__testo { color: #0d0d0d; }

/* -- Da trascinare: l'anello si allarga e mostra le due direzioni -- */
.slgn-cur[data-stato="trascina"] .slgn-cur__anello {
  width: 5.2rem;
  height: 5.2rem;
  margin: -2.6rem 0 0 -2.6rem;
}

.slgn-cur[data-stato="trascina"] .slgn-cur__punto { opacity: 0; }

.slgn-cur[data-stato="trascina"] .slgn-cur__anello::before,
.slgn-cur[data-stato="trascina"] .slgn-cur__anello::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: solid var(--cur-tinta);
  border-width: 1px 1px 0 0;
}

.slgn-cur[data-stato="trascina"] .slgn-cur__anello::before {
  left: 10px;
  transform: rotate(-135deg);
}

.slgn-cur[data-stato="trascina"] .slgn-cur__anello::after {
  right: 10px;
  transform: rotate(45deg);
}

/* -- Testo: l'anello diventa la barra che sta per scriverci -- */
.slgn-cur[data-stato="testo"] .slgn-cur__anello {
  width: 1px;
  height: 1.5rem;
  margin: -0.75rem 0 0 -0.5px;
  border-radius: 0;
  border-width: 0;
  background: var(--cur-tinta);
}

.slgn-cur[data-stato="testo"] .slgn-cur__punto { opacity: 0; }

/* -- Premuto: tutto si stringe -- *
 *
 * Un solo fotogramma di conferma, e vale sopra qualunque altro stato. E'
 * la parte piu' vicina a un pulsante fisico: quello che si schiaccia si
 * rimpicciolisce. */
.slgn-cur.is-premuto .slgn-cur__anello { transform: scale(.82); }
.slgn-cur.is-premuto .slgn-cur__punto { transform: scale(1.6); }

/* -- Fuori: sopra un iframe, o fuori dalla finestra -- *
 *
 * Dentro a un iframe i movimenti del mouse non ci arrivano: il cursore
 * resterebbe fermo sul bordo mentre il puntatore vero si muove dentro. Li'
 * si toglie di mezzo e torna quello di sistema, che l'iframe ce l'ha. */
.slgn-cur.is-fuori { opacity: 0; }


/* ------------------------------------------------------------------ *
 * Il cursore di sistema
 *
 * Si nasconde da JavaScript aggiungendo 'slgn-cur-on' alla radice: se lo
 * script non parte, la riga non arriva e il puntatore resta quello vero.
 * ------------------------------------------------------------------ */

html.slgn-cur-on,
html.slgn-cur-on * { cursor: none; }

/* Tre eccezioni, e sono tutte casi in cui il cursore di sistema sa fare
   qualcosa che il nostro non sa:
 *
 *   negli iframe non ci arriva;
 *   nei campi di testo la barra di sistema segue il punto di inserimento,
 *   e quella e' informazione, non decorazione;
 *   nella barra di amministrazione siamo ospiti, e la si usa per lavorare.
 */
html.slgn-cur-on iframe,
html.slgn-cur-on embed,
html.slgn-cur-on object,
html.slgn-cur-on video[controls],
html.slgn-cur-on #wpadminbar,
html.slgn-cur-on #wpadminbar *,
html.slgn-cur-on [data-slgn-cursore="nativo"],
html.slgn-cur-on [data-slgn-cursore="nativo"] * { cursor: auto; }

html.slgn-cur-on input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.slgn-cur-on textarea,
html.slgn-cur-on [contenteditable="true"] { cursor: text; }

/* Quello che era una manina resta una manina anche per il sistema: se il
   nostro cursore sparisse per un errore, il sito continuerebbe a dire dove
   si puo' cliccare. */
html.slgn-cur-on a[href],
html.slgn-cur-on button,
html.slgn-cur-on [role="button"] { cursor: pointer; }


/* ------------------------------------------------------------------ *
 * Quando non si accende
 * ------------------------------------------------------------------ */

/* Senza un mouse vero non c'e' niente da sostituire: su un telefono
   resterebbe un pallino fermo in mezzo allo schermo. Lo controlla anche il
   JavaScript, che non lo costruisce nemmeno; questa e' la rete. */
@media (hover: none), (pointer: coarse) {
  .slgn-cur { display: none; }
  html.slgn-cur-on, html.slgn-cur-on * { cursor: auto; }
}

/* Meno movimento: il cursore resta - non e' un'animazione, e' il
   puntatore - ma smette di inseguire e di cambiare forma con calma. Il
   ritardo dell'anello lo azzera lo script; qui si tolgono le transizioni,
   che sono l'altra meta' della stessa cosa. */
@media (prefers-reduced-motion: reduce) {
  .slgn-cur__punto,
  .slgn-cur__anello,
  .slgn-cur__testo { transition: none !important; }
}

@media print {
  .slgn-cur { display: none; }
}