/* Mask step sequence */
.maskstep-stage {
  min-height: 100vh;
  overflow: clip;
}

.maskstep-intro {
  display: grid;
  min-height: 62vh;
  align-content: end;
  padding: clamp(48px, 9vw, 112px) max(16px, calc((100vw - 1180px) / 2));
}

.maskstep-scroll {
  position: relative;
  min-height: 310vh;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.maskstep-sticky {
  position: sticky;
  top: 0;
  display: grid;
  min-height: 100vh;
  place-items: center;
  overflow: hidden;
  padding: 24px max(16px, calc((100vw - 1180px) / 2));
}

.maskstep-panel {
  position: absolute;
  display: grid;
  width: min(980px, calc(100vw - 32px));
  min-height: min(68vh, 560px);
  grid-template-columns: minmax(0, 0.75fr) minmax(260px, 1fr);
  gap: clamp(18px, 4vw, 48px);
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 21, 0.16);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 30px 85px rgba(17, 19, 21, 0.2);
}

.maskstep-copy {
  display: grid;
  align-content: end;
  padding: clamp(22px, 4vw, 42px);
}

.maskstep-copy h2 {
  margin-bottom: 18px;
}

.maskstep-media {
  min-height: 320px;
  background:
    linear-gradient(135deg, var(--tone), transparent 68%),
    radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.52), transparent 32%),
    #111315;
  transform-origin: center;
  will-change: transform;
}

.maskstep-progress {
  position: absolute;
  right: max(16px, calc((100vw - 1180px) / 2));
  bottom: 24px;
  left: max(16px, calc((100vw - 1180px) / 2));
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(17, 19, 21, 0.12);
}

.maskstep-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 760px) {
  .maskstep-panel {
    grid-template-columns: 1fr;
    min-height: 76vh;
  }

  .maskstep-media {
    min-height: 240px;
    order: -1;
  }
}