/* ==========================================================================
   Vetrina delle schermate nella fascia hero delle schede prodotto
   AlbaSoftware, rev. 8.11

   Sostituisce la pila di tre schermate sovrapposte (css/hero-entra.css) nelle
   pagine Geod XP, Geod Image, Azienda XP e Privacy XP. Le schermate sono
   mostrate molto piu' grandi, in una delle due varianti scelte con la classe
   della <section> (intestazione del frammento  heroclass ):

     vetrina--scorrevole  le tre schermate scorrono lentamente nella meta'
                          destra della fascia, accanto al testo.
     vetrina--bordo       una sola schermata grande a destra, che esce dal
                          bordo dello schermo; le tre schermate si alternano
                          in dissolvenza, con pallini e pausa.

   Per confrontare le due varianti senza ricompilare basta aggiungere
   all'indirizzo della pagina  ?vetrina=bordo  oppure  ?vetrina=scorrevole
   (lo legge js/vetrina.js).

   Sotto 900 px le schermate diventano uno sfondo animato sotto il testo.
   Con la riduzione delle animazioni attiva nel sistema operativo non si
   muove nulla da solo.

   Le schermate della variante scorrevole hanno la stessa larghezza della
   colonna immagini della home. La cornice usa lo stesso padding, bordo e
   ombra; l'immagine resta intera, senza zoom o ritaglio.

   Markup (dentro il blocco hero del frammento, dopo .hero__grid):

     <div class="vetrina" data-vetrina data-ingrandisci ...>
       <div class="vetrina__nastro">
         <figure class="vetrina__shot is-attiva"><img ...></figure>
         <figure class="vetrina__shot"><img ...></figure>
         <figure class="vetrina__shot"><img ...></figure>
         <span class="vetrina__logo" aria-hidden="true"><img ...></span>
       </div>
     </div>

   Va caricato DOPO style.css.
   ========================================================================== */

.hero--vetrina {
  position: relative;
  overflow: hidden;
  /* larghezza delle schermate nella variante scorrevole e spazio fra l'una e
     l'altra; durata di un giro completo delle tre schermate */
  /* Stessa larghezza della seconda colonna home: 52% dello spazio utile
     dopo aver sottratto margini e interspazio. */
  --vetrina-larghezza: calc((min(100vw, var(--wrap)) - 2 * var(--space-5) - var(--space-7)) * 0.52);
  --vetrina-spazio: 40px;
  --vetrina-durata: 60s;
}

/* La fascia e' alta abbastanza per la schermata grande; il testo resta
   centrato in verticale, il percorso (breadcrumb) in alto. */
.hero--vetrina .hero__inner {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  min-height: clamp(560px, 30vw + 180px, 700px);
}

/* Testo nella meta' sinistra; la vetrina desktop occupa quella destra. */
.hero--vetrina .breadcrumb,
.hero--vetrina .hero__grid {
  position: relative;
  z-index: 2;
}
.hero--vetrina .hero__grid {
  display: block;
  width: calc((100% - var(--space-7)) * 0.5);
  max-width: calc((100% - var(--space-7)) * 0.5);
}
.hero--vetrina .hero__grid h1 {
  max-width: none;
}

/* La vetrina occupa tutta la fascia: e' posizionata rispetto alla <section>,
   non a .hero__inner (che resta senza posizione), quindi arriva ai bordi
   dello schermo anche oltre la larghezza del sito. */
.vetrina {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.vetrina__shot { margin: 0; overflow: hidden; }
.vetrina__shot img { display: block; width: 100%; height: auto; border-radius: 2px; }

.vetrina__logo { display: none; }

/* --------------------------------------------------------------------------
   1. Variante scorrevole
   -------------------------------------------------------------------------- */

.vetrina--scorrevole .vetrina {
  display: flex;
  align-items: center;
}

/* Il nastro contiene tre copie delle tre schermate (le due copie le aggiunge
   js/vetrina.js): scorrere di un terzo riporta la situazione di partenza,
   quindi il giro e' continuo, senza scatti. */
.vetrina--scorrevole .vetrina__nastro {
  display: flex;
  flex: none;
  width: max-content;
  animation: vetrina-scorre var(--vetrina-durata) linear infinite;
  will-change: transform;
}

.vetrina--scorrevole .vetrina__shot {
  flex: 0 0 auto;
  width: var(--vetrina-larghezza);
  margin-right: var(--vetrina-spazio);
  padding: var(--space-3);
  border: 1px solid rgba(125, 190, 255, 0.28);
  border-radius: var(--radius);
  background: rgba(10, 40, 70, 0.55);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

@keyframes vetrina-scorre {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

/* Pausa: pulsante, puntatore su una schermata, fuoco da tastiera,
   ingrandimento aperto */
.vetrina--scorrevole .vetrina.is-ferma .vetrina__nastro,
.vetrina--scorrevole .vetrina.is-sospesa .vetrina__nastro,
.ingrandimento-aperto .vetrina--scorrevole .vetrina__nastro {
  animation-play-state: paused;
}

/* Scurimento graduale: molto scuro sotto il testo (a sinistra), quasi
   trasparente a destra, dove le schermate restano luminose. Il livello non
   intercetta il mouse, quindi le schermate restano cliccabili. */
.vetrina--scorrevole .vetrina::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  --fine-testo: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--space-5)
    + (min(100vw, var(--wrap)) - 2 * var(--space-5) - var(--space-7)) * 0.50);
  background:
    linear-gradient(90deg,
      rgba(6, 21, 36, 0.90) 0%,
      rgba(6, 21, 36, 0.86) calc(var(--fine-testo) - 20px),
      rgba(6, 21, 36, 0.66) calc(var(--fine-testo) + 40px),
      rgba(6, 21, 36, 0.18) calc(var(--fine-testo) + 170px),
      rgba(6, 21, 36, 0.06) 100%),
    linear-gradient(180deg, rgba(6, 21, 36, 0.25) 0%, rgba(6, 21, 36, 0) 18%,
      rgba(6, 21, 36, 0) 82%, rgba(6, 21, 36, 0.25) 100%);
}

/* Pulsante di pausa, in basso a destra nella fascia */
.vetrina--scorrevole .vetrina__comandi {
  position: absolute;
  right: var(--space-5);
  bottom: var(--space-4);
  z-index: 3;
}

/* --------------------------------------------------------------------------
   2. Variante con la schermata che esce dal bordo
   -------------------------------------------------------------------------- */

/* Riquadro della schermata: largo il 58% della finestra (fra 480 e 980 px),
   centrato in verticale e spostato oltre il bordo destro del 10% della
   finestra. Lo spazio fra il testo e la schermata resta di almeno 20 px da
   901 px di finestra in su. */
.vetrina--bordo .vetrina__nastro {
  position: absolute;
  top: 50%;
  right: -10vw;
  width: clamp(480px, 58vw, 980px);
  aspect-ratio: 16 / 9;
  box-sizing: content-box;
  padding: 8px;
  /* un po' sopra il centro: sotto restano pallini e pausa */
  transform: translateY(calc(-50% - 18px));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 60px rgba(2, 10, 20, 0.55);
}

.vetrina--bordo .vetrina__shot {
  position: absolute;
  inset: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease, visibility 900ms;
}
.vetrina--bordo .vetrina__shot.is-attiva { opacity: 1; visibility: visible; }
.vetrina--bordo .vetrina__shot img { height: 100%; object-fit: cover; }

/* Riquadro con il marchio sull'angolo in basso a sinistra, come nella home */
.vetrina--bordo .vetrina__logo {
  position: absolute;
  left: 18px;
  bottom: -20px;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 9px 13px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(3, 12, 22, 0.45);
}
.vetrina--bordo .vetrina__logo img { display: block; width: auto; height: 24px; }

/* Pallini e pausa sotto la schermata, centrati nella parte visibile
   (il riquadro esce dallo schermo del 10vw) */
.vetrina--bordo .vetrina__comandi {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  right: 10vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

.vetrina__pallini { display: flex; gap: 8px; align-items: center; }
.vetrina__pallino {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.55); background: transparent;
  transition: background-color 200ms ease, transform 200ms ease;
}
.vetrina__pallino:hover { background: rgba(255, 255, 255, 0.45); }
.vetrina__pallino[aria-selected="true"] {
  background: var(--accent-light); border-color: var(--accent-light); transform: scale(1.25);
}
.vetrina__pallino:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. Pulsante di pausa (entrambe le varianti)
   -------------------------------------------------------------------------- */

.vetrina__pausa {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(125, 190, 255, 0.42);
  border-radius: 50%;
  background: rgba(6, 21, 36, 0.55);
  color: #fff;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.vetrina__pausa:hover { background: rgba(125, 190, 255, 0.22); border-color: var(--accent-light); }
.vetrina__pausa:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.vetrina__pausa svg { width: 14px; height: 14px; fill: currentColor; }
.vetrina__pausa .icona-avvia { display: none; }
.vetrina__pausa[aria-pressed="true"] .icona-pausa { display: none; }
.vetrina__pausa[aria-pressed="true"] .icona-avvia { display: block; }

/* --------------------------------------------------------------------------
   4. Schermi stretti (fino a 900 px): sfondo animato sotto al testo
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero--vetrina { position: relative; isolation: isolate; }
  .hero--vetrina .hero__inner { display: block; min-height: 0; position: relative; z-index: 2; }
  .hero--vetrina .hero__grid { width: auto; max-width: none; }
  .hero--vetrina .hero__grid h1 { max-width: 20ch; }
  .hero--vetrina .vetrina {
    position: absolute; inset: 0; z-index: 1; display: block; margin: 0; overflow: hidden;
  }
  .hero--vetrina .vetrina::after {
    display: block;
    background: linear-gradient(180deg, rgba(6,21,36,.80), rgba(6,21,36,.72) 52%, rgba(6,21,36,.84));
  }
  .vetrina__nastro,
  .vetrina--scorrevole .vetrina__nastro,
  .vetrina--bordo .vetrina__nastro {
    position: absolute; left: 0; top: 50%; display: flex; gap: 14px;
    width: max-content; aspect-ratio: auto; padding: 0 var(--space-5);
    transform: translate3d(0, -50%, 0);
    animation: vetrina-mobile-scorre var(--vetrina-durata, 72s) linear infinite;
    border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  }
  .vetrina__shot,
  .vetrina--scorrevole .vetrina__shot,
  .vetrina--bordo .vetrina__shot {
    position: relative; inset: auto; flex: 0 0 90vw; width: 90vw; margin: 0;
    opacity: 1; visibility: visible; transition: none; padding: var(--space-3);
    border: 1px solid rgba(125,190,255,.28); border-radius: var(--radius);
    background: rgba(10,40,70,.55); box-shadow: 0 18px 50px rgba(0,0,0,.45);
  }
  .vetrina--bordo .vetrina__shot img { height: auto; }
  .vetrina--bordo .vetrina__logo,
  .vetrina__comandi,
  .vetrina--scorrevole .vetrina__comandi,
  .vetrina--bordo .vetrina__comandi { display: none; }
}

@keyframes vetrina-mobile-scorre {
  from { transform: translate3d(0, -50%, 0); }
  to { transform: translate3d(-33.3333%, -50%, 0); }
}
@media (max-width: 480px) {
  .vetrina__shot,
  .vetrina--scorrevole .vetrina__shot,
  .vetrina--bordo .vetrina__shot { flex-basis: 92vw; width: 92vw; }
}

/* --------------------------------------------------------------------------
   5. Riduzione delle animazioni
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .vetrina--scorrevole .vetrina__nastro, .hero--vetrina .vetrina__nastro { animation: none; }
  .vetrina--scorrevole .vetrina__comandi { display: none; }
  .vetrina--bordo .vetrina__shot { transition: none; }
}


/* Geod XP: carosello home nella pagina prodotto (rev. 8.24.3).
   Copy e tipografia restano quelli della scheda esistente. */
.hero--product-carousel { position: relative; overflow: hidden; isolation: isolate; }
.hero--product-carousel.hero--reticolo { min-height: clamp(560px, 30vw + 180px, 700px); }
.hero--product-carousel.hero--reticolo .hero__inner {
  position: relative; z-index: 1; width: 100%; pointer-events: none;
  display: grid; grid-template-rows: auto 1fr; align-items: center;
  min-height: clamp(560px, 30vw + 180px, 700px);
}
.hero--product-carousel.hero--reticolo .hero__inner > * { max-width: none; pointer-events: auto; }
.hero--product-carousel.hero--reticolo .hero__grid {
  display: grid; width: 100%; max-width: none;
  grid-template-columns: minmax(0, .48fr) minmax(0, .52fr);
  gap: var(--space-7); align-items: center;
}
.hero--product-carousel .hero__copy { min-width: 0; }
.hero--product-carousel .hero__grid h1 { max-width: none; }
.hero--product-carousel .hero__copy .lead { max-width: 60ch; }
.hero--product-carousel .hero__shot {
  min-width: 0; opacity: 0;
  transform: translateX(160px) scale(.985);
  animation: geodxp-carousel-ingresso 860ms cubic-bezier(.33, 1, .68, 1) 640ms forwards;
}
@keyframes geodxp-carousel-ingresso {
  from { opacity: 0; transform: translateX(160px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1024px) {
  .hero--product-carousel.hero--reticolo { min-height: 0; }
  .hero--product-carousel.hero--reticolo .hero__inner { display: block; min-height: 0; }
  .hero--product-carousel.hero--reticolo .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .hero--product-carousel .hero__shot {
    width: min(100%, 780px); justify-self: center;
    transform: translateY(90px) scale(.985);
    animation-name: geodxp-carousel-ingresso-mobile;
  }
  @keyframes geodxp-carousel-ingresso-mobile {
    from { opacity: 0; transform: translateY(90px) scale(.985); }
    to { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero--product-carousel .hero__shot { opacity: 1; transform: none; animation: none; }
}