:root {
  --route-duration: 220ms;
  --route-ease: cubic-bezier(.22, .78, .2, 1);
}

@view-transition {
  navigation: auto;
}

.home-world,
.cinema-world,
.pricing-world,
.home-header,
.site-header,
.pricing-header {
  view-transition-name: none;
}

::view-transition-group(root) {
  animation-duration: var(--route-duration);
  animation-timing-function: var(--route-ease);
}

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

::view-transition-old(root) {
  animation: hatchpix-route-out 170ms var(--route-ease) both;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: hatchpix-route-in var(--route-duration) var(--route-ease) both;
  mix-blend-mode: normal;
}

@keyframes hatchpix-route-out {
  from { opacity: 1; transform: translate3d(0, 0, 0); }
  to { opacity: .98; transform: translate3d(0, -1px, 0); }
}

@keyframes hatchpix-route-in {
  from { opacity: .96; transform: translate3d(0, 3px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}