/* HERO animata della Home (solo index.html, nelle tre lingue): si aggiunge a style.css, che non cambia.
 * Riferimento approvato: prototipo V3 del 2 novembre 2026 (sito-caruso-archivio/Hero-Animation-Home/).
 *
 * Una sola volta, senza audio: foto iniziale, video del locale, breve spot, ritorno alla foto finale.
 * La sequenza e' guidata da hero.js con data-phase sulla sezione; senza JavaScript, con "riduci movimento"
 * o se il video non parte resta la foto iniziale, come una HERO normale.
 *
 * Foto iniziale. hero_video_start_20261102.webp: in alto il primo fotogramma del video, sotto una striscia
 * della foto approvata, raccordata. Foto finale. hero_video_end_20261102.webp: stessa costruzione con il
 * fotogramma 23.
 *
 * Le immagini che servono solo alla sequenza si scaricano solo se parte: la foto finale e' qui sotto
 * [data-media], che hero.js mette all'avvio; logo e foto dello spot sono nella pagina dentro <template>, che
 * hero.js inserisce. Nell'HTML le date dei nomi (8 cifre) possono comparire solo in src e href: altrove il
 * controllo dei contatti (tools/site_contacts.py e pannello, sezione Website) le prenderebbe per numeri di
 * telefono. Per lo stesso motivo la sezione non ha piu' la foto scritta nello style della pagina.
 *
 * Inquadratura. Come prima: foto 4:3 in "cover", ancorata in alto a sinistra. Il video coincide con la parte
 * alta della foto e si posa su di essa alla stessa scala; dove la HERO e' piu' alta del 16:9 (tablet,
 * telefoni) la parte bassa resta la foto, con una sfumatura sul bordo (.hero-floor).
 *
 * Livelli, dal basso: foto della sezione, video, foto del fondo sfumata, foto iniziale (.hero-photo, si
 * dissolve per scoprire il video), foto finale (.hero-final, con la sua vignettatura), penombra del ritorno
 * (.hero-shade), velo scuro del sito (::before), titolo e pulsante, spot, pulsante per fermare. Tutti assoluti:
 * l'altezza della HERO dipende solo dalle regole di style.css.
 *
 * Lo spot ha un solo aspetto, serale, a qualsiasi ora: colori fissi, nessuna regola legata a data-theme.
 *
 * Il video resta sempre opaco, coperto dalla foto: con opacity 0 Safari potrebbe non avviarlo, e su
 * iPhone in Risparmio energetico l'eventuale simbolo "play" resta nascosto.
 */

.hero-section,
.hero-floor,
.hero-photo {
  /* !important: sotto i 768 px style.css impone hero_facade_1280.webp. Una sola foto per tutti: il video
     e' largo 1920 px, e una foto piu' piccola sarebbe meno nitida del video nel passaggio */
  background-image: url('images/hero_video_start_20261102.webp') !important;
}

.hero-section,
.hero-floor,
.hero-photo,
.hero-final {
  background-size: cover;
  background-position: left top;
  background-repeat: no-repeat;
  /* Safari ridimensiona le immagini con un filtro piu' morbido di quello dei video: con questo la foto
     ha a schermo la stessa nitidezza del video */
  image-rendering: -webkit-optimize-contrast;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;              /* sotto il velo scuro di style.css (z-index -1) */
  overflow: hidden;
  container-type: size;     /* cqw e cqh: dimensioni della HERO */
}

/* larghezza a cui "cover" mostra la foto 4:3 */
.hero-video,
.hero-floor,
.hero-final {
  --photo-width: max(100cqw, 133.3334cqh);
  --video-height: calc(var(--photo-width) * 0.5625);
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--photo-width);
  height: var(--video-height);
}

.hero-floor {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent calc(var(--video-height) - 56px), #000 calc(var(--video-height) - 8px));
  mask-image: linear-gradient(180deg, transparent calc(var(--video-height) - 56px), #000 calc(var(--video-height) - 8px));
}

.hero-photo {
  position: absolute;
  inset: 0;
  will-change: transform, opacity;   /* resta su un suo livello: niente scatti di nitidezza */
  transition: opacity 0.45s ease-in-out;
}

/* Foto finale. --focus: la cameriera nella foto 4:3 (35% della larghezza, 37,5% dell'altezza), a ogni
   larghezza della HERO: da li' la camera si allontana e da li' torna la luce */
.hero-final {
  --focus-x: calc(var(--photo-width) * 0.35);
  --focus-y: calc(var(--photo-width) * 0.28);
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-origin: var(--focus-x) var(--focus-y);
  will-change: transform, opacity;
}

.hero-section[data-media] .hero-final {
  background-image: url('images/hero_video_end_20261102.webp');
}

/* vignettatura: gli angoli restano al buio un poco piu' a lungo del centro */
.hero-final::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse farthest-corner at var(--focus-x) var(--focus-y),
    rgba(4, 10, 8, 0) 22%, rgba(4, 10, 8, 0.82) 72%, rgba(4, 10, 8, 0.95) 100%);
  opacity: 0;
}

/* penombra da cui riaffiora la foto finale */
.hero-shade {
  position: absolute;
  inset: 0;
  background: #060f0c;
  opacity: 0;
}

/* Dissolvenza del titolo: "both" di style.css bloccherebbe l'opacita' dopo l'entrata */
.hero-content {
  animation-fill-mode: backwards;
  transition: opacity 0.6s ease-in-out;
}

.hero-spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  overflow: hidden;
  background: #0a2620;      /* verde bottiglia scuro */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
}

/* buio che scende sullo spot nel ritorno */
.hero-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #060f0c;
  opacity: 0;
  pointer-events: none;
}

.spot-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px clamp(20px, 3vw, 48px);
  color: #f1e9da;
  text-align: center;
  background: radial-gradient(48% 58% at 50% 46%, #15463a 0%, rgba(21, 70, 58, 0) 100%);
}

/* fascia a quadretti delle tovaglie tra testo e foto. Sempre con i colori serali del sito (rosso su
   avorio): var(--gingham) di giorno sarebbe rosso su bianco */
.spot-panel::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background:
    linear-gradient(90deg, rgba(190, 38, 36, 0.62) 50%, transparent 0) 0 0 / 10px 10px,
    linear-gradient(rgba(190, 38, 36, 0.62) 50%, transparent 0) 0 0 / 10px 10px, #ebe2cf;
}

/* logo serale del sito: chiaro, leggibile sul verde */
.spot-logo {
  display: block;
  width: clamp(200px, 20vw, 280px);
  height: auto;
  margin-bottom: 12px;
}

.spot-title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.6rem);
  line-height: 1.15;
  color: #d4b06e;
}

.spot-text {
  font-size: clamp(1rem, 0.92rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  text-wrap: wrap;          /* "pretty" di style.css in Safari accorcia le righe */
}

.spot-photo {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.spot-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
  transform: scale(1.06);
}

/* la foto, scattata di giorno, entra nella sera: ombra leggera accanto alla fascia, angoli scuri, tono caldo */
.spot-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 18px),
    radial-gradient(125% 120% at 62% 48%, rgba(10, 14, 10, 0) 48%, rgba(10, 14, 10, 0.55) 100%);
  background-color: rgba(26, 14, 6, 0.16);
}

/* Pulsante per fermare l'animazione: discreto, in basso a destra, fuori dal flusso della pagina.
   Compare solo mentre la sequenza e' in corso (hero.js) */
.hero-stop {
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 2;               /* sopra lo spot */
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  background: rgba(6, 20, 16, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s, background-color 0.2s;
}

.hero-stop[hidden] {
  display: none;
}

.hero-stop:hover,
.hero-stop:focus-visible {
  opacity: 1;
  background: rgba(6, 20, 16, 0.78);
}

.hero-stop:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .hero-spot {
    grid-template-columns: none;
    grid-template-rows: minmax(0, 46fr) minmax(0, 54fr);
  }
  .spot-panel {
    order: 2;
    background: radial-gradient(70% 44% at 50% 50%, #15463a 0%, rgba(21, 70, 58, 0) 100%);
  }
  .spot-panel::after {
    left: 0;
    bottom: auto;
    width: auto;
    height: 10px;
  }
  .spot-logo { margin-bottom: 6px; }
  .spot-photo::after {
    background:
      linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 18px),
      radial-gradient(125% 120% at 50% 40%, rgba(10, 14, 10, 0) 48%, rgba(10, 14, 10, 0.55) 100%);
    background-color: rgba(26, 14, 6, 0.16);
  }
}

/* ---------- Sequenza: la fase e' in data-phase sulla sezione (vedi hero.js) ---------- */

.hero-section[data-phase="video"] .hero-photo,
.hero-section[data-phase="spot"] .hero-photo {
  opacity: 0;
}

.hero-section[data-phase="spot"] .hero-spot {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease-in-out, visibility 0s;
}

.hero-section[data-phase="spot"] .spot-photo img,
.hero-section[data-phase="return"] .spot-photo img {
  transform: none;
  transition: transform 4s linear;
}

.hero-section[data-phase="spot"] .hero-content {
  opacity: 0;
}

/* durante lo spot il pulsante non si vede: non deve essere cliccabile ne' raggiungibile con la tastiera */
.hero-section[data-phase="spot"] .btn-hero {
  visibility: hidden;
  transition: visibility 0s linear 0.6s;
}

/* A spot pieno, senza che si veda nulla, si prepara il ritorno: al posto del video la foto finale,
   ingrandita e al buio; titolo e pulsante nascosti e un poco piu' in basso. La foto iniziale resta sotto,
   se la finale non si carica */
.hero-section[data-covered] .hero-photo {
  opacity: 1;
  transition: none;
}

.hero-section[data-covered] .hero-final {
  transform: scale(1.08);
}

.hero-section[data-covered] .hero-final::after {
  opacity: 1;
}

.hero-section[data-covered] .hero-shade {
  opacity: 0.94;
}

.hero-section[data-covered] .hero-content {
  opacity: 1;
  transition: none;
}

.hero-section[data-covered] .hero-content > * {
  opacity: 0;
  transform: translateY(16px);
  transition: none;
}

/* dalla fine dello spot in poi resta la foto finale */
.hero-section[data-final] .hero-final {
  opacity: 1;
}

/* Ritorno, 3,4 s: lo spot si spegne come a fine film, la sala riaffiora dal buio e la camera si allontana
   dalla cameriera, rallentando fino a fermarsi senza che si veda l'arresto. RETURN_MS in hero.js.
     0,00 s  si spegne la foto dello spot, poi logo, testo e fascia; tutto scende quasi al nero
     0,70 s  lo spot sparisce: sotto c'e' la foto finale, ancora al buio
     0,75 s  torna la luce, prima sulla cameriera (fino a 2,35 s), poi sugli angoli (1,1-2,8 s);
             la foto passa da 1,08 a 1 (0,3-3,4 s, quasi ferma nell'ultimo secondo)
     1,70 s  rientra il titolo, poi il pulsante (fino a 3,05 s) */
.hero-section[data-phase="return"] .hero-spot {
  opacity: 0;
  visibility: visible;
  transition: opacity 0.3s linear 0.7s, visibility 0s linear 1s;
}

.hero-section[data-phase="return"] .hero-spot::after {
  opacity: 0.88;
  transition: opacity 0.8s ease-in;
}

.hero-section[data-phase="return"] .spot-photo {
  opacity: 0;
  transition: opacity 0.64s ease-in-out;
}

.hero-section[data-phase="return"] .spot-panel {
  opacity: 0;
  transition: opacity 0.56s ease-in-out 0.24s;
}

.hero-section[data-phase="return"] .hero-final {
  transform: none;
  transition: transform 3.1s cubic-bezier(0.3, 0.3, 0.2, 1) 0.3s;
}

.hero-section[data-phase="return"] .hero-shade {
  opacity: 0;
  transition: opacity 1.6s ease 0.75s;
}

.hero-section[data-phase="return"] .hero-final::after {
  opacity: 0;
  transition: opacity 1.7s ease-in-out 1.1s;
}

.hero-section[data-phase="return"] .hero-content > * {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease-out 1.7s, transform 1.1s var(--ease) 1.7s;
}

.hero-section[data-phase="return"] .btn-hero {
  transition-delay: 1.95s;
}

/* nuovo avvio (pagina ripresa dalla cronologia): si torna alla foto iniziale senza dissolvenze */
.hero-section[data-reset] *,
.hero-section[data-reset] *::after,
.hero-section[data-reset] {
  transition: none !important;
  animation: none !important;
}