.transition {
  --transition-height: 75vh;
  --transition-min-height: var(--border-height);

  background: url('../images/noise-dark.png') center / 20% var(--color-dark);
  display: flex;
  flex-direction: column;
  height: calc(var(--transition-height) * (1 - var(--transition-progress)) + var(--transition-min-height) * var(--transition-progress));
  overflow: hidden;
}

.transition span {
  border-bottom: var(--border-light);
  flex-grow: calc(var(--index) * var(--index) * var(--index) * var(--index) * (1 - var(--transition-progress)));
}

.transition span + span {
  margin-top: calc(-1 * var(--transition-min-height) * var(--transition-progress));
}