/* A finite explanatory sequence; it never represents an actual download. */
.file-journey { margin:24px 0; padding:16px 0 10px; border-block:1px solid var(--line); }
.journey-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:32px; color:#c7d9ee; font-size:12px; }
.journey-play { padding:6px 10px; min-height:32px; border:1px solid #375272; border-radius:8px; color:#a6d5ff; background:#0b1c30; font:inherit; cursor:pointer; }
.journey-play[hidden] { display:none; }
.journey-play:hover { border-color:var(--blue); color:var(--text); }
.journey-play:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.journey-diagram { display:block; width:100%; height:auto; overflow:visible; }
.journey-track { fill:none; stroke:url(#journey-track); stroke-width:1; opacity:.38; }
.journey-centerline { stroke:#5882a8; stroke-width:1; stroke-dasharray:2 6; opacity:.25; }
.journey-packet { opacity:0; }
.journey-labels { fill:var(--muted); text-anchor:middle; font:11px "Onest",sans-serif; }
.file-journey figcaption { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }

@media (prefers-reduced-motion:no-preference) {
  .file-journey:is([data-flow-state="running"],[data-flow-state="paused"]) .journey-packet {
    animation:vg-file-packet 2400ms linear calc(var(--i) * 110ms) both;
  }
  .file-journey:is([data-flow-state="running"],[data-flow-state="paused"]) .journey-block {
    animation:vg-file-block 420ms cubic-bezier(.22,1,.36,1) calc(2000ms + var(--i) * 180ms) both;
    transform-box:fill-box; transform-origin:center;
  }
  .file-journey:is([data-flow-state="running"],[data-flow-state="paused"]) .journey-finish {
    animation:vg-file-finish 4800ms cubic-bezier(.22,1,.36,1) both;
    transform-box:fill-box; transform-origin:center;
  }
  .file-journey[data-flow-state="paused"] :is(.journey-packet,.journey-block,.journey-finish) { animation-play-state:paused; }
  .step-icon img { transition:transform 220ms cubic-bezier(.22,1,.36,1); }
  .step-icon[data-info="link"]:is(:hover,:focus-visible) img { transform:rotate(-12deg); }
  .step-icon[data-info="format"]:is(:hover,:focus-visible) img { transform:translateY(-3px) rotate(5deg); }
  .step-icon[data-info="file"]:is(:hover,:focus-visible) img { transform:translateY(4px); }
  @keyframes vg-file-packet {
    0% { opacity:0; transform:translate(0,0); }
    10% { opacity:1; }
    38% { transform:translate(75px,var(--lane)); }
    62% { transform:translate(125px,var(--lane)); }
    90% { opacity:1; }
    100% { opacity:0; transform:translate(194px,0); }
  }
  @keyframes vg-file-block {
    from { opacity:0; transform:translateY(4px) scale(.92); }
    to { opacity:1; transform:translateY(0) scale(1); }
  }
  @keyframes vg-file-finish {
    0%,80% { opacity:0; transform:translateY(4px) scale(.94); }
    90%,100% { opacity:1; transform:translateY(0) scale(1); }
  }
}
@media (max-width:480px) {
  .file-journey { margin-block:20px; }
  .journey-play { min-height:44px; padding-inline:12px; }
}