/* ==========================================================================
   PONTE NEDRALAB → NEDRA WEB (prototipo) — parte comune ad A e B
   Stato di base: composizione finale ferma (dispositivi + dati Web).
   Il cubo e i dati NedraLab esistono solo per il fotogramma iniziale:
   senza movimento non si mostrano affatto.
   ========================================================================== */

.n-ponte{ position: relative; }
.n-ponte__track{ position: relative; }

/* stesso stage della scena Volume: al fotogramma 0 i due devono coincidere */
.n-ponte__stage{
  width: 100%;
  max-width: var(--n-max);
  margin: 0 auto;
  padding: 0 22px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  align-content: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

.n-ponte__fig{ margin: 0; position: relative; isolation: isolate; }
.n-ponte__fig::before{
  content: "";
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255,255,255,.075), transparent 72%);
  pointer-events: none;
}
.n-ponte__svg{
  display: block;
  width: 100%;
  height: auto;
  max-height: min(64svh, 560px);
  overflow: visible;
}

/* ── copia ferma dell'ultimo fotogramma di Volume (stessi valori) ────── */
.n-ponte__lab-svg,
.n-ponte__lab-data{ display: none; }

.n-ponte__wire polygon,
.n-ponte__wire line,
.n-ponte__wire polyline{
  fill: none;
  stroke: rgba(41,151,255,.6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.n-ponte__slab-t{ fill: #123a63; }
.n-ponte__slab-l{ fill: #0a223d; }
.n-ponte__slab-r{ fill: #0d2c4f; }
.n-ponte__slab-line{
  fill: none;
  stroke: rgba(41,151,255,.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.n-ponte__dim-aux line{ stroke: rgba(245,245,247,.45); stroke-width: .75; }
.n-ponte__dim-main{ stroke: #f5f5f7; stroke-width: .9; }
.n-ponte__dim-val{
  fill: #f5f5f7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.n-ponte__dim-val--dev{ font-size: 11px; }

/* ── dispositivi (stato finale) ──────────────────────────────────────── */
.n-ponte__dev{
  fill: #08131f;
  stroke: rgba(41,151,255,.6);
  stroke-width: .75;
}
.n-ponte__bar{
  stroke: rgba(41,151,255,.6);
  stroke-width: .75;
}
/* le linee che si disegnano: pathLength="1" nel markup */
.n-ponte__draw{ stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ── colonna dati: NedraLab e Web nella stessa cella, nessun salto ───── */
.n-ponte__data{ display: grid; }
.n-ponte__data > *{ grid-area: 1 / 1; align-self: start; }
.n-ponte__web{ display: grid; gap: .6rem; }

.n-ponte__label{ font-size: .84rem; font-weight: 500; color: var(--n-text-2); letter-spacing: -.005em; }
.n-ponte__figure{
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.02;
  font-variant-numeric: tabular-nums;
}
.n-ponte__figure .x{ font-size: .52em; font-weight: 400; color: var(--n-text-3); margin: 0 .12em; vertical-align: .12em; }
.n-ponte__figure .u{ font-size: .5em; color: var(--n-text-2); margin-left: .12em; }
.n-ponte__unit{ font-size: .9rem; color: var(--n-text-2); }
.n-ponte__note{ margin: .2rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--n-text-2); max-width: 34ch; }
.n-ponte__specs{
  margin: 1.4rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--n-line-soft);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.4rem;
}
.n-ponte__specs dt{ font-size: .78rem; color: var(--n-text-2); margin: 0 0 .2rem; }
.n-ponte__specs dd{ margin: 0; font-size: .95rem; line-height: 1.35; color: var(--n-text); }

@media (max-width: 860px){
  .n-ponte__stage{ grid-template-columns: 1fr; gap: 1rem; }
  .n-ponte__svg{ max-height: 40svh; margin: 0 auto; }
  .n-ponte__figure{ font-size: clamp(2rem, 9vw, 2.6rem); }
  .n-ponte__note{ font-size: .84rem; }
  .n-ponte__specs{ margin-top: .8rem; padding-top: .8rem; gap: .7rem 1rem; }
  .n-ponte__specs dd{ font-size: .86rem; }
}

/* ==========================================================================
   MOVIMENTO (comune). Gli intervalli della colonna dati li fissa la
   versione: --vl0/--vl1 (NedraLab si spegne), --vw0/--vw1 (Web si accende).
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* AGGANCIO A VOLUME. La sezione del ponte risale di uno stage intero:
       quando lo stage di Volume finisce la sua corsa, quello del ponte è
       esattamente nella stessa posizione, si blocca e lo copre (fondo
       opaco). Volume scorre via sotto senza che si veda. */
    :root:not([data-motion="off"]) .n-chain > .n-vol{ padding-bottom: 0; }
    :root:not([data-motion="off"]) .n-chain > .n-ponte{
      margin-top: calc(var(--n-nav-h) - 100svh);
    }

    :root:not([data-motion="off"]) .n-ponte__track{
      height: 240svh;
      view-timeline: --n-ponte block;
      /* la timeline parte quando lo stage si blocca sotto la navbar,
         non quando la traccia tocca il bordo della finestra */
      view-timeline-inset: var(--n-nav-h) 0;
    }

    :root:not([data-motion="off"]) .n-ponte__stage{
      position: sticky;
      top: var(--n-nav-h);
      height: calc(100svh - var(--n-nav-h));
      background: var(--n-bg);
    }

    :root:not([data-motion="off"]) .n-ponte__lab-svg{ display: inline; }
    /* stessa griglia e stesso gap di .n-vol__data: identità al fotogramma 0 */
    :root:not([data-motion="off"]) .n-ponte__lab-data{ display: grid; gap: .6rem; }

    /* tutto ciò che si muove legge la stessa timeline */
    :root:not([data-motion="off"]) .n-ponte__stage,
    :root:not([data-motion="off"]) .n-ponte__a{
      animation-timeline: --n-ponte;
      animation-fill-mode: both;
      animation-duration: auto;
    }

    /* prima di bloccarsi lo stage del ponte è invisibile; poi copre Volume */
    :root:not([data-motion="off"]) .n-ponte__stage{
      animation-name: n-ponte-show;
      animation-timing-function: linear;
      animation-range: contain 0% contain .5%;
    }

    /* colonna dati */
    :root:not([data-motion="off"]) .n-ponte__lab-data{
      animation-name: n-ponte-out;
      animation-timing-function: linear;
      animation-range: contain var(--vl0) contain var(--vl1);
    }
    :root:not([data-motion="off"]) .n-ponte__web .n-ponte__label{
      animation-name: n-ponte-in;
      animation-timing-function: linear;
      animation-range: contain var(--vw0) contain calc(var(--vw0) + 2%);
    }
    :root:not([data-motion="off"]) .n-ponte__web .n-ponte__figure{
      animation-name: n-ponte-rise;
      animation-timing-function: steps(6, end);
      animation-range: contain calc(var(--vw0) + 1%) contain calc(var(--vw0) + 7%);
    }
    :root:not([data-motion="off"]) .n-ponte__web .n-ponte__unit{
      animation-name: n-ponte-in;
      animation-timing-function: linear;
      animation-range: contain calc(var(--vw0) + 6%) contain calc(var(--vw0) + 8%);
    }
    :root:not([data-motion="off"]) .n-ponte__web .n-ponte__note{
      animation-name: n-ponte-in;
      animation-timing-function: linear;
      animation-range: contain calc(var(--vw1) - 2%) contain var(--vw1);
    }

    @media (max-width: 860px){
      :root:not([data-motion="off"]) .n-ponte__track{ height: 200svh; }
    }
  }
}

@keyframes n-ponte-show{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes n-ponte-in  { from{ opacity: 0; } to{ opacity: 1; } }
@keyframes n-ponte-out { from{ opacity: 1; } to{ opacity: 0; } }
@keyframes n-ponte-draw{ from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
@keyframes n-ponte-fill{ from{ fill-opacity: 0; } to{ fill-opacity: 1; } }
@keyframes n-ponte-rise{ from{ clip-path: inset(100% 0 0 0); } to{ clip-path: inset(0 0 0 0); } }