/* ============================================================
   METALFLEX — VIAGGIO DEL PEZZO (ciclo completo)
   Il ciclo a schermo intero: scorrendo, le stazioni avanzano.
   Le foto si dissolvono l'una nell'altra restando nella stessa
   inquadratura, così il cambio si legge come TRASFORMAZIONE e non
   come cambio di immagine. Senza JS resta una lista leggibile.
   ============================================================ */

.voyage{
  --voy-step:64vh;              /* quanto si scorre per ogni stazione */
  position:relative; background:#05070d; color:#fff;
}

/* intestazione sopra il percorso, sul fondo chiaro della pagina */
.voyage__intro{ background:var(--bg); color:var(--text); }
.voyage__intro .wrap{ padding-block:clamp(56px,7vw,104px); }

/* ---------- binario: la sua altezza È la durata dello scroll ---------- */
.voyage__track{ position:relative; height:calc(var(--voy-step) * var(--voy-n, 8) + 100svh); }

.voyage__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:flex-end; isolation:isolate;
}

/* ---------- le foto, impilate e in dissolvenza ---------- */
.voyage__media{ position:absolute; inset:0; z-index:0; background:#05070d; }
.voyage__shot{
  position:absolute; inset:0; margin:0; opacity:0;
  backface-visibility:hidden;
}
/* Solo le due foto in dissolvenza chiedono un livello alla scheda video.
   Se lo chiedono tutte e nove, sono nove texture a schermo intero da
   comporre a ogni fotogramma: costa e non serve, otto sono invisibili. */
.voyage__shot:not(.is-spento){ will-change:opacity, transform; }
/* fuori scena: nascosta per davvero, cosi' non viene nemmeno composta
   (opacity:0 da sola lascia comunque il livello nella pila) */
.voyage__shot.is-spento, .voyage__card.is-spento{ visibility:hidden; }
.voyage__shot picture{ display:block; width:100%; height:100%; }
.voyage__shot img,
.voyage__shot video{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }

/* Velo MIRATO, non generale. Prima si scuriva tutta l'immagine (.55 in cima,
   .72 in fondo, piu' una fascia orizzontale su meta' schermo) e le foto
   risultavano spente. Ora il centro resta chiaro e si scurisce SOLO dove ci
   sono le scritte: una pozza in basso a sinistra sotto la scheda e una
   striscia stretta a destra dietro al binario delle fasi. */
.voyage__grade{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,8,14,.30), rgba(5,8,14,.04) 44%, rgba(5,8,14,.34)); }
.voyage__scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(5,8,14,.90) 0%, rgba(5,8,14,.78) 30%, rgba(5,8,14,.30) 52%, rgba(5,8,14,0) 64%),
    linear-gradient(0deg, rgba(5,8,14,.86) 0%, rgba(5,8,14,.40) 26%, rgba(5,8,14,0) 46%),
    linear-gradient(270deg, rgba(5,8,14,.90) 0%, rgba(5,8,14,.80) 10%, rgba(5,8,14,.58) 20%, rgba(5,8,14,.20) 28%, rgba(5,8,14,0) 36%);
}
/* TELEFONO: il testo sta tutto in basso, su una colonna larga quanto lo schermo.
   Il velo precedente (una sfumatura sola, .45 a meta') lo lasciava a 4,07 e
   l'occhiello blu a 3,37, sotto la soglia di 4,5: misurato sulle nove stazioni
   e sui fotogrammi dei video. Questo tiene scura solo la fascia bassa dei testi
   e lascia libero il terzo alto, dove di solito sta il pezzo. */
/* La soglia e' la FORMA della finestra, non la larghezza: appena la finestra
   e' piu' quadrata di 13/10 la colonna dei testi si allarga fino a meta'
   schermo e le sfumature laterali non la coprono piu' (misurato: 2,69 su una
   finestra 958x914). Stessa soglia con cui si sceglie la foto. */
@media (max-aspect-ratio: 13/10){
  .voyage__scrim{
    background:linear-gradient(0deg,
      rgba(5,8,14,.96) 0%,
      rgba(5,8,14,.90) 26%,
      rgba(5,8,14,.72) 40%,
      rgba(5,8,14,.30) 56%,
      rgba(5,8,14,0) 72%);
  }
}
/* NIENTE mix-blend-mode: fondere uno strato a schermo intero con quello che
   ha sotto obbliga la scheda video a rileggere il fondo a ogni fotogramma,
   proprio mentre le foto stanno sfumando. A .04 senza fusione la grana si
   vede uguale e non costa niente. */
.voyage__grain{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- riquadro con la ripresa dal vero ----------
   Il video della saldatura e' girato col telefono in verticale ed e' piccolo
   (464x832). A schermo intero sarebbe sgranato; qui sta dentro un riquadro
   della sua misura, quindi si vede nitido. L'altezza comanda, la larghezza
   viene dal formato: cosi' non esce mai dallo schermo in basso. */
.voyage__clip{
  position:absolute; z-index:4; opacity:0; pointer-events:none;
  top:clamp(92px,13vh,140px); right:clamp(128px,15vw,260px);
  height:clamp(200px,44vh,470px); width:auto;
  /* il formato arriva dal filmato, scritto in linea sul riquadro */
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
}
/* filmato orizzontale: comanda la larghezza, se no verrebbe un riquadro
   largo il doppio dello schermo (altezza x 16/9) */
.voyage__clip--oriz{ width:clamp(200px,24vw,380px); height:auto; }
.voyage__clip video{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:980px){   /* sparisce il binario: il riquadro va verso il bordo */
  .voyage__clip{ right:clamp(16px,4vw,40px); height:clamp(180px,34vh,320px); }
  /* va ripetuto anche qui: la regola qui sopra rimette un'altezza fissa e,
     venendo dopo, vincerebbe sul riquadro orizzontale schiacciandolo */
  .voyage__clip--oriz{ height:auto; width:clamp(190px,32vw,330px); }
}
/* TELEFONO: niente riquadro. Lo schermo e' gia' verticale come i filmati,
   quindi il video diventa la schermata intera e prende il posto della foto.
   Va sotto ai veli (z-index 0, subito sopra la foto) o il testo non si legge. */
@media (max-width:860px){
  .voyage__clip, .voyage__clip--oriz{
    inset:0; top:0; right:0; width:100%; height:100%;
    aspect-ratio:auto !important;        /* il formato in linea vale solo da largo */
    border:0; border-radius:0; box-shadow:none; z-index:0;
  }
  /* il taglio laser e' l'unico orizzontale: il punto d'interesse sta a destra */
  .voyage__clip--oriz video{ object-position:58% 50%; }
}
.voyage:not(.is-ready) .voyage__clip{ display:none; }

/* ---------- interfaccia ---------- */
.voyage__ui{ position:relative; z-index:4; width:100%; padding-bottom:clamp(54px,7vh,92px); }
.voyage__inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; }

/* pannello dei testi: le schede sono impilate, il JS ne mostra una */
.voyage__panel{ position:relative; width:min(520px,100%); min-height:320px; }
.voyage__card{
  position:absolute; inset:auto 0 0 0; opacity:0;
}
.voyage__card:not(.is-spento){ will-change:opacity, transform; }
.voyage__card .loc{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent); display:block;
}
.voyage__no{
  font-family:var(--f-display); font-weight:800; line-height:1;
  font-size:clamp(2.6rem,5vw,4.2rem); color:#fff; display:block; margin-bottom:6px;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}
.voyage__no i{ font-style:normal; color:var(--accent); }
.voyage__card h3{
  color:#fff; margin-top:12px; letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.1;
}
.voyage__card p{ color:#C9D3E0; margin-top:12px; font-size:15.5px; max-width:46ch; }
.voyage__card .cstep__spec{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
/* NB: .cstep__spec span ha sfondo BIANCO nel foglio d'origine (pastiglia su
   fondo chiaro). Qui siamo sopra una foto scura: va azzerato, se no il <b>
   bianco finisce bianco-su-bianco e sparisce. */
.voyage__card .cstep__spec span{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  /* niente backdrop-filter: sfocare il fondo dietro ogni pastiglia mentre il
     fondo e' una foto che sfuma e' il singolo effetto piu' caro della pagina,
     e le pastiglie sono 3 per scheda x 9 schede. Il fondo bianco al 10% da'
     lo stesso stacco. */
  color:#D5DEEA; background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24); border-radius:999px; padding:6px 11px;
}
.voyage__card .cstep__spec b{ color:#fff; font-weight:600; }

/* binario laterale delle stazioni */
.voyage__rail{ display:flex; flex-direction:column; gap:2px; flex:0 0 auto; }
.voyage__dot{
  display:flex; align-items:center; gap:10px; background:none; border:0; cursor:pointer;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.82); padding:7px 0; transition:color .3s ease;
}
.voyage__dot::before{
  content:""; width:26px; height:1px; background:currentColor; transition:width .35s var(--ease-out,ease), background .3s ease;
}
.voyage__dot.is-on{ color:#fff; }
.voyage__dot.is-on::before{ width:52px; background:var(--accent); }
.voyage__dot:hover{ color:#fff; }
@media (max-width:980px){ .voyage__rail{ display:none; } }

/* contatore + barra di avanzamento */
.voyage__meter{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  display:flex; align-items:center; gap:14px; padding:0 var(--gut) 18px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.2em; color:rgba(255,255,255,.62);
}
.voyage__bar{ flex:1; height:2px; background:rgba(255,255,255,.16); overflow:hidden; }
.voyage__bar span{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:0 50%; }
.voyage__count b{ color:#fff; font-weight:600; }

/* ---------- senza JS: niente sticky, tutto leggibile in colonna ---------- */
.voyage:not(.is-ready) .voyage__track{ height:auto; }
.voyage:not(.is-ready) .voyage__stage{ position:static; height:auto; display:block; }
.voyage:not(.is-ready) .voyage__media{ position:relative; height:52vh; }
.voyage:not(.is-ready) .voyage__shot{ opacity:0; }
.voyage:not(.is-ready) .voyage__shot:first-child{ opacity:1; }
.voyage:not(.is-ready) .voyage__ui{ padding:clamp(32px,5vw,56px) 0; }
.voyage:not(.is-ready) .voyage__panel{ min-height:0; }
.voyage:not(.is-ready) .voyage__card{ position:static; opacity:1; margin-bottom:38px; }
.voyage:not(.is-ready) .voyage__meter{ display:none; }

@media (prefers-reduced-motion:reduce){
  .voyage__shot{ transform:none !important; }
}

/* ============================================================
   IL PEZZO IN 3D come fondale del viaggio (02/10/2026)
   La tela sta sopra le foto; quando il 3D e' pronto la sezione prende
   la classe is-3d e le foto spariscono (restano solo come riserva).
   ============================================================ */
.voyage__3d{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; opacity:0; transition:opacity .9s ease; }
.voyage.is-3d .voyage__3d{ opacity:1; }
.voyage.is-3d .voyage__shot{ display:none; }
.voyage.is-3d .voyage__media{
  background:radial-gradient(120% 90% at 64% 40%, #1b2433 0%, #0c1119 52%, #05070d 100%);
}

/* con il 3D il fondale e' gia' scuro: i veli servono solo dietro i testi,
   non sopra al pezzo (che sta a destra su schermo largo, in alto sul telefono) */
.voyage.is-3d .voyage__grade{ background:none; }
.voyage.is-3d .voyage__scrim{
  background:linear-gradient(90deg, rgba(5,8,14,.78) 0%, rgba(5,8,14,.5) 30%, rgba(5,8,14,0) 50%);
}
@media (max-aspect-ratio: 13/10){
  .voyage.is-3d .voyage__scrim{
    background:linear-gradient(0deg, rgba(5,8,14,.94) 0%, rgba(5,8,14,.78) 26%, rgba(5,8,14,.3) 44%, rgba(5,8,14,0) 58%);
  }
}

/* ---------- Dal vero: le foto e i filmati del pezzo, in miniatura ---------- */
.dalvero{ background:var(--bg); padding-block:clamp(64px,8vw,112px); }
.dalvero .section-head{ max-width:62ch; }
.dalvero__griglia{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(138px, 1fr));
  gap:12px; margin-top:clamp(24px,3vw,36px);
}
.dalvero__tessera{
  position:relative; margin:0; aspect-ratio:3/4; border-radius:12px; overflow:hidden;
  background:#0b0f17;
}
.dalvero__tessera img,
.dalvero__tessera video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.dalvero__tessera video{ opacity:0; transition:opacity .45s ease; }
.dalvero__tessera video.gira{ opacity:1; }
.dalvero__tessera video.oriz{ object-position:60% 50%; }
.dalvero__tessera figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:30px 12px 11px;
  background:linear-gradient(180deg, rgba(5,8,14,0), rgba(5,8,14,.86));
  color:#fff; font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}
.dalvero__tessera figcaption b{ color:var(--accent-on-dark,#7FB3FF); margin-right:6px; font-weight:600; }
/* segno discreto che la miniatura e' un filmato */
.dalvero__tessera.ha-video::after{
  content:""; position:absolute; top:10px; right:10px; width:8px; height:8px; border-radius:50%;
  background:#ff5a4f; box-shadow:0 0 0 3px rgba(255,90,79,.25);
}
@media (max-width:520px){ .dalvero__griglia{ grid-template-columns:repeat(2, 1fr); gap:10px; } }