/* ═══════════════════════════════════════════════════════════════
   HERO INTERATTIVA — foto abitacolo nitida + zone cliccabili
   MIBSolution.it
   ───────────────────────────────────────────────────────────────
   Estende il CSS esistente di index.html (usa le stesse variabili:
   --acc, --bg, --fd, --fm…). Attiva solo dentro #hero.hero-hs.

   Le sagome delle zone NON stanno qui: le disegna js/hero-hotspots.js
   leggendo js/hero-zone-dati.js (generato da tools/genera-zone.py).
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. FOTO — nitida, niente sfocatura
   ───────────────────────────────────────────── */
/* Ripiego per il caso senza JS e per il ramo riserva. Con il JS attivo il
   valore viene riscritto a 0: da quando la barra e' di vetro la foto le passa
   sotto, e la plafoniera viene tenuta in campo spostando la FOTO dentro al
   riquadro (posiziona() in js/hero-hotspots.js), non abbassando il riquadro. */
#hero.hero-hs .cockpit-wrap { top: 72px; }
#hero.hero-hs .cockpit-wrap img {
  /* Immagine PULITA: nessun blur, nessuna sepia. Solo un filo di contrasto
     per far staccare i neri dell'abitacolo dal fondo del sito. */
  filter: contrast(1.04) saturate(1.06) brightness(1.06);
  animation: none;                     /* via lo zoom lento: sposterebbe le zone */
  transform: none;
  /* PREDEFINITO = copertura semplice. Vale senza JS e nel ramo di riserva:
     senza questo la foto resterebbe alla sua dimensione naturale (2400×1600)
     ancorata in alto a sinistra. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
/* Quando il JS prende in mano l'inquadratura (classe messa da hero-hotspots.js)
   la foto passa a misure calcolate: servono esatte, non approssimate da
   object-fit, altrimenti le sagome non cadrebbero al pixel giusto. */
#hero.hero-hs .cockpit-wrap.hs-js img {
  inset: auto; top: 0; left: 0;
  width: auto; height: auto; max-width: none; max-height: none;
  object-fit: fill; object-position: 0 0;
}

/* velatura leggera: la foto deve restare leggibile.
   Il testo ha il suo scrim dedicato (punto 2). */
#hero.hero-hs .cockpit-wrap::before {
  background:
    /* sfumatura laterale: quando la foto non copre tutta la larghezza (monitor
       molto larghi) il bordo non deve leggersi come un taglio netto */
    linear-gradient(90deg, rgba(8,9,12,.92) 0%, rgba(8,9,12,0) 5%,
                           rgba(8,9,12,0) 95%, rgba(8,9,12,.92) 100%),
    linear-gradient(180deg, rgba(8,9,12,.46) 0%, rgba(8,9,12,.06) 24%,
                            rgba(8,9,12,0) 50%, rgba(8,9,12,.62) 100%);
}

/* ─────────────────────────────────────────────
   2. TESTO — colonna destra: la plancia (e le sue zone) resta libera
   ───────────────────────────────────────────── */
#hero.hero-hs {
  justify-content: center;
  padding-bottom: 60px;
}
/* ATTENZIONE (bug corretto): il sito usa box-sizing:border-box, quindi il
   rientro dal bordo pagina va messo come MARGIN, non come padding — dentro una
   max-width il padding mangia lo spazio del testo e manda ogni parola a capo. */
/* Il vincolo è sul BORDO SINISTRO: deve restare a destra dell'ancora più a
   destra fra le zone (la striscia ambient, al 60% della foto) più 26px per il
   cartellino. Se il testo scende sotto quella x, il risolutore è costretto a
   ingrandire la foto e il volante esce dal bordo inferiore. */
#hero.hero-hs .hero-copy {
  text-align: left;
  /* la larghezza è tarata perché almeno i tre quarti della striscia ambient
     (che arriva al 79% della foto) restino scoperti: è la zona che si spinge
     più a destra e sarebbe la prima a finire sotto al testo */
  width: clamp(300px, calc(28vw - 26px), 500px);
  max-width: none;
  margin: 0 24px 0 auto;
  padding: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,.75);
}
/* scrim morbido dietro al testo: leggibilità senza sporcare la foto */
/* NB: non allargare questo riquadro oltre lo schermo. Prima era `-100vw` a
   destra: il gradiente si calcola sull'elemento, quindi la parte scura finiva
   fuori dal viewport e sotto al testo restava quasi trasparente. Ora il
   riquadro copre la colonna e poco più, e sfuma verso la foto. */
#hero.hero-hs .hero-copy::before {
  content: ''; position: absolute; inset: -70px -34px -80px -120px;
  z-index: -1; pointer-events: none; filter: none;
  background: linear-gradient(258deg,
      rgba(6,7,10,.9) 0%, rgba(6,7,10,.74) 46%, rgba(6,7,10,.3) 80%, transparent 100%);
}
#hero.hero-hs .hero-copy .kick { justify-content: flex-start; }
#hero.hero-hs .hero-copy .kick::after { display: none; }
/* la scala è tarata perché la riga più lunga del titolo stia dentro la colonna
   a tutte le larghezze: se si allunga il testo, ricontrollare */
#hero.hero-hs .hero-copy h1 { font-size: clamp(24px, 2.1vw, 40px); margin: 14px 0 14px; letter-spacing: -.03em; }
#hero.hero-hs .hero-copy p { margin: 0 0 20px; max-width: none; font-size: 15px; }
#hero.hero-hs .hero-cta { justify-content: flex-start; }
#hero.hero-hs .hero-badges { justify-content: flex-start; gap: 8px 18px; margin-top: 20px; font-size: 11.5px; }

/* suggerimento d'uso: sparisce al primo click */
.hs-hint {
  position: absolute; z-index: 7;
  right: max(30px, calc((100vw - var(--container)) / 2)); bottom: 26px;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--fm); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--t2);
  background: rgba(10,11,15,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 99px; padding: 8px 15px;
  transition: opacity .5s var(--ease);
  pointer-events: none;      /* è solo un'indicazione: non deve rubare i tocchi
                                alle zone che si sovrappongono (plafoniera) */
}
.hs-hint::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--acc);
  box-shadow: 0 0 0 0 rgba(30,155,255,.55); animation: hsPulse 2.2s ease-out infinite;
}
.hs-hint.gone { opacity: 0; pointer-events: none; }
@keyframes hsPulse {
  0%   { transform: scale(.55); opacity: .95; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ─────────────────────────────────────────────
   3. ZONE — sagome cliccabili + riflesso che le attraversa
   ───────────────────────────────────────────── */
/* L'SVG copre ESATTAMENTE la foto (misure impostate dal JS) e il suo viewBox è
   la dimensione del file: così ogni sagoma cade al pixel giusto.
   `screen` fa sì che quanto disegnato AGGIUNGA luce alla foto invece di
   coprirla — è ciò che rende credibile il riflesso. */
.hz-svg {
  position: absolute; top: 0; left: 0; z-index: 5;
  pointer-events: none;                 /* solo le zone raccolgono i click */
  mix-blend-mode: screen;
  /* INDISPENSABILE: index.html ha il reset globale `img,svg{max-width:100%}`.
     La foto ne è già esclusa; senza queste due righe il tetto colpirebbe solo
     l'SVG ogni volta che la foto è più larga del riquadro (telefoni, finestre
     strette e alte) e, con preserveAspectRatio="none", le sagome si
     schiaccerebbero in orizzontale slittando via dalla foto. */
  max-width: none; max-height: none;
}

/* La TELA delle luci. Il riflesso non vive piu' nell'SVG: riscrivere
   geometria e gradiente 60 volte al secondo passava ogni volta dal motore di
   stile (ricalcolo, layout, ridisegno) e nei fotogrammi pieni la banda
   perdeva il passo — gli scatti visti "a volte". Il canvas e' pittura
   diretta, il JS la crea solo quando le animazioni sono attive.
   Stesso `screen` dell'SVG: la luce si AGGIUNGE alla foto, non la copre.
   Copre il riquadro (inset:0), non la foto che deborda: la mappa delle
   coordinate la tiene il JS (posiziona/telaK). Sta sopra l'SVG nell'ordine
   del DOM a parita' di z-index, sotto i cartellini (z-index 6). */
.hz-tela {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hz-z { pointer-events: auto; cursor: pointer; }
/* Niente contorno: il bordo netto faceva sembrare le zone dei ritagli incollati
   sopra la foto invece di riflessi. A riposo resta solo un velo appena
   percettibile, che le rende individuabili fra un passaggio di luce e l'altro. */
.hz-z path {
  fill: rgba(30,155,255,.10);
  stroke: none;
  transition: fill .3s var(--ease);
}
.hz-z:hover path,
.hz-z.on path,
.hz-z:focus-visible path {
  fill: rgba(40,170,255,.22);
}
.hz-z:focus-visible { outline: none; }

/* Le bande di luce stanno sulla tela (.hz-tela qui sopra), non piu' qui:
   una per zona, inclinata come i bordi del suo pannello, ritagliata sulle
   sagome — dove il volante copre il pannello la luce sparisce e riappare
   dall'altra parte. Geometria e movimento li dipinge js/hero-hotspots.js. */

/* ─────────────────────────────────────────────
   4. CARTELLINO informativo (glass leggero)
   ───────────────────────────────────────────── */
/* sta nella SEZIONE, non nel riquadro della foto (che ritaglia): il JS aggiunge
   lo scarto fra i due riquadri alle coordinate */
.hz-carte { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
/* ancora a dimensione zero: il JS le dà solo la posizione */
.hz-carta { position: absolute; top: 0; left: 0; width: 0; height: 0; }
/* il riquadro è un LINK vero: la riga "Richiedi diagnosi" dev'essere cliccabile
   davvero, non solo sembrarlo */
.hz-carta .hz-box {
  display: block; color: inherit; text-decoration: none;
  position: absolute; left: 26px; top: 0;
  transform: translateY(-50%) translateX(-8px);
  width: max-content; max-width: 268px;
  text-align: left;
  background: rgba(11,13,17,.82);
  -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px; padding: 12px 15px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 24px rgba(30,155,255,.1);
  opacity: 0; visibility: hidden;
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.hz-carta .ecu {
  display: block; font-family: var(--fm); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--acc); margin-bottom: 5px;
}
.hz-carta b {
  display: block; font-family: var(--fd); font-size: 14.5px; font-weight: 700;
  color: var(--t1); line-height: 1.25; margin-bottom: 5px;
}
.hz-carta .d {
  display: block; font-family: var(--fb); font-size: 12.5px; color: var(--t2); line-height: 1.5;
}
.hz-carta .go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 9px;
  font-family: var(--fd); font-size: 12px; font-weight: 700; color: var(--acc);
}
.hz-carta .go::after { content: '→'; transition: transform .25s var(--ease); }
.hz-carta.on .go::after { transform: translateX(3px); }

.hz-carta.on .hz-box {
  opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0);
  pointer-events: auto;                /* solo da aperto: altrimenti coprirebbe
                                          le zone sottostanti */
}
.hz-carta .hz-box:hover { border-color: rgba(120,200,255,.4); }
/* cartellino a sinistra se l'ancora è nella metà destra */
.hz-carta.flip .hz-box { left: auto; right: 26px; transform: translateY(-50%) translateX(8px); }
.hz-carta.flip.on .hz-box { transform: translateY(-50%) translateX(0); }
/* cartellino sotto se l'ancora è molto in alto (plafoniera) */
.hz-carta.giu .hz-box { top: 26px; left: 50%; right: auto; transform: translate(-50%, -8px); }
.hz-carta.giu.on .hz-box { transform: translate(-50%, 0); }

/* ─────────────────────────────────────────────
   5. TELEFONO
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Su telefono la foto NON riempie tutto lo schermo: su un viewport stretto e
     alto il ritaglio orizzontale taglierebbe fuori mezzo abitacolo. Le diamo
     una fascia con le PROPORZIONI DELLA FOTO (3:2), così si vede tutta e le
     zone restano tutte in campo. Il testo va sotto, su fondo pieno. */
  #hero.hero-hs {
    display: flex; flex-direction: column; justify-content: flex-start;
    /* Il padding in alto e' l'altezza della BARRA, non un numero: cosi' la
       foto attacca esatta sotto di lei. Era 84 fisso, scritto per una barra
       che nel frattempo e' cambiata, e restavano 19px di fondo scoperto. */
    min-height: auto; padding: var(--barra, 64px) 0 44px; gap: 0;
  }
  #hero.hero-hs .cockpit-wrap {
    position: relative; inset: auto;
    width: 100%; aspect-ratio: 3 / 2; height: auto;
    order: 1;
    flex: 0 0 auto;          /* il flex non deve schiacciare la fascia: le
                                proporzioni servono a tenere in campo le zone */
  }
  #hero.hero-hs .cockpit-wrap::before {
    background: linear-gradient(180deg, rgba(8,9,12,.5) 0%, rgba(8,9,12,.08) 30%,
                                        rgba(8,9,12,.15) 70%, rgba(8,9,12,.92) 100%);
  }
  /* NB sul margine superiore: era negativo (-26px) e tirava il titolo DENTRO
     la fascia della foto, che finiva 12px più in basso del titolo stesso.
     Su telefono le due cose sono impilate e hanno bisogno di respiro. */
  #hero.hero-hs .hero-copy {
    order: 2; position: relative;
    width: calc(100vw - 48px); margin: 26px 0 0 24px;
    text-shadow: none;
  }
  #hero.hero-hs .hero-copy::before { display: none; }   /* fondo già pieno: niente scrim */
  /* tarato perché "Centraline Gruppo VW:" stia su UNA riga anche su 375px */
  #hero.hero-hs .hero-copy h1 { font-size: clamp(24px, 7.2vw, 34px); }

  /* su schermo piccolo le sagome vanno marcate un filo di più */
  .hz-z path { fill: rgba(30,155,255,.13); }
  .hz-carta .hz-box { max-width: min(72vw, 250px); }
  /* il cartellino si apre sempre sotto e centrato: ai lati non c'è spazio */
  .hz-carta .hz-box,
  .hz-carta.flip .hz-box {
    left: 50%; right: auto; top: 22px;
    transform: translate(-50%, -6px);
  }
  .hz-carta.on .hz-box,
  .hz-carta.flip.on .hz-box { transform: translate(-50%, 0); }

  /* in alto a sinistra, sul parabrezza: al centro coprirebbe cruscotto e
     display, in fondo finirebbe addosso al testo che segue la foto */
  .hs-hint {
    left: 12px; right: auto; transform: none;
    top: 10px; bottom: auto; font-size: 10px; padding: 6px 12px;
    white-space: nowrap;
  }
}

/* ─────────────────────────────────────────────
   6. MOVIMENTO RIDOTTO
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hz-tela { display: none; }      /* il JS non la crea nemmeno: doppia cintura */
  .hs-hint::before { animation: none; }
  .hz-carta .hz-box { transition: none; }
  /* senza il riflesso il velo deve bastare da solo a segnalare le zone */
  .hz-z path { fill: rgba(30,155,255,.18); }
}