/* 页面切换时先用品牌 Logo 稳定视觉焦点，避免多页站点跳转时直接闪出新内容。 */
@property --yuankong-progress {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
}

html {
    /* Loading 锁定滚动时仍保留滚动条槽位，避免结束后页面宽度变化造成整体横移。 */
    scrollbar-gutter: stable;
}

html::before,
html::after {
    content: "";
    position: fixed;
    pointer-events: none;
    opacity: 0;
}

html::before {
    inset: 0;
    z-index: 9998;
    background-color: #fbfaf7;
    transition: opacity 420ms cubic-bezier(.22, .61, .36, 1);
}

html::after {
    top: 50%;
    left: 50%;
    z-index: 9999;
    width: 92px;
    aspect-ratio: 1;
    background: url("../logos/yuankong-ai-mark.png?v=20260910") center / contain no-repeat;
    transform: translate(-50%, -50%) scale(.9);
    transition:
        opacity 360ms ease,
        transform 420ms cubic-bezier(.22, .61, .36, 1);
}

html.page-transition-opening,
html.page-transition-leaving {
    overflow: hidden;
}

html.page-transition-opening::before,
html.page-transition-leaving::before {
    pointer-events: auto;
    opacity: 1;
}

html.page-transition-opening::before {
    /* 进度条只表达开屏节奏，不伪装成无法准确计算的网络加载百分比。 */
    --yuankong-progress: 0%;
    background-image: linear-gradient(
        90deg,
        #18b9d5 0%,
        #0ea6cf var(--yuankong-progress),
        rgba(20, 45, 40, .12) var(--yuankong-progress),
        rgba(20, 45, 40, .12) 100%
    );
    background-position: center bottom 48px;
    background-repeat: no-repeat;
    background-size: 96px 2px;
    animation: yuankong-progress-enter 760ms cubic-bezier(.22, .61, .36, 1) both;
}

html.page-transition-opening::after {
    animation: yuankong-logo-enter 680ms cubic-bezier(.22, .61, .36, 1) both;
}

html.page-transition-opening.page-transition-ready::before {
    --yuankong-progress: 100%;
    pointer-events: none;
    background-size: 96px 2px;
    animation: yuankong-overlay-exit 480ms ease both;
}

html.page-transition-opening.page-transition-ready::after {
    animation: yuankong-logo-exit 420ms ease both;
}

html.page-transition-leaving::before {
    background-image: none;
    animation: none;
    transition-duration: 180ms;
}

html.page-transition-leaving::after {
    /* 旧页面退场只盖上底色，Logo 留给新页面开屏，避免跨页时连续闪现两次。 */
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
    transition-duration: 120ms;
}

@keyframes yuankong-logo-enter {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.9);
    }

    55%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes yuankong-progress-enter {
    0% {
        --yuankong-progress: 0%;
    }

    85%,
    100% {
        --yuankong-progress: 100%;
    }
}

@keyframes yuankong-overlay-exit {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes yuankong-logo-exit {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {
    html::before,
    html::after {
        display: none;
    }
}