/* =========================================================
   KHOJA – Hero slideshow
   Da incollare in FONDO a style.css
   ========================================================= */

#hero.hero-slideshow {
    --hero-int: 5500ms;   /* durata di ogni foto (si cambia da data-interval nell'HTML) */
    --hero-fade: 1200ms;  /* durata della dissolvenza tra due foto */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #d9bf9a;  /* colore sabbia: mai un lampo bianco mentre carica */
}

/* contenitore foto: dietro al testo, dentro l'hero */
.hero-slides {
    position: absolute;
    inset: 0;
    z-index: -1;
}
/* velo leggero: aiuta header, puntini e testo su foto chiare */
.hero-slides::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, .14) 0%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .26) 100%);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity var(--hero-fade) ease;
    contain: strict;
}
/* la nuova foto sfuma SOPRA quella vecchia: niente "buco" a metà dissolvenza */
.hero-slide.is-leaving {
    opacity: 1;
    z-index: 1;
    transition: none;
}
.hero-slide.is-active {
    opacity: 1;
    z-index: 2;
}

/* anteprima sfocata della prima foto: appare nello stesso istante dell'HTML */
.hero-slide::before {
    content: "";
    position: absolute;
    inset: -6%;
    background: var(--lqip) center / cover no-repeat;
    filter: blur(16px);
}

.hero-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--hero-pos, 50% 30%); /* punto di taglio: 30% dall'alto tiene i volti in vista */
    transform-origin: 50% 50%;
    will-change: transform;
}
.hero-slide:nth-child(even) img   { transform-origin: 30% 40%; }
.hero-slide:nth-child(3n) img     { transform-origin: 70% 60%; }

/* zoom lentissimo (Ken Burns) solo sulla foto visibile */
@keyframes heroZoom {
    from { transform: scale(1); }
    to   { transform: scale(1.07); }
}
.hero-slide.is-active img,
.hero-slide.is-leaving img {
    animation: heroZoom calc(var(--hero-int) + var(--hero-fade) * 2) linear forwards;
}

/* ---------- puntini / barre di avanzamento ---------- */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    gap: 6px;
    max-width: 100%;
    padding: 0 20px;
}
/* ".hero-dot" dentro #hero batte la regola "#hero button" del sito (immagine di sfondo + padding enorme) */
#hero .hero-dot {
    position: relative;
    width: 34px;
    height: 24px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#hero .hero-dot::before,
#hero .hero-dot__fill {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 3px;
    margin-top: -1.5px;
    border-radius: 3px;
}
#hero .hero-dot::before {
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
#hero .hero-dot__fill {
    display: block;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
}
#hero .hero-dot.is-done .hero-dot__fill {
    transform: scaleX(1);
}
#hero .hero-dot.is-active .hero-dot__fill {
    animation: heroFill var(--hero-int) linear forwards;
}
@keyframes heroFill {
    to { transform: scaleX(1); }
}
#hero .hero-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ---------- stati controllati dal JS ---------- */
/* il tempo parte solo quando la prima foto è pronta */
.hero-slideshow:not(.is-ready) .hero-dot__fill,
.hero-slideshow:not(.is-ready) .hero-slide img,
/* in pausa se la scheda è in background o l'hero non si vede */
.hero-slideshow.is-paused .hero-dot__fill,
.hero-slideshow.is-paused .hero-slide img {
    animation-play-state: paused;
}
/* connessione lenta / risparmio dati: resta una sola foto */
.hero-slideshow.is-static .hero-dots {
    display: none;
}

/* ---------- mobile ---------- */
@media (max-width: 1050px) {
    #hero.hero-slideshow { height: 85vh; height: 85svh; }
}
@media (max-width: 477px) {
    /* su telefono l'hero è alto 100vh: svh evita che i puntini finiscano sotto la barra del browser */
    #hero.hero-slideshow { height: 85vh; height: 85svh; }
    #hero .hero-dot { width: 22px; }
    .hero-slides { --hero-pos: 50% 25%; }
}

/* ---------- chi preferisce meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero-slide img { animation: none !important; }
    #hero.hero-slideshow { --hero-fade: 400ms; }
}