/* Annotated paragraphs and their figures. Loaded only by posts that set
   `[extra] figures = true` (templates/page.html). Markup: templates/shortcodes/annotate.html
   and templates/partials/figures/. Layout, arrows and the highlight: static/js/figures.js.

   Each annotation sets --an-c, its colour. Everything else is a theme variable, so the
   figures follow the light/dark toggle. One annotation at a time is `.is-on`: its box,
   arrow and figure light up in --an-c and only its figure animates. A paused figure holds
   the frame at --d (a negative delay set per figure), chosen to tell its story at a glance;
   that frame is also all that prefers-reduced-motion ever shows. */

/* ---------- Annotation: box, figure, arrow ---------- */

.post-content {
    position: relative;
    counter-reset: an;
}

.an {
    --an-line: color-mix(in srgb, var(--border) 40%, transparent);
    position: relative;
    margin: 1rem 0;
}

.an.is-on {
    --an-line: var(--an-c);
}

.an-text {
    margin-inline: -0.85rem;
    padding: 0.55rem 0.85rem;
    border: 1.5px dashed var(--an-line);
    border-radius: 6px;
    transition: border-color 0.25s, background-color 0.25s;
}

.an.is-on .an-text {
    background-color: color-mix(in srgb, var(--an-c) 7%, transparent);
}

.an-text > :first-child {
    margin-top: 0;
}

.an-text > :last-child {
    margin-bottom: 0;
}

/* Default (and no-JS) placement: under the text. Wide screens: html.an-wide, below. */
.an-fig {
    width: min(100%, 22rem);
    margin: 2.75rem auto 0;
    padding: 0.6rem 0.75rem 0.75rem;
    border: 1.5px dashed var(--an-line);
    border-radius: 8px;
    background-color: var(--bg);
    opacity: 0.55;
    transition: opacity 0.3s, border-color 0.25s, transform 0.3s;
}

.an.is-on .an-fig {
    opacity: 1;
    transform: translateY(-2px);
}

html.an-wide .an {
    position: static;
}

html.an-wide .an-fig {
    position: absolute;
    margin: 0;
}

.an-label {
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light);
}

.an-label::before {
    counter-increment: an;
    content: "Fig. " counter(an, decimal-leading-zero) " · ";
    color: var(--an-c);
}

.an-links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.an-link {
    --an-line: color-mix(in srgb, var(--border) 40%, transparent);
    fill: none;
    stroke: var(--an-line);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.25s;
}

.an-link.is-on {
    --an-line: var(--an-c);
}

.an-link path:first-child {
    stroke-dasharray: 4 5;
}

.an-link.is-on path:first-child {
    animation: an-march 0.9s linear infinite;
}

@keyframes an-march {
    to { stroke-dashoffset: -9; }
}

/* ---------- Figure drawing primitives ---------- */

.hf svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.hf text {
    font-family: var(--sans-font);
    font-size: 13px;
    fill: var(--text-light);
    text-anchor: middle;
}

.hf .hf-name {
    fill: var(--text);
    font-weight: 600;
}

.hf .hf-small {
    font-size: 11px;
}

.hf .hf-start {
    text-anchor: start;
}

.hf .hf-acc {
    fill: var(--an-c);
}

.hf .hf-q {
    font-size: 22px;
    font-weight: 700;
    fill: var(--an-c);
}

.hf .hf-dev {
    fill: var(--bg);
    stroke: var(--text);
    stroke-width: 1.75;
    stroke-linejoin: round;
}

.hf .hf-card {
    fill: var(--bg);
    stroke: var(--an-c);
    stroke-width: 1.75;
}

.hf .hf-wire {
    fill: none;
    stroke: var(--border);
    stroke-width: 1.5;
    opacity: 0.6;
}

.hf .hf-dash {
    stroke-dasharray: 4 5;
}

.hf .hf-ghost,
.hf .hf-lasso {
    fill: none;
    stroke: var(--text-light);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
}

.hf .hf-lasso {
    stroke: var(--an-c);
}

.hf .hf-ln {
    fill: none;
    stroke: var(--text-light);
    stroke-width: 3.5;
    stroke-linecap: round;
}

.hf .hf-ln-thin {
    stroke-width: 2.5;
}

.hf .hf-ln-accent {
    stroke: var(--an-c);
}

.hf .hf-pk,
.hf .hf-dot,
.hf .hf-cell-on,
.hf .hf-meter-fill,
.hf .hf-bar-acc {
    fill: var(--an-c);
}

.hf .hf-pk-reply,
.hf .hf-dot-off,
.hf .hf-drop,
.hf .hf-bar {
    fill: var(--text-light);
}

.hf .hf-bar-acc {
    fill: var(--an-c);
}

.hf .hf-bar-dim {
    opacity: 0.45;
}

.hf .hf-cell {
    fill: var(--text-light);
    opacity: 0.18;
}

.hf .hf-dim {
    fill: var(--bg);
}

.hf .hf-err,
.hf .hf-check,
.hf .hf-pause {
    fill: none;
    stroke: var(--an-c);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hf .hf-pause {
    stroke-width: 4;
}

.hf .hf-funnel,
.hf .hf-shackle {
    fill: none;
    stroke: var(--text);
    stroke-width: 1.75;
    stroke-linejoin: round;
}

.hf .hf-ring {
    fill: none;
    stroke: var(--an-c);
    stroke-width: 2;
}

.hf .hf-meter-track {
    fill: none;
    stroke: var(--text-light);
    stroke-width: 1.25;
}

.hf .hf-tf {
    transform-box: fill-box;
    transform-origin: center;
}

.hf .hf-tf-left {
    transform-box: fill-box;
    transform-origin: 0 50%;
}

/* Only the annotation in focus plays. */
.an:not(.is-on) .hf * {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hf * {
        animation-play-state: paused !important;
    }

    .an-link.is-on path:first-child {
        animation: none;
    }

    .an-text,
    .an-fig,
    .an-link {
        transition: none;
    }

    .an.is-on .an-fig {
        transform: none;
    }
}

/* ---------- hop: one session, many machines (9s) ---------- */

.hfh-card { animation: hfh-card 9s ease-in-out var(--d) infinite; }

@keyframes hfh-card {
    0%, 12% { transform: translate(0, 0); }
    24%, 40% { transform: translate(100px, -79px); }
    52%, 68% { transform: translate(213px, -1px); }
    80%, 100% { transform: translate(0, 0); }
}

/* ---------- anywhere: same session, every screen (6s) ---------- */

.hfa-new { animation: hfa-new 6s ease-out var(--d) infinite; }

@keyframes hfa-new {
    0%, 15% { transform: scaleX(0); }
    30%, 85% { transform: scaleX(1); }
    95%, 100% { transform: scaleX(0); }
}

/* ---------- remote: the phone is a window (10s) ---------- */

.hfr-prompt { animation: hfr-prompt 10s ease-in-out var(--d) infinite; }
.hfr-reply { animation: hfr-reply 10s ease-in-out var(--d) infinite; }
.hfr-newline { animation: hfr-newline 10s ease-out var(--d) infinite; }
.hfr-phoneline { animation: hfr-phoneline 10s ease-out var(--d) infinite; }
.hfr-dim { animation: hfr-dim 10s ease-in-out var(--d) infinite; }
.hfr-wire { animation: hfr-wire 10s ease-in-out var(--d) infinite; }
.hfr-cut { animation: hfr-cut 10s ease-in-out var(--d) infinite; }
.hfr-try { animation: hfr-try 10s ease-in-out var(--d) infinite; }
.hfr-x { animation: hfr-x 10s ease-in-out var(--d) infinite; }

@keyframes hfr-prompt {
    0%, 10% { transform: translateX(0); opacity: 0; }
    11% { transform: translateX(0); opacity: 1; }
    30% { transform: translateX(168px); opacity: 1; }
    31%, 100% { transform: translateX(168px); opacity: 0; }
}

@keyframes hfr-reply {
    0%, 40% { transform: translateX(0); opacity: 0; }
    41% { transform: translateX(0); opacity: 1; }
    58% { transform: translateX(-168px); opacity: 1; }
    59%, 100% { transform: translateX(-168px); opacity: 0; }
}

@keyframes hfr-newline {
    0%, 31% { transform: scaleX(0); }
    38%, 100% { transform: scaleX(1); }
}

@keyframes hfr-phoneline {
    0%, 58% { transform: scaleX(0); }
    63%, 100% { transform: scaleX(1); }
}

@keyframes hfr-dim {
    0%, 64% { opacity: 0; }
    70%, 92% { opacity: 0.85; }
    98%, 100% { opacity: 0; }
}

@keyframes hfr-wire {
    0%, 66% { opacity: 0.6; }
    72%, 92% { opacity: 0.08; }
    98%, 100% { opacity: 0.6; }
}

@keyframes hfr-cut {
    0%, 66% { opacity: 0; }
    72%, 92% { opacity: 0.7; }
    98%, 100% { opacity: 0; }
}

@keyframes hfr-try {
    0%, 72% { transform: translateX(0); opacity: 0; }
    73% { transform: translateX(0); opacity: 1; }
    81% { transform: translateX(145px); opacity: 1; }
    85%, 100% { transform: translateX(145px); opacity: 0; }
}

@keyframes hfr-x {
    0%, 80% { opacity: 0; }
    83%, 92% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

/* ---------- gap: local to cloud has no clean path (8s) ---------- */

.hfg-card { animation: hfg-card 8s ease-in-out var(--d) infinite; }
.hfg-q { animation: hfg-q 8s ease-in-out var(--d) infinite; }

@keyframes hfg-card {
    0%, 12% { transform: translate(0, 0); opacity: 1; }
    40%, 48% { transform: translate(88px, -68px); opacity: 1; }
    66% { transform: translate(88px, 4px); opacity: 0; }
    67%, 80% { transform: translate(0, 0); opacity: 0; }
    90%, 100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes hfg-q {
    0%, 38% { opacity: 0.35; }
    44%, 60% { opacity: 1; }
    70%, 100% { opacity: 0.35; }
}

/* ---------- env: copying the environment (9s) ---------- */

.hfe-c1 { animation: hfe-c1 9s ease-in-out var(--d) infinite; }
.hfe-c2 { animation: hfe-c2 9s ease-in-out var(--d) infinite; }
.hfe-c3 { animation: hfe-c3 9s ease-in-out var(--d) infinite; }
.hfe-k1 { animation: hfe-k1 9s ease-out var(--d) infinite; }
.hfe-k2 { animation: hfe-k2 9s ease-out var(--d) infinite; }
.hfe-k3 { animation: hfe-k3 9s ease-out var(--d) infinite; }

@keyframes hfe-c1 {
    0%, 8% { transform: translateX(0); opacity: 0; }
    9% { transform: translateX(0); opacity: 1; }
    20%, 88% { transform: translateX(180px); opacity: 1; }
    95%, 100% { transform: translateX(180px); opacity: 0; }
}

@keyframes hfe-c2 {
    0%, 24% { transform: translateX(0); opacity: 0; }
    25% { transform: translateX(0); opacity: 1; }
    36%, 88% { transform: translateX(180px); opacity: 1; }
    95%, 100% { transform: translateX(180px); opacity: 0; }
}

@keyframes hfe-c3 {
    0%, 40% { transform: translateX(0); opacity: 0; }
    41% { transform: translateX(0); opacity: 1; }
    52%, 88% { transform: translateX(180px); opacity: 1; }
    95%, 100% { transform: translateX(180px); opacity: 0; }
}

@keyframes hfe-k1 {
    0%, 20% { opacity: 0; }
    23%, 88% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes hfe-k2 {
    0%, 36% { opacity: 0; }
    39%, 88% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes hfe-k3 {
    0%, 52% { opacity: 0; }
    55%, 88% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

/* ---------- half: only half the problem (7s) ---------- */

.hfq-fill { animation: hfq-fill 7s ease-in-out var(--d) infinite; }
.hfq-check { animation: hfq-check 7s ease-out var(--d) infinite; }
.hfq-q { animation: hfq-q 1.6s ease-in-out var(--d) infinite alternate; }

@keyframes hfq-fill {
    0%, 8% { transform: scaleX(0); }
    40%, 88% { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
}

@keyframes hfq-check {
    0%, 40% { opacity: 0; }
    45%, 88% { opacity: 1; }
    94%, 100% { opacity: 0; }
}

@keyframes hfq-q {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* ---------- summary: the handoff prompt (9s) ---------- */

.hfs-full { animation: hfs-full 9s ease-in-out var(--d) infinite; }
.hfs-card { animation: hfs-card 9s ease-in-out var(--d) infinite; }
.hfs-ghost { animation: hfs-ghost 9s ease-in-out var(--d) infinite; }

@keyframes hfs-full {
    0%, 12% { transform: scaleY(1); opacity: 1; }
    32%, 90% { transform: scaleY(0.1); opacity: 0; }
    98%, 100% { transform: scaleY(1); opacity: 1; }
}

@keyframes hfs-card {
    0%, 14% { transform: translateX(0) scale(0); opacity: 0; }
    30%, 36% { transform: translateX(0) scale(1); opacity: 1; }
    58%, 90% { transform: translateX(196px) scale(1); opacity: 1; }
    96%, 100% { transform: translateX(196px) scale(1); opacity: 0; }
}

@keyframes hfs-ghost {
    0%, 60% { opacity: 0; }
    68%, 90% { opacity: 1; }
    96%, 100% { opacity: 0; }
}

/* ---------- lossy: paying to lose detail (8s) ---------- */

.hfl-src { animation: hfl-src 8s ease-in var(--d) infinite; }
.hfl-drops { animation: hfl-drops 8s ease-in var(--d) infinite; }
.hfl-kept { animation: hfl-kept 8s ease-out var(--d) infinite; }
.hfl-meter { animation: hfl-meter 8s ease-in-out var(--d) infinite; }

@keyframes hfl-src {
    0%, 8% { transform: translateX(0); opacity: 1; }
    30% { transform: translateX(70px); opacity: 0; }
    31% { transform: translateX(0); opacity: 0; }
    40%, 100% { transform: translateX(0); opacity: 1; }
}

@keyframes hfl-drops {
    0%, 20% { transform: translateY(-14px); opacity: 0; }
    24% { transform: translateY(-14px); opacity: 1; }
    46% { transform: translateY(30px); opacity: 0; }
    47%, 100% { transform: translateY(30px); opacity: 0; }
}

@keyframes hfl-kept {
    0%, 30% { transform: scaleX(0); }
    40%, 88% { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
}

@keyframes hfl-meter {
    0%, 8% { transform: scaleX(0); }
    40%, 90% { transform: scaleX(1); }
    97%, 100% { transform: scaleX(0); }
}

/* ---------- heap: snapshot a slice (10s) ---------- */

.hfm-lasso { animation: hfm-lasso 10s ease-in-out var(--d) infinite; }
.hfm-slice { animation: hfm-slice 10s ease-in-out var(--d) infinite; }

@keyframes hfm-lasso {
    0%, 6% { opacity: 0; }
    14%, 92% { opacity: 1; }
    98%, 100% { opacity: 0; }
}

@keyframes hfm-slice {
    0%, 18% { transform: translateX(0); opacity: 0; }
    22% { transform: translateX(0); opacity: 1; }
    48%, 90% { transform: translateX(172px); opacity: 1; }
    97%, 100% { transform: translateX(172px); opacity: 0; }
}

/* ---------- state: harness state is not model state (8s) ---------- */

.hfst-d1 { animation: hfst-d1 8s ease-in-out var(--d) infinite; }
.hfst-d2 { animation: hfst-d2 8s ease-in-out var(--d) infinite; }
.hfst-d3 { animation: hfst-d3 8s ease-in-out var(--d) infinite; }
.hfst-lock {
    transform-box: fill-box;
    transform-origin: 50% 0;
    animation: hfst-lock 8s ease-in-out var(--d) infinite;
}

.hfst-d1, .hfst-d2, .hfst-d3 {
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes hfst-d1 {
    0%, 6%, 22%, 100% { transform: scale(1); }
    14% { transform: scale(1.8); }
}

@keyframes hfst-d2 {
    0%, 20%, 36%, 100% { transform: scale(1); }
    28% { transform: scale(1.8); }
}

@keyframes hfst-d3 {
    0%, 34%, 50%, 100% { transform: scale(1); }
    42% { transform: scale(1.8); }
}

@keyframes hfst-lock {
    0%, 58%, 70%, 100% { transform: rotate(0); }
    61% { transform: rotate(-12deg); }
    64% { transform: rotate(10deg); }
    67% { transform: rotate(-5deg); }
}

/* ---------- resume: restart versus resume (9s) ---------- */

.hfu-a { animation: hfu-a 9s ease-in-out var(--d) infinite; }
.hfu-b { animation: hfu-b 9s ease-in-out var(--d) infinite; }
.hfu-mark { animation: hfu-mark 9s ease-out var(--d) infinite; }

@keyframes hfu-a {
    0%, 5% { transform: scaleX(0); }
    30%, 90% { transform: scaleX(1); }
    97%, 100% { transform: scaleX(0); }
}

@keyframes hfu-b {
    0%, 45% { transform: scaleX(0); }
    80%, 90% { transform: scaleX(1); }
    97%, 100% { transform: scaleX(0); }
}

@keyframes hfu-mark {
    0%, 30% { opacity: 0; }
    34%, 90% { opacity: 1; }
    97%, 100% { opacity: 0; }
}

/* ---------- snapshot: push the session itself (12s) ---------- */

.hfn-card { animation: hfn-card 12s ease-in-out var(--d) infinite; }
.hfn-ring { animation: hfn-ring 1.75s ease-out var(--d) infinite; }
.hfn-dim { animation: hfn-dim 12s ease-in-out var(--d) infinite; }
.hfn-pwire { animation: hfn-pwire 12s ease-in-out var(--d) infinite; }
.hfn-ask { animation: hfn-ask 12s ease-in-out var(--d) infinite; }
.hfn-answer { animation: hfn-answer 12s ease-in-out var(--d) infinite; }

@keyframes hfn-card {
    0%, 20% { transform: translate(0, 0); }
    30%, 64% { transform: translate(104px, -86px); }
    74%, 100% { transform: translate(0, 0); }
}

@keyframes hfn-ring {
    0% { transform: scale(0.9); opacity: 0.5; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes hfn-dim {
    0%, 28% { opacity: 0; }
    33%, 61% { opacity: 0.85; }
    66%, 100% { opacity: 0; }
}

@keyframes hfn-pwire {
    0%, 31% { opacity: 0.15; }
    35%, 61% { opacity: 0.8; }
    65%, 100% { opacity: 0.15; }
}

@keyframes hfn-ask {
    0%, 37% { transform: translate(0, 0); opacity: 0; }
    38% { transform: translate(0, 0); opacity: 1; }
    45% { transform: translate(-72px, -36px); opacity: 1; }
    46%, 100% { transform: translate(-72px, -36px); opacity: 0; }
}

@keyframes hfn-answer {
    0%, 50% { transform: translate(0, 0); opacity: 0; }
    51% { transform: translate(0, 0); opacity: 1; }
    58% { transform: translate(72px, 36px); opacity: 1; }
    59%, 100% { transform: translate(72px, 36px); opacity: 0; }
}

/* ---------- build: making an agent pausable (10s) ---------- */

.hfb-1 { animation: hfb-1 10s ease-out var(--d) infinite; }
.hfb-2 { animation: hfb-2 10s ease-out var(--d) infinite; }
.hfb-3 { animation: hfb-3 10s ease-out var(--d) infinite; }
.hfb-4 { animation: hfb-4 10s ease-out var(--d) infinite; }
.hfb-5 { animation: hfb-5 10s ease-out var(--d) infinite; }

@keyframes hfb-1 { 0%, 4% { opacity: 0; } 8%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfb-2 { 0%, 18% { opacity: 0; } 22%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfb-3 { 0%, 32% { opacity: 0; } 36%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfb-4 { 0%, 46% { opacity: 0; } 50%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfb-5 { 0%, 60% { opacity: 0; } 64%, 90% { opacity: 1; } 96%, 100% { opacity: 0; } }

/* ---------- pages: what goes in the snapshot (10s) ---------- */

.hfp-stack { animation: hfp-stack 10s ease-in-out var(--d) infinite; }
.hfp-copy {
    transform-box: fill-box;
    transform-origin: center;
    animation: hfp-copy 10s ease-in-out var(--d) infinite;
}
.hfp-size { animation: hfp-size 10s ease-in-out var(--d) infinite; }

@keyframes hfp-stack {
    0%, 10% { transform: translate(0, 0); opacity: 1; }
    28% { transform: translate(-118px, 72px) scale(0.82, 0.44); opacity: 0; }
    29%, 92% { transform: translate(0, 0); opacity: 0; }
    100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes hfp-copy {
    0%, 30% { transform: translate(0, 0) scale(1); opacity: 0; }
    36% { transform: translate(0, 0) scale(1); opacity: 1; }
    62% { transform: translate(169px, 45px) scale(0.28); opacity: 1; }
    66%, 100% { transform: translate(169px, 45px) scale(0.28); opacity: 0; }
}

@keyframes hfp-size {
    0%, 62% { opacity: 0; }
    68%, 92% { opacity: 1; }
    98%, 100% { opacity: 0; }
}

/* ---------- slices: paused mid-loop, resumed elsewhere (10s) ---------- */

.hfs4-p1 { animation: hfs4-p1 10s linear var(--d) infinite; }
.hfs4-p2 { animation: hfs4-p2 10s linear var(--d) infinite; }
.hfs4-p3 { animation: hfs4-p3 10s linear var(--d) infinite; }
.hfs4-p4 { animation: hfs4-p4 10s linear var(--d) infinite; }
.hfs4-f1 { animation: hfs4-f1 10s linear var(--d) infinite; }
.hfs4-f2 { animation: hfs4-f2 10s linear var(--d) infinite; }
.hfs4-f3 { animation: hfs4-f3 10s linear var(--d) infinite; }
.hfs4-llm { animation: hfs4-llm 10s linear var(--d) infinite; }
.hfs4-bar { animation: hfs4-bar 10s ease-in-out var(--d) infinite; }

@keyframes hfs4-p1 { 0%, 2% { opacity: 0; } 4%, 20% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes hfs4-p2 { 0%, 24% { opacity: 0; } 26%, 42% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes hfs4-p3 { 0%, 46% { opacity: 0; } 48%, 64% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes hfs4-p4 { 0%, 68% { opacity: 0; } 70%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfs4-f1 { 0%, 20% { opacity: 0; } 22%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfs4-f2 { 0%, 42% { opacity: 0; } 44%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfs4-f3 { 0%, 64% { opacity: 0; } 66%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes hfs4-llm { 0%, 80% { opacity: 0; } 83%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes hfs4-bar {
    0%, 4% { transform: scaleX(0); }
    20%, 26% { transform: scaleX(0.3); }
    42%, 48% { transform: scaleX(0.6); }
    64%, 70% { transform: scaleX(0.9); }
    80%, 92% { transform: scaleX(1); }
    98%, 100% { transform: scaleX(0); }
}

/* ---------- fork: copy the file, fork the agent (8s) ---------- */

.hf .hf-branch {
    fill: none;
    stroke: var(--an-c);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
}

.hf .hf-branch-b {
    stroke: var(--text-light);
}

.hfk-a { animation: hfk-draw 8s ease-in-out var(--d) infinite; }
.hfk-b { animation: hfk-draw 8s ease-in-out calc(var(--d) - 0.4s) infinite; }
.hfk-t { animation: hfk-t 8s ease-in-out var(--d) infinite; }

@keyframes hfk-draw {
    0%, 10% { stroke-dashoffset: 1; }
    45%, 90% { stroke-dashoffset: 0; }
    98%, 100% { stroke-dashoffset: 1; }
}

@keyframes hfk-t {
    0%, 42% { opacity: 0; }
    50%, 90% { opacity: 1; }
    98%, 100% { opacity: 0; }
}

/* ---------- crossarch: Mac to Linux and back (10s) ---------- */

.hfx-card { animation: hfx-card 10s ease-in-out var(--d) infinite; }
.hfx-test { animation: hfx-test 10s ease-out var(--d) infinite; }
.hfx-run { animation: hfx-run 10s linear var(--d) infinite; }

@keyframes hfx-card {
    0%, 10% { transform: translate(0, 0); }
    30%, 62% { transform: translate(188px, 0); }
    82%, 100% { transform: translate(0, 0); }
}

@keyframes hfx-test {
    0%, 32% { transform: scaleX(0); }
    52%, 62% { transform: scaleX(1); }
    68%, 100% { transform: scaleX(0); }
}

@keyframes hfx-run {
    0%, 32% { opacity: 0.3; }
    36%, 60% { opacity: 1; }
    66%, 100% { opacity: 0.3; }
}