/* 页面跳转水波动效：从右下角扩散的彩色水波，仅在屏幕四周边缘显现 */
.page-transition {
    --pt-band: 36px;
    --pt-radius: 24px;
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    overflow: hidden;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}

.page-transition.pt-active {
    pointer-events: auto;
}

.page-transition[hidden] {
    display: none;
}

.page-transition .pt-flow {
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, #00e5ff, #2f80ff, #7b5cff, #ff6ec7, #ffc857, #00e5ff);
    filter: blur(34px) saturate(1.4);
    opacity: 0;
    animation: pt-spin 7s linear infinite, pt-flow-in 1.2s ease-out 0.3s forwards;
}

@keyframes pt-flow-in {
    to {
        opacity: 0.5;
    }
}

@keyframes pt-spin {
    to {
        transform: rotate(360deg);
    }
}

.page-transition .pt-ripple {
    position: absolute;
    left: 100%;
    top: 100%;
    width: 240vmax;
    height: 240vmax;
    margin-left: -120vmax;
    margin-top: -120vmax;
    border-radius: 50%;
    background: radial-gradient(circle closest-side,
        transparent 0 96%,
        rgba(0, 229, 255, 0.95) 97.4%,
        rgba(123, 92, 255, 0.85) 98.4%,
        rgba(255, 110, 199, 0.6) 99.2%,
        transparent 99.9%);
    filter: blur(6px);
    opacity: 0;
    transform: scale(0);
    animation: pt-ripple 1.2s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.page-transition .pt-ripple-2 {
    animation-delay: 0.22s;
    filter: blur(6px) hue-rotate(40deg);
}

.page-transition .pt-ripple-3 {
    animation-delay: 0.44s;
    filter: blur(6px) hue-rotate(-45deg);
}

@keyframes pt-ripple {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.9;
    }
}

.page-transition .pt-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 70% at 50% 50%, transparent 80%, rgba(0, 229, 255, 0.22) 92%, rgba(255, 110, 199, 0.3) 100%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: pt-glow 1.4s ease-out 0.3s forwards;
}

@keyframes pt-glow {
    0% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0.8;
    }
}

.page-transition.pt-out {
    animation: pt-dissipate 0.5s ease-out forwards;
}

@keyframes pt-dissipate {
    0% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }

    100% {
        opacity: 0;
        filter: blur(24px);
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-transition {
        display: none !important;
    }
}