:root {
    --c-input: var(--primary);
    --c-backend: var(--warning);
    --c-api: var(--accent);
    --c-output: var(--success);
}


/* SVG sits behind everything but fills the container */
.pipeline-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* --- NODES (The Boxes) --- */
/* We position these with Grid or Flex, or absolute % to be responsive */
.node-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    pointer-events: none;
}

.column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    /* Space between vertical nodes */
    pointer-events: auto;
}

.node {
    background: rgba(var(--bg-body-rgb), .95);
    border: 3px solid;
    padding: 15px 25px;
    border-radius: 1rem;
    text-align: center;
    min-width: 120px;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    backdrop-filter: blur(10px);
    transition: transform 1s var(--animation-curve);

    opacity: 0;
}

.node:hover {
    transform: scale(1.05) !important;
}

.node span {
    display: block;
    font-size: 0.7em;
    opacity: 0.7;
    font-weight: normal;
    margin-top: 4px;
}

/* Color Coding Borders */
.n-input {
    border-color: var(--c-input);
}

.n-data {
    border-color: var(--c-input);
}

.n-back {
    border-color: var(--c-backend);
}

.n-api {
    border-color: var(--c-api);
}

.n-out {
    border-color: var(--c-output);
}

/* --- LINES & PARTICLES --- */
.line-bg {
    fill: none;
    stroke: #334155;
    stroke-width: 4;
    opacity: 0.3;
}

.line-glow {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

.glow-input {
    stroke: var(--c-input);
    filter: drop-shadow(0 0 8px var(--c-input));
}

.glow-back {
    stroke: var(--c-backend);
    filter: drop-shadow(0 0 8px var(--c-backend));
}

.glow-api {
    stroke: var(--c-api);
    filter: drop-shadow(0 0 8px var(--c-api));
}

.glow-out {
    stroke: var(--c-output);
    filter: drop-shadow(0 0 8px var(--c-output));
}

.particle {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
    z-index: 20;
    opacity: 0;
    offset-anchor: center;
    pointer-events: none;
    box-shadow: -4px 0px 100px 4px #ffffff;
    /* opacity: 0 !important; */
}



/* The Animation (Standard for all particles) */
@keyframes flow {
    0% {
        offset-distance: 0%;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.2);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
        transform: scale(0.5);
    }
}


.logo-stack {
    display: flex;
    justify-content: center;
    gap: .5rem;
}

.logo-stack img {
    height: 32px;
}

@media (max-width: 576px) {
    .logo-stack img {
        height: 24px;
    }
}
@media (min-width: 576px) {
    .logo-stack img {
        height: 28px;
    }
}
@media (min-width: 768px) {
    .logo-stack img {
        height: 28px;
    }
}
@media (min-width: 967px) {
    .logo-stack img {
        height: 32px;
    }
}


/** Mobile view - Turn pipeline into a vertical stack **/
@media (max-width: 768px) {
    .node-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(5, auto);
        gap: 30px;

        padding: 0;
    }
    .column {
        flex-direction: row;
    }

    .card-body {
        padding: 10px;
    }
}