@view-transition {
    navigation: auto;
}

body {
    background: var(--bg-primary, #ffffff);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(201, 169, 98, 0.14), transparent 32%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 245, 0.98));
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    z-index: 100000;
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

body > * {
    transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

body:not(.page-transition-ready) > * {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(10px);
}

body.page-transition-ready::before {
    opacity: 0;
    visibility: hidden;
}

body.page-transition-leaving::before {
    opacity: 1;
    visibility: visible;
}

body.page-transition-leaving > * {
    opacity: 0;
    transform: translateY(-16px);
    filter: blur(8px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    body::before,
    body > * {
        transition: none !important;
    }

    body:not(.page-transition-ready) > * {
        opacity: 1;
        transform: none;
        filter: none;
    }

    body.page-transition-leaving > * {
        opacity: 1;
        transform: none;
        filter: none;
    }
}