@supports (animation-timeline: view()) {
  :root {
    timeline-scope: --manta-ft-main;
  }

  /* On body, where footer-wrap.js sets the heights. The footer shows over the last stretch of scroll, as
     main's bottom edge rises past the bottom of the screen: from main's height into the cover range until the
     footer's height later. Not the exit range: when main is shorter than the screen, that starts only once
     main's top reaches the top of the screen, and the footer would wait and pop in. */
  body {
    --manta-ft-range: cover var(--manta-ft-main-height) cover calc(var(--manta-ft-main-height) + var(--manta-ft-height));
  }

  #manta-ft-wrap {
    animation-timeline: --manta-ft-main !important;
    animation-range: var(--manta-ft-range) !important;
    will-change: transform;
    contain: layout;
    backface-visibility: hidden;
    animation-name: manta-ft-move !important;
    transform: translate3d(0, calc(var(--manta-ft-height) * var(--manta-ft-start-multiplier)), 0);
    animation-timing-function: linear !important;
    animation-fill-mode: both !important;
    position: fixed !important;
    z-index: 0 !important;
    left: 0;
    right: 0;
    bottom: 0;
  }

  body {
    animation-name: var(--manta-ft-body-animation);
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.1, 0, 1, 0.9);
    animation-fill-mode: both;
    animation-timeline: --manta-ft-main;
    animation-range: var(--manta-ft-range);
  }

  main {
    animation-name: var(--manta-ft-main-animation);
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.1, 0, 1, 0.9);
    animation-fill-mode: both;
    animation-timeline: --manta-ft-main;
    animation-range: var(--manta-ft-range);
    transform-origin: bottom center;
    will-change: transform;
    overflow: clip;
    z-index: 1;
    position: relative;
    view-timeline-name: --manta-ft-main;
    margin-bottom: var(--manta-ft-height);
  }

  @keyframes manta-ft-move {
    0% {
      transform: translate3d(0, calc(var(--manta-ft-height) * var(--manta-ft-start-multiplier)), 0);
      opacity: 0;
    }
    0.01% {
      opacity: 1;
    }
    100% {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }

  @keyframes manta-ft-shrink {
    0% {
      transform: scale3d(1, 1, 1);
      border-radius: 0;
      background-color: var(--manta-ft-body-bg, #ffffff);
    }
    0.01% {
      background-color: var(--manta-ft-body-bg, #ffffff);
    }
    100% {
      transform: scale3d(var(--manta-ft-scale), var(--manta-ft-scale), 1);
      border-radius: calc(var(--manta-ft-radius) * 1svh);
      background-color: var(--manta-ft-body-bg, #ffffff);
    }
  }

  @keyframes manta-ft-color {
    0.01%,
    100% {
      background-color: var(--manta-ft-bg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  #manta-ft-wrap {
    animation: none !important;
    transform: none !important;
  }
  main {
    animation: none !important;
    transform: none !important;
    border-radius: 0 !important;
  }
}

/* Printed pages: a normal footer after the content, no fixed layer or reserved space. */
@media print {
  #manta-ft-wrap {
    position: static !important;
    animation: none !important;
    transform: none !important;
  }
  main {
    animation: none !important;
    transform: none !important;
    margin-bottom: 0 !important;
  }
  body {
    animation: none !important;
  }
}