@layer sections {
  .engine {
    position: relative;
    block-size: 300svh;
    --p: 0;
    background: var(--c-basalt);
  }

  .engine__stage {
    position: sticky;
    inset-block-start: 0;
    block-size: 100svh;
    display: grid;
    align-content: center;
    overflow: hidden;
  }

  .engine__grid {
    display: grid;
    gap: var(--space-lg);
    align-items: center;
  }

  @media (min-width: 62rem) {
    .engine__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) minmax(0, 1fr);
      gap: clamp(2rem, 4vw, 5rem);
    }
  }

  .engine__copy { max-inline-size: 34ch; }

  .engine__art {
    justify-self: center;
    inline-size: min(100%, 30rem);
    block-size: min(74svh, 44rem);
    display: grid;
    place-items: center;
  }

  .engine-x { inline-size: 100%; block-size: 100%; overflow: visible; }
  .engine-x * { vector-effect: non-scaling-stroke; }

  .engine-x .rail {
    fill: none;
    stroke: var(--c-basalt-hi);
    stroke-width: 1;
    stroke-dasharray: 2 8;
  }

  .engine-x [data-piece] {
    /* drift distance is authored per piece in the SVG, scaled by --p */
    transform: translate3d(0, calc(var(--drift, 0) * var(--p) * 1px), 0);
    transform-box: view-box;
  }

  .engine-x .shell {
    fill: var(--c-basalt-up);
    stroke: var(--c-ash-hi);
    stroke-width: 3;
    stroke-linejoin: round;
  }
  .engine-x .line { stroke: var(--c-ash); stroke-width: 2; fill: none; opacity: 0.8; }
  .engine-x .bolt { fill: var(--c-ember); }
  .engine-x .port {
    fill: var(--c-basalt);
    stroke: var(--c-ember);
    stroke-width: 3;
  }
  .engine-x .fin-stack path { stroke: var(--c-ash); stroke-width: 2.2; fill: none; }
  .engine-x .bore { stroke: var(--c-basalt-hi); stroke-width: 3; fill: none; }
  .engine-x .rod { stroke: var(--c-ash-hi); stroke-width: 8; stroke-linecap: round; fill: none; }
  .engine-x .cover { fill: none; stroke: var(--c-ash); stroke-width: 2.5; }

  /* Callouts. Ruled leader lines, no cards. */
  .engine__legend {
    display: grid;
    gap: var(--space-sm);
    align-content: center;
  }

  .engine__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm);
    align-items: baseline;
    padding-block: var(--space-2xs);
    border-block-start: var(--rule);
    opacity: 0.35;
    transition: opacity var(--d-mid) var(--e-out), color var(--d-mid) var(--e-out);
  }

  .engine__item.is-live { opacity: 1; }
  .engine__item.is-live .engine__num { color: var(--c-ember); }
  .engine__item.is-live .engine__name { color: var(--c-bone); }

  .engine__num {
    font-family: var(--f-mono);
    font-size: var(--t-2xs);
    color: var(--c-basalt-hi);
    letter-spacing: 0.14em;
  }

  .engine__name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--t-lg);
    text-transform: uppercase;
    color: var(--c-ash);
    line-height: 1;
  }

  .engine__note {
    grid-column: 2;
    font-size: var(--t-xs);
    color: var(--c-ash);
    max-inline-size: 30ch;
  }

  @media (max-width: 61.9375rem) {
    .engine { block-size: 260svh; }
    .engine__copy { display: none; }
    .engine__art { block-size: min(52svh, 30rem); }
    .engine__note { display: none; }
    .engine__legend { grid-auto-flow: row; }
  }

  @media (prefers-reduced-motion: reduce) {
    .engine { block-size: auto; }
    .engine__stage { position: static; block-size: auto; padding-block: var(--space-3xl); }
    .engine-x [data-piece] {
      transform: translate3d(0, calc(var(--drift, 0) * 1px), 0);
    }
    .engine__item { opacity: 1; }
  }
}