/* =============================================================================
   HERO VIDEO — al posto della foto dello studio, il viaggio del film Higgsfield
   (villa → atrio → sala trading) in ciclo continuo. Stessi veli scuri della foto.
   ============================================================================= */
.hero__bg--video {
  background: #020617;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__video.is-on { opacity: 1; }

/* i veli scuri della foto, sopra il video */
.hero__bg--video::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(2, 6, 23, 0.50) 0%,
      rgba(2, 6, 23, 0.62) 45%,
      rgba(2, 6, 23, 0.86) 85%,
      rgba(2, 6, 23, 0.96) 100%),
    linear-gradient(90deg,
      rgba(2, 6, 23, 0.55) 0%,
      rgba(2, 6, 23, 0.15) 45%,
      rgba(2, 6, 23, 0.0) 65%,
      rgba(2, 6, 23, 0.20) 100%);
}

/* telefono: il testo copre quasi tutta la larghezza, velo un po' piu' pieno */
@media (max-width: 599px) {
  .hero__bg--video::after {
    background:
      linear-gradient(180deg,
        rgba(2, 6, 23, 0.55) 0%,
        rgba(2, 6, 23, 0.70) 45%,
        rgba(2, 6, 23, 0.88) 85%,
        rgba(2, 6, 23, 0.96) 100%);
  }
}

/* =============================================================================
   TELEFONO (14/10, Andrea): scritte centrate in altezza; entrano a fine video, una alla volta.
   Il testo e' lo stesso del computer: cambia solo come si dispone.
   ============================================================================= */
@media (max-width: 599px) {
  .hero--has-bg {
    min-height: calc(100svh - 64px);   /* tutta la prima schermata, sotto la testata */
    align-items: center;
    padding-block: 24px;
  }
  .hero__video { object-position: 50% 40%; }
  /* velo leggero mentre si vede solo il video (in fondo piu' scuro, per legarsi alla sezione dopo) */
  .hero__bg--video::after {
    background:
      linear-gradient(180deg,
        rgba(2, 6, 23, 0.16) 0%,
        rgba(2, 6, 23, 0.10) 40%,
        rgba(2, 6, 23, 0.30) 70%,
        rgba(2, 6, 23, 0.80) 100%);
  }
  .hero__kicker { margin-bottom: 10px; font-size: .7rem; letter-spacing: .16em; }
  .hero__title { margin-bottom: 12px; font-size: clamp(1.6rem, 8vw, 1.9rem); line-height: 1.12; letter-spacing: -.015em; }   /* 3 righe da 320 a 599 px (misurato) */
  .hero__title br { display: none; }                 /* niente a capo forzato: 3 righe invece di 4 */
  .hero__title-acc { color: var(--accent); }
  .hero__lead { margin-bottom: 20px; font-size: .98rem; line-height: 1.55; }
  .hero__actions { gap: 2px; }
  /* il secondo pulsante diventa una scritta piccola sotto quello principale */
  .hero__actions .btn.btn--ghost,
  .hero__actions .btn.btn--ghost:hover {
    padding: 10px 0 4px;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: .86rem;
    font-weight: 500;
    color: var(--muted);
  }
  .hero__rating { margin-top: 12px; }
}
/* tempi delle scritte (computer e telefono): le regola hero-video.js, che le tiene ferme e le fa entrare quando mancano
   0,5 s alla fine del video, una alla volta. Questi ritardi valgono solo se lo script non c'e'. */
@media (prefers-reduced-motion: no-preference) {
  .hero--has-bg .hero__kicker.reveal  { animation-delay: 1.6s; }
  .hero--has-bg .hero__title.reveal   { animation-delay: 1.6s; }
  .hero--has-bg .hero__lead.reveal    { animation-delay: 2.6s; }
  .hero--has-bg .hero__actions.reveal { animation-delay: 3.6s; }
  .hero--has-bg .hero__rating.reveal  { animation-delay: 4.6s; }
}

/* 14/10 (Andrea): via la griglia che scorre sopra lo sfondo (.hero::after in style.css, "data grid drift"):
   sopra il video si vedeva come un reticolo. Spenta solo qui; la regola in style.css resta, non usata. */
.hero--has-bg::after { display: none; }

/* 14/10 (Andrea): il video va una volta sola. Alla fine (classe messa da hero-video.js) il video, il suo velo e i bagliori
   sfumano e resta lo STESSO SFONDO DI CHI SIAMO: blu notte della palette (--bg2 = 10,16,32) al 55% (su un fondo cosi' scuro
   il colore che si vede e' lo stesso dell'82% di Chi siamo, ma lascia passare la luce), sotto cui si vedono i punti luce della scena 3D (la griglia dietro la hero non si disegna, scene3d.js). I punti fanno cosi' parte della hero e,
   scendendo, si raccolgono nel simbolo. Poi, a sfondo fermo, entrano per ultime le recensioni. */
.hero__bg--video {
  background-color: var(--bg2);
  transition: background-color 1.4s ease;
  /* blu pieno su tutta la hero: niente sfumature ai bordi (lasciavano vedere la griglia della scena 3D, Andrea 14/10).
     Niente zoom lento del contenitore: il video si muove da se', e lo zoom costava fotogrammi sul telefono */
  -webkit-mask-image: none;
          mask-image: none;
  animation: none;
}
.hero__video, .hero__bg--video::after, .hero::before { transition: opacity 1.4s ease; }
.hero--video-finito .hero__video.is-on,
.hero--video-finito .hero__bg--video::after,
.hero--video-finito::before { opacity: 0; }                     /* via video, velo e bagliori */
.hero--video-finito .hero__bg--video { background-color: rgba(10, 16, 32, .55); }   /* come Chi siamo, e si vedono i punti luce */
/* raccordo con Chi siamo: la sua parte alta sfumava da trasparente (pensata per la foto di una volta); a video finito
   uno strato si accende piano e la raccorda col 55% della hero, cosi' fra hero e Chi siamo non resta una fascia diversa */
.section--about > .wrap { position: relative; z-index: 1; }
.section--about::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 140px; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 16, 32, .55) 0%, rgba(10, 16, 32, .43) 50%, rgba(10, 16, 32, 0) 100%);
  opacity: 0; transition: opacity 1.4s ease;
}
html.hero-finito .section--about::before { opacity: 1; }