/* A scroll-responsive connection follows the real heading positions, in the page gutter. */
main.has-section-connector { position:relative; }
.section-connector { position:absolute;left:-28px;top:0;width:22px;pointer-events:none;overflow:visible;color:var(--accent);z-index:2; }
.section-connector svg { display:block;width:100%;height:100%;overflow:visible; }
.connector-track { fill:none;stroke:var(--line);stroke-width:1; }
.connector-progress { fill:none;stroke:currentColor;stroke-width:1.25;stroke-dasharray:100;stroke-dashoffset:100;opacity:.6;transition:stroke-dashoffset .14s linear; }
.connector-beam { fill:none;stroke:currentColor;stroke-width:1.8;stroke-dasharray:3 97;stroke-dashoffset:100;opacity:0; }
.connector-segment.is-reading .connector-beam { animation:connector-current 3.2s linear infinite; }
.connector-segment.is-connector-hovered .connector-track { stroke:currentColor;opacity:.45; }
.connector-segment.is-connector-hovered .connector-progress { opacity:.9; }
.connector-stop { fill:var(--bg);stroke:var(--line);stroke-width:1.2;transition:fill .3s ease,stroke .3s ease; }
.connector-stop.is-visited { fill:var(--accent);stroke:var(--bg); }
.connector-traveler { transition:transform .16s ease-out; }
.connector-halo { fill:currentColor;opacity:.09;animation:connector-breathe 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center; }
.connector-dot { fill:currentColor;stroke:var(--bg);stroke-width:1.8; }
[data-cloud="on"] .section-connector { color:rgb(var(--cloud-rgb)); }
.connector-paused .connector-beam,.connector-paused .connector-halo { animation-play-state:paused!important; }
@keyframes connector-current { 0% { stroke-dashoffset:100;opacity:0; } 15%,80% { opacity:.55; } 100% { stroke-dashoffset:-3;opacity:0; } }
@keyframes connector-breathe { 0%,100% { transform:scale(.8);opacity:.07; } 50% { transform:scale(1.12);opacity:.16; } }
@media(max-width:1350px) { .section-connector { left:-22px;width:16px; } }
@media(max-width:700px) { .section-connector { left:-12px;width:8px; } .connector-track { stroke-width:.85; } .connector-progress { stroke-width:1; } }
@media(max-width:480px) { .section-connector { left:-10px;width:8px; } }
@media(prefers-reduced-motion:reduce) { .section-connector * { animation:none!important;transition:none!important; } }
@media print { .section-connector { display:none; } }
@media(min-width:701px) and (max-width:900px) { .section-connector { left:-14px;width:10px; } }

@media(max-width:700px) { .connector-halo { r:4px; } .connector-dot { r:2.8px; } }

.connector-stop { pointer-events:all;cursor:pointer;filter:drop-shadow(0 0 3px currentColor);animation:legend-pulse 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center; }
.connector-stop:hover { fill:currentColor;stroke:currentColor;filter:drop-shadow(0 0 7px currentColor);animation:none; }
@keyframes legend-pulse { 0%,100% { opacity:.55; } 50% { opacity:1;filter:drop-shadow(0 0 5px currentColor); } }
.connector-paused .connector-stop { animation-play-state:paused; }
@media(prefers-reduced-motion:reduce) { .connector-stop { animation:none!important; } }

.connector-hit { fill:none;stroke:transparent;stroke-width:18;pointer-events:stroke; }
.connector-segment:is(.is-connector-hovered,.is-connector-direct) .connector-track { stroke:currentColor;stroke-width:2;opacity:.85;filter:drop-shadow(0 0 4px currentColor); }
.connector-segment:is(.is-connector-hovered,.is-connector-direct) .connector-progress { stroke-width:2;opacity:1; }
.connector-segment.is-connector-direct .connector-beam { animation:connector-current 1.9s linear infinite; }

/* Reading state persists without pointer input, including after scrolling stops. */
.connector-segment.is-reading .connector-track { stroke:currentColor;stroke-width:1.8;opacity:.75;filter:drop-shadow(0 0 3px currentColor); }
.connector-segment.is-reading .connector-progress { opacity:1;stroke-width:1.8; }
.connector-stop.is-current { fill:currentColor;stroke:var(--surface);stroke-width:1.5;filter:drop-shadow(0 0 7px currentColor);animation:connector-current-node 2.6s ease-in-out infinite; }
@keyframes connector-current-node { 0%,100% { opacity:1;filter:drop-shadow(0 0 4px currentColor); } 50% { opacity:1;filter:drop-shadow(0 0 9px currentColor); } }
@media(prefers-reduced-motion:reduce) { .connector-stop.is-current { animation:none!important; } }