/* atlas/lanes.css: "Week by week", the piece right of the title block (markup baked by bake-lanes.js).
   One bar per week of commits on each master: Atlas's seven months, then Quartz, Mantle and Helm.
   Atlas's bars are drawn warm and cool to ash once the sweep passes its last week; the three stay warm.
   Calm: one sweep when it first comes into view, then still. No lines, no grid, no hover. */
.ph__aside{--aside-w:33rem}
.lz{--gap:3.2258cqi;--fs:15px;position:relative;font-size:var(--t-mono);color:var(--ink-3)}
.lz__h{display:flex;align-items:baseline;margin:0 0 26px}
.lz__y{letter-spacing:.14em}
.lz__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.lz__ln{position:relative;margin:0}
.lz__lab{margin:0;display:flex;flex-direction:column;gap:5px;line-height:1}
.lz__nm{font:500 var(--fs)/1 var(--f-sans);letter-spacing:-.005em;color:var(--cream)}
.lz__mt{font-size:11px;letter-spacing:.02em;color:var(--ink-3);white-space:nowrap}
.lz__dots{position:relative;height:32px}
.lz__dots i,.lz__off{position:absolute;left:var(--x);top:50%;translate:-50% -50%}
.lz__off{border-radius:50%}
.lz__dots i{width:max(3px,1.5cqi);height:calc(3px + var(--k) * 29px);border-radius:2px;transform-origin:50% 50%;
  background:color-mix(in oklab,var(--fire-deep),var(--amber) calc(var(--k) * 62%));opacity:calc(.62 + var(--k) * .38);
  transition:scale .5s var(--e),background-color 1.6s ease,opacity 1.6s ease;transition-delay:calc(var(--w) * 62ms),0s,0s}
.lz__dots i.lz-0{width:3px;height:3px;border-radius:50%;background:rgb(var(--ink-rgb) / .2);opacity:1}

/* Atlas: the first lane runs the full width, its label above */
.lz__ln--a .lz__lab{margin-bottom:8px}
.lz__ln--a .lz__dots i:not(.lz-0){background:rgb(var(--ink-rgb) / .4);opacity:.85}
.lz__off{width:10px;aspect-ratio:1;box-shadow:inset 0 0 0 1.5px rgb(var(--ink-rgb) / .5);transition:opacity .8s ease 2.1s}
.lz__end{position:absolute;right:calc(100% - var(--x) - 4.5px);top:calc(100% + 2px);margin:0;font-size:11px;letter-spacing:.02em;
  color:var(--ink-3);white-space:nowrap;transition:opacity .8s ease 2.2s}

/* the three: each label sits right-aligned just before its lane starts, so they step down to the right */
.lz__ln--p{display:flex;align-items:center;min-height:38px}
.lz__ln--a{margin-bottom:22px}
.lz__ln--p .lz__lab{position:absolute;right:calc(100% - var(--s) + 14px);top:50%;translate:0 -50%;align-items:flex-end;text-align:right}
.lz__ln--p .lz__dots{flex:1}

/* the months: initials at each 1st, no axis line */
.lz__m{position:relative;height:12px;margin:24px 0 0;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lz__m span{position:absolute;left:var(--x);top:0;line-height:1}
.lz__f{margin:18px 0 0;max-width:46ch;font-size:11px;line-height:1.55;letter-spacing:.01em;color:var(--ink-3);text-wrap:pretty}

/* the sweep (lanes.js adds .lz--pre at once, then .lz--on when the piece is first seen; no JS = the end state) */
.lz--pre .lz__dots i{scale:1 0}
.lz--pre .lz__ln--a .lz__dots i:not(.lz-0){background:color-mix(in oklab,var(--fire-deep),var(--amber) calc(var(--k) * 62%))}
.lz--pre .lz__off,.lz--pre .lz__end{opacity:0}
.lz--on .lz__dots i{scale:1}
.lz--on:not(.lz--cool) .lz__ln--a .lz__dots i:not(.lz-0){background:color-mix(in oklab,var(--fire-deep),var(--amber) calc(var(--k) * 62%))}
.lz--on .lz__off,.lz--on .lz__end{opacity:1}
.lz--on.lz--cool .lz__ln--a .lz__dots i{transition-delay:0s,calc(var(--w) * 40ms),0s}

/* stacked under the block (below 1200 px) */
@media (max-width:1199px){
  .lz{max-width:34rem}
  .lz__h{margin-bottom:20px}
}
@media (max-width:520px){
  .lz{--fs:14px}
  .lz__dots i{height:calc(3px + var(--k) * 24px)}
  .lz__mt{font-size:10.5px}
}
@media (prefers-reduced-motion:reduce){.lz__dots i,.lz__off,.lz__end{transition:none}}
/* each product's own colour, as a dot only (as on the home commit log) */
.lz__ln--p .lz__nm{display:inline-flex;align-items:center;gap:8px}
.lz__ln--p .lz__nm::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pc)}
.lz__ln--p[data-p="helm"]{--pc:var(--p-helm)}
.lz__ln--p[data-p="quartz"]{--pc:var(--p-quartz)}
.lz__ln--p[data-p="mantle"]{--pc:var(--p-mantle)}