@view-transition {
  navigation: auto;
}

:root {
  background: #07090d;
}

::view-transition-old(root),
::view-transition-new(root) {
  background: #07090d;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

html.portal-arrival::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.08), transparent 18%),
    radial-gradient(circle at 50% 52%, rgba(242, 200, 121, 0.12), transparent 34%),
    #07090d;
  opacity: 1;
  transform: scale(1);
  animation: portal-arrival-overlay-failsafe 1ms linear 4s forwards;
}

html.portal-arrival-v1::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(220, 236, 255, 0.14), transparent 20%),
    linear-gradient(90deg, rgba(120, 170, 230, 0.18), transparent 48%),
    #07090d;
}

html.portal-arrival-v2::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 226, 150, 0.16), transparent 20%),
    linear-gradient(90deg, transparent 45%, rgba(242, 200, 121, 0.16)),
    #07090d;
}

html.portal-arrival-v3::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(201, 162, 106, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.6)),
    #0d0b09;
}

html.portal-arrival body {
  opacity: 0;
  filter: blur(7px) brightness(0.82);
  transform: translateY(10px) scale(0.988);
  animation: portal-arrival-body-failsafe 1ms linear 4s forwards;
}

html.portal-arrival.portal-arrival-ready::before {
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 920ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.portal-arrival.portal-arrival-ready body {
  opacity: 1;
  filter: blur(0) brightness(1);
  transform: translateY(0) scale(1);
  transition:
    opacity 720ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 920ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
}

html.portal-arrival-v1 body {
  transform-origin: 50% 18%;
}

html.portal-arrival-v2 body {
  transform-origin: 50% 20%;
}

html.portal-arrival-v3 body {
  transform-origin: 50% 22%;
}

@keyframes portal-arrival-overlay-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes portal-arrival-body-failsafe {
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.portal-arrival::before,
  html.portal-arrival.portal-arrival-ready::before {
    display: none;
  }

  html.portal-arrival body,
  html.portal-arrival.portal-arrival-ready body {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}