/* Slider della home, motore proprio (?hero=clone).
   File a mano, non generato da SCSS: il build (./build-css.sh) compila solo
   style.scss, agenda.scss e search.scss.

   Qui c'e' solo l'impalcatura e cio' che in Slider Revolution arrivava dai suoi CSS
   (settings.css / layers.css / navigation.css), che con questo motore non si caricano.
   L'aspetto approvato dei layer resta in web/sass/_slider.scss (compilato in style.css):
   il markup riusa le stesse classi tp-* proprio per non riscriverlo.
   Riferimento: docs/baseline/hero/spec-clone.md.

   Caricato solo dalle pagine con lo slider (base.tpl), quindi non tocca il resto del sito. */

/* --- segnaposto di altezza -------------------------------------------------
   Riserva al primo frame l'altezza che il JS calcolera', per non far saltare il layout.
   Stesse griglie di custom.css per #PAGE_SLIDER_1_wrapper: altezza =
   gridheight x min(1, larghezza/gridwidth). Il break a 1185px tiene conto della
   barra di scorrimento (1170 di griglia + ~15). Appena il JS scrive height inline
   l'aspect-ratio smette di contare. */
#HERO_wrapper { aspect-ratio: 1170/670; }
@media (min-width: 1185px)   { #HERO_wrapper { aspect-ratio: auto; height: 670px; } }
@media (max-width: 1023.98px) { #HERO_wrapper { aspect-ratio: 1024/768; } }
@media (max-width: 777.98px)  { #HERO_wrapper { aspect-ratio: 778/960; } }
@media (max-width: 479.98px)  { #HERO_wrapper { aspect-ratio: 480/720; } }

/* --- impalcatura ---------------------------------------------------------- */
#HERO_wrapper {
    position: relative;
    z-index: 0;
    padding: 0;
    /* il colore su cui si dissolve la prima immagine (spec §4.5) */
    background-color: #111111;
}

#HERO {
    position: relative;
    width: 100%;
    height: 100%;
    /* taglia il titolo lungo che sborda a destra (spec §2.3, §8 punto 5) */
    overflow: hidden;
}

#HERO .hero-list {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

#HERO .hero-slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    overflow: hidden;
    /* le slide non attive restano nel DOM e nel flusso (misurabili), ma invisibili
       e fuori dall'ordine di tabulazione */
    visibility: hidden;
}
#HERO .hero-slide.is-active { visibility: visible; }

#HERO .hero-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    /* Revolution tiene l'immagine su un layer composito (.slotholder ha una matrice
       identita' e backface-visibility: hidden). Il ridimensionamento di `cover` su un
       layer composito usa un filtro leggermente diverso da quello della pittura
       ordinaria: senza questa riga la stessa foto esce con contorni spostati di una
       frazione di pixel, misurabile fino a 49/255 su 1,8 % dell'area (slide 4 della
       home). Non e' un layer in piu' rispetto a oggi: l'originale ne ha uno uguale. */
    transform: translateZ(0);
    backface-visibility: hidden;
    background-repeat: no-repeat;
    /* Prima che il JS avvii la sequenza non si vede nulla dello slider: solo il
       #111 del wrapper, che e' il colore su cui la prima immagine si dissolve
       (spec §4.5). Lo stato di partenza sta qui e non nel JS perche' lo script e'
       `defer`: puo' girare dopo la prima pittura, e una comparsa a piena opacita'
       seguita dalla dissolvenza si vedrebbe. */
    opacity: 0;
}

/* posizionatore: porta left/top (scritti dal JS) e lascia la larghezza al contenuto */
#HERO .hero-pos {
    position: absolute;
    left: 0;
    top: 0;
}

/* finestra di ritaglio: inerte ovunque tranne che sul titolo, dove serve al reveal */
#HERO .hero-clip { display: block; overflow: visible; }
/* La finestra di ritaglio del titolo trasla, ma non porta opacita': la dissolvenza
   sta sul solo layer (vedi writeLayer in hero.js). */
#HERO .hero-clip-title { overflow: hidden; }

/* Resa del testo dei layer: in Revolution arrivava da `.rev_slider .tp-caption`
   (settings.css / revolution-formedil.css). Senza, il testo del clone esce con la
   resa a subpixel, cioe' visibilmente piu' spesso: e' l'unica differenza che
   restava sui contorni di tutte le lettere.
   Sta sul solo `.tp-caption`, come nell'originale: i titoli delle anteprime delle
   frecce in Revolution NON sono `.tp-caption` e restano quindi a subpixel. */
#HERO .tp-caption { -webkit-font-smoothing: antialiased !important; }

#HERO .hero-layer {
    position: relative;
    display: block;
    margin: 0;
    /* stato di partenza dell'entrata, stessa ragione dello sfondo qui sopra.
       La traslazione iniziale (h + 2 px) la scrive il JS: dipende dall'altezza
       del riquadro, che a opacita' 0 comunque non si vede. */
    opacity: 0;
}

/* Ordine di sovrapposizione misurato (spec §2.6): banda e titolo a 1 (il titolo sta
   sopra perche' viene dopo nel DOM), sottotitolo 17, bottone 19. L'id qui vince sugli
   z-index dichiarati in _slider.scss, che nel sito originale erano gia' inefficaci.

   Lo z-index sta sul *posizionatore*, come in Revolution (tp-parallax-wrap), non sul
   layer: il JS scrive un transform sulla finestra di ritaglio del titolo, che e' un
   blocco non posizionato, e il transform ne fa un contesto di impilamento dipinto
   sotto tutti i fratelli posizionati. Con lo z-index sul layer il titolo finiva cosi'
   sotto la banda di sfondo — invisibile a 1440 px, dove non si sovrappongono, ma
   evidente a 375 px, dove la banda alta 550 px copre anche il titolo. */
#HERO [data-layer="shape"]    { z-index: 1; }
#HERO [data-layer="title"]    { z-index: 1; }
#HERO [data-layer="subtitle"] { z-index: 17; }
#HERO [data-layer="button"]   { z-index: 19; }
#HERO [data-layer="shape"] .hero-layer { white-space: nowrap; }

/* --- bottone ---------------------------------------------------------------
   Valori che arrivavano da layers.css di Revolution (spec §2.5); fondo, maiuscolo e
   famiglia restano quelli di _slider.scss. I padding li scrive il JS (dipendono dal livello). */
#HERO .hero-layer.rev-btn {
    font-size: 13px;
    line-height: 13px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0;
    box-sizing: border-box;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    text-decoration: none;
}
/* Al passaggio del mouse resta il solo contorno bianco (spec §2.5). */
#HERO .hero-layer.rev-btn:hover,
#HERO .hero-layer.rev-btn:focus {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}

/* --- focus dei controlli ----------------------------------------------------
   Frecce e pallini sono <button> (in Revolution erano <div>, che il focus non lo
   prendono): cosi' arriva addosso `button:focus { outline: 5px auto }` di
   Bootstrap, e dopo un click resta un anello bianco che sulla freccia si allarga
   fino a contornare l'anteprima. Col mouse non deve vedersi nulla, ma l'anello
   serve a chi naviga da tastiera: si toglie da `:focus` e si rimette, disegnato
   a mano, su `:focus-visible`, che Chrome non attiva sul click del mouse. */
#HERO .hero-arrow:focus,
#HERO .hero-dot:focus { outline: none; }
#HERO .hero-arrow:focus-visible,
#HERO .hero-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* --- pallini (spec §5.1) ----------------------------------------------------
   Contenitore all'angolo in alto a destra dello slider, spostato di 0 px in
   orizzontale e 10 px in verticale; larghezza n*15 + (n-1)*5 (passo 20 px).
   L'anello del pallino attivo sborda di 2 px a destra e viene tagliato
   dall'overflow dello slider: succede anche in Revolution. */
#HERO .hero-dots {
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 1000;
    height: 15px;
    font-size: 0;
    white-space: nowrap;
}
#HERO .hero-dot {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 15px;
    height: 15px;
    margin: 0 5px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0);
    transition: box-shadow 0.3s;
}
#HERO .hero-dot:last-child { margin-right: 0; }
#HERO .hero-dot.is-active,
#HERO .hero-dot:hover { box-shadow: 0 0 0 2px rgb(255, 255, 255); }

#HERO .hero-dot-in {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    transition: background-color 0.3s, transform 0.3s;
}
#HERO .hero-dot.is-active .hero-dot-in,
#HERO .hero-dot:hover .hero-dot-in {
    background-color: rgb(255, 255, 255);
    transform: scale(0.4);
}

/* --- frecce (spec §5.2) -----------------------------------------------------
   Nascoste finche' il mouse non entra nell'area dello slider (classe is-hover,
   scritta dal JS): comparsa in 300 ms, sparizione dopo 200 ms di ritardo.
   Lo sfondo non cambia al passaggio del mouse. */
#HERO .hero-arrow {
    position: absolute;
    top: 50%;
    margin-top: -35px;
    width: 70px;
    height: 70px;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    border-radius: 35px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* i controlli di modulo non ereditano il font: senza questo il titolo
       dell'anteprima uscirebbe con il font di sistema */
    font: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0s 0.2s;
}
#HERO.is-hover .hero-arrow {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, visibility 0s;
}
#HERO .hero-arrow-left  { left: 30px; }
#HERO .hero-arrow-right { right: 30px; }

/* Il contorno e' quello dei glifi revicons U+E824/U+E825 (font-size 20 px):
   riquadro d'inchiostro 441 x 838 unita' su 1000 per em, esattamente centrato
   nel cerchio come lo era la riga di testo di Revolution.
   Il tratto di 30 unita' (0,6 px) rende l'ingrossamento che il rasterizzatore dei
   font applica a questa dimensione: senza, il glifo verrebbe visibilmente piu'
   sottile di quello di Revolution (misurato: massa d'inchiostro 29 contro 48).
   Il riquadro e' allargato di 15 unita' per lato per non tagliare il tratto. */
#HERO .hero-arrow-glyph {
    position: relative;
    z-index: 2;
    display: block;
    width: 9.42px;
    height: 17.36px;
    fill: #fff;
    stroke: #fff;
}

/* Anteprima: dietro al glifo, si apre dal lato della freccia.
   Larghezza = 81 px + larghezza del testo (i due padding del titolo, il margine
   di 11 px e i padding asimmetrici del contenitore sommano sempre 81 px). */
#HERO .hero-preview {
    position: absolute;
    top: 0;
    z-index: 1;
    display: inline-block;
    height: 71px;
    line-height: 70px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 35px;
    overflow: hidden;
    white-space: nowrap;
    /* la scala non e' animata: il riquadro appare gia' a dimensione piena e si
       dissolve (la transizione e' solo su opacity) */
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
}
#HERO .hero-arrow-left .hero-preview {
    left: 0;
    transform-origin: 50% 50%;
    padding: 0 10px 0 20px;
}
#HERO .hero-arrow-right .hero-preview {
    right: 0;
    transform-origin: 100% 50%;
    padding: 0 20px 0 10px;
}
#HERO .hero-arrow:hover .hero-preview {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

#HERO .hero-preview-img,
#HERO .hero-preview-veil {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#HERO .hero-preview-img {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Stessa ragione dello sfondo delle slide: in Revolution l'anteprima sta su
       un layer composito, e `cover` su un layer composito campiona la foto in
       modo leggermente diverso. Senza questa riga la stessa immagine esce piu'
       contrastata (deviazione standard 25,0 contro 23,4 sulla fascia sopra il
       testo), abbastanza da superare la soglia sull'anteprima piu' larga. */
    transform: translateZ(0);
    backface-visibility: hidden;
}
#HERO .hero-preview-veil { background: rgba(0, 0, 0, 0.5); }

/* L'opacita' del titolo non e' in transizione: cambia di scatto. Il ritardo di
   0,1 s vale solo in hover, quindi il titolo entra un decimo di secondo dopo
   l'anteprima ma rientra subito quando il mouse esce. */
#HERO .hero-preview-title {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 70px;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(200px);
    transition: transform 0.3s;
    transition-delay: 0s;
}
#HERO .hero-arrow-left  .hero-preview-title { margin-left: 11px; }
#HERO .hero-arrow-right .hero-preview-title {
    margin-right: 11px;
    transform: translateX(-200px);
}
#HERO .hero-arrow:hover .hero-preview-title {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.1s;
}

/* Soglie di scomparsa (spec §5.1, §5.2), sulla larghezza dello slider: le
   classi le scrive il JS in layout(), non una media query, perche' con una barra
   di scorrimento che occupa spazio la larghezza dello slider e quella della
   finestra non coincidono. */
#HERO.is-nodots  .hero-dots  { display: none; }
#HERO.is-noarrows .hero-arrow { display: none; }