html {
  background-color: #004a99;
  background: linear-gradient(
    to bottom,
    #004a99 0 50%,
    var(--overscroll-bottom, #fafafa) 50% 100%
  ) fixed;
}

/*
 * The page itself is the spring. Keeping this here (rather than styling an
 * applet or page-specific wrapper) lets the same small gesture work on every
 * Analysis Academy page.
 */
body {
  --overscroll-tilt: 0deg;
  --overscroll-twist: 0deg;
  --overscroll-scale-x: 1;
  --overscroll-scale: 1;
  --overscroll-shift: 0px;
  --overscroll-origin: center center;
  transform-origin: var(--overscroll-origin);
  transform: none;
}

html.overscroll-active body,
html.overscroll-releasing body {
  transform: perspective(1000px) translateY(var(--overscroll-shift)) rotateX(var(--overscroll-tilt))
    rotateZ(var(--overscroll-twist)) scale(var(--overscroll-scale-x), var(--overscroll-scale));
}

html.overscroll-active body {
  will-change: transform;
}

html.overscroll-releasing body {
  transition: transform 500ms cubic-bezier(0.22, 0.76, 0.24, 1);
}

@media (prefers-reduced-motion: reduce) {
  body {
    transform: none;
    transition: none !important;
  }
}