/* ==========================================================================
   Graphics — hero pipeline diagram and case-file illustrations (inline SVG)
   ========================================================================== */

/* --- Shared SVG vocabulary ---------------------------------------------------- */

.pipeline,
.art {
    width: 100%;
    height: auto;
    overflow: visible;
}

.pipeline text,
.art text {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-anchor: middle;
    fill: var(--ink-muted);
}

.ln {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ln--soft {
    stroke-opacity: 0.28;
}

.ln--signal {
    stroke: var(--signal);
}

.fill-ink {
    fill: var(--ink);
}

.fill-signal {
    fill: var(--signal);
}

.fill-wash {
    fill: var(--signal-wash);
}

/* --- Hero pipeline ------------------------------------------------------------ */

.pipeline .node {
    fill: var(--paper);
    stroke: var(--ink);
    stroke-width: 1.5;
}

.pipeline .wire {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.25;
    stroke-opacity: 0.45;
}

.pipeline .t-source {
    font-size: 14px;
    fill: var(--ink);
}

.pipeline .t-node {
    font-family: var(--font-display);
    font-size: 26px;
    letter-spacing: 0;
    fill: var(--ink);
}

.pipeline .t-kpi {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: -0.01em;
    text-anchor: start;
    fill: var(--signal-ink);
}

.pipeline .t-small {
    font-size: 11.5px;
}

.pipeline .t-left {
    text-anchor: start;
}

.pipeline .t-stage {
    font-size: 12.5px;
    letter-spacing: 0.08em;
}

.pipeline .t-stage tspan {
    fill: var(--signal-ink);
}

.pipeline .packet {
    fill: var(--signal);
}

/* Below ~1280px the 720-unit diagram renders at well under its natural size
   (about 0.5x on phones and small laptops): enlarge the labels to stay legible */
@media (max-width: 1279px) {
    .pipeline .t-source { font-size: 18px; }
    .pipeline .t-node { font-size: 34px; }
    .pipeline .t-kpi { font-size: 40px; }
    .pipeline .t-small { font-size: 14px; }
    .pipeline .t-stage { font-size: 16px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: no-preference) {
    .pipeline .draw {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: draw 1.1s var(--ease-in-out) forwards;
    }

    .pipeline .fade {
        opacity: 0;
        animation: fade-in 0.8s ease forwards;
    }

    .pipeline .grow {
        transform-box: fill-box;
        transform-origin: bottom;
        transform: scaleY(0);
        animation: grow-y 0.9s var(--ease-out-expo) 2s forwards;
    }

    .pipeline .s1 { animation-delay: 0.7s; }
    .pipeline .s2 { animation-delay: 1s; }
    .pipeline .s3 { animation-delay: 1.25s; }
    .pipeline .s4 { animation-delay: 1.45s; }
    .pipeline .s5 { animation-delay: 1.65s; }
    .pipeline .s6 { animation-delay: 1.85s; }
    .pipeline .s7 { animation-delay: 2s; }

    .pipeline .grow:nth-of-type(2) { animation-delay: 2.05s; }
    .pipeline .grow:nth-of-type(3) { animation-delay: 2.1s; }
    .pipeline .grow:nth-of-type(4) { animation-delay: 2.15s; }
    .pipeline .grow:nth-of-type(5) { animation-delay: 2.2s; }
}

@media (prefers-reduced-motion: reduce) {
    .pipeline .packet {
        display: none;
    }
}

@keyframes draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fade-in {
    to {
        opacity: 1;
    }
}

@keyframes grow-y {
    to {
        transform: scaleY(1);
    }
}

/* --- Case-file illustrations ---------------------------------------------- */

/* Illustrations scale with their card; keep hairlines and labels print-sized */
.art .ln {
    vector-effect: non-scaling-stroke;
}

.art text {
    font-size: 9px;
    letter-spacing: 0.1em;
}

.art-flow {
    stroke-dasharray: 6 6;
}

@media (prefers-reduced-motion: no-preference) {
    .case:hover .art-flow {
        animation: dash-flow 0.8s linear infinite;
    }

    .art-bar,
    .art-row {
        transform-box: fill-box;
        transition: transform 1s var(--ease-out-expo);
    }

    .art-bar {
        transform-origin: bottom;
    }

    .art-row {
        transform-origin: left;
        transition-delay: 0.5s;
    }

    .art-bar:nth-child(2) { transition-delay: 0.08s; }
    .art-bar:nth-child(3) { transition-delay: 0.16s; }
    .art-bar:nth-child(4) { transition-delay: 0.24s; }
    .art-bar:nth-child(5) { transition-delay: 0.32s; }
    .art-bar:nth-child(6) { transition-delay: 0.4s; }

    .js .case:not(.is-visible) .art-bar {
        transform: scaleY(0);
    }

    .js .case:not(.is-visible) .art-row {
        transform: scaleX(0);
    }
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -12;
    }
}