/* Progressive Disclosure Visibility states */
.flow-step-container.is-hidden-step .step-vis-slot {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(10px);
}

.flow-step-container {
    position: relative;
    z-index: 10;
}

.step-vis-slot {
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    transform: translateY(0);
}

/* Ellipse Styling */
.ellipse {
    transition: all 0.3s ease;
}

/* Active step state natively bound to JS class */
.flow-step-container.is-active-step .ellipse {
    background-color: #EBB838;
    border-color: #DBA41A;
    color: #085D4C;
}

/* Static Track Line behind the ellipses */
.flowchart-ellipse-track {
    fill: none;
    stroke: rgba(64, 188, 163, 0.6);
    stroke-width: 1.4;
    stroke-dasharray: 4, 4;
}

/* Explicitly bind SVG element rendering natively */
.flowchart-svg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Stops it from catching active card clicks explicitly */
    z-index: 5;
    /* Float elegantly over backgrounds but underneath modals */
}

/* Line animation Fade In */
.animating-flowchart-line {
    animation: spawnLine 0.5s ease forwards;
}

@keyframes spawnLine {
    from {
        opacity: 0;
        stroke-dashoffset: 24px;
        /* Positive offset slides dashes forwards along the path (left to right) */
    }

    to {
        opacity: 1;
        stroke-dashoffset: 0;
    }
}

/* Card Pulse Animation mapped uniquely via JS RGB variables */
[step-card] {
    transition: box-shadow 0.3s ease;
    border-radius: 8px;
    /* Generic safe radius to clip outer webbing glow shadows neatly */
    position: relative;
    /* Allow box-shadows to scale neatly */
}

/* The exact active step pulses infinitely (excluding the final step endpoint) */
.flow-step-container:not(:last-child).is-active-step [step-card] {
    animation: flowCardPulse 0.8s infinite alternate ease-in-out;
}

/* Hover completely interrupts the pulse locking it uniformly at perfect 30% opacity */
.flow-step-container:not(:last-child).is-active-step [step-card]:hover {
    animation: none;
    box-shadow: 0 0 24px rgba(var(--card-rgb), 0.6) !important;
}

/* Hard disable native interactions on the final static endpoint cards entirely */
.flow-step-container:last-child [step-card] {
    cursor: default;
    pointer-events: none;
}

/* Once the flowchart has been fully revealed, lock ALL cards natively from further interaction */
.interactive-flowchart.is-completed [step-card] {
    cursor: default !important;
    pointer-events: none !important;
}

@keyframes flowCardPulse {
    from {
        box-shadow: 0 0 24px rgba(var(--card-rgb), 0);
    }

    to {
        box-shadow: 0 0 24px rgba(var(--card-rgb), 0.6);
    }
}