.hero {
    position: relative;
    overflow: hidden;
}

#windows-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
    pointer-events: none;

    z-index: 0;
}

.hero > *:not(#windows-background) {
    position: relative;
    z-index: 1;
}

.flow-background-svg {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;
}

.flow-line {
    fill: none;

    stroke: var(--line-color);
    stroke-width: var(--line-width);

    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: var(--line-opacity);

    vector-effect: non-scaling-stroke;

    animation: linePulse var(--pulse-duration) ease-in-out infinite;
    animation-delay: var(--pulse-delay);
}

@keyframes linePulse {
    0%,
    100% {
        opacity: calc(var(--line-opacity) * 0.25);
    }

    50% {
        opacity: var(--line-opacity);
    }
}

@media (prefers-reduced-motion: reduce) {
    .flow-line {
        animation: none;
    }

    .flow-line animate {
        display: none;
    }
}