/* ===== HERO base ===== */



.hero {



  position: relative;



  width: 100%;



  height: 100vh;



  display: flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  color: var(--color-light, #fffdf7);



  padding: 100px 20px 60px;



  box-sizing: border-box;



  overflow: hidden;



}







.hero-video {



  position: absolute; inset: 0;



  width: 100%; height: 100%;



  object-fit: cover;



  z-index: -2;



  filter: brightness(0.45) contrast(1.1);



}







.hero-scrim {



  position: absolute; inset: 0;



  z-index: -1;



  background: radial-gradient(ellipse at center, rgba(0,0,0,0.25), rgba(0,0,0,0.45) 60%);



}







.hero-content { max-width: 980px; padding: 0 4vw; }







/* Tipografia */



.claim-line {



  margin: 0 0 0.6rem 0;



  line-height: 1.2;



  font-weight: 500;



  text-shadow: 0 2px 8px rgba(0,0,0,0.5);



  font-size: clamp(1.6rem, 4.2vw, 3.1rem);



}







.claim-line.em {



  font-weight: 800;



  font-style: italic;



  font-size: clamp(1.7rem, 4.6vw, 3.3rem);



  color: #afbdad; /* verde oliva */



}







.claim-line.small { opacity: 0.95; font-size: clamp(1.2rem, 2.6vw, 1.6rem); }







.claim-line.small {



  opacity: 0;



  transform: translateY(16px);



}











.claim-line .hl {



  text-decoration: underline;



  text-decoration-thickness: 3px;



  text-underline-offset: 4px;



}











/* Reveal */



.reveal-up { opacity: 0; transform: translateY(16px); }



.reveal-up.is-visible { opacity: 1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }







/* Caret per typewriter */



.type-line.caret::after {



  content: "▌";



  display: inline-block;



  margin-left: .1em;



  animation: blink 1s steps(1) infinite;



}



@keyframes blink { 50% { opacity: 0; } }







@media (prefers-reduced-motion: reduce) {



  .reveal-up { opacity: 1; transform: none; }



  .type-line.caret::after { animation: none; opacity: 0; }



}







/* Fix mirato laptop FHD */



@media screen and (min-width: 1280px) and (max-height: 1080px) {



  .hero { padding-top: 140px; padding-bottom: 120px; }



  .claim-line { margin-bottom: 0.35rem; }



}







/* Tablet/Mobile */



@media (max-width: 768px) {



  .hero { padding-top: 80px; padding-bottom: 80px; }



  .scroll-down { bottom: 22px; }



}







/* Prima riga = stessa dimensione della terza (mobile) */



@media (max-width: 768px) {



  .hero .hero-content .claim-line:first-of-type {



    /* match .claim-line.small default */



    font-size: clamp(1.2rem, 2.6vw, 1.6rem);



    line-height: 1.2;



    margin-bottom: 0.6rem;



  }



}







@media (max-width: 480px) {



  .hero .hero-content .claim-line:first-of-type {



    /* match .claim-line.small mobile override */



    font-size: clamp(1.3rem, 3.8vw, 1.6rem);



    line-height: 1.2;



    margin-bottom: 0.6rem;



  }



}







.hero-subtitle {



  margin-top: 1rem;



  font-size: clamp(1rem, 2vw, 1.3rem);



  font-weight: 100;



  color: #fffdf7;



  text-shadow: 0 2px 6px rgba(0,0,0,0.5);



  text-align: center;



}







.hero-arrow {



  margin-top: 2rem;



  text-align: center;



}







.hero-arrow svg {



  animation: bounce 1.6s infinite;



}







@keyframes bounce {



  0%, 100% { transform: translateY(0); }



  50% { transform: translateY(6px); }



}







.underline {



  position: relative;



  display: inline-block;



  z-index: 1;



}







.underline::after {



  content: "";



  position: absolute;



  left: 0;



  bottom: 0.15em;



  width: 100%;



  height: 0.5em;



  background: rgba(218, 106, 14, 0.35); /* colore evidenziatore */



  border-radius: 4px;



  z-index: -1;



  animation: highlightIn 0.6s ease forwards;



}







@keyframes highlightIn {



  from { width: 0; }



  to { width: 100%; }



}





/* === Hero: poster+video swap === */

.hero { position: relative; overflow: clip; }

.hero-poster,

.hero-video {

  position: absolute; inset: 0;

  width: 100%; height: 100%;

  object-fit: cover;

  transition: opacity .6s ease;

}

.hero-poster { z-index: 0; opacity: 1; }

.hero-video  { z-index: 1; opacity: 0; }



/* quando il video è pronto */

.hero.is-ready .hero-video  { opacity: 1; }

.hero.is-ready .hero-poster { opacity: 0; }



/* se decidiamo di restare col solo poster (risparmio dati / errori) */

.hero.poster-only .hero-video { display: none; opacity: 0; }



/* assicurati che lo scrim e il contenuto stiano sopra */

.hero-scrim   { position: absolute; inset: 0; z-index: 2; }

.hero-content { position: relative; z-index: 3; }



/* rispetto utenti con risparmio dati */

@media (prefers-reduced-data: reduce) {

  .hero-video { display: none !important; }

  .hero-poster { opacity: 1 !important; }

}