/* ══ Pony Solutions — la sezione Twinkie: la sfera a filo e le carte che le
   galleggiano davanti. La sfera la disegna js/twinkie.js; qui c'è il contenitore,
   il tratto, l'ingresso e le carte che l'HTML posiziona a mano.

   Disposizione pensata: la sezione a due colonne, titolo e testo a sinistra,
   la sfera a destra grande (min(820px, 56vw)) e sporgente oltre il bordo
   della pagina, così le righe scivolano dietro al testo. Quelle misure
   stanno nell'HTML della sezione: qui la sfera prende solo la larghezza che
   le danno. ══ */

.sfera .sfera-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  opacity: 0; transform: scale(.97); transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
.sfera.viva .sfera-tela { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sfera .sfera-tela { transition: none; opacity: 1; transform: none; } }
.sfera {
  position: relative;
  aspect-ratio: 1;
  /* inchiostro appena freddo, non lavanda: il sito è nero su carta */
  --sfera-tratto: rgba(22, 26, 40, .45);
}


/* il tratto resta di un pixel qualunque sia la misura della sfera */

@media (prefers-reduced-motion: reduce) {
  
}

/* ── la carta bianca che galleggia davanti alla sfera ──
   Con un emblema davanti (.sfera-emblema, 20px) la carta diventa a due
   colonne: emblema a sinistra, testo e pillola a destra. Senza, è una
   colonna sola. La prima riga di testo è in grassetto e in inchiostro. */
.sfera-carta {
  position: absolute;
  max-width: 340px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bianco, #fff);
  border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(20, 30, 60, .28), 0 2px 6px rgba(20, 30, 60, .06), 0 0 0 1px rgba(10, 10, 10, .04);
  font-size: 17px; line-height: 1.4;
  color: var(--grigio, #6F6F6F);
}
.sfera-carta:has(> .sfera-emblema) { grid-template-columns: auto 1fr; column-gap: 12px; }
.sfera-carta:has(> .sfera-emblema) > :not(.sfera-emblema) { grid-column: 2; }
.sfera-carta > .sfera-emblema { grid-row: 1; grid-column: 1; width: 20px; height: 20px; margin-top: 2px; }
.sfera-carta p { margin: 0; }
.sfera-carta p:first-of-type { font-weight: 700; color: var(--inchiostro, #0A0A0A); }
.sfera-carta p + p { margin-top: 6px; }

/* ── la pillola azzurra ── */
.sfera-pillola {
  position: absolute;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--cielo, #2C6BD4);
  color: #fff;
  font-weight: 600; font-size: 13px; line-height: 1.2; font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(44, 107, 212, .6);
}
.sfera-carta .sfera-pillola { position: static; justify-self: start; margin-top: 12px; }

/* sul telefono la disposizione la decide il foglio del sito (sito.css,
   blocco del telefono): qui niente misure forzate, la sfera prende la
   larghezza che le danno. */