:root {
  --bounce-easing: linear(
    0,
    0.004,
    0.016,
    0.035,
    0.063,
    0.098,
    0.141 13.6%,
    0.25,
    0.391,
    0.563,
    0.765,
    1,
    0.891 40.9%,
    0.848,
    0.813,
    0.785,
    0.766,
    0.754,
    0.75,
    0.754,
    0.766,
    0.785,
    0.813,
    0.848,
    0.891 68.2%,
    1 72.7%,
    0.973,
    0.953,
    0.941,
    0.938,
    0.941,
    0.953,
    0.973,
    1,
    0.988,
    0.984,
    0.988,
    1
  );
}

@keyframes slide-from-top {
  from {
    transform: translateY(-100%);
  }
}

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

::view-transition-new(root) {
  animation: 1500ms both slide-from-top var(--bounce-easing);
}

.linear-compat-check {
  padding: 2em;
  background-color: hsl(0, 100%, 30%);
  border: 0.2em solid hsl(0, 100%, 15%);
  margin-block: 3em;
  border-radius: 1em;
}

@supports (animation-timing-function: linear(0, 1)) {
  .linear-compat-check {
    display: none;
  }
}
