/*
 * Slogan Website - grafica in movimento.
 *
 * Sostituisce le fotografie d'archivio con pannelli che mostrano il lavoro:
 * un kit di marca, un piano editoriale, una timeline di montaggio, un
 * pannello di campagna. Non sono decorazioni astratte, sono la cosa di cui
 * parla il testo accanto, disegnata e messa in moto.
 *
 * La prima versione usava cerchi e quadrati che ruotavano. Erano puliti e
 * dicevano niente: un cerchio non racconta un piano editoriale. Qui ogni
 * pannello ha etichette, spie e barre come lo avrebbe l'attrezzo vero, ed e'
 * quello che lo fa sembrare lavoro invece che sfondo.
 *
 * Regole valide per tutto il file:
 *
 * - si animano solo 'transform' e 'opacity': sono le due proprieta' che il
 *   browser muove senza ricalcolare l'impaginazione;
 * - i pannelli escono con aria-hidden, perche' a chi ascolta la pagina non
 *   aggiungono niente: il senso lo porta il testo accanto;
 * - le etichette sono testo vero e non barre, perche' danno la scala e
 *   dicono cosa si sta guardando;
 * - con prefers-reduced-motion tutto si ferma in una posa leggibile, mai a
 *   zero.
 *
 *   1  Reticolo a onda (WebGL)
 *   2  Contenitore e parti comuni
 *   3  Fondali
 *   4  Kit di marca
 *   5  Piano editoriale
 *   6  Timeline
 *   7  Campagna
 *   8  Fondale delle aperture interne
 *   9  Telefono
 *   10 Movimento ridotto
 */

/* ------------------------------------------------------------------ *
 * 1. Reticolo a onda
 *
 * Il canvas lo crea assets/js/wireframe.js. Qui c'e' solo il contenitore, il
 * colore che lo script legge, e la trama di riserva per quando WebGL non
 * c'e': una griglia disegnata con due gradienti, ferma ma della stessa
 * famiglia, cosi' l'assenza non si nota.
 * ------------------------------------------------------------------ */

.slgn-wire {
  --slgn-wire-rgb: 236, 233, 225;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.slgn-wire__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* La riserva sta sotto e si spegne quando il canvas parte davvero. */
.slgn-wire::before {
  content: "";
  position: absolute;
  inset: -10%;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 62px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 62px);
  transform: perspective(60rem) rotateX(58deg) scale(1.5);
  transform-origin: 50% 100%;
  opacity: .8;
  transition: opacity .6s ease;
}

.slgn-wire.is-live::before { opacity: 0; }

/* ------------------------------------------------------------------ *
 * 2. Contenitore e parti comuni
 * ------------------------------------------------------------------ */

.slgn-mg {
  --mg-line: rgba(255, 255, 255, .12);
  --mg-line-strong: rgba(255, 255, 255, .26);
  --mg-fill: rgba(255, 255, 255, .07);
  --mg-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  aspect-ratio: 16 / 7;
  padding: clamp(.9rem, 2.2vw, 1.4rem);
  border: 1px solid var(--mg-line);
  background: linear-gradient(155deg, #101010, #080808 62%);
  color: var(--ws-paper, #ece9e1);
}

/* Le due varianti di proporzione restano come nomi, ma ormai valgono la
   forma di tutti: un pannello ha una forma sola. */
.slgn-mg--wide,
.slgn-mg--flat { aspect-ratio: 16 / 7; }

/* -- La barra in cima: sigla a sinistra, contesto a destra -- */
.slgn-mg__bar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--mg-line);
  font-family: var(--mg-mono);
  font-size: clamp(.52rem, 1.5cqw, .66rem);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.slgn-mg__bar b {
  font-weight: 500;
  color: var(--ws-paper, #ece9e1);
}

.slgn-mg__bar span { color: var(--ws-mute, #6c6d70); }

/* -- Il corpo del pannello -- */
.slgn-mg__body {
  position: relative;
  z-index: 3;
  display: grid;
  gap: clamp(.45rem, 1.4cqh, .8rem);
  padding-top: .8rem;
  /* Distribuito e non allineato in alto: con 'start' il primo elemento si
     mangiava l'altezza e il resto restava schiacciato contro le pillole. */
  align-content: space-between;
}

/* -- Le pillole in fondo: le voci comprese, dette in una parola -- */
.slgn-mg__pills {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: auto;
  padding-top: .8rem;
}

.slgn-mg__pills span {
  padding: .22rem .55rem;
  border: 1px solid var(--mg-line);
  color: var(--ws-mute, #6c6d70);
  font-family: var(--mg-mono);
  font-size: clamp(.48rem, 1.3cqw, .6rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  /* Compaiono una volta e restano.
   *
   * Prima entravano e uscivano a ogni giro, e per un secondo e mezzo su
   * sette la fascia in fondo al pannello restava vuota: da fuori si legge
   * come un buco di impaginazione, non come un'animazione. Sono etichette,
   * non effetti - il loro lavoro e' dire cosa comprende il servizio, e per
   * dirlo devono starci. */
  opacity: 0;
  animation: slgn-mg-pill 1.1s var(--ws-ease, ease) both;
}

.slgn-mg__pills span:nth-child(1) { animation-delay: .45s; }
.slgn-mg__pills span:nth-child(2) { animation-delay: .6s; }
.slgn-mg__pills span:nth-child(3) { animation-delay: .75s; }
.slgn-mg__pills span:nth-child(4) { animation-delay: .9s; }

@keyframes slgn-mg-pill {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* Il pannello e' una colonna: barra, corpo, pillole in fondo. */
.slgn-mg--panel {
  display: flex;
  flex-direction: column;
}

.slgn-mg--panel .slgn-mg__body { flex: 1; }

/* -- La spia di stato: verde non ce n'e', quindi pulsa il bianco -- */
.slgn-mg__dot {
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--ws-white, #fff);
  animation: slgn-mg-dot 2.4s steps(1, end) infinite;
}

@keyframes slgn-mg-dot {
  0%, 60%  { opacity: 1; }
  61%, 100% { opacity: .22; }
}

/* ------------------------------------------------------------------ *
 * 3. Fondali
 * ------------------------------------------------------------------ */

.slgn-mg__mesh {
  position: absolute;
  inset: -20%;
  z-index: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .4;
  animation: slgn-mg-mesh 20s linear infinite;
}

@keyframes slgn-mg-mesh {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(24px, 24px, 0); }
}

.slgn-mg__rules {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(
    90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3.4rem
  );
}

/* ------------------------------------------------------------------ *
 * 4. Kit di marca
 *
 * Il segno si compone, i campioni di colore si riempiono uno dopo l'altro,
 * il saggio tipografico si scrive. E' la sequenza con cui un'identita' viene
 * effettivamente consegnata, messa in venti secondi.
 * ------------------------------------------------------------------ */

.slgn-mg__lockup {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 2.6 / 1;
  border: 1px solid var(--mg-line);
  background: var(--mg-fill);
}

/* Le tre forme che si sovrappongono fino a fare un segno unico */
.slgn-mg__lockup i {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border: 1px solid var(--mg-line-strong);
  animation: slgn-mg-assemble 7s var(--ws-ease, ease) infinite;
}

.slgn-mg__lockup i:nth-child(1) { border-radius: 50%; animation-delay: 0s; }
.slgn-mg__lockup i:nth-child(2) { animation-delay: .25s; }
.slgn-mg__lockup i:nth-child(3) {
  width: 9%;
  border: 0;
  background: var(--ws-white, #fff);
  animation-delay: .5s;
}

@keyframes slgn-mg-assemble {
  0%       { transform: translateX(-160%) rotate(-40deg); opacity: 0; }
  22%      { transform: none; opacity: 1; }
  74%      { transform: none; opacity: 1; }
  100%     { transform: translateX(160%) rotate(40deg); opacity: 0; }
}

/* -- I campioni di colore: in un impianto a due toni sono i grigi -- */
.slgn-mg__swatches { display: flex; gap: .3rem; }

.slgn-mg__swatches span {
  flex: 1;
  height: clamp(1rem, 4cqh, 1.7rem);
  border: 1px solid var(--mg-line);
  transform-origin: 50% 100%;
  animation: slgn-mg-swatch 7s var(--ws-ease, ease) infinite;
}

.slgn-mg__swatches span:nth-child(1) { background: #ffffff; animation-delay: .6s; }
.slgn-mg__swatches span:nth-child(2) { background: #c9c9c7; animation-delay: .72s; }
.slgn-mg__swatches span:nth-child(3) { background: #6c6d70; animation-delay: .84s; }
.slgn-mg__swatches span:nth-child(4) { background: #2a2a2a; animation-delay: .96s; }
.slgn-mg__swatches span:nth-child(5) { background: #0e0e0e; animation-delay: 1.08s; }

@keyframes slgn-mg-swatch {
  0%       { transform: scaleY(0); opacity: 0; }
  16%, 82% { transform: scaleY(1); opacity: 1; }
  100%     { transform: scaleY(0); opacity: 0; }
}

/* -- Il saggio: righe che si scrivono da sinistra -- */
.slgn-mg__specimen { display: grid; gap: .32rem; }

.slgn-mg__specimen i {
  height: 5px;
  background: var(--mg-line-strong);
  transform-origin: 0 50%;
  animation: slgn-mg-write 7s var(--ws-ease, ease) infinite;
}

.slgn-mg__specimen i:nth-child(1) { width: 92%; animation-delay: 1.2s; }
.slgn-mg__specimen i:nth-child(2) { width: 68%; animation-delay: 1.35s; height: 4px; }
.slgn-mg__specimen i:nth-child(3) { width: 44%; animation-delay: 1.5s; height: 3px; }

@keyframes slgn-mg-write {
  0%       { transform: scaleX(0); }
  14%, 84% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* ------------------------------------------------------------------ *
 * 5. Piano editoriale
 *
 * Un mese di caselle che si riempiono a una a una, e sotto i contenuti che
 * entrano in fila. Dice "c'e' un piano" senza scriverlo.
 * ------------------------------------------------------------------ */

.slgn-mg__cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.slgn-mg__cal i {
  aspect-ratio: 1;
  border: 1px solid var(--mg-line);
  animation: slgn-mg-slot 10s steps(1, end) infinite;
}

/* Un ritardo diverso per casella: la riempitura corre lungo il mese.
   Sono ventuno regole scritte a mano perche' il CSS non sa contare i figli
   in una formula, ma il risultato e' un'onda che attraversa la griglia. */
.slgn-mg__cal i:nth-child(1)  { animation-delay: .10s; }
.slgn-mg__cal i:nth-child(2)  { animation-delay: .22s; }
.slgn-mg__cal i:nth-child(3)  { animation-delay: .34s; }
.slgn-mg__cal i:nth-child(4)  { animation-delay: .46s; }
.slgn-mg__cal i:nth-child(5)  { animation-delay: .58s; }
.slgn-mg__cal i:nth-child(6)  { animation-delay: .70s; }
.slgn-mg__cal i:nth-child(7)  { animation-delay: .82s; }
.slgn-mg__cal i:nth-child(8)  { animation-delay: .94s; }
.slgn-mg__cal i:nth-child(9)  { animation-delay: 1.06s; }
.slgn-mg__cal i:nth-child(10) { animation-delay: 1.18s; }
.slgn-mg__cal i:nth-child(11) { animation-delay: 1.30s; }
.slgn-mg__cal i:nth-child(12) { animation-delay: 1.42s; }
.slgn-mg__cal i:nth-child(13) { animation-delay: 1.54s; }
.slgn-mg__cal i:nth-child(14) { animation-delay: 1.66s; }
.slgn-mg__cal i:nth-child(15) { animation-delay: 1.78s; }
.slgn-mg__cal i:nth-child(16) { animation-delay: 1.90s; }
.slgn-mg__cal i:nth-child(17) { animation-delay: 2.02s; }
.slgn-mg__cal i:nth-child(18) { animation-delay: 2.14s; }
.slgn-mg__cal i:nth-child(19) { animation-delay: 2.26s; }
.slgn-mg__cal i:nth-child(20) { animation-delay: 2.38s; }
.slgn-mg__cal i:nth-child(21) { animation-delay: 2.50s; }

/* Una casella su tre resta piena: e' il ritmo di pubblicazione, non ogni
   giorno. */
.slgn-mg__cal i:nth-child(3n) { animation-name: slgn-mg-slot-full; }

@keyframes slgn-mg-slot {
  0%, 4%    { background: transparent; }
  6%, 88%   { background: var(--mg-fill); }
  100%      { background: transparent; }
}

@keyframes slgn-mg-slot-full {
  0%, 4%    { background: transparent; }
  6%, 88%   { background: var(--ws-paper, #ece9e1); }
  100%      { background: transparent; }
}

/* -- I contenuti in coda -- */
.slgn-mg__queue { display: grid; gap: .4rem; }

.slgn-mg__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--mg-line);
  opacity: 0;
  animation: slgn-mg-enter 10s var(--ws-ease, ease) infinite;
}

.slgn-mg__item:nth-child(1) { animation-delay: 2.7s; }
.slgn-mg__item:nth-child(2) { animation-delay: 3.0s; }
.slgn-mg__item:nth-child(3) { animation-delay: 3.3s; }

.slgn-mg__item b {
  width: clamp(1.4rem, 5cqw, 2rem);
  aspect-ratio: 1;
  background: var(--mg-fill);
  border: 1px solid var(--mg-line);
}

.slgn-mg__item u {
  display: block;
  height: 4px;
  background: var(--mg-line-strong);
  text-decoration: none;
}

.slgn-mg__item u + u { width: 58%; margin-top: .25rem; opacity: .6; }

@keyframes slgn-mg-enter {
  0%       { opacity: 0; transform: translateX(-8px); }
  8%, 86%  { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateX(-8px); }
}

/* ------------------------------------------------------------------ *
 * 6. Timeline
 *
 * Tre tracce, spezzoni di lunghezze diverse, la testina che passa e sotto
 * l'onda dell'audio. Chiunque abbia visto un programma di montaggio la
 * riconosce, ed e' esattamente il punto.
 * ------------------------------------------------------------------ */

.slgn-mg__tracks {
  position: relative;
  display: grid;
  gap: .35rem;
}

.slgn-mg__track {
  display: flex;
  gap: 3px;
  height: clamp(1.5rem, 6.5cqh, 2.5rem);
}

.slgn-mg__track b {
  background: var(--mg-fill);
  border: 1px solid var(--mg-line);
  transform-origin: 0 50%;
  animation: slgn-mg-clip 8s var(--ws-ease, ease) infinite;
}

/* Larghezze diverse: un montaggio non ha spezzoni tutti uguali */
.slgn-mg__track:nth-child(1) b:nth-child(1) { flex: 3; animation-delay: .1s; }
.slgn-mg__track:nth-child(1) b:nth-child(2) { flex: 5; animation-delay: .3s; }
.slgn-mg__track:nth-child(1) b:nth-child(3) { flex: 2; animation-delay: .5s; }
.slgn-mg__track:nth-child(2) b:nth-child(1) { flex: 6; animation-delay: .25s; }
.slgn-mg__track:nth-child(2) b:nth-child(2) { flex: 3; animation-delay: .45s; }
.slgn-mg__track:nth-child(3) b:nth-child(1) { flex: 2; animation-delay: .4s; }
.slgn-mg__track:nth-child(3) b:nth-child(2) { flex: 4; animation-delay: .6s; }
.slgn-mg__track:nth-child(3) b:nth-child(3) { flex: 4; animation-delay: .8s; }

/* La traccia dell'audio ha il riempimento pieno: si distingue dal video */
.slgn-mg__track--audio b { background: rgba(255,255,255,.2); }

@keyframes slgn-mg-clip {
  0%       { transform: scaleX(0); opacity: 0; }
  12%, 86% { transform: scaleX(1); opacity: 1; }
  100%     { transform: scaleX(0); opacity: 0; }
}

/* -- La testina di riproduzione -- */
.slgn-mg__playhead {
  position: absolute;
  top: -.3rem;
  bottom: -.3rem;
  left: 0;
  width: 1px;
  background: var(--ws-white, #fff);
  animation: slgn-mg-playhead 8s linear infinite;
}

.slgn-mg__playhead::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -3px;
  width: 7px;
  height: 5px;
  background: var(--ws-white, #fff);
}

@keyframes slgn-mg-playhead {
  0%, 12%  { transform: translateX(0); opacity: 0; }
  14%      { opacity: 1; }
  92%      { transform: translateX(calc(100cqw - 3rem)); opacity: 1; }
  100%     { transform: translateX(calc(100cqw - 3rem)); opacity: 0; }
}

/* -- L'onda dell'audio -- */
.slgn-mg__wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: clamp(1.6rem, 7cqh, 2.6rem);
}

.slgn-mg__wave i {
  flex: 1;
  /* Necessario: 'align-items: flex-end' sul contenitore dimensiona i figli
     sul loro contenuto, e questi sono vuoti. Senza height le barre restano
     alte zero e scaleY() non ha niente da scalare. */
  height: 100%;
  background: var(--mg-line-strong);
  transform-origin: 50% 100%;
  animation: slgn-mg-bar 1.3s var(--ws-ease, ease) infinite alternate;
}

/* Ritardi negativi e durate diverse: l'onda e' gia' in corso al primo
   fotogramma invece di partire tutta piatta insieme. */
.slgn-mg__wave i:nth-child(6n+1) { animation-delay: -.10s; animation-duration: 1.0s; }
.slgn-mg__wave i:nth-child(6n+2) { animation-delay: -.45s; animation-duration: 1.5s; }
.slgn-mg__wave i:nth-child(6n+3) { animation-delay: -.80s; animation-duration: 1.2s; }
.slgn-mg__wave i:nth-child(6n+4) { animation-delay: -.25s; animation-duration: 1.7s; }
.slgn-mg__wave i:nth-child(6n+5) { animation-delay: -.65s; animation-duration: 1.1s; }
.slgn-mg__wave i:nth-child(6n)   { animation-delay: -1.0s; animation-duration: 1.4s; }

@keyframes slgn-mg-bar {
  from { transform: scaleY(.14); }
  to   { transform: scaleY(1); }
}

/* ------------------------------------------------------------------ *
 * 7. Campagna
 *
 * Righe di metrica che si riempiono e una barra di budget che si consuma.
 * Nessun numero: scriverne uno vorrebbe dire inventare un risultato.
 * ------------------------------------------------------------------ */

.slgn-mg__metrics { display: grid; gap: .55rem; }

.slgn-mg__metric {
  display: grid;
  grid-template-columns: 1fr;
  gap: .3rem;
}

/* Non il misuratore: quello e' un blocco, e reso flex il suo riempimento si
   stringe sul contenuto - che non c'e'. Vedi la nota piu' sotto. */
.slgn-mg__metric > span:not(.slgn-mg__gauge) {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  color: var(--ws-mute, #6c6d70);
  font-family: var(--mg-mono);
  font-size: clamp(.48rem, 1.3cqw, .6rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.slgn-mg__gauge {
  height: 7px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}

.slgn-mg__gauge i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ws-paper, #ece9e1);
  transform-origin: 0 50%;
  animation: slgn-mg-fill 6.5s var(--ws-ease, ease) infinite;
}

/* Ogni metrica arriva a un livello diverso: tutte al massimo sarebbe una
   promessa, e non e' quello che vogliamo dire. */
.slgn-mg__metric:nth-child(1) .slgn-mg__gauge i { --to: .72; animation-delay: .2s; }
.slgn-mg__metric:nth-child(2) .slgn-mg__gauge i { --to: .48; animation-delay: .45s; }
.slgn-mg__metric:nth-child(3) .slgn-mg__gauge i { --to: .86; animation-delay: .70s; }

@keyframes slgn-mg-fill {
  0%       { transform: scaleX(0); }
  22%, 92% { transform: scaleX(var(--to, 1)); }
  100%     { transform: scaleX(0); }
}

/* -- Il budget: si consuma da destra -- */
.slgn-mg__budget {
  margin-top: .3rem;
  padding-top: .6rem;
  border-top: 1px solid var(--mg-line);
}

.slgn-mg__budget .slgn-mg__gauge { height: 9px; }

.slgn-mg__budget .slgn-mg__gauge i {
  background: repeating-linear-gradient(
    -55deg,
    rgba(255,255,255,.85) 0 4px,
    rgba(255,255,255,.35) 4px 8px
  );
  animation-name: slgn-mg-spend;
  animation-duration: 6.5s;
  animation-delay: .9s;
}

@keyframes slgn-mg-spend {
  0%       { transform: scaleX(0); }
  34%      { transform: scaleX(.94); }
  84%      { transform: scaleX(.62); }
  100%     { transform: scaleX(0); }
}

/* -- Il puntatore che clicca l'annuncio -- */
.slgn-mg__cursor {
  position: absolute;
  z-index: 4;
  right: 16%;
  bottom: 26%;
  width: .8rem;
  height: .8rem;
  border: 1px solid var(--ws-white, #fff);
  border-radius: 50%;
  animation: slgn-mg-click 6.5s var(--ws-ease, ease) infinite;
}

@keyframes slgn-mg-click {
  0%, 24%  { transform: translate(-30%, 50%); opacity: 0; }
  38%      { transform: none; opacity: 1; }
  46%      { transform: scale(.55); opacity: 1; }
  58%      { transform: scale(1.6); opacity: 0; }
  100%     { transform: scale(1.6); opacity: 0; }
}

/* ------------------------------------------------------------------ *
 * 8. Fondale delle aperture interne
 *
 * Studio, Servizi e Contatti hanno un'apertura di solo testo: il pannello
 * fa da fondo, quindi va indietro e non deve competere con il titolo.
 * ------------------------------------------------------------------ */

/* Il fondale non e' un riquadro: nessun fermo di altezza, se la prende
   tutta dall'apertura che riempie. */
.slgn-mg--bleed {
  min-height: 0;
  position: absolute;
  inset: 0;
  z-index: 0;
  aspect-ratio: auto;
  border: 0;
  padding: 0;
  background: none;
  pointer-events: none;
}

.slgn-mg--hero-bg { opacity: .5; }
.slgn-mg--hero-bg .slgn-mg__bar,
.slgn-mg--hero-bg .slgn-mg__pills { display: none; }

/* Il velo che appoggia il pannello sul nero.
 *
 * Vive sullo stesso '::after' del riflesso delle schede - un elemento ne ha
 * uno solo - e quella regola porta con se' un 'transform' animato che
 * attraversa il pannello da un lato all'altro. Ridefinire 'inset' e
 * 'background' non basta: senza fermare anche 'transform' e 'animation' il
 * velo se ne va per conto suo, e a fine corsa scopre il bordo del pannello
 * lasciando il taglio netto che si vedeva. */
.slgn-hero > .slgn-mg--hero-bg::after,
.slgn-hero > .slgn-wire::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: none;
  animation: none;
  background: linear-gradient(90deg, var(--ws-ink, #080808) 0%, rgba(8,8,8,.82) 26%, rgba(8,8,8,.28) 56%, transparent 78%);
}

@media (max-width: 899px) {
  .slgn-hero > .slgn-mg--hero-bg::after,
  .slgn-hero > .slgn-wire::after {
    background: linear-gradient(180deg, rgba(8,8,8,.45), var(--ws-ink, #080808) 68%);
  }
}

/* -- Perche' come fondo non basta riusare il pannello com'e' -- *
 *
 * Dentro una scheda del carosello questa animazione si guarda cinque
 * secondi e si passa oltre. Come fondo di un'apertura si guarda per tutto
 * il tempo che serve a leggere il titolo, e li' vengono fuori due cose che
 * nella scheda non si vedevano.
 *
 * La prima: gli spezzoni delle tracce restano fermi dal 12% all'86% del
 * ciclo, cioe' quasi sei secondi su otto. Nella scheda e' una pausa; come
 * fondo permanente si legge come un'animazione che si e' inceppata.
 *
 * La seconda: 'inset: 0' stira il pannello su tutta l'apertura, e quello
 * che sta dentro e' flessibile. A milleseicento pixel i segmenti dell'onda
 * diventano blocchi da cinquanta pixel invece di un'onda, e le tracce tre
 * barre lunghe quanto lo schermo.
 */

/* Il pannello torna alle misure per cui e' disegnato e si appoggia al lato
   destro: e' dove il velo lo lascia vedere, mentre il titolo resta sul nero
   pieno a sinistra. Sul telefono il velo scende dall'alto e il pannello
   riprende tutta la larghezza, quindi questa regola non lo riguarda. */
@media (min-width: 900px) {
  .slgn-hero > .slgn-mg--hero-bg {
    inset: 0 0 0 auto;
    width: min(58rem, 62%);
  }
}

/* I tre cicli vanno in deriva invece di battere insieme: cosi' mentre due
   tracce sono nella loro pausa lunga la terza si sta ridisegnando, e la
   pausa di ciascuna non diventa mai la pausa di tutte. */
.slgn-mg--hero-bg .slgn-mg__track:nth-child(1) b { animation-duration: 9s; }
.slgn-mg--hero-bg .slgn-mg__track:nth-child(2) b { animation-duration: 11.5s; }
.slgn-mg--hero-bg .slgn-mg__track:nth-child(3) b { animation-duration: 13.5s; }

/* E sotto a tutto uno scorrimento lentissimo del blocco tracce. Da solo non
   si nota - sono quattro punti percentuali in mezzo minuto - ma toglie
   l'immobilita' assoluta nei momenti in cui i tre cicli capitano fermi
   insieme lo stesso. Va e torna, invece di tornare al punto di partenza con
   uno scatto a fine giro. */
.slgn-mg--hero-bg .slgn-mg__tracks {
  animation: slgn-hero-deriva 34s var(--ws-ease, ease) infinite alternate;
}

@keyframes slgn-hero-deriva {
  from { transform: translateX(0); }
  to   { transform: translateX(-4%); }
}

/* ------------------------------------------------------------------ *
 * 9. Telefono
 * ------------------------------------------------------------------ */

/* Qui c'era un 4:3 per il telefono, e due composizioni che sul telefono
   perdevano dei pezzi. Non servono piu':
 *
 *   - la proporzione e' una sola ovunque, e dove 16:7 diventerebbe una
 *     fessura ci pensa il 'min-height' del pannello ad alzarla;
 *   - il calendario e la coda adesso si misurano sull'altezza della loro
 *     riga, quindi si stringono da soli invece di uscire.
 *
 * Il 4:3 in piu' faceva danno: un rapporto d'aspetto assieme a un
 * 'min-height' diventa anche una larghezza minima - 216 pixel di altezza
 * per 4/3 fanno 288 di larghezza - e dentro una colonna di griglia larga
 * 214 il pannello usciva dalla scheda. */

.slgn-mg { min-width: 0; }

/* -- Dove 16:7 diventerebbe una fessura -- *
 *
 * Un pannello largo tre dita, alto sette sedicesimi, e' alto centoventi
 * pixel: una volta tolti barra, pillole e imbottitura non resta niente per
 * la composizione. Sotto certe larghezze la proporzione si alza.
 *
 * Il fermo era scritto come 'min-height', ed era la strada sbagliata: un
 * rapporto d'aspetto trasferisce i vincoli da un lato all'altro, e in un
 * riquadro con 'contain: size' quell'altezza minima diventava una
 * larghezza minima - 216 pixel per 16/7 fanno 494 - cosi' il pannello
 * usciva dalla scheda del metodo da tutte e due le parti. Cambiare la
 * proporzione non trasferisce niente: e' una forma diversa, non un
 * vincolo in piu'.
 *
 * Sono misure di finestra e non di contenitore perche' un contenitore non
 * puo' interrogare se stesso: dovrebbe esserci un involucro intorno a ogni
 * pannello, e ce ne sono in punti dove l'involucro cambierebbe
 * l'impaginazione. */
@media (max-width: 999px) {
  .slgn-mg { aspect-ratio: 16 / 8.5; }
}

@media (max-width: 760px) {
  .slgn-mg { aspect-ratio: 5 / 4; }
}

/* ------------------------------------------------------------------ *
 * 10. Movimento ridotto
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .slgn-mg *,
  .slgn-mg *::before,
  .slgn-mg *::after,
  .slgn-wire::before {
    animation: none !important;
    transition: none !important;
  }

  /* Ferme, le barre resterebbero schiacciate a zero: qui si posano su una
     posa che si legge come pannello compilato. */
  .slgn-mg__pills span      { opacity: 1; }
  .slgn-mg__swatches span   { transform: scaleY(1); opacity: 1; }
  .slgn-mg__specimen i      { transform: scaleX(1); }
  .slgn-mg__lockup i        { transform: none; opacity: 1; }
  .slgn-mg__cal i           { background: var(--mg-fill); }
  .slgn-mg__cal i:nth-child(3n) { background: var(--ws-paper, #ece9e1); }
  .slgn-mg__item            { opacity: 1; transform: none; }
  .slgn-mg__track b         { transform: scaleX(1); opacity: 1; }
  .slgn-mg__wave i          { transform: scaleY(.5); }
  .slgn-mg__gauge i         { transform: scaleX(var(--to, .7)); }
  .slgn-mg__playhead        { opacity: 1; transform: translateX(38%); }
  .slgn-mg__cursor          { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ *
 * 11. Brief
 *
 * Un modulo che si compila da solo: la casella si spunta, l'etichetta
 * resta, la riga si scrive. E' la prima fase del metodo, quella in cui si
 * mettono per iscritto le cose che di solito restano a voce.
 * ------------------------------------------------------------------ */

.slgn-mg__form { display: grid; gap: .7rem; }

.slgn-mg__field {
  display: grid;
  grid-template-columns: auto minmax(0, 8rem) minmax(0, 1fr);
  align-items: center;
  gap: .6rem;
}

.slgn-mg__check {
  position: relative;
  width: .8rem;
  height: .8rem;
  border: 1px solid var(--mg-line-strong);
}

/* Il segno di spunta: due lati di un quadrato ruotati, cioe' una V */
.slgn-mg__check::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 6%;
  width: 34%;
  height: 62%;
  border: solid var(--ws-white, #fff);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(42deg) scale(0);
  transform-origin: 50% 50%;
  animation: slgn-mg-tick 9s var(--ws-ease, ease) infinite;
}

.slgn-mg__field:nth-child(1) .slgn-mg__check::after { animation-delay: .4s; }
.slgn-mg__field:nth-child(2) .slgn-mg__check::after { animation-delay: 1.2s; }
.slgn-mg__field:nth-child(3) .slgn-mg__check::after { animation-delay: 2.0s; }
.slgn-mg__field:nth-child(4) .slgn-mg__check::after { animation-delay: 2.8s; }

@keyframes slgn-mg-tick {
  0%, 4%   { transform: rotate(42deg) scale(0); }
  10%, 88% { transform: rotate(42deg) scale(1); }
  100%     { transform: rotate(42deg) scale(0); }
}

.slgn-mg__label {
  color: var(--ws-mute, #6c6d70);
  font-family: var(--mg-mono);
  font-size: clamp(.48rem, 1.3cqw, .6rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.slgn-mg__line {
  height: 4px;
  background: var(--mg-line-strong);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: slgn-mg-writeline 9s var(--ws-ease, ease) infinite;
}

.slgn-mg__field:nth-child(1) .slgn-mg__line { animation-delay: .5s; }
.slgn-mg__field:nth-child(2) .slgn-mg__line { animation-delay: 1.3s; }
.slgn-mg__field:nth-child(3) .slgn-mg__line { animation-delay: 2.1s; }
.slgn-mg__field:nth-child(4) .slgn-mg__line { animation-delay: 2.9s; }

@keyframes slgn-mg-writeline {
  0%, 4%   { transform: scaleX(0); }
  14%, 88% { transform: scaleX(1); }
  100%     { transform: scaleX(0); }
}

/* ------------------------------------------------------------------ *
 * 12. Direzione
 *
 * I riquadri di una tavola di riferimenti che si posano uno alla volta,
 * ognuno con un tono diverso: e' il momento in cui si sceglie come dovra'
 * apparire il brand, prima di produrre qualsiasi cosa.
 * ------------------------------------------------------------------ */

.slgn-mg__mood {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
}

/* Il rapporto sta sulle caselle e non sulla griglia: con 'height: 100%' e
   righe da 1fr dentro un contenitore ad altezza automatica le caselle
   collassavano a tre righe sottili. Dando a ognuna la sua proporzione la
   griglia si costruisce dal basso e non dipende piu' dal padre. */
.slgn-mg__tile { aspect-ratio: 4 / 3; }

.slgn-mg__tile {
  border: 1px solid var(--mg-line);
  opacity: 0;
  transform: translateY(10px) scale(.96);
  animation: slgn-mg-place 9s var(--ws-ease, ease) infinite;
}

/* Toni diversi: una tavola di riferimenti non e' fatta di sei quadrati
   uguali, e la scala di grigi qui fa il lavoro che altrove farebbe il
   colore. */
.slgn-mg__tile:nth-child(1) { background: rgba(255,255,255,.30); animation-delay: .3s; }
.slgn-mg__tile:nth-child(2) { background: rgba(255,255,255,.09); animation-delay: .5s; }
.slgn-mg__tile:nth-child(3) { background: rgba(255,255,255,.18); animation-delay: .7s; }
.slgn-mg__tile:nth-child(4) { background: rgba(255,255,255,.06); animation-delay: .9s; }
.slgn-mg__tile:nth-child(5) { background: rgba(255,255,255,.42); animation-delay: 1.1s; }
.slgn-mg__tile:nth-child(6) { background: rgba(255,255,255,.13); animation-delay: 1.3s; }

@keyframes slgn-mg-place {
  0%, 3%   { opacity: 0; transform: translateY(10px) scale(.96); }
  12%, 88% { opacity: 1; transform: none; }
  100%     { opacity: 0; transform: translateY(10px) scale(.96); }
}

/* Posa di riposo per chi ha chiesto meno animazioni */
@media (prefers-reduced-motion: reduce) {
  .slgn-mg__check::after { transform: rotate(42deg) scale(1); }
  .slgn-mg__line { transform: scaleX(1); }
  .slgn-mg__tile { opacity: 1; transform: none; }
}

/* ================================================================== *
 * 11. PANNELLI PIU' VIVI
 *
 * I pannelli erano gia' animati, ma con cicli da sette a dieci secondi: per
 * la maggior parte del tempo sullo schermo non si muoveva niente, e chi
 * passava davanti vedeva un disegno fermo. L'animazione c'era, ma non
 * capitava quasi mai sotto gli occhi di nessuno.
 *
 * Si corregge su tre piani.
 *
 *   1  Un fondo che non sta mai fermo - una luce che attraversa il pannello
 *      e una riga di scansione che scende - cosi' anche nei secondi in cui la
 *      coreografia principale riposa c'e' qualcosa che si muove.
 *   2  Cicli piu' corti sulle animazioni piu' lente: da dieci secondi a sei e
 *      mezzo, che e' circa quanto uno sguardo resta su un pannello.
 *   3  Un respiro lentissimo di tutto il corpo del pannello, sfasato per
 *      tipo, cosi' quattro pannelli affiancati non pulsano all'unisono -
 *      che sarebbe peggio del fermo immagine.
 *
 * Restano le regole di sempre: solo 'transform' e 'opacity', e con
 * prefers-reduced-motion si ferma tutto.
 * ================================================================== */

/* -- La luce che attraversa -- *
 *
 * Una banda diagonale chiara che passa da sinistra a destra ogni cinque
 * secondi e mezzo. E' il riflesso su un vetro: dice "questo e' uno schermo
 * acceso" senza disegnare nessuno schermo.
 */
.slgn-mg::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 38%,
    rgba(255, 255, 255, .055) 47%,
    rgba(255, 255, 255, .1) 50%,
    rgba(255, 255, 255, .055) 53%,
    transparent 62%
  );
  transform: translate3d(-62%, 0, 0);
  animation: slgn-mg-sheen 5.6s var(--ws-ease, ease) infinite;
}

@keyframes slgn-mg-sheen {
  0%   { transform: translate3d(-62%, 0, 0); }
  /* La pausa e' meta' del ciclo: senza, il riflesso passerebbe in continuo e
     diventerebbe un tergicristallo. */
  46%  { transform: translate3d(62%, 0, 0); }
  100% { transform: translate3d(62%, 0, 0); }
}

/* -- La riga di scansione -- *
 *
 * Scende dall'alto in undici secondi, larga quanto il pannello e appena
 * percettibile. Sta sotto al contenuto, non sopra: deve illuminare le parti,
 * non passarci davanti.
 */
.slgn-mg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 38%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .05) 62%, transparent);
  animation: slgn-mg-scan 11s linear infinite;
}

@keyframes slgn-mg-scan {
  0%   { transform: translate3d(0, -110%, 0); opacity: 0; }
  12%  { opacity: 1; }
  84%  { opacity: 1; }
  100% { transform: translate3d(0, 300%, 0); opacity: 0; }
}

/* Nello scroller di storie il pannello e' gia' un riquadro piccolo sopra una
   fotografia: due strati di luce in piu' lo trasformerebbero in una macchia.
   Li' resta com'era. */
.slgn-hero-story__slide .slgn-mg::before,
.slgn-hero-story__slide .slgn-mg::after {
  display: none;
}

/* -- Il respiro del corpo -- *
 *
 * Due pixel di scostamento in dieci secondi: da soli non si notano, e non
 * devono. Servono a togliere quell'aria di immagine incollata che ha
 * qualunque cosa perfettamente immobile.
 *
 * Il ritardo negativo sfasa i pannelli fra loro: sono gia' a meta' ciclo
 * quando compaiono, ognuno a un punto diverso.
 */
.slgn-mg__body {
  animation: slgn-mg-breath 10s ease-in-out infinite alternate;
}

@keyframes slgn-mg-breath {
  from { transform: translate3d(0, 1.5px, 0); }
  to   { transform: translate3d(0, -1.5px, 0); }
}

.slgn-mg--panel:has(.slgn-mg__cal) .slgn-mg__body      { animation-delay: -2.5s; }
.slgn-mg--panel:has(.slgn-mg__tracks) .slgn-mg__body   { animation-delay: -5s; }
.slgn-mg--panel:has(.slgn-mg__metrics) .slgn-mg__body  { animation-delay: -7.5s; }
.slgn-mg--panel:has(.slgn-mg__mood) .slgn-mg__body     { animation-delay: -3.7s; }
.slgn-mg--panel:has(.slgn-mg__form) .slgn-mg__body     { animation-delay: -6.2s; }

/* -- Cicli piu' corti -- *
 *
 * Le stesse coreografie, girate piu' spesso. I valori nuovi stanno tutti fra
 * i cinque e i sette secondi: abbastanza lenti da leggersi, abbastanza corti
 * da capitare sotto gli occhi mentre si scorre la pagina.
 */
.slgn-mg__item      { animation-duration: 6.5s; }
.slgn-mg__queue     { animation-duration: 6.5s; }
.slgn-mg__cal i     { animation-duration: 6.5s; }
.slgn-mg__field     { animation-duration: 6s; }
.slgn-mg__label     { animation-duration: 6s; }
.slgn-mg__check     { animation-duration: 6s; }
.slgn-mg__line      { animation-duration: 6s; }
.slgn-mg__tile      { animation-duration: 6s; }
.slgn-mg__pills span { animation-duration: 7s; }

/* La spia in cima lampeggia piu' spesso: e' il dettaglio che si guarda per
   primo quando ci si chiede se una cosa e' viva. */
.slgn-mg__dot { animation-duration: 1.7s; }

/* -- Movimento ridotto -- */
@media (prefers-reduced-motion: reduce) {
  .slgn-mg::before,
  .slgn-mg::after,
  .slgn-mg__body {
    animation: none !important;
    transform: none !important;
  }

  /* Il riflesso si spegne del tutto: fermo a meta' pannello sarebbe una
     macchia chiara senza spiegazione. */
  .slgn-mg::after { opacity: 0; }
}

/* Nella scheda il corpo distribuisce le sue righe su duecentocinquanta
   pixel e il respiro e' giusto; nell'apertura ne ha quasi seicento, e lo
   stesso "space-between" apre un buco di quattrocento pixel fra le tracce e
   l'onda. Come fondo la timeline deve restare un blocco solo, raccolto al
   centro dell'altezza che ha a disposizione. */
.slgn-mg--hero-bg .slgn-mg__body {
  align-content: center;
  gap: 2rem;
}

/* Il pannello non finisce piu' con lo schermo, quindi ha un bordo sinistro
   dove prima non ce n'era: un taglio verticale netto in mezzo all'apertura.
   La maschera lo dissolve nel nero invece di appoggiarcelo sopra. Vale sul
   contenuto e sul velo insieme, perche' il velo e' un figlio. */
@media (min-width: 900px) {
  .slgn-hero > .slgn-mg--hero-bg {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
  }
}


/* ================================================================== *
 * UNA FORMA SOLA, E RIEMPITA TUTTA
 *
 * Prima di questa sezione ogni pannello prendeva l'altezza da dove
 * capitava: nella scheda di un servizio quella che avanzava accanto
 * all'elenco, nella scheda del metodo un'altezza scritta a mano, nella
 * striscia della home il suo 16:9. Tre altezze diverse per la stessa
 * composizione, e in due casi su tre non ci stava: il pannello ha
 * 'container-type: size', quindi il contenuto non lo puo' allargare - se
 * non ci sta viene tagliato, e basta.
 *
 * Da qui in poi il pannello ha una proporzione sola, 16:7, ovunque
 * compaia. Sembra una restrizione ed e' l'opposto: sapere in anticipo che
 * il corpo sara' sempre un rettangolo lungo circa quattro volte la sua
 * altezza permette di disegnare le composizioni per quel rettangolo invece
 * di difenderle da qualunque forma. E' il motivo per cui qui sotto quasi
 * tutte le composizioni passano da una colonna a due o tre: in un
 * rettangolo cosi' lungo, delle fasce impilate riempiono il centro e
 * lasciano vuoti larghi ai lati.
 *
 * La proporzione ha un fermo: sotto una certa larghezza 16:7 non e' piu' un
 * pannello, e' una fessura. 'min-height' tiene il pannello a tredici rem e
 * mezzo e da li' in giu' la forma si alza da sola - una riga sola invece di
 * una serie di casi al variare della finestra.
 *
 * Le due regole che tengono tutto insieme:
 *
 *   1  nessuna misura nasce dalla larghezza. Un quadrato o un verticale si
 *      misurano sull'altezza della loro riga ('height' piu' 'aspect-ratio',
 *      mai 'width' piu' 'aspect-ratio'), perche' l'altezza qui e' scarsa e
 *      la larghezza abbonda. Dove serve la larghezza c'e' 'max-height: 100%'
 *      a fare da fermo: la casella diventa un rettangolo invece di uscire.
 *
 *   2  le righe sono definite - 'minmax(0, 1fr)' - non dedotte dal
 *      contenuto. Una riga dedotta cresce quanto le serve e poi sborda;
 *      una riga definita costringe il contenuto a stare, e le percentuali
 *      dei figli hanno finalmente un riferimento.
 *
 * Dove il pannello resta comunque basso - un telefono, una scheda del
 * metodo - il foglio spegne i dettagli in coda invece di stringerli. Un
 * pezzo in meno si nota molto meno di un pezzo tagliato a meta'.
 * ================================================================== */

/* -- Il corpo distribuisce righe definite, non contenuto -- */
.slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__body {
  align-content: stretch;
  min-height: 0;
}

/* -- Il contorno si stringe quando il pannello e' basso -- *
 *
 * Barra e pillole costano insieme quasi quattro rem: su un pannello alto
 * venti sono un decimo, su uno alto tredici sono un terzo. Si stringono
 * loro, cosi' l'altezza che avanza va alla composizione.
 */
@container (max-height: 17rem) {
  .slgn-mg__bar        { padding-bottom: .45rem; }
  .slgn-mg__body       { padding-top: .5rem; gap: clamp(.3rem, 1.4cqh, .6rem); }
  .slgn-mg__pills      { padding-top: .5rem; gap: .25rem; }
  .slgn-mg__pills span { padding: .12rem .4rem; }
}

/* Sotto le nove rem non resta niente per il contenuto: spariscono prima le
   pillole, che sono un riassunto, e il contesto in barra, che e' una nota. */
@container (max-height: 9rem) {
  .slgn-mg__pills,
  .slgn-mg__bar span { display: none; }
}

/* ------------------------------------------------------------------ *
 * Identita' grafica
 *
 * Era una pila: il segno, i campioni, il saggio. Impilata in un rettangolo
 * lungo quattro volte l'altezza lasciava il segno schiacciato in una fascia
 * e mezzo pannello vuoto ai lati. Adesso e' un foglio di consegna aperto: a
 * sinistra il segno grande per tutta l'altezza, in mezzo la tavolozza in
 * colonne piene, a destra il saggio tipografico. E' anche l'ordine in cui
 * si sfoglia un manuale d'identita'.
 * ------------------------------------------------------------------ */

.slgn-mg--panel:has(.slgn-mg__lockup) .slgn-mg__body {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(.7rem, 2.4cqw, 1.4rem);
}

.slgn-mg__lockup {
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  height: 100%;
  aspect-ratio: auto;
}

/* Le forme si misurano sull'altezza della cornice: nel rettangolo largo la
   larghezza non e' mai il vincolo, l'altezza sempre. */
.slgn-mg__lockup i { width: auto; height: 46%; aspect-ratio: 1; }
.slgn-mg__lockup i:nth-child(3) { width: auto; height: 18%; }

.slgn-mg__swatches {
  grid-column: 2;
  grid-row: 1;
  align-items: stretch;
  height: 100%;
  gap: min(.32rem, 1.6cqw);
}

/* Colonne piene invece di una fascia bassa: e' la forma in cui una
   tavolozza si guarda davvero, e riempie l'altezza che ha. */
.slgn-mg__swatches span { height: 100%; }

.slgn-mg__specimen {
  grid-column: 3;
  grid-row: 1;
  height: 100%;
  align-content: center;
  gap: min(.5rem, 5cqh);
}

/* Cinque righe invece di tre, e piu' spesse: in una colonna alta come il
   pannello, tre capelli lasciavano il terzo riquadro praticamente vuoto.
   Le righe calano di corpo scendendo, come in un saggio vero - titolo,
   sottotitolo, testo.

   L'altezza e' in cqh e non in percentuale: una percentuale si risolve solo
   contro un genitore che un'altezza ce l'ha dichiarata, e un elemento
   stirato da una griglia non ce l'ha - l'altezza ce l'ha dopo, e per la
   percentuale e' come se non ci fosse. Risultato: righe alte zero, cioe'
   una colonna vuota. Il cqh invece guarda il pannello, che un'altezza ce
   l'ha sempre. */
.slgn-mg__specimen i:nth-child(1) { width: 96%; height: min(9px, 5.5cqh); animation-delay: 1.20s; }
.slgn-mg__specimen i:nth-child(2) { width: 72%; height: min(7px, 4.4cqh); animation-delay: 1.32s; }
.slgn-mg__specimen i:nth-child(3) { width: 88%; height: min(5px, 3.2cqh); animation-delay: 1.44s; }
.slgn-mg__specimen i:nth-child(4) { width: 80%; height: min(5px, 3.2cqh); animation-delay: 1.56s; }
.slgn-mg__specimen i:nth-child(5) { width: 46%; height: min(5px, 3.2cqh); animation-delay: 1.68s; }

/* ------------------------------------------------------------------ *
 * Piano editoriale: il mese a sinistra, la coda a destra
 * ------------------------------------------------------------------ */

.slgn-mg--panel:has(.slgn-mg__cal) .slgn-mg__body {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(.7rem, 2.6cqw, 1.4rem);
}

.slgn-mg__cal {
  height: 100%;
  min-height: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
}

/* Come le tessere del profilo: la casella prende la cella, e la forma
   quadrata gliela da' la griglia, sette colonne su tre file. */
.slgn-mg__cal i { width: 100%; height: 100%; aspect-ratio: auto; }

.slgn-mg__queue {
  height: 100%;
  min-height: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: min(.4rem, 4cqh);
}

.slgn-mg__item { min-height: 0; padding-bottom: min(.4rem, 3.5cqh); }
.slgn-mg__item b { align-self: center; width: auto; height: min(2rem, 13cqh); aspect-ratio: 1; }
.slgn-mg__item u { height: min(4px, 1.8cqh); }

/* ------------------------------------------------------------------ *
 * Montaggio: tracce sopra, onda sotto
 * ------------------------------------------------------------------ */

.slgn-mg--panel:not(.slgn-mg--hero-bg):has(.slgn-mg__tracks) .slgn-mg__body {
  grid-template-rows: minmax(0, 1.85fr) minmax(0, 1fr);
}

.slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__tracks {
  height: 100%;
  min-height: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: min(.35rem, 3.5cqh);
}

.slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__track { height: auto; min-height: 0; }
.slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__wave  { height: 100%; min-height: 0; }

/* ------------------------------------------------------------------ *
 * Campagna: le metriche a sinistra, il budget nella sua colonna
 * ------------------------------------------------------------------ */

.slgn-mg--panel:has(.slgn-mg__metrics) .slgn-mg__body {
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  column-gap: clamp(.9rem, 3cqw, 1.6rem);
}

.slgn-mg__metrics {
  height: 100%;
  min-height: 0;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  align-content: stretch;
  gap: min(.55rem, 5cqh);
}

.slgn-mg__metric { min-height: 0; align-content: center; gap: min(.3rem, 2.6cqh); }
/* Il misuratore e' un blocco, non una riga di testo.
 *
 * La regola che veste le righe della campagna - '.slgn-mg__metric span' -
 * prendeva anche lui, e lo rendeva un contenitore flex: dentro un flex, il
 * riempimento senza 'flex' si stringe sul contenuto, e il contenuto e'
 * niente. Le barre della campagna erano larghe zero da sempre; si vedeva
 * solo la loro guida grigia, e sembrava che il riempimento non partisse
 * mai. */
.slgn-mg__gauge {
  display: block;
  height: min(8px, 3.6cqh);
}
/* Il budget non sta piu' sotto le metriche ma accanto: in una fascia sola
   la riga di separazione tagliava il pannello per il lungo, e sopra le
   restava un dito d'aria. */
.slgn-mg__budget {
  align-self: center;
  margin-top: 0;
  padding-top: 0;
  padding-left: clamp(.9rem, 3cqw, 1.6rem);
  border-top: 0;
  border-left: 1px solid var(--mg-line);
}
.slgn-mg__budget .slgn-mg__gauge { height: min(10px, 4.4cqh); }

/* ------------------------------------------------------------------ *
 * Brief: quattro righe che si spartiscono l'altezza
 * ------------------------------------------------------------------ */

.slgn-mg--panel:has(.slgn-mg__form) .slgn-mg__body {
  grid-template-rows: minmax(0, 1fr);
}

.slgn-mg__form {
  height: 100%;
  min-height: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  align-content: stretch;
  gap: min(.7rem, 6cqh);
}

.slgn-mg__field { min-height: 0; grid-template-columns: auto minmax(0, 7.5rem) minmax(0, 1fr); }
.slgn-mg__check { width: auto; height: min(.9rem, 9cqh); aspect-ratio: 1; }
.slgn-mg__label { font-size: clamp(.42rem, 1.3cqw, .6rem); }
.slgn-mg__line  { height: min(5px, 2.2cqh); }

/* ------------------------------------------------------------------ *
 * Direzione: dieci riquadri invece di sei
 *
 * Sei riquadri su tre colonne, in un pannello lungo quattro volte la sua
 * altezza, diventavano sei lastre larghissime: non sembravano riferimenti,
 * sembrava uno schema. Dieci su cinque colonne riportano la casella a una
 * proporzione da fotografia, ed e' anche il numero di immagini con cui una
 * direzione si mostra davvero - sei sono un accenno.
 * ------------------------------------------------------------------ */

.slgn-mg--panel:has(.slgn-mg__mood) .slgn-mg__body {
  grid-template-rows: minmax(0, 1fr);
}

.slgn-mg__mood {
  height: 100%;
  min-height: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: min(.4rem, 4cqh);
}

/* Le caselle prendono la cella intera: il rapporto glielo da' la griglia,
   che a sua volta lo prende dal pannello. Tenere qui un 'aspect-ratio'
   voleva dire farle misurare sulla larghezza, cioe' l'unica dimensione che
   in questo rettangolo non e' mai quella scarsa. */
.slgn-mg__tile { width: 100%; height: 100%; aspect-ratio: auto; }

.slgn-mg__tile:nth-child(7)  { background: rgba(255,255,255,.22); animation-delay: 1.5s; }
.slgn-mg__tile:nth-child(8)  { background: rgba(255,255,255,.08); animation-delay: 1.7s; }
.slgn-mg__tile:nth-child(9)  { background: rgba(255,255,255,.35); animation-delay: 1.9s; }
.slgn-mg__tile:nth-child(10) { background: rgba(255,255,255,.11); animation-delay: 2.1s; }

/* ------------------------------------------------------------------ *
 * Il fondale dell'apertura resta com'era
 *
 * Non e' un pannello dentro un riquadro: e' il fondo di mezza schermata, e
 * li' l'altezza abbonda. Stirare le tracce su seicento pixel farebbe tre
 * fasce grigie al posto di un montaggio.
 * ------------------------------------------------------------------ */

.slgn-mg--hero-bg .slgn-mg__body { grid-template-rows: none; align-content: center; }
.slgn-mg--hero-bg .slgn-mg__tracks,
.slgn-mg--hero-bg .slgn-mg__wave { height: auto; }


/* ================================================================== *
 * SOCIAL, IN TRE ATTI
 *
 * Il pannello dei social era una griglia di quadratini e una fila di
 * schede: diceva "ci sono dei post". Il testo accanto pero' non parla di
 * post, parla di un lavoro che ha un prima e un dopo - si prepara, si
 * pubblica, e poi qualcuno risponde. Una griglia ferma quel racconto non
 * lo contiene.
 *
 * Qui ci sono tre atti sullo stesso giro di quindici secondi:
 *
 *   1  si carica un contenuto        0.9s -> 4.5s
 *   2  lo si ritrova sul profilo     5.9s -> 9.5s
 *   3  arrivano cuori e risposte    10.9s -> 14.5s
 *
 * Un giro solo per tutto, e ogni pezzo si aggancia a quello con la sua
 * percentuale. Sarebbe stato piu' comodo dare a ogni animazione la sua
 * durata, ma allora le barre e i cuori ripartirebbero a meta' del loro
 * atto ogni volta che il giro ricomincia, e la scena si scomporrebbe. Le
 * tre finestre da tenere a mente sono queste:
 *
 *      atto 1  7% - 29%      atto 2  40% - 62%      atto 3  73% - 95%
 *
 * Ogni atto e' costruito su tre colonne, perche' il corpo del pannello e'
 * un rettangolo lungo quattro volte la sua altezza: due soli elementi ci
 * lascerebbero dentro mezza fascia di vuoto.
 *
 * Niente numeri e niente frasi: dei cuori, delle risposte, dei conteggi
 * del profilo c'e' la forma - un tondino, una riga, una barretta. Un
 * conteggio inventato e' un dato falso anche dentro a un'illustrazione, e
 * qui non serve nessun dato.
 * ================================================================== */

.slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__body {
  grid-template-rows: minmax(0, 1fr);
}

.slgn-mg__scena {
  position: relative;
  min-height: 0;
  height: 100%;
}

.slgn-mg__atto {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 100%;
  opacity: 0;
  animation: slgn-mg-atto 15s var(--ws-ease, cubic-bezier(.22,.72,.2,1)) infinite;
}

/* Il ritardo negativo sposta indietro la partenza: l'atto due comincia al
   quinto secondo, il tre al decimo, e tutti e tre chiudono insieme il giro. */
.slgn-mg__atto--profilo { animation-delay: -10s; }
.slgn-mg__atto--reel    { animation-delay: -5s; }

@keyframes slgn-mg-atto {
  0%, 3%    { opacity: 0; transform: translate3d(0, 5px, 0); }
  7%, 29%   { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: translate3d(0, -5px, 0); }
}

/* ------------------------------------- atto 1: il carico */

.slgn-mg__atto--carico {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.6rem, 2.4cqw, 1.1rem);
}

/* La miniatura verticale: e' il file che sta salendo. */
.slgn-mg__clip {
  position: relative;
  overflow: hidden;
  height: min(100%, 11rem);
  width: auto;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--mg-line-strong);
  background: var(--mg-fill);
}

.slgn-mg__clip i {
  position: absolute;
  inset: auto 0 0;
  display: block;
  height: 100%;
  background: linear-gradient(0deg, rgba(255, 255, 255, .16), transparent);
  transform-origin: bottom center;
  animation: slgn-mg-clipfill 15s var(--ws-ease, ease) infinite;
}

@keyframes slgn-mg-clipfill {
  0%, 7%    { transform: scaleY(0); }
  26%, 100% { transform: scaleY(1); }
}

/* Il triangolo compare quando il caricamento e' finito: e' il momento in
   cui il file diventa un filmato che si puo' guardare. */
.slgn-mg__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: .32rem 0 .32rem .52rem;
  border-left-color: var(--ws-paper, #ece9e1);
  translate: -40% -50%;
  opacity: 0;
  animation: slgn-mg-play 15s var(--ws-ease, ease) infinite;
}

@keyframes slgn-mg-play {
  0%, 22%   { opacity: 0; scale: .5; }
  27%, 29%  { opacity: 1; scale: 1; }
  33%, 100% { opacity: 0; scale: 1; }
}

.slgn-mg__up {
  display: grid;
  gap: min(.42rem, 4cqh);
  align-content: center;
  min-width: 0;
}

.slgn-mg__uprow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  color: var(--ws-mute, #6c6d70);
  font-family: var(--mg-mono);
  font-size: clamp(.46rem, 3.6cqh, .62rem);
  letter-spacing: .04em;
}

.slgn-mg__uprow b { color: var(--ws-silver, #c9c9c7); font-weight: 400; }
.slgn-mg__uprow em { font-style: normal; }

/* La barra riusa il misuratore della campagna: stessa forma, altro ritmo. */
.slgn-mg__atto--carico .slgn-mg__gauge i {
  animation: slgn-mg-carico 15s var(--ws-ease, ease) infinite;
}

@keyframes slgn-mg-carico {
  0%, 7%    { transform: scaleX(0); }
  26%, 100% { transform: scaleX(1); }
}

/* La didascalia che si scrive: due righe, non due frasi. */
.slgn-mg__cap { display: grid; gap: min(.28rem, 2.6cqh); }

.slgn-mg__cap u {
  display: block;
  height: min(3px, 1.4cqh);
  background: var(--mg-line);
  text-decoration: none;
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: slgn-mg-scrive 15s var(--ws-ease, ease) infinite;
  animation-delay: calc(var(--i, 0) * .5s);
}

.slgn-mg__cap u:nth-child(1) { width: 88%; }
.slgn-mg__cap u:nth-child(2) { width: 52%; }

@keyframes slgn-mg-scrive {
  0%, 12%   { transform: scaleX(0); }
  22%, 29%  { transform: scaleX(1); }
  33%, 100% { transform: scaleX(0); }
}

/* Le etichette: riquadri, non parole. Scriverci dentro un argomento
   vorrebbe dire inventare di cosa parla un lavoro che non esiste. */
.slgn-mg__tags { display: flex; gap: .3rem; }

.slgn-mg__tags i {
  width: min(2.4rem, 14cqw);
  height: min(.72rem, 6cqh);
  border: 1px solid var(--mg-line);
  opacity: 0;
  animation: slgn-mg-tag 15s var(--ws-ease, ease) infinite;
  animation-delay: calc(var(--i, 0) * .28s);
}

.slgn-mg__tags i:nth-child(2) { width: min(1.7rem, 10cqw); }
.slgn-mg__tags i:nth-child(3) { width: min(2.1rem, 12cqw); }

@keyframes slgn-mg-tag {
  0%, 15%   { opacity: 0; transform: translate3d(0, 3px, 0); }
  21%, 29%  { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; }
}

/* La coda: quello che sale dopo. Un contenuto solo in caricamento sarebbe
   un post; tre in fila sono un piano di pubblicazione. */
.slgn-mg__coda {
  align-self: stretch;
  height: 100%;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: min(.3rem, 2.6cqh);
}

.slgn-mg__coda i {
  height: min(100%, 2.8rem);
  width: auto;
  aspect-ratio: 9 / 16;
  justify-self: center;
  border: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, .04);
  opacity: 0;
  animation: slgn-mg-coda 15s var(--ws-ease, ease) infinite;
  animation-delay: calc(var(--i, 0) * .22s);
}

@keyframes slgn-mg-coda {
  0%, 9%    { opacity: 0; transform: translate3d(0, 4px, 0); }
  16%, 29%  { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; }
}

/* --------------------------------------- atto 2: il profilo */

.slgn-mg__atto--profilo {
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: min(.5rem, 4.5cqh);
  align-content: stretch;
}

.slgn-mg__prof {
  display: flex;
  align-items: center;
  gap: min(.6rem, 3cqw);
}

.slgn-mg__prof > i {
  flex: none;
  width: auto;
  height: min(2.2rem, 15cqh);
  aspect-ratio: 1;
  border: 1px solid var(--mg-line-strong);
  border-radius: 50%;
}

.slgn-mg__chi { display: grid; gap: min(4px, 1.8cqh); flex: 1; min-width: 0; }

.slgn-mg__chi b { display: block; width: 42%; height: min(4px, 1.8cqh); background: var(--mg-line-strong); }
.slgn-mg__chi s { display: block; width: 24%; height: min(3px, 1.4cqh); background: var(--mg-line); }

/* Le tre colonne del profilo: una barretta e una riga, mai un numero. */
.slgn-mg__stats { display: flex; flex: none; gap: min(1.1rem, 5cqw); }

.slgn-mg__stats span {
  display: grid;
  gap: min(3px, 1.4cqh);
  justify-items: center;
  opacity: 0;
  animation: slgn-mg-tag 15s var(--ws-ease, ease) infinite;
  animation-delay: calc(-10s + var(--i, 0) * .2s);
}

.slgn-mg__stats u { display: block; width: 1.6rem; height: min(4px, 1.8cqh); background: var(--mg-line-strong); text-decoration: none; }
.slgn-mg__stats em { display: block; width: 1rem; height: min(3px, 1.4cqh); background: var(--mg-line); }

/* Le tre schede del profilo: la prima e' quella aperta. */
.slgn-mg__tabs { display: flex; gap: .3rem; }

.slgn-mg__tabs i { flex: 1; height: 2px; background: var(--mg-line); }
.slgn-mg__tabs i:first-child { background: var(--ws-paper, #ece9e1); }

.slgn-mg__griglia {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 2px;
  height: 100%;
  min-height: 0;
}

/* La tessera prende la cella e basta.
 *
 * Prima aveva 'aspect-ratio: 1' con 'max-height: 100%' come fermo, e il
 * fermo non ha tenuto: dentro una cella alta cinquanta pixel la tessera ne
 * misurava sessantadue e si appoggiava sopra la fila di sotto. La
 * percentuale, in una casella che si dimensiona da sola con un rapporto
 * d'aspetto, non e' un vincolo affidabile.
 *
 * Il quadrato ora lo fa la griglia: dieci colonne su due file, in un corpo
 * lungo quattro volte l'altezza, danno una cella quasi quadrata da sole -
 * e nel caso peggiore danno un rettangolino, che e' comunque una griglia di
 * profilo, mentre due file sovrapposte non sono niente. */
.slgn-mg__griglia i {
  width: 100%;
  height: 100%;
  border: 1px solid var(--mg-line);
  background: var(--mg-fill);
  opacity: 0;
  animation: slgn-mg-tessera 15s var(--ws-ease, ease) infinite;
  /* La cascata: una tessera dopo l'altra, non tutte insieme. */
  animation-delay: calc(-10s + var(--i, 0) * .08s);
}

@keyframes slgn-mg-tessera {
  0%, 5%    { opacity: 0; transform: scale(.9); }
  10%, 29%  { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; transform: none; }
}

/* La tessera nuova si accende dopo le altre: e' il momento in cui si capisce
   che il contenuto e' arrivato dove doveva. */
.slgn-mg__griglia i.slgn-mg__nuova {
  border-color: var(--ws-paper, #ece9e1);
  background: rgba(255, 255, 255, .14);
  animation-name: slgn-mg-nuova;
}

@keyframes slgn-mg-nuova {
  0%, 12%   { opacity: 0; transform: scale(.86); }
  18%, 29%  { opacity: 1; transform: none; }
  33%, 100% { opacity: 0; }
}

/* ------------------------ atto 3: il reel, chi risponde, cosa si tocca */

.slgn-mg__atto--reel {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.7rem, 2.6cqw, 1.3rem);
}

.slgn-mg__vplay {
  position: relative;
  overflow: hidden;
  height: min(100%, 11rem);
  width: auto;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--mg-line-strong);
  background: var(--mg-fill);
}

/* Gli spezzoni in cima: tre, e si accendono uno dopo l'altro dentro
   l'atto. E' il segno con cui qualunque telefono dice "sei al secondo di
   tre" senza scrivere niente. */
.slgn-mg__vsteps { position: absolute; inset: .28rem .28rem auto; display: flex; gap: 2px; }

.slgn-mg__vsteps i {
  flex: 1;
  height: 2px;
  background: var(--mg-line);
  overflow: hidden;
}

.slgn-mg__vsteps i::after {
  content: "";
  display: block;
  height: 100%;
  background: var(--ws-paper, #ece9e1);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: slgn-mg-step 15s linear infinite;
}

.slgn-mg__vsteps i:nth-child(1)::after { animation-delay: -5s; }
.slgn-mg__vsteps i:nth-child(2)::after { animation-delay: -5.1s; }
.slgn-mg__vsteps i:nth-child(3)::after { animation-delay: -5.2s; }

@keyframes slgn-mg-step {
  0%, 73%   { transform: scaleX(0); }
  80%, 100% { transform: scaleX(1); }
}

/* La riga di avanzamento in fondo al reel gira una volta per atto: il
   filmato parte quando parte l'atto, quindi dice il vero. */
.slgn-mg__vbar {
  position: absolute;
  inset: auto .3rem .3rem;
  height: 1px;
  background: var(--mg-line);
}

.slgn-mg__vbar i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  background: var(--ws-paper, #ece9e1);
  transform-origin: left center;
  animation: slgn-mg-vbar 15s linear infinite;
}

@keyframes slgn-mg-vbar {
  0%, 73%   { transform: scaleX(0); }
  96%, 100% { transform: scaleX(1); }
}

/* I cuori salgono dal fondo del reel e si dissolvono strada facendo, come
   quando qualcuno tiene premuto. Sono quattro: tre sembrano pochi, cinque
   sembrano una pioggia. */
.slgn-mg__cuori {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.slgn-mg__cuori i {
  position: absolute;
  bottom: 12%;
  left: calc(20% + var(--i, 0) * 17%);
  width: .34rem;
  height: .34rem;
  border-radius: 50% 50% 50% 0;
  background: var(--ws-paper, #ece9e1);
  opacity: 0;
  transform: rotate(-45deg);
  animation: slgn-mg-cuore 15s var(--ws-ease, ease) infinite;
  animation-delay: calc(var(--i, 0) * .55s);
}

@keyframes slgn-mg-cuore {
  0%, 76%   { opacity: 0; transform: rotate(-45deg) translate3d(0, 0, 0) scale(.6); }
  80%       { opacity: .95; }
  92%, 100% { opacity: 0; transform: rotate(-45deg) translate3d(0, -260%, 0) scale(1); }
}

/* Le risposte che arrivano: un tondino e una riga, una dopo l'altra, e in
   fondo la riga per rispondere. */
.slgn-mg__chat {
  align-self: stretch;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-content: stretch;
  align-items: center;
  gap: min(.42rem, 3.6cqh);
  min-width: 0;
  min-height: 0;
}

.slgn-mg__chat > span {
  display: flex;
  align-items: center;
  gap: .4rem;
  opacity: 0;
  animation: slgn-mg-chat 15s var(--ws-ease, ease) infinite;
  animation-delay: calc(var(--i, 0) * .55s);
}

.slgn-mg__chat b {
  flex: none;
  width: auto;
  height: min(.9rem, 7.5cqh);
  aspect-ratio: 1;
  border: 1px solid var(--mg-line-strong);
  border-radius: 50%;
}

.slgn-mg__chat u {
  height: min(3px, 1.4cqh);
  background: var(--mg-line-strong);
  text-decoration: none;
}

.slgn-mg__chat > span:nth-child(1) u { width: 72%; }
.slgn-mg__chat > span:nth-child(2) u { width: 54%; }
.slgn-mg__chat > span:nth-child(3) u { width: 64%; }
.slgn-mg__chat > span:nth-child(4) u { width: 46%; }

@keyframes slgn-mg-chat {
  0%, 75%   { opacity: 0; transform: translate3d(10px, 0, 0); }
  81%, 95%  { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}

/* La riga per rispondere: vuota, perche' quello che ci si scrive dentro
   non lo decidiamo noi. */
.slgn-mg__scrivi i {
  display: block;
  width: 84%;
  height: min(1.05rem, 9cqh);
  border: 1px solid var(--mg-line);
  border-radius: 999px;
}

/* La colonna delle azioni: le quattro cose che si toccano su un reel. Sono
   forme, non icone di nessuno: un cuore, una nuvoletta, un aeroplano, un
   segnalibro. */
.slgn-mg__rail {
  display: grid;
  gap: min(.55rem, 4.5cqh);
  justify-items: center;
  align-content: center;
}

.slgn-mg__ic {
  width: auto;
  height: min(.85rem, 7cqh);
  aspect-ratio: 1;
  opacity: 0;
  animation: slgn-mg-ic 15s var(--ws-ease, ease) infinite;
  animation-delay: calc(var(--i, 0) * .38s);
}

.slgn-mg__ic--cuore {
  border-radius: 50% 50% 50% 0;
  background: var(--ws-paper, #ece9e1);
  rotate: -45deg;
}

.slgn-mg__ic--chat {
  border: 1px solid var(--mg-line-strong);
  border-radius: 50% 50% 50% 3px;
}

.slgn-mg__ic--invia {
  background: var(--mg-line-strong);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 24% 50%);
}

.slgn-mg__ic--salva {
  background: var(--mg-line-strong);
  clip-path: polygon(14% 0, 86% 0, 86% 100%, 50% 70%, 14% 100%);
}

@keyframes slgn-mg-ic {
  0%, 74%   { opacity: 0; transform: scale(.5); }
  79%, 95%  { opacity: 1; transform: none; }
  99%, 100% { opacity: 0; }
}

/* Le pillole in fondo seguono gli atti: quella dell'atto in corso si
   schiarisce. E' un modo per dire "siamo qui" senza aggiungere testo. */
/* Il nome di questa sequenza e' suo e non si tocca.
 *
 * Si chiamava anche questa 'slgn-mg-pill', come quella di sopra: due
 * '@keyframes' con lo stesso nome non convivono, vince l'ultimo scritto -
 * e l'ultimo era questo, che dell'opacita' non dice niente. Risultato: le
 * pillole restavano all'opacita' zero della regola di base, su tutti i
 * pannelli del sito. Erano invisibili da settimane, e la fascia vuota in
 * fondo a ogni pannello era quella. */
.slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span {
  opacity: 1;
  animation: slgn-mg-pill-atto 15s steps(1, end) infinite;
}

.slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span:nth-child(2) { animation-delay: -10s; }
.slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span:nth-child(3) { animation-delay: -5s; }

@keyframes slgn-mg-pill-atto {
  0%, 32% {
    color: var(--ws-paper, #ece9e1);
    border-color: var(--mg-line-strong);
  }
  33%, 100% {
    color: var(--ws-mute, #6c6d70);
    border-color: var(--mg-line);
  }
}

/* ------------------------------------------------------------------ *
 * Quando il pannello e' basso, meno pezzi - mai pezzi tagliati
 *
 * Sotto le dieci rem d'altezza, o le ventiquattro di larghezza, il corpo
 * non regge piu' tre colonne di pezzi: le cinque righe
 * della colonna di caricamento, le due file di tessere e la colonna delle
 * azioni non ci stanno piu' senza schiacciarsi. Invece di stringerle fino a
 * farle diventare tratteggi, se ne spengono alcune. Resta il racconto, che
 * e' la cosa che conta; si perde il contorno, che era il di piu' che il
 * pannello grande si puo' permettere.
 *
 * Attenzione alla misura che si sta interrogando: '@container' guarda il
 * riquadro dei contenuti, non quello esterno. Un pannello alto 251 pixel ne
 * ha 207 dentro l'imbottitura, cioe' meno di tredici rem - con la soglia a
 * quattordici si spegneva tutto proprio sul pannello piu' grande che
 * abbiamo, quello della home.
 * ------------------------------------------------------------------ */

@container (max-height: 10rem), (max-width: 24rem) {
  .slgn-mg__coda,
  .slgn-mg__cap,
  .slgn-mg__tags,
  .slgn-mg__stats,
  .slgn-mg__rail,
  .slgn-mg__scrivi,
  .slgn-mg__chat > span:nth-child(4),
  .slgn-mg__griglia i:nth-child(n+11) { display: none; }

  .slgn-mg__griglia { grid-template-rows: minmax(0, 1fr); }

  /* Tre righe di risposte al posto di cinque: le righe sono definite, e
     cinque righe per tre elementi lascerebbero due fasce vuote in fondo. */
  .slgn-mg__chat { grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .slgn-mg__atto--carico { grid-template-columns: auto minmax(0, 1fr); }
  .slgn-mg__atto--reel { grid-template-columns: auto minmax(0, 1fr); }
}

/* Il pannello stretto rimette in colonna quello che aveva in fila.
 *
 * Le due colonne della campagna vivono di una misura che a duecento pixel
 * non c'e' piu': "Budget / 7 giorni" sono due scritte agli estremi della
 * stessa riga, e in una colonna larga sessanta pixel la seconda esce dal
 * bordo. Sotto le ventiquattro rem il budget torna sotto le metriche, con
 * il filo sopra invece che a lato. */
@container (max-width: 24rem) {
  .slgn-mg--panel:has(.slgn-mg__metrics) .slgn-mg__body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .slgn-mg__budget {
    align-self: auto;
    padding-left: 0;
    padding-top: min(.5rem, 4cqh);
    border-left: 0;
    border-top: 1px solid var(--mg-line);
  }
}

/* Meno animazioni: resta il terzo atto, fermo. E' quello che racconta meglio
   il mestiere in un fotogramma solo. */
@media (prefers-reduced-motion: reduce) {
  .slgn-mg__atto,
  .slgn-mg__clip i,
  .slgn-mg__play,
  .slgn-mg__cap u,
  .slgn-mg__tags i,
  .slgn-mg__coda i,
  .slgn-mg__stats span,
  .slgn-mg__griglia i,
  .slgn-mg__cuori i,
  .slgn-mg__chat > span,
  .slgn-mg__vbar i,
  .slgn-mg__vsteps i::after,
  .slgn-mg__ic,
  .slgn-mg__pills span,
  .slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span,
  .slgn-mg__atto--carico .slgn-mg__gauge i {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .slgn-mg__atto--carico,
  .slgn-mg__atto--profilo { opacity: 0; }
}