/* Sezione 00 — hero della home: foto a tutta larghezza, titolo a sinistra,
   Valori dal rilievo del sito vivo. I social sono un componente a parte
   (social-flottanti): sul vivo sono fixed e valgono per tutte le pagine. */

.hero{
  position:relative;
  height:900px;
  /* l'header e' alto 130px: la fascia risale e parte a -10px */
  margin-top:-140px;
  overflow:hidden;
  /* fondale della sezione, si vede solo se la foto non carica */
  background-image:linear-gradient(#fff1ed 0%,#fff4f1 100%);
}

/* ------------------------------------------------------------------ foto */
.hero__foto{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  /* 2048x976 dentro 1440x900: la foto si alza a 900 di altezza e
     perde 448px, 224 per lato */
  object-fit:cover;
  object-position:center center;
}

/* ---------------------------------------------------------------- titolo */
.hero__titolo{
  position:absolute;
  top:344px;
  /* griglia dello slider larga 1240px e centrata, piu' 4px di scarto */
  left:calc(50% - 616px);
  width:max-content;          /* sul vivo misura 555.844px */
  margin:0;
  font-family:var(--display);
  font-size:80px;
  line-height:80px;
  letter-spacing:normal;
  text-align:left;
  color:rgba(42,48,41,.6);
  z-index:9;
}


/* =========================================================== schermi stretti */

/* Lo slider era "fullwidth" su una griglia di 1240px: sotto quella larghezza
   il modulo e i suoi strati si rimpiccioliscono in proporzione (larghezza/1240).
   Le misure qui sono quelle del desktop divise per 1240 e scritte in vw.
   Verificato sul rilievo a 500px: 900/1240*500 = 363px di altezza,
   80/1240*500 = 32.26px di corpo, 344/1240*500 = 138.7px dall'alto. */
@media (max-width:1240px){
  .hero{height:72.5806vw}
  .hero__titolo{
    top:27.7419vw;
    left:.3226vw;
    font-size:6.4516vw;
    line-height:6.4516vw;
  }
}

@media (max-width:1024px){
  /* niente di specifico: vale ancora la riduzione in proporzione qui sopra */
}

@media (max-width:768px){
  /* a schermo stretto la fascia risale di meno: padding 50 + margine -100 */
  .hero{margin-top:-50px}
}

/* Pan-zoom lento sulla foto (il "Ken Burns" dello slider originale:
   data-panzoom="d:10000;ss:100;se:110%", cioe' da scala 1 a 1,10 in 10s).
   forwards: alla fine resta ferma sull'ultimo fotogramma, come sul vivo. */
.hero__foto{
  animation:hero-panzoom 10s ease-out forwards;
}
@keyframes hero-panzoom{
  from{transform:scale(1)}
  to{transform:scale(1.1)}
}
@media (prefers-reduced-motion:reduce){
  .hero__foto{animation:none}
}