/* =========================================================
   ELECTRONIC SHOW V8 — SIGNAL SYSTEM
   Fixed signal path, traveling impulse, aligned nodes and ECG feeds
   ========================================================= */

:root{
--signal-x:34px;
}

.signal-path{
position:fixed;
top:0;
left:var(--signal-x);
width:2px;
height:100vh;
background:linear-gradient(
to bottom,
transparent,
rgba(0,102,255,.22),
rgba(0,102,255,.85),
rgba(0,102,255,.22),
transparent
);
box-shadow:
0 0 18px rgba(0,102,255,.48),
0 0 48px rgba(0,102,255,.22);
z-index:5;
pointer-events:none;
animation:signalPathPulse 5s ease-in-out infinite;
}

.signal-path::after{
content:"";
position:absolute;
top:-25%;
left:0;
width:2px;
height:22%;
background:linear-gradient(
to bottom,
transparent,
rgba(0,102,255,1),
transparent
);
box-shadow:
0 0 18px rgba(0,102,255,.9),
0 0 55px rgba(0,102,255,.45);
animation:signalTravel 8s linear infinite;
}

.signal-path.is-transmitting::after{
animation:signalTravel 3.2s linear 1;
}

@keyframes signalTravel{
0%{top:-25%;opacity:0}
10%{opacity:1}
90%{opacity:1}
100%{top:110%;opacity:0}
}

@keyframes signalPathPulse{
0%{opacity:.32;transform:scaleY(.88)}
50%{opacity:1;transform:scaleY(1)}
100%{opacity:.32;transform:scaleY(.88)}
}

.signal-section-anchor{
position:relative;
}

.section-node{
position:absolute;
left:calc(var(--signal-x) - 8px - ((100vw - 100%) / 2));
top:90px;
width:16px;
height:16px;
border-radius:50%;
background:#0066FF;
box-shadow:
0 0 12px rgba(0,102,255,.85),
0 0 35px rgba(0,102,255,.45);
animation:nodePulse 3.2s infinite ease-in-out;
z-index:50;
pointer-events:none;
}

.section-node::after{
content:"";
position:absolute;
left:16px;
top:-3px;
width:120px;
height:22px;
background:url("data:image/svg+xml,%3Csvg width='120' height='22' viewBox='0 0 120 22' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 11 H34 L42 4 L50 18 L58 2 L66 20 L74 11 H120' fill='none' stroke='%230066FF' stroke-width='2.2'/%3E%3C/svg%3E") center/contain no-repeat;
filter:drop-shadow(0 0 8px rgba(0,102,255,.8));
opacity:.72;
transition:.35s;
}

.section-node::before{
content:"";
position:absolute;
left:16px;
top:7px;
width:34px;
height:2px;
background:#0066FF;
box-shadow:0 0 10px rgba(0,102,255,.8);
opacity:.72;
}

.hero .section-node{
display:none;
}

.signal-section-anchor.is-active .section-node{
box-shadow:
0 0 18px rgba(0,102,255,1),
0 0 55px rgba(0,102,255,.75),
0 0 110px rgba(0,102,255,.28);
}

.signal-section-anchor.is-active .section-node::after,
.signal-section-anchor.is-active .section-node::before{
opacity:1;
filter:drop-shadow(0 0 12px rgba(0,102,255,1));
}

@keyframes nodePulse{
0%{transform:scale(.85);opacity:.62}
50%{transform:scale(1.25);opacity:1}
100%{transform:scale(.85);opacity:.62}
}