/* ==========================================================================
   SCENA VOLUME 250³
   Lo stato di base è la composizione finale, ferma: la vedono chi ha
   prefers-reduced-motion, i browser senza animazioni legate allo scroll
   e ?motion=off. Tutto il movimento sta nel blocco @media + @supports in
   fondo, così non esiste un caso in cui il contenuto resta nascosto.
   ========================================================================== */

.n-vol__track{ position: relative; }

.n-vol__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);
}

/* ── disegno ─────────────────────────────────────────────────────────── */
.n-vol__fig{ margin: 0; position: relative; isolation: isolate; }

/* la lampada: un alone già disegnato, si accende solo con l'opacità */
.n-vol__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-vol__svg{
  display: block;
  width: 100%;
  height: auto;
  max-height: min(64svh, 560px);
  overflow: visible;
}

/* spigoli: linea sottile costante a qualunque scala */
.n-vol__wire polygon,
.n-vol__wire line,
.n-vol__wire polyline{
  fill: none;
  stroke: rgba(41,151,255,.6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.n-vol__hidden line{
  stroke: rgba(41,151,255,.28);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
}

/* strati: tinte opache, così sovrapponendosi non sommano trasparenze.
   La luce arriva dall'alto: sopra più chiaro, lato sinistro più scuro. */
.n-vol__slab-t{ fill: #123a63; }
.n-vol__slab-l{ fill: #0a223d; }
.n-vol__slab-r{ fill: #0d2c4f; }
.n-vol__slab-line{
  fill: none;
  stroke: rgba(41,151,255,.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* piano di stampa: spento nello stato finale */
.n-vol__scan{
  fill: rgba(41,151,255,.10);
  stroke: #2997ff;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}

/* quote. Niente vector-effect sulla linea principale: con pathLength
   alcuni browser ignorano il tratteggio sotto non-scaling-stroke. */
.n-vol__dim-aux line{
  stroke: rgba(245,245,247,.45);
  stroke-width: .75;
}
.n-vol__dim-main{
  stroke: #f5f5f7;
  stroke-width: .9;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.n-vol__dim-val{
  fill: #f5f5f7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* ── dati ────────────────────────────────────────────────────────────── */
.n-vol__data{ display: grid; gap: .6rem; }

.n-vol__label{
  font-size: .84rem;
  font-weight: 500;
  color: var(--n-text-2);
  letter-spacing: -.005em;
}

/* stessa regola dei valori tecnici (.n-spec__value): numero pieno,
   moltiplicatori e unità più piccoli e grigi */
.n-vol__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-vol__figure .x{
  font-size: .52em;
  font-weight: 400;
  color: var(--n-text-3);
  margin: 0 .12em;
  vertical-align: .12em;
}
.n-vol__figure .u{ font-size: .5em; color: var(--n-text-2); margin-left: .12em; }

.n-vol__note{
  margin: .2rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--n-text-2);
  max-width: 34ch;
}

.n-vol__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-vol__spec dt{ font-size: .78rem; color: var(--n-text-2); margin: 0 0 .2rem; }
.n-vol__spec dd{ margin: 0; font-size: .95rem; line-height: 1.35; color: var(--n-text); }

/* ── mobile: colonna unica, cubo sopra ───────────────────────────────── */
@media (max-width: 860px){
  .n-vol__stage{ grid-template-columns: 1fr; gap: 1rem; }
  .n-vol__svg{ max-height: 40svh; margin: 0 auto; }
  .n-vol__figure{ font-size: clamp(2rem, 9vw, 2.6rem); }
  .n-vol__note{ font-size: .84rem; }
  .n-vol__specs{ margin-top: .8rem; padding-top: .8rem; gap: .7rem 1rem; }
  .n-vol__spec dd{ font-size: .86rem; }
}

/* ==========================================================================
   MOVIMENTO
   Attivo solo se il visitatore non chiede movimento ridotto E il browser
   supporta le animazioni legate allo scroll. Ogni animazione usa longhand
   (animation-name, -range…) perché lo shorthand `animation` azzererebbe
   animation-timeline.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    :root:not([data-motion="off"]) .n-vol__track{
      height: 220svh;
      view-timeline: --n-vol block;
      /* intervalli della scena, in % del tratto bloccato */
      --vx0: 6%;  --vx1: 16%;
      --vy0: 16%; --vy1: 26%;
      --vz0: 26%; --vz1: 36%;
      --vf0: 38%; --vf1: 70%;
      --vg0: 72%; --vg1: 80%;
      --vs0: 80%; --vs1: 98%;
    }

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

    /* tutto ciò che si muove legge la stessa timeline */
    :root:not([data-motion="off"]) .n-vol__fig::before,
    :root:not([data-motion="off"]) .n-vol__dim-aux,
    :root:not([data-motion="off"]) .n-vol__dim-main,
    :root:not([data-motion="off"]) .n-vol__dim-val,
    :root:not([data-motion="off"]) .n-vol__slab,
    :root:not([data-motion="off"]) .n-vol__scan,
    :root:not([data-motion="off"]) .n-vol__label,
    :root:not([data-motion="off"]) .n-vol__figure,
    :root:not([data-motion="off"]) .n-vol__note,
    :root:not([data-motion="off"]) .n-vol__spec{
      animation-timeline: --n-vol;
      animation-fill-mode: both;
      animation-duration: auto;
    }

    /* la lampada si accende mentre si misura */
    :root:not([data-motion="off"]) .n-vol__fig::before{
      animation-name: n-vol-lamp;
      animation-timing-function: linear;
      animation-range: contain 0% contain var(--vf0);
    }

    /* quote: linee di riferimento subito, linea che si traccia, valore alla fine */
    :root:not([data-motion="off"]) .n-vol__dim-main{
      animation-name: n-vol-draw;
      animation-timing-function: var(--n-ease-out-strong);
    }
    :root:not([data-motion="off"]) .n-vol__dim-aux,
    :root:not([data-motion="off"]) .n-vol__dim-val{
      animation-name: n-vol-in;
      animation-timing-function: linear;
    }
    :root:not([data-motion="off"]) .n-vol__dim--x .n-vol__dim-main{ animation-range: contain var(--vx0) contain var(--vx1); }
    :root:not([data-motion="off"]) .n-vol__dim--x .n-vol__dim-aux { animation-range: contain var(--vx0) contain calc(var(--vx0) + 2%); }
    :root:not([data-motion="off"]) .n-vol__dim--x .n-vol__dim-val { animation-range: contain calc(var(--vx1) - 2%) contain var(--vx1); }
    :root:not([data-motion="off"]) .n-vol__dim--y .n-vol__dim-main{ animation-range: contain var(--vy0) contain var(--vy1); }
    :root:not([data-motion="off"]) .n-vol__dim--y .n-vol__dim-aux { animation-range: contain var(--vy0) contain calc(var(--vy0) + 2%); }
    :root:not([data-motion="off"]) .n-vol__dim--y .n-vol__dim-val { animation-range: contain calc(var(--vy1) - 2%) contain var(--vy1); }
    :root:not([data-motion="off"]) .n-vol__dim--z .n-vol__dim-main{ animation-range: contain var(--vz0) contain var(--vz1); }
    :root:not([data-motion="off"]) .n-vol__dim--z .n-vol__dim-aux { animation-range: contain var(--vz0) contain calc(var(--vz0) + 2%); }
    :root:not([data-motion="off"]) .n-vol__dim--z .n-vol__dim-val { animation-range: contain calc(var(--vz1) - 2%) contain var(--vz1); }

    /* strati: ognuno occupa 1/12 dell'intervallo di riempimento */
    :root:not([data-motion="off"]) .n-vol__slab{
      animation-name: n-vol-in;
      animation-timing-function: linear;
      animation-range:
        contain calc(var(--vf0) + (var(--vf1) - var(--vf0)) * var(--k) / 12)
        contain calc(var(--vf0) + (var(--vf1) - var(--vf0)) * (var(--k) + 1) / 12);
    }

    /* piano di stampa: a scatti, sempre sulla cima dello strato in corso;
       si accende all'inizio e si spegne dopo l'ultimo strato */
    :root:not([data-motion="off"]) .n-vol__scan{
      animation-name: n-vol-scan, n-vol-scan-o;
      animation-timing-function: steps(12, jump-none), linear;
      animation-range:
        contain var(--vf0) contain var(--vf1),
        contain var(--vf0) contain calc(var(--vf1) + 3%);
    }

    /* il dato: etichetta, poi il numero costruito a bande, poi la nota */
    :root:not([data-motion="off"]) .n-vol__label{
      animation-name: n-vol-in;
      animation-timing-function: linear;
      animation-range: contain var(--vg0) contain calc(var(--vg0) + 2%);
    }
    :root:not([data-motion="off"]) .n-vol__figure{
      animation-name: n-vol-rise;
      animation-timing-function: steps(6, end);
      animation-range: contain var(--vg0) contain var(--vg1);
    }
    :root:not([data-motion="off"]) .n-vol__note{
      animation-name: n-vol-in;
      animation-timing-function: linear;
      animation-range: contain calc(var(--vg1) - 2%) contain calc(var(--vg1) + 1%);
    }

    /* specifiche: una alla volta, per tono */
    :root:not([data-motion="off"]) .n-vol__spec{
      animation-name: n-vol-lit;
      animation-timing-function: linear;
      animation-range:
        contain calc(var(--vs0) + (var(--vs1) - var(--vs0)) * var(--i) / 4)
        contain calc(var(--vs0) + (var(--vs1) - var(--vs0)) * (var(--i) + 1) / 4);
    }

    /* mobile: traccia più corta, stessa storia compressa */
    @media (max-width: 860px){
      :root:not([data-motion="off"]) .n-vol__track{
        height: 180svh;
        --vx0: 4%;  --vx1: 13%;
        --vy0: 13%; --vy1: 22%;
        --vz0: 22%; --vz1: 31%;
        --vf0: 33%; --vf1: 68%;
        --vg0: 70%; --vg1: 78%;
        --vs0: 78%; --vs1: 96%;
      }
    }
  }
}

@keyframes n-vol-lamp  { from{ opacity: .35; } to{ opacity: 1; } }
@keyframes n-vol-in    { from{ opacity: 0; }   to{ opacity: 1; } }
@keyframes n-vol-lit   { from{ opacity: .28; } to{ opacity: 1; } }
@keyframes n-vol-draw  { from{ stroke-dashoffset: 1; } to{ stroke-dashoffset: 0; } }
@keyframes n-vol-scan  { from{ transform: translateY(0); } to{ transform: translateY(-110px); } }
@keyframes n-vol-scan-o{ 0%{ opacity: 0; } 6%{ opacity: 1; } 90%{ opacity: 1; } 100%{ opacity: 0; } }
@keyframes n-vol-rise  { from{ clip-path: inset(100% 0 0 0); } to{ clip-path: inset(0 0 0 0); } }