/* ==========================================================================
   Il sole: posizioni, transizioni e keyframes della mascotte.
   Solo ciò che riguarda il sole; il resto della pagina sta nel css del sito.
   Le classi che accendono i movimenti le mette js/sole.js; senza script il
   sole è fermo e a posto. L'unica cosa che vale prima dello script è lo stato
   di partenza del sole del marchio (blocco 2), legato alla classe js su <html>.
   Una curva sola, cubic-bezier(.2,.7,.2,1); nulla dura più di 900 ms. Con
   «riduci movimento» tutto sta fermo (ultimo blocco).
   ========================================================================== */

:root {
  --sole-curva: cubic-bezier(.2, .7, .2, 1);
  --sole-linea: rgba(28, 29, 33, 0.22); /* carbone al 22% */
}

/* ---------- 1. Base delle trasformazioni ------------------------------------
   Le trasformazioni css sugli elementi del disegno partono dal centro del loro
   riquadro: così una palpebra si schiaccia verso il proprio centro e una manina
   oscilla attorno alla propria. I gruppi .sole-corpo e .sole-mani hanno già un
   attributo transform (posizione e scala nel marchio) e non si toccano: lo
   script mette i loro figli in un .sole-interno, ed è quello che si anima. */
.sole-occhio,
.sole-mano,
.sole-sguardo,
.sole-interno { transform-box: fill-box; transform-origin: center; }

/* ---------- 2. Il sorgere (marchio in testata, una volta all'apertura) -------
   Il corpo parte 256 unità più in basso, cioè tutto dietro «prompti» (il
   ritaglio del logo lo nasconde), e sale in 900 ms. Le manine, che stanno fuori
   dal ritaglio, compaiono negli ultimi 300 ms.
   Prima che lo script parta il sole deve già stare giù: lo script è differito
   e, altrimenti, il sole si vedrebbe su per un istante e poi risalire. Lo stato
   di partenza vale solo se <html> ha la classe js (la mette uno script in linea
   in <head>, prima dei fogli di stile) e senza «riduci movimento»: senza
   JavaScript il sole si vede subito, fermo. Le regole mirano ai figli diretti
   dei due gruppi, che esistono già nel markup: quando lo script li sposta in
   .sole-interno e accende .sole-sorge, smettono di valere nello stesso istante
   in cui parte l'animazione, senza un fotogramma in mezzo. Se lo script non
   arriva a far sorgere il sole, toglie la classe js e il sole si vede fermo. */
@media (prefers-reduced-motion: no-preference) {
  html.js .testata [data-sole="marchio"] .sole-corpo > * { transform: translateY(256px); }
  html.js .testata [data-sole="marchio"] .sole-mani > * { opacity: 0; }
}
@keyframes sole-sorge {
  from { transform: translateY(256px); }
  to   { transform: translateY(0); }
}
@keyframes sole-mani-arrivano {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sole-sorge .sole-corpo .sole-interno { animation: sole-sorge 900ms var(--sole-curva) both; }
.sole-sorge .sole-mani .sole-interno { animation: sole-mani-arrivano 300ms var(--sole-curva) 600ms both; }

/* ---------- 3. Le palpebre ---------------------------------------------------
   Le due ellissi si schiacciano in verticale e tornano su: 120 ms in tutto. */
@keyframes sole-palpebra {
  0%   { transform: scaleY(1); }
  50%  { transform: scaleY(0.12); }
  100% { transform: scaleY(1); }
}
.sole-sbatte .sole-occhio { animation: sole-palpebra 120ms var(--sole-curva); }

/* ---------- 4. Lo sguardo (marchio in testata) -------------------------------
   Lo script sposta il gruppo-guida di ogni occhio di pochissimo, seguendo il
   puntatore; la transizione ammorbidisce ogni spostamento e il ritorno al centro. */
.sole-sguardo { transition: transform 200ms var(--sole-curva); }

/* ---------- 5. Le manine -----------------------------------------------------
   Al passaggio o al focus sul bottone Eventbrite si alzano di 3 unità del disegno. */
.sole-mano { transition: transform 200ms var(--sole-curva); }
.sole-mani-su .sole-mano { transform: translateY(-3px); }

/* Il saluto: due oscillazioni in 600 ms, la sinistra e la destra in senso opposto. */
@keyframes sole-saluto-sx {
  0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
  25%, 75%      { transform: translateY(-6px) rotate(-12deg); }
}
@keyframes sole-saluto-dx {
  0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
  25%, 75%      { transform: translateY(-6px) rotate(12deg); }
}
.sole-saluta .sole-mano { animation: sole-saluto-sx 600ms var(--sole-curva); }
.sole-saluta .sole-mano + .sole-mano { animation-name: sole-saluto-dx; }

/* ---------- 6. La mascotte che viaggia ---------------------------------------
   Una scatola fissa nel margine destro, alta quanto la finestra, che lo script
   ritaglia con clip-path sotto la testata. Fino al 22 settembre la ritagliava
   anche sopra il piè, dove il sole «tramontava»; ora il piè non ha riquadro e
   in fondo alla pagina il sole gli sta accanto, a quattro quinti della finestra.
   Dentro, la linea sottile e il sole, che lo script sposta con translateY.
   Sotto i 64em la scatola non c'è.
   Dove sta (versione cielo-sfera, dal 22 settembre): nel margine destro, 32 px
   oltre il bordo dei riquadri, che sono larghi min(--largo, 100% - 2 * --margine)
   (variabili di css/sito.css e css/riquadri.css, qui con i valori di ripiego):
   accompagna la colonna del testo, a ogni larghezza, e resta lontana dall'angolo
   in basso a destra, dove tramonta il sole del cielo. I 32 px lasciano posto
   alla forma sfalsata che sporge dai riquadri (9 px). */
.sole-viaggio { display: none; }
@media (min-width: 64em) {
  .sole-viaggio {
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: max(0.5rem, calc((100% - min(var(--largo, 68rem), 100% - 2 * var(--margine, 4rem))) / 2 - 48px - 32px));
    width: 48px;
    z-index: 1;
    pointer-events: none;
  }
  /* La linea è lunga quanto il tratto che il sole percorre (inizio e altezza li
     mette js/sole.js): dal 22 settembre non è più alta quanto la finestra, dove
     sembrava una seconda barra di scorrimento. */
  .sole-viaggio-linea {
    position: absolute;
    top: 0;
    height: 0;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background: var(--sole-linea);
  }
  /* Il sole si può prendere e trascinare: la pagina scorre con lui. La scatola
     resta trasparente al mouse, il sole no. Passandoci sopra alza le manine. */
  .sole-viaggio-sole {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 48px;
    height: 48px;
    will-change: transform;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
  }
  .sole-viaggio-sole:hover .sole-mano { transform: translateY(-3px); }
}
/* Mentre lo si trascina: la mano che stringe ovunque, niente testo selezionato. */
html.sole-trascinato,
html.sole-trascinato * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
/* Quando sta ferma da qualche secondo fa un gesto, e poi un altro ogni tanto,
   alternandoli (le classi le mette js/sole.js): strizza gli occhi in un sorriso
   (le ellissi si schiacciano, compaiono due archetti, le guance salgono appena,
   la bocca si allarga), oppure muove appena le manine. Lo stesso sorriso, con
   la classe «sole-contento», per tutto il tempo in cui la si trascina. */
.sole-viaggio .sole-occhio { transition: transform 160ms var(--sole-curva); }
.sole-occhio-riso { opacity: 0; transition: opacity 160ms var(--sole-curva); }
.sole-viaggio .sole-guancia,
.sole-viaggio .sole-bocca { transform-box: fill-box; transform-origin: center; transition: transform 220ms var(--sole-curva); }
.sole-sorride .sole-occhio,
.sole-contento .sole-occhio { transform: scaleY(0.08); }
.sole-sorride .sole-occhio-riso,
.sole-contento .sole-occhio-riso { opacity: 1; }
.sole-sorride .sole-guancia,
.sole-contento .sole-guancia { transform: translateY(-3px) scale(1.1); }
.sole-sorride .sole-bocca,
.sole-contento .sole-bocca { transform: scale(1.22, 1.12); }
@keyframes sole-manine-sx {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-5px) rotate(-10deg); }
  65%      { transform: translateY(-2px) rotate(5deg); }
}
@keyframes sole-manine-dx {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-5px) rotate(10deg); }
  65%      { transform: translateY(-2px) rotate(-5deg); }
}
.sole-manine .sole-mano { animation: sole-manine-sx 1100ms var(--sole-curva); }
.sole-manine .sole-mano + .sole-mano { animation-name: sole-manine-dx; }

/* Quando la mascotte viene montata compare in 300 ms, senza spostarsi. */
@keyframes sole-appare {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sole-appare { animation: sole-appare 300ms var(--sole-curva) both; }

/* ---------- 7. Il sole piccolo accanto all'esito del modulo Tools -------------
   Un riquadro di 32 px, flottante a sinistra del paragrafo dell'esito. Lo script
   lo inserisce come fratello che precede il paragrafo (strumenti.js riscrive il
   testo del paragrafo e cancellerebbe qualsiasi cosa dentro). Il paragrafo
   diventa un contesto flex: si affianca al sole senza scorrergli sotto, con il
   testo centrato in verticale; la nota che segue va a capo sotto il sole. Il
   margine alto del paragrafo va a zero, così flottante e paragrafo partono dallo
   stesso punto, subito dopo il margine basso dell'etichetta (un flottante tra
   due margini che collassano si posiziona dopo il primo).
   Quando il modulo va a buon fine il sole sorge dal fondo del riquadro (500 ms)
   e poi saluta una volta; se «inviato» c'è già all'apertura, lo script non mette
   la classe .sole-esito-arriva e il sole sta fermo. */
.sole-esito {
  float: left;
  width: 32px;
  height: 32px;
  margin: 0 0.6rem 0 0;
  overflow: hidden;
}
.sole-esito svg { display: block; width: 100%; height: 100%; }
.sole-esito + .richiesta-esito { display: flex; align-items: center; min-height: 32px; margin-top: 0; }
.sole-esito ~ .richiesta-nota { clear: left; }
@keyframes sole-sorge-piccolo {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.sole-esito-arriva svg { animation: sole-sorge-piccolo 500ms var(--sole-curva) both; }
.sole-esito-arriva .sole-mano { animation: sole-saluto-sx 600ms var(--sole-curva) 600ms both; }
.sole-esito-arriva .sole-mano + .sole-mano { animation-name: sole-saluto-dx; }

/* ---------- 8. Movimento ridotto e stampa ------------------------------------
   Il sole resta fermo, visibile, a posto: niente sorgere (è già su), niente
   palpebre, niente sguardo, niente saluto, manine ferme. La mascotte che viaggia
   si posiziona senza interpolazione (lo fa lo script) e qui non ha transizioni. */
@media (prefers-reduced-motion: reduce) {
  [data-sole] *,
  .sole-esito,
  .sole-esito * { animation: none !important; transition: none !important; }
  .sole-mani-su .sole-mano { transform: none !important; }
}
@media print {
  .sole-viaggio { display: none !important; }
}