/* Hero grande e dinamica. Caricato dopo site.css: sovrascrive solo le regole della hero. */

/* Altezza: quasi tutto lo schermo sotto l'header (84px) */
.hero{height:clamp(520px,calc(100vh - 84px),900px);height:clamp(520px,calc(100svh - 84px),900px)}

/* Ombra più profonda in basso per leggere bene i testi su qualsiasi foto */
.slide-shade{background:linear-gradient(to top,rgba(20,33,58,.88),rgba(20,33,58,.36) 55%,rgba(20,33,58,.08))}

/* Testi più grandi */
.slide-text h1{font-size:clamp(2.6rem,7vw,5.2rem);max-width:15ch}
.slide-text p{font-size:clamp(1.05rem,2vw,1.3rem)}
.slide-text .btn{font-size:1rem;padding:.75em 1.6em}

/* Entrata dei testi a cascata ad ogni cambio slide */
.slide .slide-text>*{opacity:0;transform:translateY(30px)}
.slide.is-active .slide-text>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.slide.is-active .slide-text>:nth-child(2){animation-delay:.14s}
.slide.is-active .slide-text>:nth-child(3){animation-delay:.28s}
.slide.is-active .slide-text>:nth-child(4){animation-delay:.42s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}

/* Zoom lento sulla foto, con direzione alternata tra una slide e l'altra */
.hero .slide.is-active img{animation:kb1 14s ease-out both}
.hero .slide:nth-child(even).is-active img{animation-name:kb2}
@keyframes kb1{from{transform:scale(1)}to{transform:scale(1.09) translate(-1.2%,-1%)}}
@keyframes kb2{from{transform:scale(1.09) translate(1.2%,1%)}to{transform:scale(1)}}

/* Barra di avanzamento in alto e contatore slide */
.hero-progress{position:absolute;left:0;right:0;top:0;height:4px;background:rgba(255,255,255,.16);z-index:6}
.hero-progress i{display:block;height:100%;width:0;background:var(--amber)}
.hero-progress.run i{animation:prog var(--iv,6000ms) linear forwards}
.hero-progress.paused i{animation-play-state:paused}
@keyframes prog{from{width:0}to{width:100%}}
.hero-count{position:absolute;top:22px;right:24px;z-index:6;font:700 .85rem/1 var(--sans);letter-spacing:.12em;color:#fff;background:rgba(20,33,58,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.55em .95em;border-radius:999px}
@media (max-width:700px){.hero-count{top:16px;right:16px}}

@media (prefers-reduced-motion:reduce){
  .slide .slide-text>*{opacity:1;transform:none;animation:none!important}
  .hero .slide.is-active img{animation:none}
  .hero-progress{display:none}
}