@supports (view-transition-name: root) {
  @media (prefers-reduced-motion: no-preference) {
    html:active-view-transition {
      scroll-behavior: auto !important;
    }

    @view-transition {
      navigation: auto;
    }

    :root {
      view-transition-name: root !important;
    }

    /* Themes can give parts of the page their own view-transition-name (Horizon themes such as Ritual name
     <main>). Named elements get their own layer on top of the page, so they would cover this transition:
     keep the whole page in one snapshot. Only the bars keep their names. */
    body *:not(.manta-pt-bar) {
      view-transition-name: none !important;
    }

    ::view-transition-group(root) {
      animation-duration: var(--manta-pt-duration);
      animation-timing-function: linear;
    }

    ::view-transition-old(root) {
      animation-name: var(--manta-pt-name-out);
    }

    ::view-transition-new(root) {
      animation-name: var(--manta-pt-name-in);
    }

    @keyframes manta-pt-fade-out {
      to {
        opacity: 0;
      }
    }

    @keyframes manta-pt-fade-in {
      from {
        opacity: 0;
      }
    }

    @keyframes manta-pt-blur-out {
      0% {
        filter: blur(0px);
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        filter: blur(30px);
        opacity: 0;
      }
    }

    @keyframes manta-pt-blur-in {
      0% {
        opacity: 0;
        filter: blur(4px);
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 1;
        filter: blur(0px);
      }
    }

    @keyframes manta-pt-open-out {
      to {
        opacity: 0;
        filter: brightness(0%);
      }
    }

    @keyframes manta-pt-open-in {
      from {
        clip-path: circle(0 at var(--manta-pt-click-x, 50%) var(--manta-pt-click-y, 50%));
      }
      to {
        /* 5% past the furthest corner, so no sliver of the old page is left on the last frame. */
        clip-path: circle(
          calc(hypot(var(--manta-pt-furthest-x), var(--manta-pt-furthest-y)) * 1.05) at var(--manta-pt-click-x, 50%)
            var(--manta-pt-click-y, 50%)
        );
      }
    }

    @keyframes manta-pt-bars-out {
      0%,
      44.999% {
        opacity: 1;
      }
      45%,
      100% {
        opacity: 0;
      }
    }

    @keyframes manta-pt-bars-in {
      0%,
      44.999% {
        opacity: 0;
      }
      45%,
      100% {
        opacity: 1;
      }
    }

    @keyframes manta-pt-bar-wipe {
      0% {
        transform: translate(0%, 0%);
        animation-timing-function: cubic-bezier(0.1, 0.6, 0.4, 1);
      }
      35% {
        transform: translate(var(--manta-pt-half-way));
        animation-timing-function: linear;
      }
      60% {
        transform: translate(var(--manta-pt-half-way));
        animation-timing-function: cubic-bezier(0.5, 0.4, 0.3, 1);
      }
      100% {
        transform: translate(var(--manta-pt-full));
      }
    }

    @keyframes manta-pt-bar-color-fade {
      0% {
        background: var(--manta-pt-color-1);
        animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
      }
      25% {
        background: var(--manta-pt-color-2);
        animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
      }
      70% {
        background: var(--manta-pt-color-1);
        animation-timing-function: cubic-bezier(0.36, 0, 0.64, 1);
      }
      100% {
        background: var(--manta-pt-color-2);
      }
    }

    @property --manta-pt-gradient-translate {
      syntax: '<percentage>';
      initial-value: 0%;
      inherits: false;
    }
  }
}