/* ===== 页面转场动画：淡入淡出、光晕爆发收缩、从虚无展开 ===== */
/* ===== 页面包装器基础 ===== */
#page-wrapper {
    position: relative;
    min-height: 100vh;
    transform-origin: center center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 导航栏保持在过渡叠层上方（Home/About/Explore 切换时可见） */
header {
    position: absolute !important;
    z-index: 100000;
}

/* ===== 过渡叠层 ===== */
#trans-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    background: #000;
    opacity: 0;
    will-change: opacity;
}

/* ════ 淡入变黑（退出） ════ */
.trans-fade-out #trans-overlay {
    animation: transFadeIn 0.35s ease forwards;
}
@keyframes transFadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* ════ 从黑缓慢显现（进入） ════ */
.trans-fade-in #trans-overlay {
    animation: transFadeOut 0.9s ease forwards;
}
@keyframes transFadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* 过渡期间暂停页面内所有动画和过渡，防止目标页面加载时控件抖动 */
.trans-fade-in #page-wrapper *,
.trans-fade-out #page-wrapper * {
    animation-play-state: paused !important;
    transition: none !important;
}

/* ════ 光晕爆发（Home → Explore） — 已删除，改用统一淡出 ════ */
.page-exit #page-wrapper {
    pointer-events: none !important;
    will-change: transform;
    opacity: 1 !important;
    animation: shakeAndCollapse 1s ease-in-out forwards;
}
@keyframes shakeAndCollapse {
    0%   { transform: translateX(0) scale(1); }
    5%   { transform: translateX(-20px) scale(1.04); }
    10%  { transform: translateX(20px) scale(1.04); }
    15%  { transform: translateX(-16px) scale(1.03); }
    20%  { transform: translateX(16px) scale(1.02); }
    25%  { transform: translateX(-12px) scale(1.01); }
    30%  { transform: translateX(12px) scale(1); }
    35%  { transform: translateX(-8px) scale(0.97); }
    40%  { transform: translateX(8px) scale(0.93); }
    45%  { transform: translateX(-5px) scale(0.88); }
    50%  { transform: translateX(5px) scale(0.82); }
    55%  { transform: translateX(-2px) scale(0.75); }
    60%  { transform: translateX(0) scale(0.65); }
    70%  { transform: scale(0.4); }
    80%  { transform: scale(0.18); }
    90%  { transform: scale(0.05); }
    100% { transform: scale(0); }
}
.expand-from-void #page-wrapper {
    will-change: transform, opacity;
    transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
    animation: expandFromVoid 1s cubic-bezier(0.12, 0.7, 0.3, 1) forwards;
}
@keyframes expandFromVoid {
    0%   { opacity: 0; transform: scale(0); }
    100% { opacity: 1; transform: scale(1); }
}