/* path-grid.css */
:root {
    --show-path-lines: 0; /* 0 for false, 1 for true */
}

.path-grid-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 50;
    transform-origin: center center;
    will-change: transform;
    opacity: var(--show-path-lines);
}

.path-line {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.vertical-active,
.horizontal-active {
    background: rgba(0, 0, 255, 0.3);
}

.vertical-entry,
.vertical-exit,
.horizontal-entry,
.horizontal-exit {
    background: rgba(255, 0, 0, 0.3);
    background-image: linear-gradient(
        90deg,
        rgba(255, 0, 0, 0.3) 50%,
        transparent 50%
    );
    background-size: 10px 1px;
    animation: dash 20s linear infinite;
}

@keyframes dash {
    to {
        background-position: 100% 0;
    }
}