/* ==========================================================================
   PONTE B — metamorfosi geometrica.
   Ogni faccia è un quadrato unitario; la forma la dà matrix(a,b,c,d,e,f),
   che manda il punto (u,v) del quadrato in (a·u + c·v + e, b·u + d·v + f).
   I sei coefficienti sono custom property registrate come <number>: così
   si interpolano uno per uno, in modo lineare, e due facce che condividono
   un vertice all'inizio e alla fine lo condividono in ogni istante.
   Animare `transform: matrix()` direttamente non basterebbe: il browser
   scompone la matrice in rotazione/inclinazione/scala e le facce si
   staccherebbero a metà strada.
   ========================================================================== */

@property --m-a{ syntax: '<number>'; inherits: false; initial-value: 1; }
@property --m-b{ syntax: '<number>'; inherits: false; initial-value: 0; }
@property --m-c{ syntax: '<number>'; inherits: false; initial-value: 0; }
@property --m-d{ syntax: '<number>'; inherits: false; initial-value: 1; }
@property --m-e{ syntax: '<number>'; inherits: false; initial-value: 0; }
@property --m-f{ syntax: '<number>'; inherits: false; initial-value: 0; }

.n-pb__face{
  transform-box: view-box;
  transform-origin: 0 0;
  transform: matrix(var(--m-a), var(--m-b), var(--m-c), var(--m-d), var(--m-e), var(--m-f));
}

/* stato finale (base): i tre dispositivi */
.n-pb__face--l{ --m-a: 168;  --m-b: 0; --m-c: 0; --m-d: 105;   --m-e: 43;    --m-f: 185;   --c0: #0a223d; }
.n-pb__face--r{ --m-a: 89.6; --m-b: 0; --m-c: 0; --m-d: 119.5; --m-e: 227;   --m-f: 170.5; --c0: #0d2c4f; }
.n-pb__face--t{ --m-a: 43.7; --m-b: 0; --m-c: 0; --m-d: 94.7;  --m-e: 332.6; --m-f: 195.3; --c0: #123a63; }

.n-pb__skin{
  fill: #08131f;
  stroke: rgba(41,151,255,.6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.n-pb__layers line{
  stroke: rgba(41,151,255,.28);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.n-pb__layers{ opacity: 0; }

.n-pb__screen{ opacity: 0; }
.n-pb__screen rect,
.n-pb__screen line{
  fill: none;
  stroke: rgba(41,151,255,.6);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    :root:not([data-motion="off"]) .n-ponte--b .n-ponte__track{
      --vl0: 10%; --vl1: 22%;
      --vw0: 84%; --vw1: 94%;
    }

    /* quote del cubo e linee di strato si spengono */
    :root:not([data-motion="off"]) .n-pb__quotes{
      animation-name: n-ponte-out; animation-timing-function: linear;
      animation-range: contain 6% contain 16%;
    }
    :root:not([data-motion="off"]) .n-pb__layers{
      animation-name: n-ponte-out; animation-timing-function: linear;
      animation-range: contain 14% contain 30%;
    }

    /* la metamorfosi: 16% → 44% prospetto, pausa fino al 52%, → 80% dispositivi */
    :root:not([data-motion="off"]) .n-pb__face{
      animation-timing-function: linear;
      animation-range: contain 16% contain 80%;
    }
    :root:not([data-motion="off"]) .n-pb__face--t{ animation-name: n-pb-t; }
    :root:not([data-motion="off"]) .n-pb__face--l{ animation-name: n-pb-l; }
    :root:not([data-motion="off"]) .n-pb__face--r{ animation-name: n-pb-r; }

    /* tinta del pieno → fondo schermo; spigoli spenti durante la pausa */
    :root:not([data-motion="off"]) .n-pb__skin{
      animation-name: n-pb-fill, n-pb-seam;
      animation-timing-function: linear, linear;
      animation-range: contain 16% contain 44%, contain 36% contain 60%;
    }

    /* lo schermo unico: 40–44% compare, 52–56% si spegne */
    :root:not([data-motion="off"]) .n-pb__screen{
      animation-name: n-pb-screen; animation-timing-function: linear;
      animation-range: contain 40% contain 56%;
    }

    /* quote dei dispositivi */
    :root:not([data-motion="off"]) .n-pb__q-desk { animation-name: n-ponte-in;   animation-timing-function: linear; animation-range: contain 72% contain 74%; }
    :root:not([data-motion="off"]) .n-pb__ql-desk{ animation-name: n-ponte-draw; animation-timing-function: var(--n-ease-out-strong); animation-range: contain 72% contain 76%; }
    :root:not([data-motion="off"]) .n-pb__l-desk { animation-name: n-ponte-in;   animation-timing-function: linear; animation-range: contain 75% contain 77%; }
    :root:not([data-motion="off"]) .n-pb__q-tab  { animation-name: n-ponte-in;   animation-timing-function: linear; animation-range: contain 76% contain 78%; }
    :root:not([data-motion="off"]) .n-pb__ql-tab { animation-name: n-ponte-draw; animation-timing-function: var(--n-ease-out-strong); animation-range: contain 76% contain 80%; }
    :root:not([data-motion="off"]) .n-pb__l-tab  { animation-name: n-ponte-in;   animation-timing-function: linear; animation-range: contain 79% contain 81%; }
    :root:not([data-motion="off"]) .n-pb__q-pho  { animation-name: n-ponte-in;   animation-timing-function: linear; animation-range: contain 80% contain 82%; }
    :root:not([data-motion="off"]) .n-pb__ql-pho { animation-name: n-ponte-draw; animation-timing-function: var(--n-ease-out-strong); animation-range: contain 80% contain 84%; }
    :root:not([data-motion="off"]) .n-pb__l-pho  { animation-name: n-ponte-in;   animation-timing-function: linear; animation-range: contain 83% contain 86%; }
    :root:not([data-motion="off"]) .n-pb__bar    { animation-name: n-ponte-draw; animation-timing-function: var(--n-ease-out-strong); animation-range: contain 80% contain 84%; }
  }
}

/* Coefficienti per faccia. Intervallo 16% → 80% della traccia:
   0% = isometria (cubo di Volume), 43.75% = 44% traccia (schermo),
   56.25% = 52% traccia (fine pausa), 100% = dispositivi.
   Curva --n-ease-in-out-move scritta per esteso: var() nelle keyframe
   non è affidabile in tutti i browser. */
@keyframes n-pb-l{
  0%{ --m-a: 104; --m-b: 60; --m-c: 0; --m-d: 120; --m-e: 96; --m-f: 140;
      animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  43.75%, 56.25%{ --m-a: 120; --m-b: 0; --m-c: 0; --m-d: 150; --m-e: 80; --m-f: 110;
      animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100%{ --m-a: 168; --m-b: 0; --m-c: 0; --m-d: 105; --m-e: 43; --m-f: 185; }
}
@keyframes n-pb-r{
  0%{ --m-a: 104; --m-b: -60; --m-c: 0; --m-d: 120; --m-e: 200; --m-f: 200;
      animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  43.75%, 56.25%{ --m-a: 120; --m-b: 0; --m-c: 0; --m-d: 150; --m-e: 200; --m-f: 110;
      animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100%{ --m-a: 89.6; --m-b: 0; --m-c: 0; --m-d: 119.5; --m-e: 227; --m-f: 170.5; }
}
/* la faccia superiore si schiaccia sullo spigolo alto (altezza zero),
   poi si apre nello smartphone */
@keyframes n-pb-t{
  0%{ --m-a: 104; --m-b: -60; --m-c: 104; --m-d: 60; --m-e: 96; --m-f: 140;
      animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  43.75%, 56.25%{ --m-a: 120; --m-b: 0; --m-c: 120; --m-d: 0; --m-e: 80; --m-f: 110;
      animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1); }
  100%{ --m-a: 43.7; --m-b: 0; --m-c: 0; --m-d: 94.7; --m-e: 332.6; --m-f: 195.3; }
}
@keyframes n-pb-fill  { from{ fill: var(--c0); } to{ fill: #08131f; } }
@keyframes n-pb-seam  { 0%{ stroke-opacity: 1; } 33.3%{ stroke-opacity: 0; } 66.7%{ stroke-opacity: 0; } 100%{ stroke-opacity: 1; } }
@keyframes n-pb-screen{ 0%{ opacity: 0; } 25%{ opacity: 1; } 75%{ opacity: 1; } 100%{ opacity: 0; } }