/* =====================================================================================
   "Where does your data go?" flow diagram (components/data-flow.php).
   Horizontal timeline from 1024px up, vertical list below. Halftone void drawn by
   js/dataFlow.js.
   ===================================================================================== */

.df {
    --df-ink: #0b0b0f;
    --df-card: #ffffff;
    --df-border: #e5e7eb;
    --df-text: #1f2937;
    --df-muted: #6b7280;
    --df-rule: #c4c9d1;
    --df-paper: #d6f1fc;
    --df-paper-2: #b9cfe0;
    --df-sky: #6dd0f1;
    --df-blue: #3b8fe0;
    --df-folder: #f6f1a6;
    --df-void-dot: #000000;

    box-sizing: border-box;
    max-width: 1280px;
    margin: 0 auto;
    padding: 48px 40px 36px;
    overflow: hidden;
    background: var(--df-card);
    border: 1px solid var(--df-border);
    border-radius: 24px;
    font-family: Inter, system-ui, sans-serif;
    color: var(--df-text);
}
html.dark .df {
    --df-card: rgb(var(--dk-raised, 23 37 122));
    --df-border: rgb(var(--dk-line, 45 60 152));
    --df-text: rgb(var(--dk-ink-2, 226 231 251));
    --df-muted: rgb(var(--dk-ink-4, 165 176 225));
    --df-rule: rgb(var(--dk-line-2, 60 76 166));
    --df-ink: #000000;
}
.df *, .df *::before, .df *::after { box-sizing: border-box; }

/* Steps: desktop timeline */
.df__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.25fr);
    grid-template-rows: auto auto auto;
    position: relative;
}
.df__step { display: contents; }

.df__node {
    grid-row: 2;
    justify-self: center;
    position: relative;
    z-index: 2;
    width: clamp(120px, 12vw, 164px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--df-ink);
    display: grid;
    place-items: center;
}
.df__icon { display: block; width: 54%; height: auto; margin-top: 12%; }
.df__arc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.df__arc text { fill: #fff; font: 800 17px Inter, system-ui, sans-serif; letter-spacing: 0.02em; }
.df__num {
    position: absolute;
    bottom: 9%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--df-sky);
    font: 700 11px Inter, system-ui, sans-serif;
    letter-spacing: 0.12em;
}

/* Connector line and travelling packet */
.df__line {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: center;
    height: 2px;
    margin: 0 8%;
    position: relative;
    z-index: 1;
    background: var(--df-rule);
}
.df__packet {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--df-sky);
    box-shadow: 0 0 0 4px rgba(109, 208, 241, 0.2);
    animation: df-travel 7s cubic-bezier(.45, .05, .55, .95) infinite;
}
@keyframes df-travel {
    0%   { left: 0;    opacity: 0; transform: scale(1); }
    6%   { opacity: 1; }
    82%  { left: 100%; opacity: 1; transform: scale(1); }
    92%  { left: 100%; opacity: 0; transform: scale(0.1); }
    100% { left: 100%; opacity: 0; }
}
@keyframes df-travel-v {
    0%   { top: 0;    opacity: 0; transform: scale(1); }
    6%   { opacity: 1; }
    82%  { top: 100%; opacity: 1; transform: scale(1); }
    92%  { top: 100%; opacity: 0; transform: scale(0.1); }
    100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .df__packet { display: none; } }

/* Notes alternate above (odd) and below (even) the line */
.df__note {
    position: relative;
    width: 140%;
    margin-left: 50%;
    padding-left: 16px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--df-text);
}
.df__note::before {
    content: "";
    position: absolute;
    top: 4px;
    left: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--df-text);
}
.df__note::after { content: ""; position: absolute; left: -0.5px; width: 1px; background: var(--df-text); }
.df__step:nth-child(odd) .df__note { grid-row: 1; align-self: end; margin-bottom: 28px; }
.df__step:nth-child(odd) .df__note::after { top: 9px; bottom: -28px; }
.df__step:nth-child(even) .df__note { grid-row: 3; align-self: start; margin-top: 28px; }
.df__step:nth-child(even) .df__note::after { top: -28px; height: 32px; }

/* Narrower notes near the void; the last one hangs left so it stays inside the card */
.df__step:nth-child(4) .df__note { width: 100%; }
.df__step:nth-child(5) .df__note { width: 90%; }
.df__step:nth-child(6) .df__note { width: 80%; margin-left: -30%; margin-top: 96px; padding-left: 0; padding-right: 16px; text-align: right; }
.df__step:nth-child(6) .df__note::before { left: auto; right: -5px; }
.df__step:nth-child(6) .df__note::after { left: auto; right: -0.5px; top: -96px; height: 100px; }

.df__note h3 {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: 0;
}
.df__note p { margin: 0; }
.df__note strong { font-weight: 700; }

.df__step:nth-child(1) > * { grid-column: 1; }
.df__step:nth-child(2) > * { grid-column: 2; }
.df__step:nth-child(3) > * { grid-column: 3; }
.df__step:nth-child(4) > * { grid-column: 4; }
.df__step:nth-child(5) > * { grid-column: 5; }
.df__step:nth-child(6) > * { grid-column: 6; }

/* Data void */
.df__node--void { background: transparent; isolation: isolate; }
.df__void-canvas {
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    z-index: -1;
    max-width: none;
    pointer-events: none;
}
.df__void-text {
    position: relative;
    max-width: 80%;
    color: var(--df-paper);
    font-weight: 900;
    font-size: clamp(26px, 2.8vw, 40px);
    line-height: 0.92;
    letter-spacing: 0.01em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 2px #000, 0 0 8px #000;
}

.df__foot {
    max-width: 760px;
    margin: 40px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--df-rule);
    text-align: center;
    font-size: 13px;
    color: var(--df-muted);
}

/* Phones and tablets: vertical timeline */
@media (max-width: 1023.98px) {
    .df { padding: 32px 20px 28px; border-radius: 20px; }
    .df__steps { display: flex; flex-direction: column; gap: 28px; }
    .df__line { position: absolute; left: 44px; top: 30px; bottom: 30px; width: 2px; height: auto; margin: 0; align-self: stretch; }
    .df__packet { left: 50%; margin-left: -6px; animation-name: df-travel-v; }
    .df__step { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px; align-items: center; }
    .df__step > * { grid-column: auto !important; grid-row: auto !important; }
    .df__node { width: 88px; }
    .df__arc, .df__num { display: none; }
    .df__icon { margin-top: 0; width: 58%; }
    .df__note,
    .df__step:nth-child(n) .df__note { width: auto; margin: 0; padding: 0; text-align: left; align-self: center; }
    .df__note::before, .df__note::after { display: none; }
    .df__note h3 {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        white-space: normal;
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 800;
        color: var(--df-text);
    }
    .df__note p { font-size: 14px; }
    .df__void-canvas { top: -35%; left: -35%; width: 170%; height: 170%; }
    .df__void-text { font-size: 17px; }
    .df__foot { text-align: left; }
}