/* Hero della proposta C: dal disegno al prodotto, solo automatico.
   Per ogni scena: 1) le linee CAD si tracciano da sole, con la quota; 2) il video entra (la materia compare per parti,
   è già nel video) mentre le linee si ritirano; 3) il prodotto si apre e si richiude, con una leggera rotazione;
   4) il prodotto si dissolve, torna la griglia, la scena dopo ricomincia dalle linee.
   Anti-vibrazione: riquadro a pixel interi (hero.js), video mai ingrandito oltre la sua risoluzione,
   nessuna classe o transizione che cambi mentre il video scorre, video su un proprio livello di composizione. */
.hx{margin:0;position:relative}
.hx-st{position:relative;aspect-ratio:4/5;background:#f1f4f7;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;
  box-shadow:0 30px 60px -30px rgba(13,26,43,.18)}
/* griglia da tavola tecnica: c'è mentre si disegna, sparisce quando entra il prodotto */
.hx-st::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;
  transition:opacity 1.2s ease}
.hx-po,.hx-vi,.hx-ln,.hx-ln svg{position:absolute;inset:0;width:100%;height:100%}
.hx-po{pointer-events:none}
.hx-po img{width:100%;height:100%;display:block;object-fit:cover}
.hx-vi{object-fit:cover;opacity:0;pointer-events:none;will-change:transform;transform:translateZ(0);backface-visibility:hidden}
.hx-ln{pointer-events:none;z-index:2}
.hx-ln svg{overflow:visible}
.hx-ln .l,.hx-ln .q{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hx-ln .l2{stroke:var(--azure)}
.hx-ln .l4{stroke:var(--navy)}
.hx-ln .q{stroke-width:2;stroke:var(--blue)}
.hx-ln .qt{font:600 40px/1 'Inter Tight',system-ui,sans-serif;fill:var(--blue);letter-spacing:.01em;paint-order:stroke;stroke:#f1f4f7;stroke-width:8px}

/* didascalia: porta alla sezione Finiture con lo stesso prodotto, serie e finitura */
.hx-cap{margin-top:.7rem;font-size:.9375rem;color:var(--ink-3);line-height:1.45}
/* altezza fissa: due righe riservate per ogni didascalia, così il pulsante del preventivo sotto non si sposta mai */
.hx-cap{height:66px;display:flex;align-items:flex-start;overflow:hidden}   /* 2 righe da 21,75 px + 20,8 di margini interni */
.hx-link{color:inherit;text-decoration:none;display:inline-block;padding:.65rem 0;line-height:1.45;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.hx-link b{color:var(--ink);font-weight:600}
.hx-link::after{content:"→";margin-left:.45em;color:var(--blue);display:inline-block;transition:transform .2s}
.hx-link:hover,.hx-link:focus-visible{color:var(--ink-2);border-bottom-color:var(--line-2)}
.hx-link:hover::after{transform:translateX(3px)}
.hx-mm{color:var(--blue);font-weight:600;font-variant-numeric:tabular-nums;padding:0 .15em;border-radius:3px}
.hx.nuova .hx-link{animation:hx-nuova 1.4s ease}
.hx.nuova .hx-mm{animation:hx-mm 1.8s ease}
@keyframes hx-nuova{0%{opacity:0;transform:translateY(4px)}35%{opacity:1;transform:none}}
@keyframes hx-mm{0%,45%{background:rgba(46,159,219,.18)}100%{background:transparent}}

/* 1. le linee da tracciare (classe hx-js messa nell'head, prima del primo disegno) */
.hx-js .hx .hx-po{opacity:0}
.hx-js .hx .hx-ln .l,.hx-js .hx .hx-ln .q{stroke-dasharray:1;stroke-dashoffset:1}
.hx-js .hx .hx-ln .qt{opacity:0}
.hx.go .hx-ln .l,.hx.go .hx-ln .q{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s cubic-bezier(.65,.05,.35,1)}
.hx.go .hx-ln .l2{transition-delay:.3s}
.hx.go .hx-ln .l4{transition-duration:.6s;transition-delay:.9s}
.hx.go .hx-ln .q{transition-duration:.55s;transition-delay:1.15s}
.hx.go .hx-ln .qt{opacity:1;transition:opacity .45s ease 1.45s}

/* 2. il video entra (i primi fotogrammi sono vuoti: la materia compare per parti), le linee e la griglia si ritirano */
.hx.vivo .hx-vi{opacity:1}
.hx.mat .hx-ln{opacity:0;transition:opacity 1.1s ease}
.hx.mat .hx-st::before{opacity:0}

/* 4. fine scena: il prodotto si dissolve, torna la griglia */
.hx.esce .hx-vi{opacity:0;transition:opacity .7s ease}
.hx.esce .hx-st::before{opacity:1;transition:opacity .7s ease}

@media (prefers-reduced-motion:reduce){
  .hx-js .hx .hx-po{opacity:1}
  .hx-ln,.hx-vi{display:none}
  .hx-st::before{opacity:0}
}
@media (max-width:980px){.hx-cap{font-size:.875rem}}
/* computer: al massimo 600 px di larghezza (a densità 2 = 1200, la risoluzione del video) e mai più alto dello schermo */
@media (min-width:981px){.hx{max-width:min(100%,600px,calc((100svh - 190px) * .8));margin-inline:auto 0}}
/* tablet: una colonna, il riquadro resta dentro lo schermo */
@media (min-width:641px) and (max-width:980px){.hx{max-width:min(100%,600px,calc((100svh - 380px) * .8));margin-inline:auto}}
/* telefono: riquadro un po' più basso; finestra subito sotto il titolo, poi didascalia e pulsante del preventivo */
@media (max-width:640px){.hx-st{aspect-ratio:5/6}}
@media (max-width:760px){
  .hero .hero-d{order:3;margin-top:1.1rem}
  .hero .cta-row{order:4;margin-top:.6rem}
  .hx-cap{margin-top:.35rem}
  .hx-link{padding:.5rem 0}
  .hx-cap{height:58px}   /* 2 righe da 20,3 px + 16 */
}
.hx-js .hx.fermo .hx-po{opacity:1}