/* ============================================================
   Il fumetto di Seven (fumetto.js): colori e carattere del sito.
   La carta a sinistra non si vede più, le sue parole le dice lui.
   Torna quando Seven non c'è (fu-senza: niente scheda video, o
   l'atlante non ancora arrivato quando si tocca un punto) e senza
   script (noscript in index.php). Nascosta fin dall'inizio, non
   quando parte la casa: se no la colonna a sinistra salterebbe.
   ============================================================ */
.s1-carta { display: none; }
body.fu-senza .s1-carta { display: block; }
body.fu-senza .fu { display: none; }

.fu {
  position: absolute; left: 0; top: 0; z-index: 6;
  width: 300px;
  isolation: isolate;
  color: var(--ink);
}
.fu[hidden] { display: none; }
/* il suo posto c'è già, ma finché Seven non saluta non si vede */
.fu-attende { visibility: hidden; pointer-events: none; }
.fu-forma {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 16px 22px rgba(34, 58, 60, .16));
}
.fu-forma path { fill: #fff; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.fu-corpo { padding: 14px 18px 16px; }

.fu-dove { display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.fu-nome { display: block; margin-top: 2px; font-size: 19px; font-weight: 850; letter-spacing: -.02em; line-height: 1.2; }
.fu-detto { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.fu-taglio {
  display: inline-block; margin-top: 11px;
  background: var(--ink); color: var(--sun);
  font-size: 13px; font-weight: 850; letter-spacing: -.01em;
  padding: 6px 13px; border-radius: 100px;
}
.fu-dice { margin: 0; font-size: 15px; line-height: 1.45; }
.fu-dice b { font-weight: 850; }
.fu-vai {
  display: inline-flex; margin-top: 10px;
  background: var(--sun); color: var(--ink); text-decoration: none;
  font-size: 13.5px; font-weight: 850; padding: 8px 15px; border-radius: 100px;
}
.fu[data-tipo="saluto"], .fu[data-tipo="conto"] { width: 232px; }
.fu[data-tipo="saluto"] .fu-corpo, .fu[data-tipo="conto"] .fu-corpo { padding: 12px 16px 13px; }

/* esce dalla bocca: un cenno, una volta */
.fu-su { animation: fuSu .3s var(--ease) both; }
@keyframes fuSu { from { opacity: 0; scale: .86; } }

/* i tre puntini mentre cammina, vicino alla sua testa */
.fu-pensa { width: auto; z-index: 5; pointer-events: none; }
.fu-pensa .fu-corpo { display: flex; gap: 5px; padding: 9px 12px; }
.fu-pensa i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink); opacity: .3;
  animation: fuPunto 1.1s ease-in-out infinite;
}
.fu-pensa i:nth-child(2) { animation-delay: .15s; }
.fu-pensa i:nth-child(3) { animation-delay: .3s; }
@keyframes fuPunto { 30% { opacity: .85; translate: 0 -2px; } }
/* al telefono, mentre Seven va al pezzo: il fumetto sotto la casa svanisce e
   si chiude con una transizione, e il testo sotto sale; quando lui parla si
   riapre allo stesso modo (le parole nuove sono già dentro). I puntini li fa
   il fumettino vicino a lui. Prima restava un riquadro bianco vuoto coi
   puntini in mezzo (Emmanuele, 1/10: «è stranissimo, che compare mentre lui
   cammina»; poi «fallo scendere con la transizione») */
.fu-velato { opacity: 0; pointer-events: none; }

/* al telefono, in colonna: sotto la casa, sempre aperto, la coda in su */
@media (max-width: 940px) {
  .fu:not(.fu-pensa) { position: relative; left: auto; top: auto; translate: none; width: auto; margin-top: 18px; z-index: 3; }
  /* l'altezza è la riga di una griglia: da 1fr a 0fr si chiude, e torna */
  .fu:not(.fu-pensa):not([hidden]) {
    display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .35s var(--ease), margin-top .35s var(--ease), opacity .2s;
  }
  .fu:not(.fu-pensa) > .fu-corpo { min-height: 0; overflow: hidden; transition: padding .35s var(--ease); }
  .fu:not(.fu-pensa).fu-velato { grid-template-rows: 0fr; margin-top: 0; }
  /* anche il bordo interno va a zero, se no la riga resta alta quanto lui */
  .fu:not(.fu-pensa).fu-velato > .fu-corpo { padding-top: 0; padding-bottom: 0; }
  .fu:not(.fu-pensa)[data-tipo] { width: auto; }
  .fu:not(.fu-pensa) .fu-forma path { stroke-width: 1.75; }
  /* il tasto per tornare sale in cima alla casa: in fondo c'è la coda */
  body.fu-attivo .s1-esci { bottom: auto; top: 10px; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .fu-su { animation: none; }
  .fu-pensa i { animation: none; opacity: .6; }
}