/* ══════════════════════════════════════════════════════════════════════════
   GALILEO — SEQUENZA (il ciclo sole / nuvola / sole)          sess.73 · ?v=73gs1
   Fonte: RISORSE PER SITO/GALILEO_SEQUENZA_FASI_0609/SEQUENZA_FASI_GALILEO.md
   (dettatura David 06/09, ribadita 08/09: «le foto devono mostrare TUTTE E TRE
   le fasi e i passaggi vanno spiegati bene»).

   IDEA DI STRUTTURA — il punto che David chiama fondamentale non e' l'elenco
   dei tre stati, e' che il ciclo ha DUE narrazioni: l'andata (dura -> morbida)
   e il ritorno (morbida -> dura), con sfumature proprie. Perche' emerga dal
   DESIGN e non solo dal testo, la rotaia e' piegata su una riga sola:
     · l'arco ANDATA copre le fermate 1-3 e punta a destra;
     · l'arco RITORNO copre le fermate 3-5 e punta a sinistra;
     · la fermata 3 (solo soft) e' il PERNO che i due archi si dividono.

   FALLBACK SENZA JS (regola: la sezione deve reggere anche a JS spento).
   Di default `.gl-seq__reel` e' una GRIGLIA: le cinque foto con la loro
   didascalia, leggibili in fila. Solo quando il JS aggancia mette
   `.gl-seq.is-live` sul contenitore, e da li' la griglia diventa uno stage
   sovrapposto (tutte le figure nella STESSA cella `grid-area:1/1`): niente
   position:absolute, niente altezze fisse, il contenitore prende da solo
   l'altezza della figura piu' alta e non ci sono salti fra una tappa e l'altra.

   ⚠ Le figure spente restano a `opacity:0` e basta — NIENTE `visibility` o
   `display:none`: servono a caricare davvero le immagini `loading=lazy`, che
   stanno tutte nella stessa scatola in viewport.

   Colori: solo i token `--gl-*` gia' dichiarati su `.gl` in galileo.html
   (che a loro volta derivano da --ds-brand-*). Nessun colore nuovo.
   ══════════════════════════════════════════════════════════════════════════ */

.gl-seq{
  /* tinte dei due archi: l'andata e' la brace del Fresnel, il ritorno e' la
     luce fredda del soft che si ricompatta. Entrambe derivate dai token. */
  --gl-seq-out:var(--gl-accent,#F4B532);
  --gl-seq-back:rgba(244,243,239,.72);
  --gl-seq-dot:rgba(255,255,255,.22);
}

.gl-seq__intro{max-width:70ch}

/* ══ IL FILMATO — apertura della sezione ═══════════════════════════════════
   Il video mostra il CONTINUO (l'unica cosa che cinque foto non possono
   mostrare); la rotaia che segue è l'approfondimento. Perciò sta PRIMA, ed è
   il pezzo largo: la rotaia gli sta sotto e non gli ruba la scena.
   ⚠ Il filmato è la versione DIMOSTRATIVA a colore neutro (stesso bianco sulle
   due sorgenti, così cambia una variabile sola). Nel prodotto il Fresnel resta
   AMBRA: differenza VOLUTA, vedi il commento in galileo.html.
   ═════════════════════════════════════════════════════════════════════════ */
.gl-seq__film{margin:clamp(26px,3.6vw,42px) 0 0}
.gl-seq__film-frame{position:relative;border-radius:10px;overflow:hidden;
  background:#0A0A0A;border:1px solid var(--gl-line,rgba(255,255,255,.08))}
.gl-seq__film-video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;background:#0A0A0A}

/* il pulsante esiste solo quando il JS può davvero comandare il video: a JS
   spento resta il poster fermo e nessun comando che non farebbe niente. */
.gl-seq__film-btn{display:none}
.gl-seq__film.is-live .gl-seq__film-btn{
  display:inline-flex;align-items:center;justify-content:center;
  position:absolute;right:12px;bottom:12px;z-index:2;
  width:44px;height:44px;padding:0;border-radius:50%;      /* 44px: bersaglio touch */
  border:1px solid rgba(244,181,50,.48);background:rgba(10,10,10,.66);
  color:var(--gl-ink,#F4F3EF);font-size:15px;line-height:1;cursor:pointer;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  -webkit-tap-highlight-color:transparent;
  transition:opacity .22s ease,border-color .18s ease,background-color .18s ease}
/* mentre gira si fa da parte — ma non sparisce: chi vuole fermarlo lo trova */
.gl-seq__film.is-playing .gl-seq__film-btn{opacity:.45}
.gl-seq__film-btn:focus-visible{opacity:1;outline:2px solid var(--gl-accent,#F4B532);outline-offset:3px}
@media (hover:hover){                       /* :hover sticky iOS — gate obbligato */
  .gl-seq__film-btn:hover{opacity:1;border-color:var(--gl-accent,#F4B532);
    background:rgba(10,10,10,.82)}
}

.gl-seq__film-cap{margin:clamp(12px,1.6vw,18px) 0 0;font-size:14px;line-height:1.55;
  color:var(--gl-ink-soft,rgba(244,243,239,.78));max-width:78ch}

/* ── il ponte fra il filmato e la rotaia ───────────────────────────────── */
.gl-seq__stops-ttl{margin:0 0 .45em;font-size:clamp(17px,1.7vw,21px);font-weight:600;
  line-height:1.25;color:var(--gl-ink,#F4F3EF)}
.gl-seq__stops-lead{margin:0 0 clamp(22px,3vw,34px);font-size:14px;
  color:var(--gl-mute,rgba(244,243,239,.55));max-width:72ch}

/* ── il blocco sequenza ─────────────────────────────────────────────────── */
.gl-seq__box{margin-top:clamp(28px,4vw,46px)}

/* ── REEL — fallback (no JS): le cinque tappe in colonna, tutte leggibili ── */
.gl-seq__reel{display:grid;gap:clamp(26px,4vw,44px)}

.gl-seq__shot{margin:0;display:grid;gap:clamp(14px,2vw,22px)}
.gl-seq__frame{position:relative;display:block;border-radius:10px;overflow:hidden;
  background:#0A0A0A;border:1px solid var(--gl-line,rgba(255,255,255,.08))}
.gl-seq__frame img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* numero della tappa stampato sulla foto: dice sempre a che punto del ciclo sei */
.gl-seq__num{position:absolute;left:0;top:0;padding:8px 14px;
  font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gl-ink,#F4F3EF);background:rgba(10,10,10,.72);
  border-right:1px solid var(--gl-line,rgba(255,255,255,.08));
  border-bottom:1px solid var(--gl-line,rgba(255,255,255,.08))}
.gl-seq__shot--out  .gl-seq__num{box-shadow:inset 3px 0 0 var(--gl-seq-out)}
.gl-seq__shot--back .gl-seq__num{box-shadow:inset 3px 0 0 var(--gl-seq-back)}

.gl-seq__cap{display:block}
.gl-seq__kicker{display:block;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;margin-bottom:10px}
.gl-seq__shot--out  .gl-seq__kicker{color:var(--gl-seq-out)}
.gl-seq__shot--back .gl-seq__kicker{color:var(--gl-seq-back)}
.gl-seq__ttl{margin:0 0 .5em;font-size:clamp(20px,2.2vw,28px);font-weight:600;
  line-height:1.2;letter-spacing:-.005em;color:var(--gl-ink,#F4F3EF)}
.gl-seq__body{margin:0;max-width:58ch}
.gl-seq__note{margin:.9em 0 0;font-size:13px;color:var(--gl-mute,rgba(244,243,239,.55));
  max-width:58ch;padding-left:12px;box-shadow:inset 2px 0 0 rgba(244,181,50,.32)}

/* ── ROTAIA — i due archi + le cinque fermate ───────────────────────────── */
/* 10 colonne, non 5: così ogni fermata occupa DUE colonne e il suo centro cade
   su una linea di griglia. È l'unico modo perché i due archi si incontrino
   ESATTAMENTE sul perno (la fermata «solo soft») invece di sovrapporsi su tutta
   la sua colonna — che è poi il punto della sezione. */
.gl-seq__rail{margin-top:clamp(26px,3.5vw,40px);
  display:grid;grid-template-columns:repeat(10,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:10px 0;align-items:center}

.gl-seq__arc{display:flex;align-items:center;gap:10px;min-width:0}
/* fino a 1099 l'etichetta non entrerebbe in mezza rotaia: gli archi prendono
   tutta la riga e la direzione la dice la freccia (→ sopra, ← sotto). */
.gl-seq__arc--out {grid-column:1 / -1;grid-row:1}
.gl-seq__arc--back{grid-column:1 / -1;grid-row:3;flex-direction:row-reverse}
@media (min-width:1100px){
  .gl-seq__arc--out {grid-column:2 / 6}   /* centro fermata 1 → centro fermata 3 */
  .gl-seq__arc--back{grid-column:6 / 10}  /* centro fermata 3 → centro fermata 5 */
}
.gl-seq__arc b{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-seq__arc--out  b{color:var(--gl-seq-out)}
.gl-seq__arc--back b{color:var(--gl-seq-back)}
/* la barra: sfuma nel verso in cui si viaggia, cosi' la direzione si legge */
.gl-seq__arc i{flex:1 1 auto;height:2px;min-width:24px;border-radius:2px}
.gl-seq__arc--out  i{background:linear-gradient(90deg,var(--gl-seq-out),rgba(244,243,239,.20))}
.gl-seq__arc--back i{background:linear-gradient(270deg,rgba(244,243,239,.72),rgba(244,181,50,.20))}
/* la punta della freccia dice il verso */
.gl-seq__arc::after{content:"";width:0;height:0;flex:0 0 auto;
  border-block:4px solid transparent}
.gl-seq__arc--out::after {border-left:6px solid rgba(244,243,239,.34)}
.gl-seq__arc--back::after{border-right:6px solid rgba(244,181,50,.34)}

/* la linea continua sotto le fermate: il ciclo e' un continuo, non 5 scatti */
.gl-seq__stops{grid-column:1 / -1;grid-row:2;position:relative;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.gl-seq__stops::before{content:"";position:absolute;left:10%;right:10%;top:9px;height:1px;
  background:linear-gradient(90deg,var(--gl-seq-out),rgba(244,243,239,.55),var(--gl-seq-out))}

.gl-seq__stop{display:flex;flex-direction:column;align-items:center;gap:8px;
  width:100%;padding:2px 2px 4px;background:none;border:0;cursor:pointer;
  font-family:inherit;color:var(--gl-mute,rgba(244,243,239,.55));
  -webkit-tap-highlight-color:transparent}
.gl-seq__stop::before{content:"";position:relative;z-index:1;width:14px;height:14px;
  border-radius:50%;background:var(--gl-bg,#0C0C0C);
  box-shadow:0 0 0 2px var(--gl-seq-dot) inset,0 0 0 4px var(--gl-bg,#0C0C0C);
  transition:box-shadow .22s ease,transform .22s ease}
.gl-seq__stop span{font-size:clamp(9px,1.5vw,11px);font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;line-height:1.25;text-align:center;
  transition:color .22s ease}
.gl-seq__stop[aria-selected="true"]{color:var(--gl-ink,#F4F3EF)}
.gl-seq__stop[aria-selected="true"]::before{transform:scale(1.15)}
.gl-seq__stop--out[aria-selected="true"]::before{
  box-shadow:0 0 0 7px var(--gl-seq-out) inset,0 0 0 4px var(--gl-bg,#0C0C0C),0 0 16px rgba(244,181,50,.55)}
.gl-seq__stop--back[aria-selected="true"]::before{
  box-shadow:0 0 0 7px var(--gl-seq-back) inset,0 0 0 4px var(--gl-bg,#0C0C0C),0 0 16px rgba(244,243,239,.35)}
.gl-seq__stop:focus-visible{outline:2px solid var(--gl-accent,#F4B532);outline-offset:3px;border-radius:6px}
@media (hover:hover){                     /* :hover sticky iOS — gate obbligato */
  .gl-seq__stop:hover{color:var(--gl-ink,#F4F3EF)}
  .gl-seq__stop:hover::before{transform:scale(1.15)}
}

/* ── COMANDI — precedente / percorri / successiva ───────────────────────── */
.gl-seq__ctrl{display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.6vw,18px);margin-top:clamp(20px,2.6vw,30px);flex-wrap:wrap}
.gl-seq__btn{display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;border:1px solid rgba(244,181,50,.48);border-radius:4px;
  background:transparent;color:var(--gl-ink,#F4F3EF);font-family:inherit;
  font-size:13px;font-weight:600;letter-spacing:.10em;text-transform:uppercase;
  cursor:pointer;transition:border-color .18s ease,background-color .18s ease,color .18s ease}
.gl-seq__btn:focus-visible{outline:2px solid var(--gl-accent,#F4B532);outline-offset:2px}
.gl-seq__btn[disabled]{opacity:.34;cursor:default}
@media (hover:hover){
  .gl-seq__btn:not([disabled]):hover{border-color:var(--gl-accent,#F4B532);
    background:rgba(244,181,50,.10)}
}
.gl-seq__btn--play{border-color:rgba(255,255,255,.16)}
.gl-seq__btn--icon{padding:11px 15px;font-size:15px;line-height:1}
.gl-seq__ctrl .gl-seq__count{font-size:12px;letter-spacing:.16em;
  color:var(--gl-mute,rgba(244,243,239,.55));min-width:5ch;text-align:center}

.gl-seq__foot{margin-top:clamp(18px,2.4vw,26px);font-size:13px;
  color:var(--gl-mute,rgba(244,243,239,.55));max-width:72ch}

/* ── MODO LIVE (JS agganciato): la griglia diventa uno stage sovrapposto ── */
.gl-seq.is-live .gl-seq__reel{gap:0}
.gl-seq.is-live .gl-seq__shot{
  grid-area:1 / 1;                 /* tutte nella stessa cella: niente salti */
  align-content:start;             /* ⚠ vedi sotto */
  opacity:0;pointer-events:none;
  transition:opacity .55s ease}
/* ⚠ `align-content:start` NON e' cosmetica. Nella cella condivisa ogni figura
   e' alta quanto la piu' alta (la tappa 5, che ha in piu' la nota); con
   l'allineamento normale le sue due righe auto si spartiscono l'avanzo, e la
   cornice della foto si allunga sotto l'immagine: una fascia nera dentro il
   bordo arrotondato. A 390 valeva 36 px sulla tappa 1 — che e' la schermata di
   PARTENZA. Non si vedeva perche' lo screenshot di collaudo era stato preso
   sulla tappa 5, l'unica dove il difetto non puo' comparire. Misurato 08/09:
   cornice 232 px contro 196 px d'immagine sulla tappa 1, 198 px sulla 5. */
.gl-seq.is-live .gl-seq__shot.is-on{opacity:1;pointer-events:auto}
/* i comandi esistono solo quando servono davvero */
.gl-seq__ctrl,.gl-seq__rail{display:none}
.gl-seq.is-live .gl-seq__rail{display:grid}
.gl-seq.is-live .gl-seq__ctrl{display:flex}

/* ── FASCE ──────────────────────────────────────────────────────────────
   Da 1100 in su foto a sinistra e racconto a destra. NON è vezzo grafico:
   impilata, la foto 16:9 a tutta larghezza porta il blocco oltre gli 800 px e
   a 1150 (iPad landscape, laptop 13") la rotaia finisce sotto la piega — si
   cambia tappa senza vedere l'ombra cambiare, cioè si perde la funzione.
   Sotto i 1100 la larghezza è poca e l'impilato torna quello giusto. */
@media (min-width:1100px){
  .gl-seq__shot{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
    gap:clamp(22px,2.4vw,36px);align-items:center}
  .gl-seq__body,.gl-seq__note{max-width:44ch}
}
@media (min-width:1400px){
  .gl-seq__shot{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    gap:clamp(24px,2.6vw,40px)}
  .gl-seq__body,.gl-seq__note{max-width:46ch}
}

/* ── fascia app e narrow: la rotaia si stringe ma resta a 5 colonne ───── */
@media (max-width:1099.98px){
  .gl-seq__rail{gap:8px 0}
  .gl-seq__arc b{font-size:10px;letter-spacing:.10em}
  .gl-seq__stop span{letter-spacing:.04em}
  .gl-seq__stops::before{left:10%;right:10%}
  .gl-seq__ctrl{gap:8px}
  .gl-seq__btn{padding:11px 14px;font-size:12px;letter-spacing:.06em}
}
/* telefoni stretti: le etichette degli archi non stanno su una riga con la
   barra — la barra sparisce e resta la parola, che e' l'informazione. */
@media (max-width:479.98px){
  .gl-seq__arc i{display:none}
  .gl-seq__arc--out{justify-content:flex-start}
  .gl-seq__arc--back{justify-content:flex-start}
}

/* ── movimento ridotto: si cambia tappa, non si anima; e non si parte da soli ── */
@media (prefers-reduced-motion:reduce){
  .gl-seq.is-live .gl-seq__shot{transition:none}
  .gl-seq__stop::before,.gl-seq__stop span,.gl-seq__btn{transition:none}
  .gl-seq__btn--play{display:none}
}