/* hero-slider.css — hero della home a tutta larghezza: foto in duotono navy, logo che scende,
   frase per slide, controlli accessibili. Si somma a styles.css (non lo modifica). */

.hs{position:relative;min-height:clamp(560px,86vh,860px);overflow:hidden;background:var(--navy);color:#fff;isolation:isolate}
.hs-slides{position:absolute;inset:0;z-index:0;perspective:1800px;perspective-origin:50% 50%}
.hs-slide{position:absolute;inset:0;margin:0;opacity:0;transform-origin:left center;backface-visibility:hidden;will-change:transform}
.hs-slide.is-active{opacity:1;z-index:2}
.hs-slide.is-under{opacity:1;z-index:1}            /* slide successiva, rivelata sotto la pagina che gira */
.hs-slide.is-leaving{opacity:1;z-index:3;animation:hs-turn 2s cubic-bezier(.55,.05,.35,1) forwards}
.hs-slide.is-leaving:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 100%);animation:hs-turn-shade 2s ease-in forwards}
.hs-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  filter:grayscale(1) contrast(1.06) brightness(.92);transform:scale(1.02);transition:transform 9s linear}
.hs-slide.is-active img{transform:scale(1.08)}
@keyframes hs-turn{0%{transform:rotateY(0deg)}100%{transform:rotateY(-108deg)}}
@keyframes hs-turn-shade{0%{opacity:0}40%{opacity:.6}100%{opacity:1}}
/* duotono: foto in scala di grigi + velo navy; più scuro in basso per la leggibilità del testo */
.hs-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,39,71,.78) 0%,rgba(15,39,71,.66) 50%,rgba(11,29,54,.86) 100%)}
.hs-veil:after{content:"";position:absolute;inset:0;mix-blend-mode:screen;opacity:.35;
  background:radial-gradient(ellipse 55% 60% at 50% 40%,rgba(63,107,143,.7),transparent 70%)}

.hs-content{position:relative;z-index:2;text-align:center;padding:72px 0 96px;
  width:min(calc(100% - 36px),900px);margin:auto;min-height:inherit;display:flex;flex-direction:column;justify-content:center;align-items:center}
.hs-logo{width:min(64vw,400px);height:auto;display:block;margin:0 auto 26px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.35))}
/* titolo: un H1 (scheda 1) e quattro titoli visivi, sovrapposti nella stessa cella di griglia; visibile solo quello attivo */
.hs-title{display:grid;width:100%;margin:0 0 16px}
.hs-title .hs-h{grid-area:1/1;align-self:center;margin:0;color:#fff;font-family:inherit;font-size:clamp(1.9rem,3.9vw,3.2rem);font-weight:800;line-height:1.1;
  letter-spacing:-.02em;text-wrap:balance;opacity:0;pointer-events:none}
.hs-title .hs-h.is-active{opacity:1}
.hs-line{position:relative;min-height:3.4em;width:100%;max-width:720px;margin:0 auto 26px}
.hs-line p{position:absolute;inset:0;margin:0;color:#dbe4ec;font-size:clamp(1rem,1.7vw,1.2rem);font-weight:300;line-height:1.6;
  opacity:0;pointer-events:none}
.hs .actions{justify-content:center;margin-top:0}
.hs .btn.secondary{color:#fff;border-color:rgba(255,255,255,.55)}.hs .btn.secondary:hover{border-color:#fff}
.hs .pills{justify-content:center;margin-top:30px}.hs .pill{color:#e6edf3;border-color:rgba(255,255,255,.3)}
/* ---- transizioni del testo: per lettera (hero-slider.js spezza titolo e frasi in <span class="c">) ----
   Uscita: "crumble" (sgretolamento: ogni lettera si stacca, ruota e cade con ritardo casuale) o "sink" (affonda in dissolvenza).
   Ingresso (3 s): "recompose" (le lettere arrivano da posizioni casuali e si ricompongono), "drop", "zoom", "left", "right", "rise"
   a scaglioni per lettera. Le variabili --dx --dy --rot --d le imposta il JS per ogni lettera. */
.hs-content{opacity:1}
.hs .w{display:inline-block;white-space:nowrap}
.hs .c{display:inline-block;will-change:transform,opacity;backface-visibility:hidden}
.hs-title .c,.hs-line .c{animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
/* uscita */
.hs .fx-out-crumble .c{animation:hs-crumble 1.3s cubic-bezier(.5,0,.9,.4) var(--d,0s) both}
.hs .fx-out-sink .c{animation:hs-sink 1s ease-in var(--d,0s) both}
@keyframes hs-crumble{0%{transform:none;opacity:1;filter:blur(0)}25%{transform:translate(calc(var(--dx)*.15),calc(var(--dy)*-.12)) rotate(calc(var(--rot)*.3));opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.55);opacity:0;filter:blur(2px)}}
@keyframes hs-sink{to{transform:translateY(22px);opacity:0;filter:blur(1px)}}
/* ingresso */
.hs .fx-in-recompose .c{animation:hs-recompose 1.4s var(--d,0s) both}
.hs .fx-in-drop .c{animation:hs-c-drop 1.1s var(--d,0s) both}
.hs .fx-in-zoom .c{animation:hs-c-zoom 1.1s var(--d,0s) both}
.hs .fx-in-left .c{animation:hs-c-left 1.1s var(--d,0s) both}
.hs .fx-in-right .c{animation:hs-c-right 1.1s var(--d,0s) both}
.hs .fx-in-rise .c{animation:hs-c-rise 1.1s var(--d,0s) both}
@keyframes hs-recompose{0%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.4);opacity:0;filter:blur(3px)}
  70%{opacity:1;filter:blur(0)}100%{transform:none;opacity:1;filter:blur(0)}}
@keyframes hs-c-drop{from{transform:translateY(-70px);opacity:0}to{transform:none;opacity:1}}
@keyframes hs-c-zoom{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
@keyframes hs-c-left{from{transform:translateX(-80px);opacity:0}to{transform:none;opacity:1}}
@keyframes hs-c-right{from{transform:translateX(80px);opacity:0}to{transform:none;opacity:1}}
@keyframes hs-c-rise{from{transform:translateY(70px);opacity:0}to{transform:none;opacity:1}}
/* elementi non testuali (logo, bottoni, pill): entrano/escono come un pezzo unico, con lo stesso verso del testo */
.hs-el{animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.hs-el.is-hidden{opacity:0}
.hs-el.fx-out-crumble,.hs-el.fx-out-sink{animation:hs-el-out .9s ease-in var(--d,0s) both}
.hs-el.fx-in-recompose{animation:hs-el-recompose 1.4s var(--d,0s) both}
.hs-el.fx-in-drop{animation:hs-c-drop 1.1s var(--d,0s) both}
.hs-el.fx-in-zoom{animation:hs-c-zoom 1.1s var(--d,0s) both}
.hs-el.fx-in-left{animation:hs-c-left 1.1s var(--d,0s) both}
.hs-el.fx-in-right{animation:hs-c-right 1.1s var(--d,0s) both}
.hs-el.fx-in-rise{animation:hs-c-rise 1.1s var(--d,0s) both}
@keyframes hs-el-out{to{transform:translateY(18px) scale(.96);opacity:0;filter:blur(2px)}}
@keyframes hs-el-recompose{from{transform:scale(.7);opacity:0;filter:blur(6px)}to{transform:none;opacity:1;filter:blur(0)}}
/* mantiene l'altezza della riga della frase quando il testo è spezzato */
.hs-line p.is-active{opacity:1}
/* controlli */
.hs-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(15,39,71,.35);color:#fff;font-size:1.3rem;cursor:pointer;
  display:grid;place-items:center;transition:.2s;backdrop-filter:blur(4px)}
.hs-nav:hover,.hs-nav:focus-visible{background:rgba(255,255,255,.18);border-color:#fff;outline:0}
.hs-nav.prev{left:18px}.hs-nav.next{right:18px}
.hs-dots{position:absolute;left:0;right:0;bottom:22px;z-index:3;display:flex;justify-content:center;gap:10px}
.hs-dots button{width:34px;height:4px;border:0;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;padding:0;transition:.2s}
.hs-dots button[aria-current="true"]{background:var(--copper)}
.hs-dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:950px){.hs-nav{display:none}.hs-content{padding:56px 0 96px}}
@media(max-width:680px){.hs{min-height:520px}.hs-logo{width:min(70vw,280px);margin-bottom:20px}.hs-line{min-height:4.6em}}
@media(prefers-reduced-motion:reduce){
  .hs .c,.hs-el{animation:none!important;transform:none;opacity:1;filter:none}
  .hs-el.is-hidden{opacity:0}
  .hs-slide img,.hs-slide.is-active img{transform:none;transition:none}
  .hs-slide.is-leaving{animation:none;opacity:0}
  .hs-slide.is-leaving:after{animation:none;opacity:0}
}