.scrub{
  position:relative;
  --level-h:180px;
  --shaft-line:rgba(5,5,5,.14);
  --shaft-strong:rgba(5,5,5,.34);
  --shaft-label:var(--g-500);
  --hud-label:var(--g-500);
  --hud-value:var(--black);
}

.scrub__stage{
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:grid;
  align-content:center;
}

.scrub__track{height:190svh}

html:not(.js) .scrub__track,
.scrub.is-static .scrub__track{height:0}

.shaft{
  position:absolute;
  inset:0 0 0 56%;
  overflow:hidden;
  pointer-events:none;
}

.shaft::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,var(--shaft-veil,transparent) 0%,transparent 18%,transparent 82%,var(--shaft-veil,transparent) 100%);
}

.shaft__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity var(--tr-slow);
}

.scrub.is-ready .shaft__video{opacity:1}

.scrub.has-video .shaft{inset:0}

.scrub.has-video .shaft::after{
  background:
    linear-gradient(to right,var(--shaft-veil,transparent) 0%,var(--shaft-veil,transparent) 20%,transparent 54%),
    linear-gradient(to bottom,var(--shaft-veil,transparent) 0%,transparent 16%,transparent 84%,var(--shaft-veil,transparent) 100%);
}

.shaft__rail{
  position:absolute;
  left:0;
  right:0;
  top:0;
  will-change:transform;
}

.level{
  height:var(--level-h);
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr);
  align-items:center;
  gap:var(--sp-3);
  padding-inline:0 var(--gutter);
}

.level__no{
  font-family:var(--font-display);
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--shaft-label);
  letter-spacing:.08em;
}

.level__bar{
  height:1px;
  background:var(--shaft-line);
}

.level:nth-child(4n+1) .level__bar{background:var(--shaft-strong)}

.level__h{
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--shaft-label);
  letter-spacing:.06em;
}

.scrub__grid{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:var(--sp-8);
  align-items:center;
}

.scrub__copy{will-change:transform,opacity}

.scrub__car{
  will-change:transform;
  width:100%;
  max-width:400px;
  justify-self:end;
  animation:carIn 900ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes carIn{
  from{opacity:0;transform:translate3d(0,34px,0)}
  to{opacity:1;transform:none}
}

.hud{
  position:absolute;
  right:var(--gutter);
  bottom:var(--sp-6);
  display:grid;
  justify-items:end;
  gap:var(--sp-1);
  text-align:right;
}

.hud__label{
  font-size:var(--fs-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--hud-label);
}

.hud__level{
  font-family:var(--font-display);
  font-size:clamp(38px,5vw,64px);
  font-weight:700;
  line-height:1;
  color:var(--hud-value);
}

.hud__h{
  font-size:var(--fs-sm);
  font-weight:600;
  color:var(--hud-label);
}

.scrub__cue{
  will-change:opacity;
  position:absolute;
  left:var(--gutter);
  bottom:var(--sp-6);
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  font-size:var(--fs-xs);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--hud-label);
}

.scrub__cue::after{
  content:'';
  width:1px;
  height:34px;
  background:currentColor;
  opacity:.5;
  animation:cue 2.4s ease-in-out infinite;
  transform-origin:top;
}

@keyframes cue{
  0%,100%{transform:scaleY(.3);opacity:.25}
  50%{transform:scaleY(1);opacity:.7}
}

@media (max-width:1024px){
  .scrub{--level-h:140px}
  .scrub__grid{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:var(--sp-6)}
  .scrub__car{max-width:300px}
  .scrub__track{height:150svh}
}

@media (max-width:760px){
  .scrub{--level-h:110px}
  .shaft{inset:44% 0 0 0}
  .scrub.has-video .shaft{inset:0}
  .scrub.is-ready .shaft__video{opacity:.4}
  .scrub.has-video .shaft::after{background:linear-gradient(to bottom,var(--shaft-veil,transparent) 0%,var(--shaft-veil,transparent) 22%,transparent 52%,transparent 82%,var(--shaft-veil,transparent) 100%)}
  .level{padding-inline:var(--gutter)}
  .scrub__grid{grid-template-columns:1fr;gap:var(--sp-6);align-content:center}
  .scrub__car{max-width:216px;justify-self:start}
  .scrub__track{height:120svh}
  .hud{bottom:var(--sp-5)}
  .scrub__cue{display:none}
}

@media (prefers-reduced-motion:reduce){
  .scrub__car{animation:none}
  .scrub__stage{position:relative;height:auto;padding-block:var(--sp-8)}
  .shaft{display:none}
  .scrub__cue{display:none}
}