/* Native, variant-scoped article hero components. */

  /* ---- progress ---------------------------------------------------- */

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .track {
    position: relative;
    block-size: 6px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--fg) 10%, transparent);
    overflow: hidden;
  }

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .fill {
    block-size: 100%;
    inline-size: 100%;
    border-radius: inherit;
    background: var(--fg);
    transform-origin: 0 50%;
    scale: 1 1;
  }

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .tick {
    position: absolute;
    inset-block: -3px;
    inset-inline-start: var(--at);
    inline-size: 1px;
    background: var(--bg-sunken);
  }

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .scale {
    position: relative;
    margin-block-start: 0.6rem;
    font-family: var(--face-mono);
    font-size: var(--step--1);
    color: var(--fg-ghost);
  }

  /* Pinned under the tick on the track rather than spaced evenly with the
	   other label, so the number sits where the mark is. */
  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .at {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--at);
    transform: translateX(-50%);
    color: var(--fg-faint);
  }

  /* ---- log --------------------------------------------------------- */

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .log {
    display: grid;
    gap: 0.35rem;
    font-family: var(--face-mono);
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--fg-faint);
  }

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .log__line {
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .log__line:nth-child(odd) {
    color: var(--fg-muted);
  }

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .log__caret {
    inline-size: 0.5rem;
    block-size: 1em;
    background: var(--fg-ghost);
  }

  /* ---- grid -------------------------------------------------------- */

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .gridplay {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 3fr;
    gap: 6px;
  }

  .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .cell {
    block-size: 1.5rem;
    border-radius: 4px;
    background: color-mix(in oklch, var(--fg) 9%, transparent);
  }

  /* ---- motion ------------------------------------------------------ */

  @media (prefers-reduced-motion: no-preference) {
    /* Sprints to 95%, then spends the rest of the loop covering the last
		   five — the whole argument of the post, in one bar. */
    .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .fill {
      animation: legacy-fill 9s var(--ease) infinite;
    }

    @keyframes legacy-fill {
      0% {
        scale: 0 1;
      }
      12% {
        scale: 0.95 1;
      }
      88% {
        scale: 1 1;
      }
      96%,
      100% {
        scale: 1 1;
        opacity: 1;
      }
    }

    .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .log__line {
      animation: legacy-log-in 7s steps(1) infinite;
      animation-delay: calc(var(--i) * 700ms);
      opacity: 0;
    }

    @keyframes legacy-log-in {
      0% {
        opacity: 0;
      }
      6%,
      92% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }

    .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .log__caret {
      animation: legacy-caret-blink 1.1s steps(1) infinite;
    }

    @keyframes legacy-caret-blink {
      0%,
      50% {
        opacity: 1;
      }
      50.01%,
      100% {
        opacity: 0;
      }
    }

    .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .gridplay {
      animation: legacy-reflow 8s var(--ease) infinite alternate;
    }

    @keyframes legacy-reflow {
      0% {
        grid-template-columns: 2fr 1fr 1fr 3fr;
      }
      50% {
        grid-template-columns: 1fr 3fr 2fr 1fr;
      }
      100% {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    }

    .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .cell {
      animation: legacy-cell-pulse 8s var(--ease) infinite alternate;
      animation-delay: calc(var(--i) * 90ms);
    }

    @keyframes legacy-cell-pulse {
      from {
        background: color-mix(in oklch, var(--fg) 6%, transparent);
      }
      to {
        background: color-mix(in oklch, var(--fg) 14%, transparent);
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Held at the state that carries the point. */
    .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .fill {
      scale: 0.95 1;
    }

    .post-hero:is([data-variant="progress"],[data-variant="log"],[data-variant="grid"]) .log__line {
      opacity: 1;
    }
  }



  .post-hero[data-variant="branch"] .branch {
    inline-size: 100%;
    block-size: auto;
    stroke: var(--fg-ghost);
    stroke-width: 1.25;
    stroke-linecap: round;
  }

  .post-hero[data-variant="branch"] .trunk {
    stroke: var(--fg-faint);
  }

  .post-hero[data-variant="branch"] .node {
    fill: var(--bg-sunken);
    stroke: var(--fg-faint);
  }

  .post-hero[data-variant="branch"] .node--root {
    fill: var(--fg-faint);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="branch"] .fork,
    .post-hero[data-variant="branch"] .trunk {
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: branch-draw 7s var(--ease) infinite;
    }

    .post-hero[data-variant="branch"] .trunk {
      animation-delay: 0s;
    }
    .post-hero[data-variant="branch"] .fork--up {
      animation-delay: 0.7s;
    }
    .post-hero[data-variant="branch"] .fork--down {
      animation-delay: 1.5s;
    }
    .post-hero[data-variant="branch"] .fork--far {
      animation-delay: 2.3s;
    }

    @keyframes branch-draw {
      0% {
        stroke-dashoffset: 200;
      }
      22%,
      82% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 0;
        opacity: 0;
      }
    }

    .post-hero[data-variant="branch"] .node {
      opacity: 0;
      animation: branch-pop 7s var(--ease) infinite;
    }

    .post-hero[data-variant="branch"] .node--root {
      animation-delay: 0.6s;
    }
    .post-hero[data-variant="branch"] .node--a {
      animation-delay: 1.9s;
    }
    .post-hero[data-variant="branch"] .node--b {
      animation-delay: 2.5s;
    }
    .post-hero[data-variant="branch"] .node--c {
      animation-delay: 3.1s;
    }

    @keyframes branch-pop {
      0%,
      4% {
        opacity: 0;
        r: 0;
      }
      12%,
      82% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }



  .post-hero[data-variant="card"] .feed {
    display: grid;
    gap: 0.6rem;
  }

  .post-hero[data-variant="card"] .row {
    block-size: 6px;
    inline-size: var(--w);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--fg) 12%, transparent);
  }

  .post-hero[data-variant="card"] .ad {
    display: grid;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    background: color-mix(in oklch, var(--fg) 3%, transparent);
  }

  .post-hero[data-variant="card"] .tag {
    font-family: var(--face-mono);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-faint);
  }

  .post-hero[data-variant="card"] .row--in {
    background: color-mix(in oklch, var(--fg) 20%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* The card's border and label fade out while it stays in place —
		   the ad does not leave, it just stops looking like one. */
    .post-hero[data-variant="card"] .ad {
      animation: card-blend 8s var(--ease) infinite;
    }

    @keyframes card-blend {
      0%,
      18% {
        border-color: var(--rule-strong);
        background: color-mix(in oklch, var(--fg) 3%, transparent);
        padding-inline: 0.7rem;
      }
      55%,
      82% {
        border-color: transparent;
        background: transparent;
        padding-inline: 0;
      }
      100% {
        border-color: var(--rule-strong);
        background: color-mix(in oklch, var(--fg) 3%, transparent);
        padding-inline: 0.7rem;
      }
    }

    .post-hero[data-variant="card"] .tag {
      animation: card-fade 8s var(--ease) infinite;
    }

    @keyframes card-fade {
      0%,
      18% {
        opacity: 1;
      }
      50%,
      82% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  }



  .post-hero[data-variant="compass"] .compass {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .post-hero[data-variant="compass"] .dial {
    position: relative;
    flex: 1;
    aspect-ratio: 1;
    max-inline-size: 3rem;
    display: grid;
    place-items: center;
    border: 1px dashed var(--rule);
    border-radius: 50%;
    rotate: var(--from);
  }

  .post-hero[data-variant="compass"] .needle {
    inline-size: 1.5px;
    block-size: 58%;
    background: linear-gradient(
      to bottom,
      var(--fg-faint) 0 50%,
      color-mix(in oklch, var(--fg) 12%, transparent) 50% 100%
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="compass"] .dial {
      animation: compass-settle 7s var(--ease-out-quart) infinite;
      animation-delay: calc(var(--i) * 110ms);
    }

    @keyframes compass-settle {
      0% {
        rotate: var(--from);
      }
      35%,
      85% {
        rotate: 0deg;
      }
      100% {
        rotate: var(--from);
      }
    }
  }



  .post-hero[data-variant="compress"] .compress {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(0.75rem, 4vw, 1.5rem);
  }

  .post-hero[data-variant="compress"] .side {
    display: grid;
    gap: 0.4rem;
  }

  .post-hero[data-variant="compress"] .line {
    block-size: 5px;
    inline-size: var(--w);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--fg) 13%, transparent);
  }

  .post-hero[data-variant="compress"] .chip {
    block-size: 9px;
    inline-size: 100%;
    border-radius: 3px;
    background: color-mix(in oklch, var(--fg) 30%, transparent);
  }

  .post-hero[data-variant="compress"] .arrow {
    font-family: var(--face-mono);
    font-size: var(--step-0);
    color: var(--fg-ghost);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="compress"] .line {
      transform-origin: 0 50%;
      animation: compress-squeeze 6s var(--ease) infinite alternate;
      animation-delay: calc(var(--i) * 70ms);
    }

    @keyframes compress-squeeze {
      0%,
      30% {
        scale: 1 1;
        opacity: 1;
      }
      70%,
      100% {
        scale: 0.55 1;
        opacity: 0.45;
      }
    }

    .post-hero[data-variant="compress"] .chip {
      animation: compress-densify 6s var(--ease) infinite alternate;
      animation-delay: calc(var(--i) * 90ms);
    }

    @keyframes compress-densify {
      0%,
      30% {
        opacity: 0.25;
        scale: 1 0.6;
      }
      70%,
      100% {
        opacity: 1;
        scale: 1 1;
      }
    }

    .post-hero[data-variant="compress"] .arrow {
      animation: compress-nudge 6s var(--ease) infinite alternate;
    }

    @keyframes compress-nudge {
      0%,
      30% {
        transform: translateX(-2px);
        opacity: 0.5;
      }
      70%,
      100% {
        transform: translateX(2px);
        opacity: 1;
      }
    }
  }



  .post-hero[data-variant="crawl"] .crawl {
    inline-size: 100%;
    block-size: auto;
  }

  .post-hero[data-variant="crawl"] .wire {
    stroke: var(--rule-strong);
    stroke-width: 1;
  }

  .post-hero[data-variant="crawl"] .src {
    fill: color-mix(in oklch, var(--fg) 10%, transparent);
    stroke: var(--rule-strong);
    stroke-width: 1;
  }

  .post-hero[data-variant="crawl"] .sink {
    fill: var(--fg);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* A short dash runs the length of each wire — content moving down
		   into the model, one source at a time. */
    .post-hero[data-variant="crawl"] .wire {
      stroke-dasharray: 10 130;
      animation: crawl-flow 4.5s linear infinite;
      animation-delay: calc(var(--i) * -640ms);
    }

    @keyframes crawl-flow {
      from {
        stroke-dashoffset: 140;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    .post-hero[data-variant="crawl"] .src {
      animation: crawl-dim 4.5s var(--ease) infinite;
      animation-delay: calc(var(--i) * -640ms);
    }

    @keyframes crawl-dim {
      0%,
      100% {
        fill: color-mix(in oklch, var(--fg) 10%, transparent);
      }
      15% {
        fill: color-mix(in oklch, var(--fg) 28%, transparent);
      }
    }
  }



  .post-hero[data-variant="gate"] .gate {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: clamp(0.75rem, 4vw, 1.4rem);
  }

  .post-hero[data-variant="gate"] .lines {
    display: grid;
    gap: 0.45rem;
  }

  .post-hero[data-variant="gate"] .line {
    block-size: 6px;
    inline-size: var(--w);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--fg) 14%, transparent);
  }

  .post-hero[data-variant="gate"] .wall {
    inline-size: 2px;
    block-size: 4.5rem;
    background: repeating-linear-gradient(
      to bottom,
      var(--fg-faint) 0 6px,
      transparent 6px 11px
    );
  }

  .post-hero[data-variant="gate"] .bots {
    display: grid;
    gap: 0.5rem;
  }

  .post-hero[data-variant="gate"] .bot {
    inline-size: 12px;
    block-size: 12px;
    border-radius: 3px;
    border: 1px solid var(--rule-strong);
    background: var(--bg);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Each crawler edges up to the wall and is turned back. */
    .post-hero[data-variant="gate"] .bot {
      animation: gate-probe 4.2s var(--ease) infinite;
      animation-delay: calc(var(--i) * 420ms);
    }

    @keyframes gate-probe {
      0%,
      100% {
        transform: translateX(0);
        opacity: 0.55;
      }
      35% {
        transform: translateX(-9px);
        opacity: 1;
      }
      55% {
        transform: translateX(-9px);
        opacity: 1;
      }
      75% {
        transform: translateX(3px);
        opacity: 0.4;
      }
    }

    .post-hero[data-variant="gate"] .wall {
      animation: gate-hold 4.2s var(--ease) infinite;
    }

    @keyframes gate-hold {
      0%,
      100% {
        background-color: transparent;
      }
      45% {
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--fg) 6%, transparent);
      }
    }
  }



  .post-hero[data-variant="layers"] .layers {
    display: grid;
    gap: 0.4rem;
    justify-items: center;
  }

  .post-hero[data-variant="layers"] .tier,
  .post-hero[data-variant="layers"] .core {
    display: grid;
    place-items: center;
    inline-size: 100%;
    max-inline-size: 34rem;
    block-size: 1.5rem;
  }

  .post-hero[data-variant="layers"] .tier {
    background: color-mix(in oklch, var(--fg) 9%, transparent);
    /* Scaled from the middle, so both stacks read as reaching outward. */
    transform-origin: 50% 50%;
    scale: 0.34 1;
  }

  .post-hero[data-variant="layers"] .core {
    background: transparent;
    border: 1px solid var(--rule-strong);
    /* Deliberately never animated: the code band is the fixed thing. */
    inline-size: 42%;
    max-inline-size: 14rem;
  }

  .post-hero[data-variant="layers"] .name {
    font-family: var(--face-mono);
    font-size: 0.6rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-ghost);
    white-space: nowrap;
  }

  .post-hero[data-variant="layers"] .core .name {
    color: var(--fg-faint);
    letter-spacing: 0.12em;
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="layers"] .tier {
      animation: layers-reach 7s var(--ease) infinite alternate;
      /* Tiers further from the code band start later and travel further. */
      animation-delay: calc(var(--i) * 130ms);
    }

    @keyframes layers-reach {
      from {
        scale: 0.34 1;
      }
      to {
        scale: calc(0.46 + var(--i) * 0.18) 1;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Held wide: the still frame has to show the reach, not the start line. */
    .post-hero[data-variant="layers"] .tier {
      scale: calc(0.46 + var(--i) * 0.18) 1;
    }
  }



  .post-hero[data-variant="orbit"] .orbit {
    position: relative;
    display: grid;
    place-items: center;
    block-size: 9rem;
  }

  .post-hero[data-variant="orbit"] .ring {
    position: absolute;
    border: 1px dashed var(--rule);
    border-radius: 50%;
    display: grid;
    place-items: center;
  }

  .post-hero[data-variant="orbit"] .ring--1 {
    inline-size: 4.5rem;
    block-size: 4.5rem;
  }
  .post-hero[data-variant="orbit"] .ring--2 {
    inline-size: 7rem;
    block-size: 7rem;
  }
  .post-hero[data-variant="orbit"] .ring--3 {
    inline-size: 9.5rem;
    block-size: 9.5rem;
  }

  /* Pinned to the top of its ring, so spinning the ring carries it round. */
  .post-hero[data-variant="orbit"] .sat {
    position: absolute;
    inset-block-start: -3px;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--fg-faint);
  }

  .post-hero[data-variant="orbit"] .core {
    inline-size: 12px;
    block-size: 12px;
    border-radius: 50%;
    background: var(--fg);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="orbit"] .ring {
      animation: orbit-spin linear infinite;
    }

    .post-hero[data-variant="orbit"] .ring--1 {
      animation-duration: 9s;
    }
    .post-hero[data-variant="orbit"] .ring--2 {
      animation-duration: 15s;
      animation-direction: reverse;
    }
    .post-hero[data-variant="orbit"] .ring--3 {
      animation-duration: 22s;
    }

    @keyframes orbit-spin {
      to {
        rotate: 1turn;
      }
    }

    .post-hero[data-variant="orbit"] .core {
      animation: orbit-throb 3.4s var(--ease) infinite alternate;
    }

    @keyframes orbit-throb {
      to {
        box-shadow: 0 0 0 7px color-mix(in oklch, var(--fg) 7%, transparent);
      }
    }
  }



  .post-hero[data-variant="polish"] .polish {
    inline-size: 100%;
    block-size: auto;
  }

  .post-hero[data-variant="polish"] .rough {
    stroke: var(--rule-strong);
    stroke-width: 1.25;
    stroke-linejoin: miter;
  }

  .post-hero[data-variant="polish"] .smooth {
    stroke: var(--fg);
    stroke-width: 1.5;
    stroke-linecap: round;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* The finished line draws itself over the draft, then lets the draft
		   show again — the last pass, on a loop. */
    .post-hero[data-variant="polish"] .smooth {
      stroke-dasharray: 340;
      animation: polish-refine 7s var(--ease) infinite;
    }

    @keyframes polish-refine {
      0% {
        stroke-dashoffset: 340;
      }
      35%,
      78% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 340;
      }
    }

    .post-hero[data-variant="polish"] .rough {
      animation: polish-recede 7s var(--ease) infinite;
    }

    @keyframes polish-recede {
      0%,
      10% {
        opacity: 1;
      }
      45%,
      78% {
        opacity: 0.25;
      }
      100% {
        opacity: 1;
      }
    }
  }



  .post-hero[data-variant="predict"] .predict {
    position: relative;
    display: grid;
    gap: 0.75rem;
  }

  .post-hero[data-variant="predict"] .row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .post-hero[data-variant="predict"] .done {
    block-size: 1.5rem;
    inline-size: 38%;
    border-radius: 5px;
    background: color-mix(in oklch, var(--fg) 20%, transparent);
  }

  .post-hero[data-variant="predict"] .done--short {
    inline-size: 24%;
  }

  .post-hero[data-variant="predict"] .ghost {
    block-size: 1.5rem;
    flex: 1;
    border-radius: 5px;
    border: 1px dashed var(--rule-strong);
  }

  .post-hero[data-variant="predict"] .cursor {
    position: absolute;
    inset-block-start: 0.4rem;
    inset-inline-start: 42%;
    inline-size: 7px;
    block-size: 7px;
    border-radius: 50%;
    background: var(--fg);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* The suggestion the cursor is heading for fills in just before it
		   arrives — the guess lands first. */
    .post-hero[data-variant="predict"] .ghost {
      animation: predict-guess 6s var(--ease) infinite;
      animation-delay: calc(var(--i) * 500ms);
    }

    @keyframes predict-guess {
      0%,
      30% {
        background: transparent;
        border-color: var(--rule-strong);
      }
      45%,
      62% {
        background: color-mix(in oklch, var(--fg) 11%, transparent);
        border-color: transparent;
      }
      80%,
      100% {
        background: transparent;
        border-color: var(--rule-strong);
      }
    }

    .post-hero[data-variant="predict"] .cursor {
      animation: predict-reach 6s var(--ease) infinite;
    }

    @keyframes predict-reach {
      0%,
      100% {
        inset-inline-start: 42%;
        inset-block-start: 0.4rem;
      }
      40% {
        inset-inline-start: 66%;
        inset-block-start: 0.4rem;
      }
      70% {
        inset-inline-start: 54%;
        inset-block-start: 2.7rem;
      }
    }
  }



  .post-hero[data-variant="pulse"] .pulse {
    inline-size: 100%;
    block-size: auto;
  }

  .post-hero[data-variant="pulse"] .flat {
    stroke: var(--rule);
    stroke-width: 1;
    stroke-dasharray: 2 4;
  }

  .post-hero[data-variant="pulse"] .trace {
    stroke: var(--fg-faint);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="pulse"] .trace {
      stroke-dasharray: 460;
      animation: pulse-beat 3.6s linear infinite;
    }

    @keyframes pulse-beat {
      from {
        stroke-dashoffset: 460;
      }
      to {
        stroke-dashoffset: -460;
      }
    }
  }



  .post-hero[data-variant="reel"] .reel {
    display: grid;
    gap: 0.4rem;
    overflow: hidden;
    /* Fades the strip out at both edges so it reads as running past. */
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }

  .post-hero[data-variant="reel"] .strip {
    display: flex;
    gap: 0.4rem;
    inline-size: max-content;
  }

  .post-hero[data-variant="reel"] .frame {
    inline-size: 4.2rem;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--rule);
    background: color-mix(in oklch, var(--fg) 7%, transparent);
  }

  .post-hero[data-variant="reel"] .perf {
    display: flex;
    gap: 0.4rem;
    inline-size: max-content;
  }

  .post-hero[data-variant="reel"] .perf span {
    inline-size: 4.2rem;
    block-size: 4px;
    border-radius: 2px;
    background: color-mix(in oklch, var(--fg) 9%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="reel"] .strip,
    .post-hero[data-variant="reel"] .perf {
      /* One frame plus one gap — the loop is seamless because the
			   travel is exactly the repeat distance. */
      animation: reel-run 2.4s linear infinite;
    }

    @keyframes reel-run {
      to {
        transform: translateX(calc(-1 * (4.2rem + 0.4rem)));
      }
    }

    .post-hero[data-variant="reel"] .frame {
      animation: reel-flick 4.8s steps(1) infinite;
      animation-delay: calc(var(--i) * 240ms);
    }

    @keyframes reel-flick {
      0%,
      70% {
        background: color-mix(in oklch, var(--fg) 7%, transparent);
      }
      72%,
      84% {
        background: color-mix(in oklch, var(--fg) 20%, transparent);
      }
      86%,
      100% {
        background: color-mix(in oklch, var(--fg) 7%, transparent);
      }
    }
  }



  .post-hero[data-variant="route"] .route {
    inline-size: 100%;
    block-size: auto;
  }

  .post-hero[data-variant="route"] .ridge {
    stroke: var(--fg-faint);
    stroke-width: 1.25;
    stroke-linejoin: round;
    stroke-linecap: round;
  }

  .post-hero[data-variant="route"] .fill {
    fill: color-mix(in oklch, var(--fg) 7%, transparent);
  }

  .post-hero[data-variant="route"] .base {
    stroke: var(--rule);
    stroke-width: 1;
    stroke-dasharray: 2 4;
  }

  .post-hero[data-variant="route"] .rider {
    fill: var(--fg);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="route"] .ridge {
      stroke-dasharray: 420;
      animation: route-trace 9s linear infinite;
    }

    @keyframes route-trace {
      from {
        stroke-dashoffset: 420;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
  }

  /* Without motion the profile is still a readable silhouette; the rider
	   would otherwise sit frozen at the start line, so it goes. */
  @media (prefers-reduced-motion: reduce) {
    .post-hero[data-variant="route"] .rider {
      display: none;
    }
  }



  .post-hero[data-variant="sentiment"] .sentiment {
    display: grid;
    gap: 0.75rem;
  }

  .post-hero[data-variant="sentiment"] .pair {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    align-items: center;
    gap: 0.75rem;
  }

  .post-hero[data-variant="sentiment"] .key {
    font-family: var(--face-mono);
    font-size: var(--step--1);
    color: var(--fg-ghost);
    text-align: end;
  }

  .post-hero[data-variant="sentiment"] .track {
    block-size: 1.1rem;
    background: color-mix(in oklch, var(--fg) 5%, transparent);
  }

  .post-hero[data-variant="sentiment"] .bar {
    display: block;
    block-size: 100%;
    transform-origin: 0 50%;
  }

  .post-hero[data-variant="sentiment"] .bar--say {
    inline-size: 32%;
    background: color-mix(in oklch, var(--fg) 20%, transparent);
  }

  .post-hero[data-variant="sentiment"] .bar--use {
    inline-size: 88%;
    background: var(--fg-faint);
  }

  .post-hero[data-variant="sentiment"] .rule {
    border-block-start: 1px dashed var(--rule);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="sentiment"] .bar {
      animation: sentiment-swell 6.5s var(--ease) infinite alternate;
    }

    .post-hero[data-variant="sentiment"] .bar--use {
      animation-delay: 300ms;
    }

    @keyframes sentiment-swell {
      from {
        scale: 0.15 1;
      }
      to {
        scale: 1 1;
      }
    }
  }



  .post-hero[data-variant="shrink"] .shrink {
    display: grid;
    gap: 0.6rem;
  }

  .post-hero[data-variant="shrink"] .bar {
    display: flex;
    block-size: 1.6rem;
    overflow: hidden;
    border: 1px solid var(--rule);
  }

  .post-hero[data-variant="shrink"] .seg {
    display: grid;
    place-items: center;
    inline-size: var(--w);
    border-inline-end: 1px solid var(--rule);
    font-family: var(--face-mono);
    font-size: 0.6rem;
    color: var(--fg-faint);
    overflow: hidden;
  }

  .post-hero[data-variant="shrink"] .seg:last-child {
    border-inline-end: 0;
  }

  .post-hero[data-variant="shrink"] .seg--js {
    background: color-mix(in oklch, var(--fg) 20%, transparent);
  }
  .post-hero[data-variant="shrink"] .seg--css {
    background: color-mix(in oklch, var(--fg) 13%, transparent);
  }
  .post-hero[data-variant="shrink"] .seg--img {
    background: color-mix(in oklch, var(--fg) 9%, transparent);
  }
  .post-hero[data-variant="shrink"] .seg--html {
    background: color-mix(in oklch, var(--fg) 5%, transparent);
  }

  .post-hero[data-variant="shrink"] .k {
    white-space: nowrap;
  }

  .post-hero[data-variant="shrink"] .scale {
    display: flex;
    justify-content: space-between;
    font-family: var(--face-mono);
    font-size: var(--step--1);
    color: var(--fg-ghost);
  }

  @media (prefers-reduced-motion: no-preference) {
    /* The script segment gives up most of its width; the markup that was
		   always doing the work ends up holding the bar. */
    .post-hero[data-variant="shrink"] .seg--js {
      animation: shrink-cut 8s var(--ease) infinite alternate;
    }

    @keyframes shrink-cut {
      from {
        inline-size: 46%;
      }
      to {
        inline-size: 6%;
      }
    }

    .post-hero[data-variant="shrink"] .seg--html {
      animation: shrink-keep 8s var(--ease) infinite alternate;
    }

    @keyframes shrink-keep {
      from {
        inline-size: 12%;
      }
      to {
        inline-size: 52%;
      }
    }
  }



  .post-hero[data-variant="spark"] .spark {
    display: grid;
    gap: 1rem;
  }

  .post-hero[data-variant="spark"] .prompt {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding-block-end: 0.75rem;
    border-block-end: 1px dashed var(--rule);
    font-family: var(--face-mono);
    font-size: var(--step--1);
    color: var(--fg-muted);
  }

  .post-hero[data-variant="spark"] .chev {
    color: var(--fg-ghost);
  }

  .post-hero[data-variant="spark"] .typed {
    block-size: 6px;
    inline-size: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--fg) 22%, transparent);
  }

  .post-hero[data-variant="spark"] .caret {
    inline-size: 0.45rem;
    block-size: 1em;
    background: var(--fg-ghost);
  }

  .post-hero[data-variant="spark"] .out {
    display: grid;
    gap: 0.45rem;
  }

  .post-hero[data-variant="spark"] .line {
    block-size: 6px;
    inline-size: var(--w);
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--fg) 12%, transparent);
    transform-origin: 0 50%;
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="spark"] .typed {
      animation: spark-type 8s var(--ease) infinite;
    }

    @keyframes spark-type {
      0% {
        inline-size: 0;
      }
      18%,
      88% {
        inline-size: 62%;
      }
      100% {
        inline-size: 0;
      }
    }

    .post-hero[data-variant="spark"] .caret {
      animation: spark-blink 1.05s steps(1) infinite;
    }

    @keyframes spark-blink {
      0%,
      50% {
        opacity: 1;
      }
      50.01%,
      100% {
        opacity: 0;
      }
    }

    /* Each line arrives only after the prompt has finished typing. */
    .post-hero[data-variant="spark"] .line {
      scale: 0 1;
      animation: spark-stream 8s var(--ease) infinite;
      animation-delay: calc(1.6s + var(--i) * 420ms);
    }

    @keyframes spark-stream {
      0% {
        scale: 0 1;
      }
      8%,
      78% {
        scale: 1 1;
      }
      100% {
        scale: 0 1;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .post-hero[data-variant="spark"] .typed {
      inline-size: 62%;
    }
  }



  .post-hero[data-variant="stack"] .stack {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0.45rem;
  }

  .post-hero[data-variant="stack"] .tile {
    aspect-ratio: 1;
    border-radius: 6px;
    background: color-mix(in oklch, var(--fg) 9%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="stack"] .tile {
      animation: stack-lift 5.5s var(--ease) infinite alternate;
      /* Prime-ish stagger, so the grid never pulses in unison. */
      animation-delay: calc(var(--i) * 130ms);
    }

    @keyframes stack-lift {
      from {
        background: color-mix(in oklch, var(--fg) 6%, transparent);
        scale: 0.94;
      }
      to {
        background: color-mix(in oklch, var(--fg) 16%, transparent);
        scale: 1;
      }
    }
  }



  .post-hero[data-variant="verify"] .verify {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }

  .post-hero[data-variant="verify"] .pane {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--bg);
  }

  .post-hero[data-variant="verify"] .scene {
    display: block;
    aspect-ratio: 4 / 3;
    background:
      radial-gradient(
        circle at 32% 68%,
        color-mix(in oklch, var(--fg) 16%, transparent) 0 18%,
        transparent 19%
      ),
      linear-gradient(
        to top,
        color-mix(in oklch, var(--fg) 13%, transparent) 0 34%,
        transparent 34%
      ),
      color-mix(in oklch, var(--fg) 4%, transparent);
  }

  .post-hero[data-variant="verify"] figcaption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 0.2rem 0.45rem;
    font-family: var(--face-mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-faint);
    background: var(--bg-sunken);
    border-block-start: 1px solid var(--rule);
  }

  .post-hero[data-variant="verify"] .scan {
    position: absolute;
    inset-inline: 0;
    block-size: 34%;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in oklch, var(--fg) 10%, transparent),
      transparent
    );
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="verify"] .scan {
      animation: verify-sweep 3.6s var(--ease) infinite;
    }

    @keyframes verify-sweep {
      from {
        transform: translateY(-120%);
      }
      to {
        transform: translateY(320%);
      }
    }

    /* The right-hand scene keeps almost resolving and then slipping. */
    .post-hero[data-variant="verify"] .pane--b .scene {
      animation: verify-doubt 5.5s var(--ease) infinite;
    }

    @keyframes verify-doubt {
      0%,
      100% {
        filter: none;
        opacity: 1;
      }
      42% {
        filter: blur(1.5px);
        opacity: 0.72;
      }
      58% {
        filter: none;
        opacity: 0.95;
      }
    }
  }



  .post-hero[data-variant="wave"] .wave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    block-size: 4.5rem;
  }

  .post-hero[data-variant="wave"] .bar {
    flex: 1;
    block-size: var(--h);
    min-block-size: 3px;
    border-radius: var(--radius-pill);
    background: color-mix(in oklch, var(--fg) 18%, transparent);
  }

  @media (prefers-reduced-motion: no-preference) {
    .post-hero[data-variant="wave"] .bar {
      animation: wave-bounce 1.9s var(--ease) infinite alternate;
      animation-delay: calc(var(--i) * -90ms);
    }

    @keyframes wave-bounce {
      from {
        scale: 1 0.28;
        background: color-mix(in oklch, var(--fg) 11%, transparent);
      }
      to {
        scale: 1 1;
        background: color-mix(in oklch, var(--fg) 30%, transparent);
      }
    }
  }