/* Il blueprint animato (static/js/blueprint.js): TRIGGER → AI → AZIONE → INTEGRAZIONE → RISULTATO, su schermo cliente, TV e demo.
   Sopra tokens/schermo.css (rem scalati sui 1920). Regola di costo: solo transform/opacity/filter; i bagliori sono pseudo-elementi
   con box-shadow fisso e opacity animata; con prefers-reduced-motion resta la dissolvenza. */
.bp { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; z-index: 1; }
.bp-testa .occhiello { margin-bottom: .6rem; }
.bp-nome { font-size: 3.6rem; font-weight: var(--peso-titolo); letter-spacing: -.03em; line-height: 1.02; margin: 0 0 .6rem; text-transform: none; color: var(--testo); }
.bp-sotto { font-size: 1.5rem; margin: 0; }
.bp-palco { position: relative; flex: 1; min-height: 24rem; display: flex; align-items: center; }
.bp-nodi { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 1rem; position: relative; z-index: 2; }
.bp-nodo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; opacity: 0; transform: translateY(1.2rem) scale(.94); transition: opacity 500ms ease, transform 650ms cubic-bezier(.2, .7, .2, 1); }
.bp-nodo.visibile { opacity: 1; transform: none; }
.bp-tipo { font-size: .95rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--grigio); margin-bottom: 1rem; height: 1.3rem; }
.bp-nodo.tipo-trigger .bp-tipo { color: var(--ambra); }
.bp-nodo.tipo-ai .bp-tipo { color: var(--viola); }
.bp-nodo.tipo-risultato .bp-tipo { color: var(--ok); }
.bp-cerchio { position: relative; width: 8rem; height: 8rem; border-radius: 50%; display: grid; place-items: center; background: rgba(27, 22, 38, .9); border: .15rem solid var(--bordo); color: var(--testo-2); transition: border-color 500ms ease, color 500ms ease, transform 500ms cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.bp-cerchio::after { content: ""; position: absolute; inset: -.6rem; border-radius: 50%; box-shadow: 0 0 3.2rem rgba(245, 165, 36, .55), 0 0 1rem rgba(245, 165, 36, .35); opacity: 0; transition: opacity 500ms ease; pointer-events: none; }
.bp-icona { width: 3.4rem; height: 3.4rem; display: block; }
.bp-nodo.tipo-ai .bp-cerchio { width: 11rem; height: 11rem; border-color: rgba(139, 92, 246, .55); color: var(--viola); background: radial-gradient(circle at 50% 40%, rgba(139, 92, 246, .22), rgba(27, 22, 38, .95) 70%); }
.bp-nodo.tipo-ai .bp-cerchio::after { box-shadow: 0 0 4rem rgba(139, 92, 246, .6), 0 0 1.4rem rgba(139, 92, 246, .4); }
.bp-nodo.tipo-ai .bp-cerchio .mascotte { width: 8.2rem; }
.bp-nodo.tipo-ai .bp-tipo { margin-bottom: .2rem; }
.bp-nodo.attivo .bp-cerchio { border-color: var(--ambra); color: var(--ambra); transform: scale(1.08); }
.bp-nodo.attivo .bp-cerchio::after { opacity: .9; }
.bp-nodo.tipo-ai.attivo .bp-cerchio { border-color: var(--viola); color: var(--viola); }
.bp-nodo.tipo-risultato .bp-cerchio { border-color: rgba(52, 211, 153, .35); }
.bp-nodo.tipo-risultato.acceso .bp-cerchio { border-color: var(--ok); color: var(--ok); background: radial-gradient(circle at 50% 40%, rgba(52, 211, 153, .25), rgba(27, 22, 38, .95) 70%); }
.bp-nodo.tipo-risultato.acceso .bp-cerchio::after { opacity: 1; box-shadow: 0 0 4rem rgba(52, 211, 153, .55), 0 0 1.4rem rgba(52, 211, 153, .4); animation: bp-accendi 1600ms ease-out both; }
@keyframes bp-accendi { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .75; } }
.bp-etichetta { display: block; font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-top: 1.2rem; max-width: 15rem; text-wrap: balance; }
.bp-nodo.tipo-risultato.acceso .bp-etichetta { color: var(--ok); }
.bp-dettaglio { display: block; font-size: 1.1rem; color: var(--ambra); margin-top: .4rem; font-style: italic; }
/* la linea: fondo grigio e luce viola→ambra che si allunga (scaleX) nodo dopo nodo; posizionata dal JS sui centri dei cerchi */
.bp-traccia { position: absolute; height: .25rem; margin-top: -.125rem; z-index: 1; pointer-events: none; }
.bp-traccia i { position: absolute; inset: 0; display: block; border-radius: .2rem; }
.bp-traccia-fondo { background: rgba(201, 195, 214, .18); }
.bp-traccia-luce { background: linear-gradient(90deg, var(--ambra), var(--viola) 50%, var(--ok)); transform: scaleX(0); transform-origin: left center; transition: transform 500ms cubic-bezier(.2, .7, .2, 1); }
/* il dato in movimento: un puntino luminoso */
.bp-dato { position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: radial-gradient(circle, #fff 0%, var(--ambra) 45%, rgba(245, 165, 36, 0) 75%); opacity: 0; z-index: 3; pointer-events: none; transition: transform 700ms cubic-bezier(.4, 0, .2, 1), opacity 300ms ease; will-change: transform; }
.bp-dato::after { content: ""; position: absolute; inset: -.9rem; border-radius: 50%; box-shadow: 0 0 2.2rem rgba(245, 165, 36, .9); opacity: .8; }
.bp-dato.visibile { opacity: 1; }
.bp-avvertenza { margin-top: .4rem; }
/* 7 nodi: etichette un filo più piccole */
.bp.n7 .bp-etichetta { font-size: 1.3rem; }
.bp.n7 .bp-cerchio { width: 7.2rem; height: 7.2rem; }
.bp.n7 .bp-nodo.tipo-ai .bp-cerchio { width: 10rem; height: 10rem; }
/* TV: titolo più grande */
html.tv .bp-nome { font-size: 4.2rem; }
html.tv .bp-testa { margin-top: 1.2rem; }
/* verticale (vetrina 1080×1920 nelle demo): i nodi in colonna, la linea verticale */
.bp.verticale .bp-palco { align-items: stretch; }
.bp.verticale .bp-nodi { flex-direction: column; align-items: stretch; gap: 1.4rem; }
.bp.verticale .bp-nodo { flex-direction: row; text-align: left; gap: 1.6rem; align-items: center; }
.bp.verticale .bp-tipo { display: none; }
.bp.verticale .bp-etichetta { margin-top: 0; max-width: none; }
.bp.verticale .bp-traccia { display: none; }
@media (max-width: 1000px) { .bp-nodi { flex-wrap: wrap; } .bp-nodo { flex: 1 1 30%; } .bp-traccia, .bp-dato { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bp-nodo { transition: opacity 240ms ease; transform: none !important; }
  .bp-traccia-luce { transition: none; transform: none !important; }
  .bp-dato { display: none; }
  .bp-cerchio { transition: none; transform: none !important; }
  .bp-nodo.tipo-risultato.acceso .bp-cerchio::after { animation: none; opacity: .8; }
}