.overnight {
  --p: 1;
  --night: min(clamp(0, calc((var(--p) - 0.1) * 5), 1), clamp(0, calc((0.95 - var(--p)) * 5), 1));
  --dawn: clamp(0, calc((var(--p) - 0.75) * 4), 1);
  position: relative;
}

.overnight__stage {
  --horizon: max(58svh, 360px);
  --head: calc(var(--header) + clamp(16px, 5vh, 56px) + 2.04 * var(--step-3));
  --radius: min(40vw, 520px, max(48px, (var(--horizon) - var(--head)) / 0.8));
  --sun-size: min(150px, var(--radius) * 0.4);
  --moon-size: min(84px, var(--radius) * 0.22);
  position: relative;
  min-height: max(100svh, 620px);
  overflow: hidden;
  isolation: isolate;
}

.overnight__sky {
  position: absolute;
  inset: 0 0 calc(100% - var(--horizon) - 2px);
  background: linear-gradient(180deg, var(--abyss) 0%, #0f1b3a 40%, var(--dusk) 66%, #5a3a62 88%, #a8565a 100%);
}

.overnight__night,
.overnight__dawn {
  position: absolute;
  inset: 0;
}

.overnight__night {
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--ink) 98%, transparent),
    radial-gradient(1px 1px at 27% 48%, var(--ink) 98%, transparent),
    radial-gradient(1.5px 1.5px at 41% 14%, var(--ink) 98%, transparent),
    radial-gradient(1px 1px at 58% 36%, var(--ink) 98%, transparent),
    radial-gradient(1.5px 1.5px at 69% 18%, var(--ink) 98%, transparent),
    radial-gradient(1px 1px at 83% 42%, var(--ink) 98%, transparent),
    radial-gradient(1.5px 1.5px at 92% 12%, var(--ink) 98%, transparent),
    radial-gradient(1px 1px at 6% 60%, var(--ink) 98%, transparent),
    linear-gradient(180deg, var(--abyss), #0a1730 70%, #10213f);
  opacity: var(--night);
}

.overnight__dawn {
  background: linear-gradient(180deg, #0f1b3a 0%, #2a3d6e 50%, #b8708a 84%, #f0a070 100%);
  opacity: var(--dawn);
}

.overnight__orbit {
  position: absolute;
  left: 50%;
  top: var(--horizon);
  width: calc(var(--radius) * 2);
  aspect-ratio: 1;
  translate: -50% -50%;
  transform: rotate(calc(var(--p) * 240deg));
}

.overnight__arm {
  position: absolute;
  inset: 0;
}

.overnight__arm--sun {
  rotate: 60deg;
}

.overnight__arm--moon {
  inset: 30%;
  rotate: 240deg;
}

.overnight__sun,
.overnight__moon {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  aspect-ratio: 1;
  border-radius: 50%;
}

.overnight__sun {
  width: var(--sun-size);
  rotate: calc(-60deg - var(--p) * 240deg);
  background: linear-gradient(180deg, var(--sun-top) 8%, var(--sun-low) 60%);
}

.overnight__moon {
  width: var(--moon-size);
  rotate: calc(-240deg - var(--p) * 240deg);
  box-shadow: inset calc(var(--moon-size) * 0.22) calc(var(--moon-size) * -0.1) 0 0 #e6eef3;
}

.overnight__sea {
  position: absolute;
  inset: var(--horizon) 0 0;
  background: linear-gradient(180deg, #1c4b70, #0d2a44 40%, var(--abyss));
}

.overnight__content {
  position: relative;
  display: grid;
  grid-template-rows: var(--horizon) auto;
  min-height: inherit;
  padding-inline: max(var(--gutter), (100% - var(--max)) / 2);
}

.overnight h2 {
  align-self: start;
  padding-top: calc(var(--header) + clamp(16px, 5vh, 56px));
  font-size: var(--step-3);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.overnight__steps {
  display: grid;
  align-content: start;
  gap: 28px;
  padding-block: clamp(28px, 6vh, 64px);
}

.overnight__steps li {
  display: grid;
  gap: 6px;
}

.overnight__time {
  color: var(--sun-top);
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 600;
}

.overnight__line {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.motion .overnight {
  --p: 0;
  height: 300svh;
}

.motion .overnight__stage {
  --horizon: 58svh;
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
}

.motion .overnight__content {
  height: 100%;
}

@supports (opacity: round(down, 1.5, 1)) {
  .motion .overnight__steps {
    --step: min(round(down, calc(var(--p) * 3), 1), 2);
  }

  .motion .overnight__steps li {
    --v: clamp(0, calc(1 - (var(--step) - var(--k)) * (var(--step) - var(--k))), 1);
    grid-area: 1 / 1;
    opacity: var(--v);
    transform: translateY(calc((1 - var(--v)) * 18px));
    transition:
      opacity 0.45s var(--ease-out),
      transform 0.6s var(--ease-out);
  }
}

.motion .overnight__orbit {
  will-change: transform;
}

@media (max-width: 600px) {
  .overnight__stage {
    --radius: min(34vw, max(48px, (var(--horizon) - var(--head)) / 0.8));
  }
}

@media (max-height: 520px) {
  .overnight__stage {
    --radius: min(30svh, 44vw);
  }

  .overnight__orbit {
    left: 78%;
  }

  .overnight h2 {
    font-size: var(--step-2);
  }
}