@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  @keyframes va-page-enter {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.992);
      filter: blur(8px);
    }

    to {
      opacity: 1;
      transform: translateY(0) scale(1);
      filter: blur(0);
    }
  }

  html {
    background: #030108;
  }

  body {
    animation: va-page-enter 0.52s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center top;
    transition:
      opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.32s ease;
  }

  body.va-page-leaving {
    opacity: 0;
    transform: translateY(22px) scale(0.992);
    filter: blur(8px);
    pointer-events: none;
  }

  .va-transition-screen {
    position: fixed;
    inset: 0;
    z-index: 120000;
    pointer-events: none;
    opacity: 0;
    transform: scaleY(0.85) translateY(8%);
    transform-origin: center top;
    transition:
      opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    background:
      radial-gradient(circle at top, rgba(139, 92, 246, 0.28), transparent 42%),
      linear-gradient(180deg, rgba(3, 1, 8, 0.12), rgba(3, 1, 8, 0.86) 42%, rgba(3, 1, 8, 1) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .va-transition-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.08) 1px, transparent 1px);
    background-size: 100% 88px, 88px 100%;
    opacity: 0.5;
  }

  body.va-page-leaving .va-transition-screen {
    opacity: 1;
    transform: scaleY(1) translateY(0);
  }

  body[data-cookie-theme="mitra"] .va-transition-screen {
    background:
      radial-gradient(circle at center, rgba(45, 212, 191, 0.16), transparent 30%),
      radial-gradient(circle at top, rgba(139, 92, 246, 0.24), transparent 48%),
      linear-gradient(180deg, rgba(2, 1, 5, 0.15), rgba(2, 1, 5, 0.9) 46%, rgba(2, 1, 5, 1) 100%);
  }

  body[data-cookie-theme="mitra"] .va-transition-screen::before {
    background:
      linear-gradient(rgba(45, 212, 191, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(139, 92, 246, 0.09) 1px, transparent 1px);
    background-size: 100% 76px, 76px 100%;
    opacity: 0.7;
  }
}