#snowcouple > div {
  --height: 376px;
  --width: 312px;
  position: sticky;
  top: calc(50% - var(--height) / 2);
  margin: 0 auto;

  height: var(--height);
  width: var(--width);
  background: url(snowcouple.jpg);
  background-position-y: calc(-1 * var(--index) * var(--height));
  --index: calc(round(104 * var(--t)));

  --zoom: calc(min(.8 * 100vh / var(--height), .8 * 100vw / var(--width)));

  animation: t-ramp linear forwards, snowcouple-zoom, snowcouple-tilt forwards;
  animation-range: contain, cover;
  animation-timeline: view();
}

@keyframes snowcouple-zoom {
  30% {
    scale: var(--zoom);
  }
  70% {
    scale: var(--zoom);
  }
}

@keyframes snowcouple-tilt {
  20% {
    rotate: 0deg;
  }
  53% {
    rotate: -10deg;
  }
  55% {
    rotate: 0deg;
  }
  63% {
    rotate: 15deg;
  }
  100% {
    rotate: -5deg;
  }
}