/* ============================================================================
   Costruire SRL - hero cinematografico della home.
   Aggiuntivo e reversibile: se togli il <link> a questo file e lo <script> di
   js/hero-film.js, l'hero torna esattamente com'era.
   Tutto quello che c'e' qui dentro si attiva solo quando il JS aggiunge la
   classe .film-on al body: senza JS, su telefono e con il moto ridotto,
   l'hero resta quello di oggi.
   ========================================================================= */

/* Finche' il film non si accende, tutto quello che aggiunge il JS resta
   invisibile: su telefono, con il moto ridotto e senza JS la home e'
   esattamente quella di prima. */
.film-media,
.film-ring,
.film-chapter,
.film-progress,
.film-cue{ display: none }

/* PERCHE' QUESTA REGOLA ESISTE.
   Lo style.css del sito ha overflow-x:hidden su html e body. Quel valore
   costringe il browser a mettere overflow-y:auto, cioe' rende la pagina un
   contenitore di scorrimento, e dentro un contenitore di scorrimento
   position:sticky non si appiccica: l'hero se ne va via e lascia scoperto il
   contenitore alto (pagina bianca).
   Il valore clip taglia esattamente come hidden ma NON crea il contenitore,
   quindi lo sticky torna a funzionare. Si applica solo mentre il film e'
   acceso: la classe film-host la mette e la toglie il JS. */
html.film-host,
html.film-host body{ overflow-x: clip }

/* il contenitore alto che tiene appiccicato l'hero mentre il film scorre */
.home-premium-page.film-on .film-pin{
    position: relative;
    height: var(--film-vh, 300vh);
}

.home-premium-page.film-on .film-pin .home-hero{
    position: sticky;
    top: 0;
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
}

/* la fotografia originale resta sotto: se il poster non arriva, si vede quella */
.home-premium-page.film-on .home-hero::before{ z-index: -3 }

.home-premium-page.film-on .film-media{
    display: block;
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}

.home-premium-page.film-on .film-poster{
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition: opacity .8s cubic-bezier(.4,0,.2,1);
}

.home-premium-page.film-on .film-video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .8s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    transform: translateZ(0);
}

.home-premium-page.film-on .film-media.is-ready .film-video{ opacity: 1 }
.home-premium-page.film-on .film-media.is-ready .film-poster{ opacity: 0 }
.home-premium-page.film-on .film-media.is-failed .film-poster{ opacity: 1 }

/* l'anello di caricamento, discreto, nell'angolo basso a destra */
.home-premium-page.film-on .film-ring{
    display: block;
    position: absolute;
    right: clamp(18px, 5vw, 48px);
    bottom: clamp(58px, 8vh, 84px);
    width: 34px;
    height: 34px;
    color: #b99a5f;
    opacity: .8;
    transform: rotate(-90deg);
    transition: opacity .6s ease;
    pointer-events: none;
}
.home-premium-page.film-on .film-ring circle{ transition: stroke-dashoffset .18s linear }

/* la barra di avanzamento del film, sottile, nell'oro del marchio */
.home-premium-page.film-on .film-progress{
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: rgba(244, 240, 231, .16);
    z-index: 2;
    opacity: 0;
    transition: opacity .8s ease .4s;
    pointer-events: none;
}
.home-premium-page.film-on .film-armed .film-progress{ opacity: 1 }
.home-premium-page.film-on .film-progress i{
    display: block;
    height: 100%;
    width: 100%;
    background: #b99a5f;
    transform: scaleX(0);
    transform-origin: left center;
}

/* l'invito a scorrere, con la stessa lineetta dell'occhiello dell'hero */
.home-premium-page.film-on .film-cue{
    position: absolute;
    left: 0;
    bottom: clamp(24px, 4vh, 40px);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(244, 240, 231, .72);
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity .8s ease 1.2s;
    pointer-events: none;
    z-index: 2;
}
.home-premium-page.film-on .film-armed .film-cue{ opacity: 1 }
.home-premium-page.film-on .film-scrolled .film-cue{ opacity: 0; transition-delay: 0s }
.home-premium-page.film-on .film-cue::before{
    content: "";
    width: 42px;
    height: 1px;
    background: currentColor;
    transform-origin: left center;
    animation: film-cue-pulse 3.4s cubic-bezier(.4,0,.2,1) -1s infinite;
}
@keyframes film-cue-pulse{
    0%, 100% { transform: scaleX(.45); opacity: .5 }
    50%      { transform: scaleX(1);   opacity: 1 }
}

/* il capitolo, in alto a destra, dove il testo dell'hero non arriva mai */
.home-premium-page.film-on .film-chapter{
    position: absolute;
    right: clamp(18px, 5vw, 48px);
    top: clamp(96px, 14vh, 140px);
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(244, 240, 231, .8);
    font-family: var(--font-body);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(13, 13, 11, .9);
    opacity: 0;
    transition: opacity .8s ease .3s;
    pointer-events: none;
    z-index: 2;
}
.home-premium-page.film-on .film-armed .film-chapter{ opacity: 1 }
.home-premium-page.film-on .film-chapter b{ color: #b99a5f; font-weight: 600 }
.home-premium-page.film-on .film-chapter::before{
    content: "";
    width: 26px;
    height: 1px;
    background: rgba(244, 240, 231, .5);
}

/* schermi bassi: niente decorazioni che non hanno spazio */
@media (max-height: 620px){
    .home-premium-page.film-on .film-cue,
    .home-premium-page.film-on .film-chapter{ display: none }
}

/* l'entrata a comparsa dell'hero non deve ripartire a ogni fotogramma:
   con il film il testo resta fermo e visibile per tutta la corsa */
.home-premium-page.film-on .home-hero .home-hero-small,
.home-premium-page.film-on .home-hero h1,
.home-premium-page.film-on .home-hero p,
.home-premium-page.film-on .home-hero .hero-buttons{
    animation-play-state: running;
}

/* NIENTE LASTRA SOTTO IL TESTO.
   La prima versione metteva un ovale scuro dietro le parole. Sulle
   inquadrature chiare e piatte, tipo il terreno visto dal drone, quell'ovale
   si vedeva come una macchia. Un gradiente non ha forma, quindi non puo'
   fare macchie: qui riprendo il gradiente originale del sito e lo rendo
   piu' deciso a sinistra, dove stanno le parole, lasciando intatto il terzo
   destro del fotogramma.

   Valori misurati sul pixel piu' chiaro sotto ogni riga di testo, su quindici
   fotogrammi (tre per battuta): occhiello 5,45:1, titolo 9,01:1,
   paragrafo 7,42:1. Le soglie sono 4,5 e 3.

   Vale solo mentre il film e' acceso: con l'hero normale resta il vostro. */
.home-premium-page.film-on .home-hero::after{
    background:
        linear-gradient(90deg,
            rgba(13, 13, 11, .95) 0%,
            rgba(13, 13, 11, .90) 35%,
            rgba(13, 13, 11, .70) 58%,
            rgba(13, 13, 11, .24) 82%,
            rgba(13, 13, 11, .06) 100%),
        linear-gradient(0deg,
            rgba(13, 13, 11, .62) 0%,
            transparent 42%);
}