/**
 * public/css/roadmap.css
 * Dynamic Roadmap styling for ShareMoments.
 */

.roadmap-container {
    isolation: isolate;
    /* Create new stacking context */
}

/* The circle nodes containing icons */
.step-node {
    position: relative;
    z-index: 10;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.step-node:hover {
    transform: scale(1.05);
}

/* Background ocluders for the line */
.step-node-bg {
    position: absolute;
    inset: -4px;
    background-color: #ffffff;
    /* Solid white to hide the line behind */
    border-radius: 50%;
    z-index: -1;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1);
}

/* The dynamic SVG */
.roadmap-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.roadmap-path {
    fill: none;
    stroke: var(--color-primary, #1fa69a);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.15;
    transition: stroke-dashoffset 0.1s linear;
}

/* Animation hook */
.roadmap-path.animated {
    opacity: 0.25;
}

@media (max-width: 768px) {
    .roadmap-path {
        stroke-width: 3;
    }
}