/* Pagina iniziale: la rete grande Input → AI → Codice → Persona → I tuoi dati, con la lente ai bordi dei nodi,
   il puntino perla che la percorre e i nodi che si accendono. */
:root {
  /* la misura della rete: la stessa del disegno dei fili (viewBox di parti/home-fili.html) */
  --rete-larga: 1120px;
  --rete-alta: 190px;
  --lens-zoom: 1.3;
  --loop: 6.6s;
  --phase: 2.5s;
}

.graph {
  position: relative;
  margin-top: 28px;
  width: var(--rete-larga);
  height: var(--rete-alta);
  z-index: 2;
}
.wires {
  position: absolute;
  inset: 0;
  width: var(--rete-larga);
  height: var(--rete-alta);
  overflow: visible;
}
/* Il puntino perla che corre sui fili: misura, centro bianco e alone cambiano con --punto, --punto-pieno, --punto-alone */
.graph .dot {
  --punto: 14px;
  --punto-pieno: 40%;
  --punto-alone: 18px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--punto);
  height: var(--punto);
  border-radius: 50%;
  z-index: 1;
  offset-rotate: 0deg;
  offset-anchor: 50% 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--bianco) 0%,
    var(--bianco) var(--punto-pieno),
    var(--perla-punto) 100%
  );
  box-shadow:
    0 0 0 1px var(--punto-bordo),
    0 3px 8px var(--punto-ombra),
    0 0 var(--punto-alone) 6px var(--bianco-95);
  offset-path: path(
    'M96 38H192C242 38 182 148 232 148H424C474 148 414 38 464 38H656C706 38 646 148 696 148H888C938 148 878 38 928 38H1024'
  );
  offset-distance: 0px;
  opacity: 0;
}
.graph .dot-trail {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 12px 4px var(--bianco-80);
}
.node {
  position: absolute;
  width: 192px;
  z-index: 2;
}
.n-input {
  left: 0;
  top: 0;
  --ritardo: -0.264s;
}
.n-ai {
  left: 232px;
  top: 110px;
  --ritardo: -5.544s;
}
.n-code {
  left: 464px;
  top: 0;
  --ritardo: -4.224s;
}
.n-person {
  left: 696px;
  top: 110px;
  --ritardo: -2.904s;
}
.n-data {
  left: 928px;
  top: 0;
  --ritardo: -1.584s;
}
.pill {
  height: 76px;
  border-radius: 38px;
  gap: 14px;
  padding: 0 20px 0 12px;
}
.node .n-icon {
  width: 52px;
  height: 52px;
  z-index: 1;
}
.node .n-icon svg {
  width: 26px;
  height: 26px;
}
.node .n-title {
  position: relative;
  z-index: 1;
  font-size: 21px;
}

/* Lente ai bordi: il centro resta pieno, ai lati si vede ingrandito quello che passa dietro */
.lente {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(
    90deg,
    var(--maschera) 0,
    var(--maschera) 14%,
    transparent 30%,
    transparent 70%,
    var(--maschera) 86%,
    var(--maschera) 100%
  );
  mask: linear-gradient(
    90deg,
    var(--maschera) 0,
    var(--maschera) 14%,
    transparent 30%,
    transparent 70%,
    var(--maschera) 86%,
    var(--maschera) 100%
  );
}
.lente-scena {
  position: absolute;
  width: var(--rete-larga);
  height: var(--rete-alta);
  transform: scale(var(--lens-zoom));
}
.n-input .lente-scena {
  left: 0;
  top: 0;
  transform-origin: 96px 38px;
}
.n-ai .lente-scena {
  left: -232px;
  top: -110px;
  transform-origin: 328px 148px;
}
.n-code .lente-scena {
  left: -464px;
  top: 0;
  transform-origin: 560px 38px;
}
.n-person .lente-scena {
  left: -696px;
  top: -110px;
  transform-origin: 792px 148px;
}
.n-data .lente-scena {
  left: -928px;
  top: 0;
  transform-origin: 1024px 38px;
}

/* Le luci del nodo che si accende: la luce bianca dentro e l'alone del suo colore intorno */
.pill-lit {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(120% 140% at 30% 20%, var(--bianco-95), var(--bianco-35) 70%);
  box-shadow: inset 0 0 18px var(--bianco-90);
}
.node-glow {
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--tint) 50%, var(--bianco)),
    0 18px 40px -12px color-mix(in srgb, var(--tint) 75%, transparent);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 76px;
  border-radius: 38px;
  opacity: 0;
  pointer-events: none;
}
.n-tint-glow {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--tint);
  opacity: 0;
  filter: blur(5px);
}

@media (prefers-reduced-motion: no-preference) {
  .graph .dot {
    --lag: 0s;
    animation:
      viaggio var(--loop) linear infinite,
      compare var(--loop) linear infinite;
    animation-delay: calc(var(--lag) - var(--phase));
  }
  .graph .dot-trail {
    --lag: 0.07s;
  }
  .graph .dot-trail + .dot-trail {
    --lag: 0.14s;
  }
  .pill-lit,
  .node-glow,
  .n-tint-glow {
    animation: luce var(--loop) linear infinite;
    animation-delay: calc(var(--ritardo) - var(--phase));
  }
}
/* Il puntino va da un nodo all'altro: parte e arriva piano a ogni nodo */
@keyframes viaggio {
  0%,
  8% {
    offset-distance: 0px;
    animation-timing-function: var(--ease);
  }
  26%,
  28% {
    offset-distance: 326.58px;
    animation-timing-function: var(--ease);
  }
  46%,
  48% {
    offset-distance: 653.16px;
    animation-timing-function: var(--ease);
  }
  66%,
  68% {
    offset-distance: 979.74px;
    animation-timing-function: var(--ease);
  }
  86%,
  100% {
    offset-distance: 1306.32px;
  }
}
@keyframes compare {
  0% {
    opacity: 0;
    animation-timing-function: var(--ease);
  }
  7% {
    opacity: 1;
  }
  86% {
    opacity: 1;
    animation-timing-function: var(--ease);
  }
  95%,
  100% {
    opacity: 0;
  }
}
/* Il nodo si accende mentre il puntino arriva e si spegne piano dopo */
@keyframes luce {
  0% {
    opacity: 0;
    animation-timing-function: var(--ease);
  }
  10% {
    opacity: 1;
    animation-timing-function: var(--ease);
  }
  32%,
  100% {
    opacity: 0;
  }
}