/* =====================================================================
   MARCA_84811_VETRINA_FRECCE_E_FILMATI
   La vetrina del cliente: le frecce si vedono anche dal telefono, c'e'
   un tasto per farla scorrere da sola, e ogni filmato ha il suo tasto
   per partire e fermarsi.
   29 settembre 2026, reparto GALLERIE.

   VA SOPRA LA 84803. Non riscrive nessuno dei suoi fogli: si carica
   dopo il suo, e cambia solo le poche righe che servono.

   ============================================================================
    1. LE FRECCE SUL TELEFONO -- IL DIFETTO, COL NUMERO
   ============================================================================
   Giovanni, 29 settembre: «da mobile non vedo le frecce per scorrerle».
   E' vero, e non e' una questione di quanto si scorre la pagina: e' una
   riga di foglio di stile. Misurato sul banco, stessa galleria, sette
   riquadri fra fotografie e filmati:

                          PRIMA (84803)            DOPO (84811)
     telefono 375   freccia sinistra  0 x 0     46 x 46, a 14 punti dal bordo
                    freccia destra    0 x 0     46 x 46
                    pallini           0 x 0     0 x 0  (restano nascosti)
                    contatore      23 x 26      23 x 26
     computer 1440  freccia sinistra 46 x 46    46 x 46 (niente cambia)

   Zero per zero: le due frecce avevano "display: none" sotto i 700 punti
   e su ogni schermo che si tocca. L'unico segno che ci fosse dell'altro
   era il contatore -- una scritta grigia da 12 punti, alta 26, che NON SI
   PREME e che nessuno legge come «qui si sfoglia».

   PERCHE' LE FRECCE E NON SOLO LO SCORRIMENTO AUTOMATICO. Giovanni
   proponeva in alternativa «una slide animata che scorre con un play».
   Le frecce sono la strada piu' semplice e si potevano semplicemente far
   vedere: sono gia' 46 punti (il minimo per un dito e' 44) e a 375 ne
   occupano 120 in tutto, cioe' ci stanno. Lo scorrimento automatico c'e'
   lo stesso, come tasto in piu', perche' lo ha chiesto lui -- ma non
   parte mai da solo. (Dal 30/9 PARTE DA SOLA, con le tacche tipo storie:
   vedi il capitolo 2 e MARCA_85065_VETRINA_COME_LE_STORIE.)

   I PALLINI RESTANO NASCOSTI SUL TELEFONO, ed e' la misura della 84803 a
   dirlo: dieci pallini da 44 punti fanno 440 e uno schermo da 375 non li
   tiene. Quella riga non si tocca.
   ============================================================================
    2. LA VETRINA CHE SCORRE DA SOLA, COME LE STORIE (85065)
   ============================================================================
   MARCA_85065_VETRINA_COME_LE_STORIE (D521, 30/9). Il tasto «play» che
   stava sotto la fotografia, a sinistra, non si capiva a cosa servisse
   (Giovanni). Adesso la vetrina parte da sola e lo si vede: in cima alla
   fotografia una tacca per foto, e quella della foto di adesso si riempie
   in cinque secondi. Il tasto per fermarla sta in alto a destra, sotto le
   tacche, tondo e scuro come le frecce (44 punti).
   Chi ha chiesto meno animazioni vede le tacche ferme e nessun tasto.

   ============================================================================
    3. IL TASTO DI OGNI FILMATO
   ============================================================================
   Il tondo grande in mezzo (.gc-riproduci) resta quello che era: un
   DISEGNO, che sparisce appena il filmato parte. Accanto, in basso a
   sinistra della fotografia, c'e' un tasto vero da 44 punti che si vede
   ANCHE MENTRE IL FILMATO VA: e' quello che ferma. Prima si poteva solo
   premere sopra, e chi non lo sapeva non aveva modo di fermarlo se non
   con i comandi del browser, che compaiono e spariscono.

   La pastiglia e' la stessa scura delle frecce (contrasto misurato 8,70
   nella 84803): sopra una fotografia chiara un tondo chiaro sparisce.
   ===================================================================== */

/* ------------------------------------------------------------------ */
/*  1. LE FRECCE SI VEDONO ANCHE DAL TELEFONO                          */
/* ------------------------------------------------------------------ */
/* Due classi invece di una, e non e' un vezzo: la riga della 84803 che
   le spegne e' ".gc-freccia" dentro una media query, e una regola con lo
   stesso peso in un foglio caricato dopo vince solo finche' nessuno
   sposta l'ordine dei fogli. Con ".gc-striscia .gc-freccia" il peso e'
   piu' alto e la cosa non dipende piu' dall'ordine -- e' gia' successo
   che un foglio caricato dopo perdesse. */
@media (max-width: 700px), (hover: none) {
  .gc-striscia .gc-freccia {
    display: grid;
  }
  /* I PALLINI RESTANO SPENTI: dieci per 44 punti fanno 440 su 375. */
  .gc-striscia .gc-pallini { display: none; }
}

/* Sul telefono le frecce stanno piu' vicine al bordo e sono un filo piu'
   grandi del minimo: 46 punti sono sopra i 44 del dito, e 10 punti di
   distanza dal bordo lasciano 254 punti di fotografia liberi in mezzo su
   uno schermo da 375. */
@media (max-width: 700px) {
  .gc-striscia .gc-freccia-sx { left: 10px; }
  .gc-striscia .gc-freccia-dx { right: 10px; }
}

/* ------------------------------------------------------------------ */
/*  2. LE TACCHE E IL TASTO DELLA PAUSA -- MARCA_85065_VETRINA_COME_LE_STORIE */
/* ------------------------------------------------------------------ */
/* In cima alla fotografia, dentro. Sotto le tacche una sfumatura scura
   leggera: una tacca bianca su una fotografia bianca non si vedrebbe
   (misurato sui pixel, il contrasto sta nella consegna 85065). */
.gc-striscia .gc-storie-85065 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 60px;
  padding: 10px 12px 0;
  box-sizing: border-box;
  display: flex;
  gap: 4px;
  align-items: flex-start;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}
.gc-tacca-85065 {
  flex: 1 1 0;
  min-width: 0;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, .45);
}
.gc-tacca-piena-85065 {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
}
/* Quelle gia' viste: piene. */
.gc-tacca-fatta-85065 .gc-tacca-piena-85065 { transform: scaleX(1); }
/* Quella di adesso, con la vetrina FERMA: piena anche lei -- dice a che
   foto si e', e basta. */
.gc-storie-85065:not(.gc-storie-attive-85065) .gc-tacca-ora-85065 .gc-tacca-piena-85065 {
  transform: scaleX(1);
}
/* Quella di adesso, con la vetrina ACCESA: si riempie nel tempo della
   foto. Sospesa (fascia fuori dallo schermo, linguetta dietro) resta
   ferma a meta' e riprende da li'. */
.gc-storie-attive-85065 .gc-tacca-ora-85065 .gc-tacca-piena-85065 {
  animation: gc-riempi-85065 var(--gc-quanto-sta-85065, 5000ms) linear forwards;
  animation-play-state: paused;
}
.gc-storie-attive-85065.gc-storie-va-85065 .gc-tacca-ora-85065 .gc-tacca-piena-85065 {
  animation-play-state: running;
}
@keyframes gc-riempi-85065 {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Il tasto: in alto a destra, sotto le tacche. La pastiglia scura delle
   frecce (contrasto misurato 8,70 nella 84803): sopra una fotografia
   chiara un tondo chiaro sparisce. */
.gc-striscia .gc-pausa-85065 {
  position: absolute;
  top: 22px;
  right: 12px;
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(0, 0, 0, .48);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s cubic-bezier(.4, 0, .2, 1);
}
.gc-striscia .gc-pausa-85065:hover { background: rgba(0, 0, 0, .66); }
.gc-striscia .gc-pausa-85065:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gc-striscia .gc-pausa-85065 svg { width: 18px; height: 18px; display: block; }
@supports (backdrop-filter: blur(4px)) {
  .gc-striscia .gc-pausa-85065 { backdrop-filter: blur(4px); }
}
/* Nel portfolio, col fotografo collegato, in alto a SINISTRA c'e' il suo
   tasto «torna al CRM» (fisso, a 12 dal bordo, alto 40): le tacche
   scendono sotto, se no le prime restano coperte. Il cliente non ce l'ha. */
.pf-banner-vetrina-torna .gc-striscia .gc-storie-85065 { top: 50px; }

/* Con le tacche, il contatore «1 / 6» del telefono diceva la stessa cosa
   due volte: si spegne. I pallini del computer restano, perche' sono il
   modo di saltare a una foto col mouse e con la tastiera. */
.gc-con-storie-85065 .gc-conta { display: none; }

/* ------------------------------------------------------------------ */
/*  3. IL TASTO DI OGNI FILMATO                                        */
/* ------------------------------------------------------------------ */
/* In basso, sopra la fotografia: non litiga con le due frecce (che
   stanno a meta' altezza, ai lati). */
/* MARCA_85065_VETRINA_COME_LE_STORIE: in basso a DESTRA. In basso a
   sinistra adesso c'e' la pastiglia col nome dell'evento. */
.gc-carta .gc-filmato-tasto {
  position: absolute;
  right: 12px;
  left: auto;
  bottom: 12px;
  z-index: 4;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  /* La stessa pastiglia scura delle frecce: sopra una fotografia chiara
     un tondo chiaro sparisce (contrasto misurato 1,08 contro un minimo
     di 3,0; cosi' e' 8,70). Non alleggerirla. */
  background: rgba(0, 0, 0, .48);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .18s cubic-bezier(.4, 0, .2, 1);
}
.gc-carta .gc-filmato-tasto:hover { background: rgba(0, 0, 0, .66); }
.gc-carta .gc-filmato-tasto:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.gc-carta .gc-filmato-tasto svg { width: 20px; height: 20px; display: block; }
@supports (backdrop-filter: blur(4px)) {
  .gc-carta .gc-filmato-tasto { backdrop-filter: blur(4px); }
}
/* Mentre il filmato va, i comandi veri del browser compaiono in fondo al
   riquadro: il tasto sale di 46 punti per non finirci sopra. E' la
   quinta delle sette misure, e si vede solo quando il filmato e' in moto
   -- cioe' proprio quando serve. */
.gc-carta-inmoto .gc-filmato-tasto { bottom: 58px; }

@media (prefers-reduced-motion: reduce) {
  .gc-striscia .gc-pausa-85065,
  .gc-carta .gc-filmato-tasto { transition: none; }
}