.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999999;
    transition: opacity 0.5s ease-in-out;
    pointer-events: auto; /* 正常情况下阻止点击 */
}

.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* 确保音乐播放器按钮始终在页面加载动画之上 */
#toggleMusicButton {
    z-index: 999999 !important;
    pointer-events: auto !important;
}

/* 在加载时隐藏页面内容 */
body.loading {
    overflow: hidden; /* 防止滚动 */
}

body.loading .page-content-wrapper {
    visibility: hidden; /* 彻底隐藏内容 */
    opacity: 0;
}

/* 特别隐藏博客发布页面内容 */
body.loading #blogApp,
body.loading .pub-blog-container {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* 页面内容的过渡效果 */
.page-content-wrapper {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.loader-content {
    position: relative;
    text-align: center;
}

.loader-spinner {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    position: relative;
}

.loader-spinner::before,
.loader-spinner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 5px solid transparent;
}

.loader-spinner::before {
    border-top-color: #ff66b2;
    border-bottom-color: #6699ff;
    animation: spin 2s linear infinite;
}

.loader-spinner::after {
    border-left-color: #66ff99;
    border-right-color: #ff6666;
    animation: spin 1.5s linear reverse infinite;
}

.loader-text {
    margin-top: 20px;
    font-size: 18px;
    color: white;
    letter-spacing: 2px;
}

.loader-particles {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    animation: float 4s infinite ease-in-out;
}

.p1 { width: 10px; height: 10px; left: 20%; top: 25%; animation-delay: 0s; background-color: #ff66b2; }
.p2 { width: 15px; height: 15px; left: 70%; top: 30%; animation-delay: 0.3s; background-color: #6699ff; }
.p3 { width: 12px; height: 12px; left: 40%; top: 80%; animation-delay: 0.6s; background-color: #66ff99; }
.p4 { width: 8px; height: 8px; left: 75%; top: 75%; animation-delay: 0.9s; background-color: #ffff66; }
.p5 { width: 14px; height: 14px; left: 25%; top: 65%; animation-delay: 1.2s; background-color: #ff6666; }
.p6 { width: 10px; height: 10px; left: 60%; top: 15%; animation-delay: 1.5s; background-color: #ff66b2; }
.p7 { width: 12px; height: 12px; left: 35%; top: 35%; animation-delay: 1.8s; background-color: #6699ff; }
.p8 { width: 8px; height: 8px; left: 85%; top: 55%; animation-delay: 2.1s; background-color: #66ff99; }

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes float {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-10px) translateX(5px); }
    50% { transform: translateY(0) translateX(10px); }
    75% { transform: translateY(10px) translateX(5px); }
}