@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-group(root) {
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1);
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.9s;
    animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1);
    animation-fill-mode: both;
    mix-blend-mode: normal;
    backface-visibility: hidden;
  }
  ::view-transition-old(root) {
    animation-name: hp-cube-out;
  }
  ::view-transition-new(root) {
    animation-name: hp-cube-in;
  }
  ::view-transition {
    background: #141414;
  }
}
@keyframes hp-cube-out {
  from {
    transform: perspective(2200px) translateZ(-50vh) rotateX(0deg) translateZ(50vh);
    filter: brightness(1) blur(0px);
  }
  to {
    transform: perspective(2200px) translateZ(-50vh) rotateX(-90deg) translateZ(50vh);
    filter: brightness(0.55) blur(6px);
  }
}
@keyframes hp-cube-in {
  from {
    transform: perspective(2200px) translateZ(-50vh) rotateX(90deg) translateZ(50vh);
    filter: brightness(0.55) blur(6px);
  }
  to {
    transform: perspective(2200px) translateZ(-50vh) rotateX(0deg) translateZ(50vh);
    filter: brightness(1) blur(0px);
  }
}