/* INGRESSO (prova del 19/10/2026, non pubblicata) — «entra nella foto», sezione La Nostra Storia
   Scorrendo, il video della famiglia parte come una scheda arrotondata con il titolo sopra, si apre fino
   ai bordi dello schermo, poi ci si entra dentro: la scena si avvicina e si scurisce e il racconto sale
   da dentro l'immagine. Le misure le scrive ingresso.js nelle variabili --hz-*.
   Senza ingresso.js (riduci movimento, niente JS) la sezione resta com'era: niente di questo file si
   applica, perché tutto dipende dalla classe .hz che mette lo script. */

.hz {
  position: relative;
}

.hz-track {
  position: relative;
  /* lungo: l'effetto dura (19/10 «dura troppo poco») */
  height: 360svh;
}

.hz-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--color-primary);
}

/* la foto occupa sempre tutto lo schermo; quello che si vede lo decide il ritaglio */
.hz .hz-stage .history-photo {
  position: absolute;
  inset: 0;
  min-height: 0;
  aspect-ratio: auto;
  overflow: hidden;
  clip-path: inset(var(--hz-t, 15%) var(--hz-r, 14%) var(--hz-b, 15%) var(--hz-l, 14%) round var(--hz-rad, 20px));
}

.hz .hz-stage .history-photo > video,
.hz .hz-stage .history-photo > img,
.hz .hz-stage .history-photo > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* niente scorrimento nella cornice qui (style.css lo dà a tutte le foto): la telecamera «entra» */
  translate: none !important;
  rotate: none !important;
  scale: var(--hz-zoom, 1) !important;
  transform-origin: 50% 42%;
  animation: none !important;
}

/* il velo bordeaux che scende mentre si entra nella foto */
.hz-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* 20/10: più scuro in alto e al centro, dove sale il racconto (copriva i volti ancora chiari) */
  background: linear-gradient(180deg, rgba(39, 11, 23, 0.6) 0%, rgba(39, 11, 23, 0.78) 45%, rgba(39, 11, 23, 0.94) 100%);
  opacity: var(--hz-veil, 0);
}

/* il titolo, appoggiato in basso a sinistra sulla foto: segue l'angolo mentre la foto si apre */
.hz .hz-stage .history-title-wrap {
  position: absolute;
  /* style.css le dà ancora top: 32px dei tempi in cui stava sulla foto: qui conta solo il basso */
  top: auto;
  right: auto;
  width: auto;
  left: calc(var(--hz-l, 14%) + clamp(20px, 3vw, 44px));
  bottom: calc(var(--hz-b, 15%) + clamp(18px, 3.2vh, 40px));
  margin: 0;
  z-index: 2;
  opacity: var(--hz-title, 1);
  translate: 0 var(--hz-title-y, 0px);
  pointer-events: none;
}

.hz .hz-stage .history-title-wrap .title-h2 {
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 1.02;
  text-shadow: 0 2px 24px rgba(39, 11, 23, 0.55);
}

/* il racconto: una colonna che sale sopra la parte bassa della foto, ormai scura */
.hz .history-split {
  display: block;
  min-height: 0;
  position: relative;
  z-index: 2;
  margin-top: -62svh;
}


.hz.history-section--split .history-content {
  max-width: 40rem;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 2rem) clamp(4rem, 9vw, 7rem);
}

@media (max-width: 899px) {
  .hz-track {
    height: 320svh;
  }

  .hz .hz-stage .history-photo {
    clip-path: inset(var(--hz-t, 16%) var(--hz-r, 5%) var(--hz-b, 26%) var(--hz-l, 5%) round var(--hz-rad, 16px));
  }

  .hz .hz-stage .history-title-wrap .title-h2 {
    font-size: clamp(2.2rem, 10vw, 3rem);
  }

  /* sul telefono il titolo sta sotto il film, nello spazio bordeaux: sopra copriva metà delle persone */
  .hz .hz-stage .history-title-wrap {
    top: calc(100% - var(--hz-b, 40%) + 18px);
    bottom: auto;
  }

  .hz .history-split {
    margin-top: -66svh;
  }
}

/* il racconto sale sopra la foto: un'ombra morbida lo tiene leggibile anche dove il velo è ancora chiaro */
.hz .history-content .history-text,
.hz .history-content .history-subtitle,
.hz .history-content .readmore-btn {
  text-shadow: 0 1px 14px rgba(39, 11, 23, 0.85);
}

/* Telefono: il film orizzontale resta intero (largo quanto lo schermo, alto in proporzione), un po'
   sopra il centro; ingresso.js scrive posizione e altezza (--hz-vt, --hz-vh) e il ritaglio in pixel. */
.hz--phone .hz-stage .history-photo > video,
.hz--phone .hz-stage .history-photo > img,
.hz--phone .hz-stage .history-photo > picture > img {
  top: var(--hz-vt, 25%);
  bottom: auto;
  height: var(--hz-vh, 56vw);
  transform-origin: 50% 50%;
}

/* 19/10 sera: script.js (initReveal) dà la sua comparsa (.reveal: opacità 0 finché non la «vede»)
   anche alla foto spostata qui dentro, e dentro lo spazio fermo a volte non scatta: la foto restava
   invisibile. Qui l'ingresso lo fa già questo effetto: la comparsa del sito non si applica. */
.hz .hz-stage .reveal,
.hz .hz-stage .reveal.is-visible {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.hz .hz-stage .reveal-media {
  clip-path: none !important;
  transform: none !important;
  transition: none !important;
}