/* ==== Hero v2 - 24 agosto 2026, sera (branch v2-home) ====
   Terza forma, scelta da Fabio dal test "video intero":
   lo showreel a SCHERMO INTERO sotto a tutto (embed YouTube, in attesa del
   master mp4), velo scuro a vignetta, polvere chiara, blocco testi al
   centro con le scritte in bianco (evidenziatore: scatola bianca, testo
   nero), payoff che ruota. La testata del sito si sovrappone al video in
   bianco, solo sulla home. Per tornare indietro: git switch main. */

/* la testata "solo in uscita" (variante 5 del Test-header): fissa, mai via.
   Sopra la hero resta trasparente in bianco e si restringe appena scendendo
   (--hd-p); il velo bianco sfocato e il passaggio al nero arrivano soltanto
   quando la hero finisce (--hd-q). Le variabili le scrive hero-v2.js. */
body[data-home] .site-header{position:fixed;left:0;right:0;top:0;border-bottom:0;
  background:rgba(255,255,255,calc(.86*var(--hd-q,0)));
  -webkit-backdrop-filter:saturate(120%) blur(calc(16px*var(--hd-q,0)));
  backdrop-filter:saturate(120%) blur(calc(16px*var(--hd-q,0)));
  box-shadow:0 1px 0 rgba(15,14,12,calc(.14*var(--hd-q,0)))}
body[data-home] .site-header .bar{padding-block:calc(24px - 10px*var(--hd-p,0))}
body[data-home] .site-header .brand img{filter:invert(var(--hd-inv,1))}
body[data-home] .site-header .brand .word{height:calc(43px - 8px*var(--hd-p,0))}
body[data-home] .site-header .brand .picto{height:calc(37px - 7px*var(--hd-p,0))}
body[data-home] .site-header .nav a{color:var(--hd-nav,#fff)}
body[data-home] .site-header .nav a:hover{color:var(--hd-navh,#fff)}
/* Il tasto IT/EN sopra lo showreel: la lingua attiva in giallo Field, l'altra
   in bianco. Sul video il nero non si legge, e due bianchi uguali non
   direbbero quale delle due lingue e' quella accesa. Uscendo dalla hero si
   torna ai colori del resto del sito: nero Field e grigio. */
body[data-home] .site-header .lingua-sito .lg-on{color:var(--hd-lgon,var(--yellow-500,#FFE400))}
body[data-home] .site-header .lingua-sito .lg-off{color:var(--hd-lg,#fff)}
/* Il conta-clic del logo segue gli stessi colori del menu: bianco sopra
   lo showreel, nero Field una volta usciti dalla hero. */
body[data-home] .contaclic .lode{color:var(--hd-navh,#fff)}

.hero-v2{position:relative;min-height:100svh;overflow:hidden;display:block;
  background:var(--fa1-black)}

/* il video YouTube come fondale: ritagliato a coprire, mai interattivo */
.reelfondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* Dal 1 settembre 2026 il filmato e' un video nostro e non piu' un riquadro
   YouTube: la copertura si ottiene con object-fit invece che con la matematica
   del 16:9, quindi non c'e' piu' nessun bordo da far sbordare a mano. */
.reelfondo video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border:0;pointer-events:none;display:block}

/* il velo che tiene leggibile il centro */
.hero-v2 .scrim{position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 90% 80% at 50% 46%,
    rgba(5,5,5,.55), rgba(5,5,5,.34) 55%, rgba(5,5,5,.58))}

.hero-v2 .polvere2{position:absolute;inset:0;width:100%;height:100%;display:block;
  z-index:2;pointer-events:none}

/* il blocco dei testi: al centro, tutto centrato, in bianco */
.hero-v2 .testo-v2{position:absolute;z-index:3;left:50%;top:50%;
  transform:translate(-50%,-50%);width:min(760px,90%);
  display:flex;flex-direction:column;align-items:center;
  gap:var(--space-7);text-align:center}
.payoff-v2{font-weight:var(--weight-bold);letter-spacing:var(--tracking-display);
  line-height:.98;font-size:clamp(2.8rem,6.4vw,6rem);color:#fff;
  text-shadow:0 2px 44px rgba(0,0,0,.35);max-width:none}
.payoff-v2 span{display:block}
.payoff-v2 .riga2{color:var(--parola,#6A18F0);min-height:1em;white-space:nowrap;
  transition:color .8s ease;position:relative}

/* i telai degli effetti della parola */
.payoff-v2 b{font-weight:inherit;display:inline-block}
.payoff-v2 .gabbia{display:inline-block;overflow:hidden;height:1.04em;line-height:1.04;vertical-align:bottom}
.payoff-v2 .rullo{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom;height:1em;line-height:1}
.payoff-v2 .rullo i{display:block;font-style:normal;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.payoff-v2 .rullo.vai i{transform:translateY(-100%)}
.payoff-v2 .tagli{display:inline-block;position:relative}
.payoff-v2 .tagli u{text-decoration:none;display:block}
.payoff-v2 .tagli u+u{position:absolute;inset:0}

/* il tasto audio dello showreel: vetro scuro in basso a destra.
   Le onde compaiono quando l'audio e' acceso, la x quando e' spento */
.audio-v2{position:absolute;z-index:4;right:var(--gutter);bottom:28px;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(15,14,12,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  transition:background .25s ease,border-color .25s ease,transform .25s ease}
.audio-v2:hover{background:rgba(15,14,12,.62);border-color:rgba(255,255,255,.75);transform:scale(1.07)}
.audio-v2 svg{width:21px;height:21px;display:block}
.audio-v2 .onda,.audio-v2 .barra{transition:opacity .2s ease}
.audio-v2[aria-pressed="false"] .onda{opacity:0}
.audio-v2[aria-pressed="true"] .barra{opacity:0}
@media (max-width:640px){.audio-v2{right:16px;bottom:16px;width:42px;height:42px}}

/* il bottone della hero: il velo che lo attraversa in hover e' bianco,
   la scritta diventa nera (solo qui; altrove resta nero su giallo) */
.hero-v2 .btn::before{background:#fff}
.hero-v2 .btn:hover{color:var(--fa1-black)}

/* le scritte fisse in bianco; l'evidenziatore si ribalta */
.hero-v2 .sub{color:#fff}
.hero-v2 .sub .fa1-evidenza{background:#fff;color:var(--fa1-black)}
/* la riga di servizio per gli uffici gara: angolo in basso a sinistra,
   piccola in mono, a specchio del tasto audio a destra */
.hero-v2 .gare{position:absolute;z-index:4;left:var(--gutter);bottom:38px;margin:0;
  font-family:var(--font-mono);font-size:var(--size-label-s);
  letter-spacing:var(--tracking-label);text-transform:uppercase;line-height:1.6;
  color:rgba(255,255,255,.6)}
.hero-v2 .gare a{color:#fff;border:none;padding-bottom:3px;
  background-image:linear-gradient(rgba(255,255,255,.85),rgba(255,255,255,.85));
  background-repeat:no-repeat;background-position:left bottom;background-size:0% 1px;
  transition:background-size 300ms ease}
.hero-v2 .gare a:hover{background-size:100% 1px}
@media (max-width:640px){
  .hero-v2 .gare{left:16px;bottom:20px;right:74px}
}

@media (max-width:880px){
  .payoff-v2{font-size:clamp(2.4rem,10vw,4rem)}
  .payoff-v2 .riga2{white-space:normal}
}

/* ==== Showreel per intero (scelta 25/8, variante 1 del test) ====
   Riga mono discreta sotto il bottone; il click accende la "modalita' cinema":
   scritte, polvere, scrim, riga gare e testata svaniscono, resta il video
   pulito col tasto audio. Si torna cliccando ovunque (etichetta al cursore)
   o con ESC. Il tasto appare solo quando il video c'e' (consenso dato). */
.reel-intero{background:none;border:none;cursor:pointer;padding:6px;margin-top:-10px;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.18em;
  font-size:11.5px;color:rgba(255,255,255,.62);transition:color .25s ease}
.reel-intero:hover{color:#fff}
.reel-intero i{font-style:normal;color:var(--fa1-yellow)}

.hero-v2 .scrim,.hero-v2 .polvere2,.hero-v2 .testo-v2,.hero-v2 .gare{transition:opacity .6s ease}
.hero-v2.cinema .scrim,.hero-v2.cinema .polvere2,
.hero-v2.cinema .testo-v2,.hero-v2.cinema .gare{opacity:0 !important;pointer-events:none !important}
body.cinema-attivo .site-header{opacity:0;pointer-events:none;transition:opacity .6s ease}

.hero-v2 .torna-eti{position:absolute;z-index:6;left:50%;top:78%;
  transform:translate(14px,10px);white-space:nowrap;pointer-events:none;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  color:#fff;background:rgba(15,14,12,.55);backdrop-filter:blur(4px);padding:7px 11px;
  opacity:0;transition:opacity .25s ease}
.hero-v2.cinema .torna-eti{opacity:1}
/* Su tocco il cursore non esiste: l'etichetta sta fissa in basso al centro */
@media (hover:none){
  .hero-v2.cinema .torna-eti{left:50% !important;top:auto !important;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateX(-50%)}
}

/* ==== Telefono girato in orizzontale (26/8, dal test rotazione) ====
   SOLO schermi touch bassi in landscape: il blocco centrale si fa piccolo
   per stare nell'altezza che resta. Verticale, tablet e desktop identici. */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse){
  .hero-v2 .payoff-v2{font-size:clamp(1.3rem, 9.5vh, 2.1rem)}
  .hero-v2 .testo-v2{gap:10px}
  .hero-v2 .sub{font-size:0.78rem}
  .hero-v2 .sub br{display:none}
  .hero-v2 .testo-v2 .btn{font-size:0.7rem;padding:9px 14px}
  .hero-v2 .reel-intero{font-size:0.68rem}
}