/* Linea del Flow: il filo che attraversa la home, disegnato dallo scroll (js/base/lineaFlow.js) */

.linea-flow { position: absolute; left: 0; top: 0; width: 100%; z-index: 6; pointer-events: none; overflow: visible; }
.linea-flow path { fill: none; stroke: var(--menta); stroke-width: 1.5; stroke-linecap: round; }
.linea-flow .traccia { stroke: rgba(116, 255, 160, .14); }
.linea-flow circle { fill: var(--menta); }
.linea-flow .chiaro { stroke: var(--blu); }
.linea-flow .punta, .linea-flow .alone { opacity: 0; transition: opacity .4s var(--esce); }
.linea-flow.in-corsa .punta, .linea-flow.arrivata .punta { opacity: 1; }
.linea-flow.in-corsa .alone { opacity: 1; }
.linea-flow .alone { fill: none; stroke: var(--menta); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: battito 1.8s var(--esce) infinite; }
.linea-flow.su-chiaro .punta { fill: var(--blu); }
.linea-flow.su-chiaro .alone { stroke: var(--blu); }
@keyframes battito { from { transform: scale(.45); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .linea-flow .alone { animation: none; display: none; } }
/* il cancelletto del tris, disegnato dall'innesto della linea */
.linea-flow .cancelletto line { stroke: var(--blu); stroke-width: 2; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s var(--esce); }
.linea-flow .cancelletto.composto line { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .linea-flow .cancelletto line { transition: none; } }