/* hero — vedi doc/copy.md
   Token e regole globali (prefers-reduced-motion, focus-visible) stanno in
   edil.css: qui non si ridefiniscono. */

/* --------------------------------------------------------------------------
   Fondale
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 640px;
  display: flex;
  align-items: center;
  padding-block: 72px;
  background: linear-gradient(
    to top,
    var(--scuro-1) 0%,
    var(--scuro-2) 26%,
    var(--scuro-3) 62%,
    var(--scuro-4) 100%
  );
}

/* Alone azzurro in alto a destra: da' profondita' all'angolo, che altrimenti
   resterebbe una campitura piatta. Sta sopra la colonna del video, cioe'
   dalla parte OPPOSTA al testo: fa coppia col velo di lettura qui sotto e
   come lui si specchia in arabo (vedi il blocco [dir="rtl"] in fondo). */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    680px 480px at 82% 6%,
    rgba(46, 155, 230, .22) 0%,
    rgba(46, 155, 230, 0) 70%
  );
}

.hero-mattoni {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* Velo di lettura: garantisce il contrasto sulla colonna di testo qualunque
   sia lo stato dell'animazione dei mattoncini.
   NON e' un fondale decorativo: e' agganciato alla colonna di testo, quindi
   in arabo — dove il testo passa a destra — deve passare a destra anche lui,
   o il titolo bianco finisce sulla meta' chiara. I gradienti non hanno
   equivalente logica: si ribalta l'angolo in fondo al file. */
.hero-velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(4, 16, 30, .78) 0%,
    rgba(4, 16, 30, 0) 72%
  );
}

/* --------------------------------------------------------------------------
   Mattoncini (nodi generati da public/js/edil.js)
   -------------------------------------------------------------------------- */
.hero-mattone {
  position: absolute;
  width: var(--mattone-l, 30px);
  height: var(--mattone-a, 11px);
  border-radius: 2px;
  opacity: 0;
  animation: hero-posa .9s ease-out both;
}

/* Effetto di posa: il pezzo si appoggia salendo di 6 px, non "appare".
   Arriva a opacita' 1 perche' il colore del mattoncino ce l'ha GIA' nell'alfa
   che scrive il JS: un secondo livello di trasparenza qui sopra la
   dimezzerebbe, e i mattoncini azzurri — «i pochi che si notano» —
   sparirebbero del tutto. I valori dell'alfa stanno in edil.js, non qui. */
@keyframes hero-posa {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Moto ridotto: stessa immagine, ferma — quindi la stessa opacita' dello stato
   finale dell'animazione, non una diversa. Il JS non programma i ritardi, qui
   si toglie del tutto l'animazione cosi' il muro e' completo dal primo frame.

   Stessa dichiarazione per --posato, che il JS mette sui pezzi GIA' a muro
   quando ricostruisce (resize, rotazione, swap dei font): i nodi sono nuovi e
   ripartirebbero da opacita' 0, facendo risalire insieme tutto il muro gia'
   posato. Restano fermi allo stato finale; posano solo quelli ancora attesi.
   I ,9 s dell'animazione su .hero-mattone sono la stessa costante DURATA_POSA
   di edil.js, che serve al JS per sapere chi ha gia' finito: se cambia una,
   cambiare anche l'altra. */
.hero-mattoni--ferma .hero-mattone,
.hero-mattone--posato {
  animation: none;
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Griglia della hero: testo, e da 992 px in su il video accanto.
   Mobile-first: in colonna, il video sotto il testo.
   -------------------------------------------------------------------------- */
.hero-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}

/* --------------------------------------------------------------------------
   Video di presentazione
   In pagina viaggia solo il poster: la src del .mp4 (28 MB) la mette il JS al
   click, e da li' il browser streamma con richieste Range sul file statico.
   -------------------------------------------------------------------------- */
.hero-video-box {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-medio);
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow:
    0 30px 80px rgba(4, 16, 30, .55),
    0 0 60px rgba(46, 155, 230, .18);
}

.hero-video-avvia {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.hero-video-avvia[hidden] { display: none; }

.hero-video-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(4, 16, 30, .34) 0%, rgba(10, 46, 82, .20) 100%);
  transition: background-color .25s ease;
}
.hero-video-avvia:hover .hero-video-velo,
.hero-video-avvia:focus-visible .hero-video-velo {
  background: linear-gradient(135deg, rgba(4, 16, 30, .18) 0%, rgba(10, 46, 82, .10) 100%);
}

.hero-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--bianco);
  background: linear-gradient(135deg, var(--blu), var(--azzurro));
  box-shadow: 0 10px 30px rgba(46, 155, 230, .5);
  transition: transform .25s ease, box-shadow .25s ease;
}
/* margin-left FISICO, e non margin-inline-start: e' la correzione ottica che
   centra il triangolo del play dentro il cerchio. Il simbolo del play non si
   specchia in RTL (la riproduzione ha un verso suo, non quello della scrittura),
   quindi non deve specchiarsi nemmeno la spinta che lo centra. */
.hero-video-play svg { width: 30px; height: 30px; margin-left: 3px; }

.hero-video-avvia:hover .hero-video-play,
.hero-video-avvia:focus-visible .hero-video-play {
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow: 0 14px 38px rgba(46, 155, 230, .62);
}

.hero-video-etichetta {
  position: absolute;
  inset-inline-start: 14px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  font-family: var(--f-etichetta);
  font-size: 13px;
  font-weight: 600;
  color: var(--bianco);
  background: rgba(4, 16, 30, .62);
  border-radius: var(--r-piccolo);
  padding: 7px 12px;
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------------------
   Video a schermo, centrato — <dialog> nativo
   -------------------------------------------------------------------------- */
.hero-video-modale {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Il dialog nativo e' chiuso di default; da aperto diventa una griglia che
   centra il telaio. Senza display:grid qui, il telaio resterebbe in alto. */
.hero-video-modale[open] {
  display: grid;
  place-items: center;
  padding: 20px;
}

.hero-video-modale::backdrop {
  background: rgba(4, 16, 30, .88);
  backdrop-filter: blur(6px);
}

.hero-video-modale__telaio {
  position: relative;
  width: min(1120px, 100%);
  border-radius: var(--r-medio);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6);
}

.hero-video {
  display: block;
  width: 100%;
  /* Il video e' 16:9: l'aspect-ratio evita che il telaio sussulti fra il
     momento in cui si apre e quello in cui il browser conosce le dimensioni. */
  aspect-ratio: 16 / 9;
  background: #000;
}

.hero-video-chiudi {
  position: absolute;
  top: 10px;
  /* La X sta nell'angolo dove la riga di lettura FINISCE: in arabo passa a
     sinistra da sola. */
  inset-inline-end: 10px;
  z-index: 2;
  /* 44px di area di tocco: i controlli nativi del player stanno in basso,
     quindi qui sopra non si sovrappone nulla. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--bianco);
  background: rgba(4, 16, 30, .62);
  backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background-color .18s ease;
}
.hero-video-chiudi:hover,
.hero-video-chiudi:focus-visible { background: rgba(4, 16, 30, .88); }
.hero-video-chiudi svg { width: 20px; height: 20px; }

/* --------------------------------------------------------------------------
   Contenuto
   -------------------------------------------------------------------------- */
.hero-contenuto {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-occhiello {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: .19em;
  line-height: 1.2;
}

/* Trattino azzurro 34x2 che apre l'occhiello */
.hero-occhiello::before {
  content: "";
  flex: 0 0 auto;
  width: 34px;
  height: 2px;
  background: var(--azzurro);
}

/* Ganky, come chiede la copy: decisione del committente del 4 settembre 2026.
   Esiste solo in peso 400, e font-synthesis: none impedisce al browser di
   inventare un grassetto. E' un display: il peso lo fa la misura. */
.hero-titolo {
  font-family: var(--f-display);
  font-weight: 400;
  font-synthesis: none;
  font-size: 33px;
  line-height: 1.05;
  letter-spacing: -.038em;
  color: var(--bianco);
  margin: 22px 0 0;
}

/* Due livelli di bianco: la prima riga arretra, la promessa resta piena. */
.hero-titolo-tenue {
  display: block;
  color: rgba(255, 255, 255, .55);
}

.hero-didascalia {
  font-family: var(--f-testo);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .76);
  max-width: 56ch;
  margin: 26px 0 0;
}

/* Sul telefono i bottoni sono a larghezza piena e impilati (nota mobile). */
.hero-azioni {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: 34px;
}

.hero-bottone { width: 100%; }

/* La prima CTA e' un <button> (avvia il video, non naviga): senza questo
   erediterebbe font e bordo nativi del controllo e stonerebbe accanto all'<a>. */
button.hero-bottone {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-family: var(--f-titolo);
}

.hero-bottone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-titolo);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1;
  padding: 17px 30px;
  border-radius: var(--r-piccolo);
  text-decoration: none;
  transition: box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease;
}

.hero-bottone--pieno {
  color: var(--bianco);
  background: linear-gradient(135deg, var(--blu) 0%, var(--azzurro) 100%);
  box-shadow: 0 12px 30px rgba(46, 155, 230, .28);
}
.hero-bottone--pieno:hover,
.hero-bottone--pieno:focus-visible {
  color: var(--bianco);
  box-shadow: 0 16px 38px rgba(46, 155, 230, .38);
}

.hero-bottone--contorno {
  color: var(--bianco);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
}
.hero-bottone--contorno:hover,
.hero-bottone--contorno:focus-visible {
  color: var(--bianco);
  border-color: rgba(255, 255, 255, .72);
  background: rgba(255, 255, 255, .06);
}

/* --------------------------------------------------------------------------
   Da 768 px in su — stessa soglia che usa il JS per la geometria del muro.
   Il file e' mobile-first come strumenti.css e footer.css: la base e' il
   telefono, qui si aggiunge.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .hero {
    min-height: 790px;
    padding-block: 96px;
  }

  .hero-titolo {
    font-size: 53px;
    /* Misura ricontrollata sul Ganky vero, come chiede la nota della copy: e'
       la larghezza che tiene il titolo su tre righe senza lasciare orfani. */
    max-width: 780px;
  }

  .hero-didascalia { font-size: 18px; }

  .hero-azioni {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .hero-bottone { width: auto; }
}

/* --------------------------------------------------------------------------
   Da 992 px: testo e video affiancati.
   Sotto questa soglia il video sta sotto il testo a larghezza piena — in due
   colonne strette non si leggerebbe ne' l'uno ne' l'altro.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .hero-griglia {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 54px;
  }

  /* Affiancato al video il titolo ha meno spazio: il max-width pensato per la
     riga intera lo farebbe traboccare sulla colonna del video. */
  .hero-titolo { max-width: none; }
}

/* --------------------------------------------------------------------------
   Arabo — le due sole cose della hero che il dir="rtl" non ribalta da solo.
   Griglia, testo, bottoni e occhiello si specchiano gia' perche' sono flex e
   grid: qui restano i gradienti, che non hanno proprieta' logiche.

   Il velo e l'alone sono una COPPIA: scuro dalla parte del testo, chiaro dalla
   parte del video. In arabo il testo passa a destra, quindi la coppia si
   scambia i lati; l'angolo di un gradiente si specchia con 360 - angolo, e la
   posizione con 100% - posizione.

   NON si ribalta il fondale della hero (linear-gradient to top): e' verticale,
   non ha lati. NON si ribaltano i mattoncini: li posiziona edil.js con left e
   bottom in pixel e sono un MURO, non una riga di testo — si costruisce da un
   angolo e basta, che sia destro o sinistro non vuol dire nulla.
   -------------------------------------------------------------------------- */
[dir="rtl"] .hero::before {
  background: radial-gradient(
    680px 480px at 18% 6%,
    rgba(46, 155, 230, .22) 0%,
    rgba(46, 155, 230, 0) 70%
  );
}

[dir="rtl"] .hero-velo {
  background: linear-gradient(
    260deg,
    rgba(4, 16, 30, .78) 0%,
    rgba(4, 16, 30, 0) 72%
  );
}