/* Helix flow. The canvas is a 3:1 band; the step labels sit in a row under it, one per stage of the helix. */
.helix {
  --hx-ground: #fff;       /* page colour the points fade toward at the back of each turn */
  --hx-cool: #3b5bd9;      /* the frayed strands at the left mouth */
  --hx-warm: #f5c518;      /* the clean helix + rungs on the right */
  --hx-ratio: 3 / 1;       /* canvas band shape */
  --hx-gap: 14px;          /* space between steps */
  --hx-recede: .45;        /* opacity of the other labels while one is hovered */
  --hx-recede-dur: .3s;
  --hx-line: #0a0a0a;      /* pixel bar under the hovered label */
  --hx-line-track: rgba(10, 10, 10, .12);
  --hx-line-w: 62px;
}
.helix__canvas { display: block; width: 100%; aspect-ratio: var(--hx-ratio); }
.helix__steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hx-gap); margin-top: clamp(14px, 2.4vh, 26px); }
@media (min-width: 840px) { .helix__steps { grid-template-columns: repeat(var(--hx-cols, 4), 1fr); } }
.helix__step { position: relative; transition: opacity var(--hx-recede-dur) ease; }
.helix.has-focus .helix__step { opacity: var(--hx-recede); }
.helix.has-focus .helix__step.is-focus { opacity: 1; }
.helix__pxline { display: none; }
@media (hover: hover) {
  /* the cursor hands over to a line of pixels under the hovered step */
  .helix__step { cursor: none; padding-bottom: 17px; }
  .helix__pxline { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; opacity: 0; transition: opacity .25s steps(3); pointer-events: none; }
  .helix__step.is-focus .helix__pxline { opacity: 1; }
  .helix__pxline::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--hx-line-track) 0 8px, transparent 8px 9px); }
  .helix__pxline i { position: absolute; top: 0; left: 0; width: var(--hx-line-w); height: 8px; background: repeating-linear-gradient(90deg, var(--hx-line) 0 8px, transparent 8px 9px); transform: translateX(var(--hx-lx, 0px)); }
}