/* Hero cinematografica della home: una carrellata dentro il centro, dalla sala
   dei tappetini alla sala delle amache, disegnata fotogramma per fotogramma su
   una tela e comandata dallo scorrimento.

   La regola di questo file: senza JavaScript la hero deve restare una hero
   normale. L'altezza lunga la mette la classe .is-cinematic, che hero.js
   aggiunge solo quando GSAP e i primi fotogrammi ci sono. Se qualcosa non
   arriva resta il primo fotogramma a tutto schermo con il testo sopra: la
   stessa hero di sempre, ferma. */

.mauna-hero {
    position: relative;
    width: 100%;
    /* Senza JavaScript: una schermata e via. */
    height: 100vh;
    min-height: 560px;
    background-color: #efe8e1;
}

.mauna-hero.is-cinematic {
    height: var(--mauna-hero-scroll, 320vh);
}

/* La finestra visiva. Resta incollata in alto per tutta la sezione: e' lo
   sticky del browser, non un pin di ScrollTrigger, cosi' non c'e' nessun
   elemento distanziatore nel flusso e niente salti di layout. */
.mauna-hero__viewport {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    /* svh: su iOS la barra degli indirizzi che si ritira non fa piu' saltare
       l'altezza a meta' animazione. */
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    background-color: #efe8e1;
}

/* La tela copre tutto il riquadro. Il ritaglio "cover" lo calcola hero.js
   quando disegna: qui serve solo che occupi lo spazio. */
.mauna-hero__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

/* Il primo fotogramma come immagine vera, sotto la tela: si vede subito, entra
   nel preload del browser, e resta li' se il JavaScript non parte. */
.mauna-hero__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--media-pos, 50% 50%);
}

/* Quando la tela ha disegnato, il poster non serve piu' e sparisce: due
   immagini sovrapposte identiche non danno fastidio, ma tanto vale liberare
   il compositore. */
.mauna-hero.is-cinematic .mauna-hero__poster {
    opacity: 0;
}

/* Il velo chiaro sotto il testo: tiene leggibile il marrone su qualunque
   fotogramma. Si alleggerisce quando il testo esce, perche' nel momento
   centrale la carrellata deve restare sola. */
.mauna-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(248, 246, 245, 1) 0%,
        rgba(248, 246, 245, 0.95) 42%,
        rgba(248, 246, 245, 0) 74%
    );
    pointer-events: none;
}

/* Un'ombra appena accennata in basso: da' profondita' e stacca l'indicatore
   di scorrimento. Resta uguale per tutta l'animazione. */
.mauna-hero__vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(69, 50, 46, 0.16) 0%,
        rgba(69, 50, 46, 0) 32%
    );
    pointer-events: none;
}

/* Il marchio che chiude la carrellata. Sta fermo al centro e compare solo
   nell'ultimo tratto: parte invisibile, cosi' senza JavaScript non appare mai
   - in quel caso la hero e' una fotografia ferma e un logo in mezzo non
   avrebbe senso. */
.mauna-hero__logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

/* Un alone chiaro appena percettibile dietro il marchio: il logo e' marrone e
   nell'ultima scena si posa su un pavimento di legno quasi dello stesso tono.
   Senza l'alone si legge male, con un riquadro sembrerebbe un adesivo. */
.mauna-hero__logo::before {
    content: "";
    position: absolute;
    width: min(150vh, 96vw);
    height: min(150vh, 96vw);
    background: radial-gradient(
        closest-side,
        rgba(248, 246, 245, 0.92) 0%,
        rgba(248, 246, 245, 0.7) 38%,
        rgba(248, 246, 245, 0) 74%
    );
}

.mauna-hero__logo img {
    position: relative;
    width: min(520px, 40vw);
    height: auto;
    max-width: none;
}

@media (max-width: 767px) {
    .mauna-hero__logo img {
        width: min(340px, 70vw);
    }
}

.mauna-hero__content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 96px 0 72px;
    pointer-events: none;
}

/* I collegamenti restano cliccabili, il resto del livello no: cosi' non
   intercetta lo scorrimento sopra le fotografie. */
.mauna-hero__content a {
    pointer-events: auto;
}

.mauna-hero__inner {
    width: 100%;
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 24px;
}

.mauna-hero__text {
    max-width: 36rem;
}

.mauna-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(69, 50, 46, 0.55);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    pointer-events: none;
}

.mauna-hero__cue span {
    display: block;
    width: 1px;
    height: 42px;
    background: linear-gradient(to bottom, rgba(69, 50, 46, 0.45), rgba(69, 50, 46, 0));
}

@media (min-width: 1024px) {
    .mauna-hero__inner {
        padding: 0 48px;
    }
    .mauna-hero__content {
        padding: 120px 0 96px;
    }
}

/* Tablet e telefono: stessa carrellata, corsa piu' breve. */
@media (max-width: 1023px) {
    .mauna-hero.is-cinematic {
        --mauna-hero-scroll: 280vh;
    }
}

@media (max-width: 767px) {
    .mauna-hero.is-cinematic {
        --mauna-hero-scroll: 220vh;
    }
    .mauna-hero,
    .mauna-hero__viewport {
        min-height: 520px;
    }
    .mauna-hero__content {
        align-items: flex-start;
        padding-top: 108px;
    }
    /* In verticale il testo sta in alto, quindi il velo va dall'alto in giu'. */
    .mauna-hero__scrim {
        background: linear-gradient(
            to bottom,
            rgba(248, 246, 245, 1) 0%,
            rgba(248, 246, 245, 0.92) 46%,
            rgba(248, 246, 245, 0) 82%
        );
    }
    .mauna-hero__cue {
        bottom: 20px;
    }
}

/* Chi ha chiesto meno movimento vede una hero ferma: niente corsa lunga,
   niente carrellata. Solo il primo fotogramma e il testo. La regola sta anche
   nel CSS, non solo nel JavaScript, cosi' vale pure nel mezzo secondo prima
   che GSAP arrivi. */
@media (prefers-reduced-motion: reduce) {
    .mauna-hero,
    .mauna-hero.is-cinematic {
        height: 100vh;
        --mauna-hero-scroll: 100vh;
    }
    .mauna-hero__viewport {
        position: relative;
    }
    .mauna-hero__canvas {
        display: none;
    }
    .mauna-hero.is-cinematic .mauna-hero__poster {
        opacity: 1;
    }
    .mauna-hero__cue {
        display: none;
    }
}