/*
   ================================================================
   landing-home.css
   ----------------------------------------------------------------
   Stili specifici della landing piantando.com (home V2).
   Da caricare DOPO piantando.css.

   Contiene esclusivamente componenti NON promossi a piantando.css
   per scelta (vedi sheet "Decisioni finali" — apr 2026):

     1. .network + classi SVG nodi/connessioni + @keyframes flow/flowCore
     2. .hero__viz, .network-canvas, .network-hint (wrapper viz)
     3. .ticker + sotto-classi + @keyframes tickerSlide
     4. .livepulse + @keyframes pulseDot

   Tutte le var brand fanno riferimento a piantando.css (--bs-*).
   Autore: Piantando — apr 2026
   ================================================================
*/

/* ====================================================================
   1. NETWORK GRAPH (hero viz)
   ==================================================================== */
.hero__viz {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 560px;
  width: 100%;
  justify-self: center;
}
.hero__viz .network-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}
.network {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.network .conn-outer {
  stroke: var(--bs-primary-soft);
  stroke-width: 1;
}
.network .conn-main {
  stroke: rgba(var(--bs-primary-rgb), 0.28);
  stroke-width: 1.1;
  stroke-dasharray: 4 7;
  animation: flow 6s linear infinite;
}
.network .conn-main.d1 { animation-duration: 5.2s; animation-delay: -0.6s; }
.network .conn-main.d2 { animation-duration: 7s;   animation-delay: -1.3s; }
.network .conn-main.d3 { animation-duration: 4.6s; animation-delay: -2s;   }
.network .conn-main.d4 { animation-duration: 6.3s; animation-delay: -2.8s; }
.network .conn-main.d5 { animation-duration: 5.8s; animation-delay: -3.4s; }

@keyframes flow { to { stroke-dashoffset: -33; } }

/* Rete neurale — connessioni interne core */
.network .conn-core    { animation: flowCore 6s linear infinite; }
.network .conn-core.c0 { animation-duration: 5s;   animation-delay: -1s;   }
.network .conn-core.c1 { animation-duration: 7s;   animation-delay: -2s;   }
.network .conn-core.c2 { animation-duration: 5.5s; animation-delay: -3s;   }
.network .conn-core.c3 { animation-duration: 6.2s; animation-delay: -4s;   }
.network .conn-core.c4 { animation-duration: 4.8s; animation-delay: -0.5s; }

@keyframes flowCore { to { stroke-dashoffset: -30; } }

.network .node-label {
  font-family: var(--bs-font-monospace);
  font-size: 9.5px;
  fill: var(--bs-muted-color);
  letter-spacing: 1.4px;
  font-weight: 500;
}
.network .node-dot {
  fill: var(--bs-primary);
  filter: drop-shadow(0 0 4px var(--bs-primary-glow));
}
.network .packet {
  fill: #00E5B8;
  filter: drop-shadow(0 0 6px rgba(var(--bs-primary-rgb), 0.9));
}
.network .center-ring {
  fill: none;
  stroke: var(--bs-primary);
  stroke-width: 1;
  opacity: 0.55;
}
.network .center-core {
  fill: url(#coreGrad);
  stroke: rgba(var(--bs-primary-rgb), 0.55);
  stroke-width: 1.5;
}
.network .center-label {
  font-family: var(--bs-font-sans-serif);
  font-weight: 800;
  font-size: 13px;
  fill: var(--bs-dark);
  letter-spacing: 0.08em;
  text-anchor: middle;
}
.network .center-sub {
  font-family: var(--bs-font-monospace);
  font-size: 8px;
  fill: var(--bs-primary);
  letter-spacing: 1.5px;
  text-anchor: middle;
}

/* Hint "HOVER TO INTERACT" su canvas */
.network-hint {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: var(--bs-font-monospace);
  font-size: 0.68rem;
  color: var(--bs-muted-color);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(var(--bs-dark-rgb), 0.03);
  border: 1px solid rgba(var(--bs-dark-rgb), 0.06);
  opacity: 0.6;

  transition: opacity 0.3s ease, color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  pointer-events: none;
}

.hero__viz:hover .network-hint { opacity: 0; }

/* === OVERRIDE PER LA MODALITÀ SCURA === */
.hero__viz.is-dark .network-hint {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Responsive viz */
@media (max-width: 900px) {
  .hero__viz { max-width: 360px; }
}

/* ====================================================================
   2. LIVEPULSE — puntino pulsante (usato nel ticker e nei tag "live")
   ==================================================================== */
.livepulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 0 var(--bs-primary);
  animation: pulseDot 1.8s ease-out infinite;
}

@keyframes pulseDot {
  0%        { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.6); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(var(--bs-primary-rgb), 0); }
}

/* ====================================================================
   3. TICKER — banner orizzontale infinito con dati live
   ==================================================================== */
.ticker {
  position: relative;
  z-index: 2;
  height: 54px;
  display: flex;
  align-items: center;
  background: #0F2A28;
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.ticker__label {
  flex-shrink: 0;
  padding: 0 26px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--bs-font-monospace);
  font-size: 0.7rem;
  color: var(--bs-primary);
  letter-spacing: 0.14em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.ticker__label .ldot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 0 var(--bs-primary-glow);
  animation: pulseDot 2s ease-out infinite;
}
.ticker__track {
  display: flex;
  gap: 38px;
  white-space: nowrap;
  animation: tickerSlide 70s linear infinite;
  padding-left: 36px;
}
.ticker__item {
  font-family: var(--bs-font-monospace);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.ticker__item .tk   { color: #fff;                       font-weight: 600; letter-spacing: 0.05em; }
.ticker__item .num  { color: #fff;                       font-weight: 600; }
.ticker__item .lbl  { color: rgba(255, 255, 255, 0.65);  font-weight: 400; }
.ticker__item .up   { color: var(--bs-primary);          font-size: 0.72rem; }
.ticker__item .live {
  color: var(--bs-primary);
  font-size: 0.68rem;
  animation: pulseDot 1.6s ease-out infinite;
}
.ticker__item.sep   { color: rgba(255, 255, 255, 0.35); opacity: .4; }

@keyframes tickerSlide { to { transform: translateX(-50%); } }