@@font-face {

    font-family: '荆南波波黑-Bold';

    src: url('https://api.minio.1yo.cc/nebuluxe/halosparkpix/%E8%8D%86%E5%8D%97%E6%B3%A2%E6%B3%A2%E9%BB%91-Bold.ttf') format('truetype');

    font-weight: 700;

    font-style: normal;

}

/* 弹窗背景遮罩 */

#custom-popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.8); /* 加深遮罩透明度 */

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1000;

    backdrop-filter: blur(5px);

}

/* 弹窗内容容器 */

#custom-popup {

    background: linear-gradient(160deg, rgba(30, 30, 38, 0.94) 0%, rgba(12, 12, 18, 0.97) 55%, rgba(0, 0, 0, 0.98) 100%); /* 使用深色渐变背景 */

    color: #f0f0f0; /* 更改文字颜色为浅色 */

    padding: 40px;

    border-radius: 12px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* 加深阴影效果 */

    border: 1px solid rgba(255, 255, 255, 0.10);

    font-family: '荆南波波黑-Bold', sans-serif;

    max-width: 500px;

    width: 90%;

    text-align: center;

    position: relative;

    animation: fadeIn 0.6s ease-out;

    will-change: opacity, transform;

    overflow: hidden; /* 以防装饰元素溢出 */

}

/* 弹窗标题 */

#custom-popup h2 {

    font-size: 26px;

    margin-bottom: 15px;

    font-weight: 700;

    letter-spacing: 0.06em;

    color: #ffffff; /* 白色标题 */

    background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 185, 225, 0.92), rgba(203, 210, 255, 0.90));

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 12px 30px rgba(255, 105, 180, 0.12);

}

 #custom-popup h2::after {

    content: '';

    display: block;

    width: min(280px, 66%);

    height: 1px;

    margin: 14px auto 0;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);

 }

 @keyframes keylineShimmer {

    0% {

        background-position: 0% 50%;

    }

    50% {

        background-position: 100% 50%;

    }

    100% {

        background-position: 0% 50%;

    }

 }

/* 弹窗描述 */

#custom-popup p {

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 25px;

    color: #dddddd; /* 浅灰色 */

}

 #custom-popup p.popup-subtitle {

    margin-bottom: 14px;

    color: rgba(255, 255, 255, 0.76);

    letter-spacing: 0.02em;

 }

 #custom-popup p.popup-keyline {

    display: inline-block;

    margin: 0 auto 22px;

    padding: 8px 10px;

    line-height: 1.55;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.04em;

    color: rgba(255, 255, 255, 0.92);

    background: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(234, 215, 255, 0.98) 26%, rgba(201, 167, 255, 0.98) 52%, rgba(255, 189, 232, 0.95) 78%, rgba(255, 255, 255, 0.98) 100%);

    background-size: 220% 100%;

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    white-space: nowrap;

    max-width: 100%;

    overflow: hidden;

    text-overflow: ellipsis;

    position: relative;

    isolation: isolate;

    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 22px rgba(201, 167, 255, 0.30);

    filter: drop-shadow(0 10px 22px rgba(201, 167, 255, 0.12));

    animation: keylineShimmer 6.5s ease-in-out infinite;

 }

 #custom-popup p.popup-keyline::before {

    content: '';

    position: absolute;

    inset: -22px -26px;

    border-radius: 999px;

    background: radial-gradient(closest-side at 28% 40%, rgba(201, 167, 255, 0.36), rgba(234, 215, 255, 0.20) 34%, rgba(255, 189, 232, 0.16) 56%, transparent 74%);

    filter: blur(8px);

    opacity: 0.95;

    z-index: -1;

    mix-blend-mode: screen;

    transform: translateX(-18%);

    animation: popupSpotlight 5.8s ease-in-out infinite;

 }

 #custom-popup p.popup-keyline::after {

    content: '';

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: min(320px, 86%);

    height: 1px;

    transform: translateX(-50%);

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);

    opacity: 0.55;

 }

 @media (prefers-reduced-motion: reduce) {

    #custom-popup p.popup-keyline::before {

        animation: none;

        transform: none;

    }

 }

/* 欢迎文字 */

#custom-popup .welcome-text {

    font-size: 28px;

    font-weight: 700;

    color: #ff69b4; /* 使用鲜艳的颜色作为点缀色，例如粉红色 */

    margin-bottom: 20px;

}

/* 装饰性元素 */

#custom-popup .decorative {

    font-size: 18px;

    margin-top: 10px;

    color: #cccccc; /* 浅灰色 */

}

/* 装饰性星星 */

#custom-popup .decorative-stars {

    position: absolute;

    top: -10px;

    right: -10px;

    width: 60px; /* 增大星星大小 */

    height: 60px;

    background: url('https://path-to-your-star-icon.png') no-repeat center center;

    background-size: contain;

    animation: twinkle 3s infinite;

    opacity: 0.8; /* 提高不透明度 */

}

/* 增加更多星星（可选） */

#custom-popup::after {

    content: '';

    position: absolute;

    bottom: -10px;

    left: -10px;

    width: 60px;

    height: 60px;

    background: url('https://path-to-your-star-icon.png') no-repeat center center;

    background-size: contain;

    animation: twinkle 4s infinite;

    opacity: 0.6;

}

/* 粒子背景动画 */

#custom-popup::before {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: transparent;

    pointer-events: none;

    background-image: radial-gradient(circle, #ffffff 1px, transparent 1px); /* 使用白色星星 */

    background-size: 20px 20px;

    animation: moveBackground 10s linear infinite;

    opacity: 0.3; /* 增加不透明度 */

}

/* 按钮容器 */

#custom-popup .buttons {

    margin-top: 30px;

    display: flex;

    justify-content: center;

    gap: 20px;

}

/* 按钮样式 */

#custom-popup .buttons button {

    padding: 12px 30px;

    font-size: 16px;

    border: none;

    border-radius: 25px;

    cursor: pointer;

    transition: background 0.3s, transform 0.2s, box-shadow 0.3s ease, color 0.3s ease;

    font-family: '荆南波波黑-Bold', sans-serif;

    position: relative;

    overflow: hidden;

    color: #ffffff; /* 按钮文字颜色为白色 */

    background: #8A2BE2; /* 唯美的紫色 */

    box-shadow: 0 0 10px rgba(135, 206, 250, 0.5); /* 添加柔和的蓝色光晕 */

}

/* 默认脉冲效果 */

#custom-popup .buttons button::before {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 30px; /* 增大脉冲半径 */

    height: 30px;

    background: rgba(135, 206, 250, 0.4); /* 柔和的蓝色 */

    border-radius: 50%;

    transform: translate(-50%, -50%) scale(1);

    opacity: 0.5;

    animation: pulse 2s infinite;

}

/* 悬停时的波纹效果 */

#custom-popup .buttons button::after {

    content: '';

    position: absolute;

    left: 50%;

    top: 50%;

    width: 0;

    height: 0;

    background: radial-gradient(circle, rgba(135, 206, 250, 0.4), transparent); /* 渐变波纹使用柔和的蓝色 */

    border-radius: 50%;

    transform: translate(-50%, -50%);

    opacity: 0;

    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;

}

#custom-popup .buttons button:hover::after {

    width: 300%;

    height: 300%;

    opacity: 1;

}

/* 悬停时按钮效果 */

#custom-popup .buttons button:hover {

    box-shadow: 0 0 20px rgba(135, 206, 250, 0.8); /* 增强蓝色光晕 */

    transform: translateY(-2px) scale(1.05); /* 增加缩放效果 */

    color: #e0ffff; /* 文字颜色变化为柔和的天蓝色 */

}

/* 脉冲动画 */

@keyframes pulse {

    0% {

        transform: translate(-50%, -50%) scale(1);

        opacity: 0.5;

    }

    50% {

        transform: translate(-50%, -50%) scale(1.5);

        opacity: 0;

    }

    100% {

        transform: translate(-50%, -50%) scale(1);

        opacity: 0.5;

    }

}

/* 星星闪烁动画 */

@keyframes twinkle {

    0%, 100% { opacity: 1; }

    50% { opacity: 0.5; }

}

/* 粒子背景动画 */

@keyframes moveBackground {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}

/* 渐入动画 */

@keyframes fadeIn {

    from { opacity: 0; transform: scale(0.8) rotate(-10deg); }

    to { opacity: 1; transform: scale(1) rotate(0deg); }

}

/* 淡出动画 */

@keyframes fadeOut {

    from { opacity: 1; transform: scale(1) rotate(0deg); }

    to { opacity: 0; transform: scale(0.8) rotate(10deg); }

}

/* 缩放动画 */

@keyframes shrink {

    from { transform: scale(1); }

    to { transform: scale(0.8); }

}

/* 不再提醒按钮 */

#custom-popup .buttons .no-remind {

    background: #555555; /* 深灰色 */

    color: #ffffff; /* 白色文字 */

    box-shadow: 0 0 10px rgba(135, 206, 250, 0.5); /* 添加柔和的蓝色光晕 */

}

#custom-popup .buttons .no-remind:hover {

    background: #777777; /* 较浅灰色 */

    transform: translateY(-2px) scale(1.05);

    box-shadow: 0 0 20px rgba(135, 206, 250, 0.5); /* 添加蓝色光晕 */

}

/* 我已知晓按钮 */

#custom-popup .buttons .acknowledge {

    background: #8A2BE2; /* 唯美的紫色 */

    color: #fff;

}

#custom-popup .buttons .acknowledge:hover {

    background: #6A0DAD; /* 深紫色 */

    transform: translateY(-2px) scale(1.05);

    box-shadow: 0 0 20px rgba(135, 206, 250, 0.8); /* 增强蓝色光晕 */

}

/* 粒子效果容器（可选） */

#particles-js {

    position: absolute;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: -1;

}

/* 禁用背景滚动 */

body.popup-open {

    overflow: hidden;

}

/* 响应式设计 */

@media (max-width: 480px) {

    #custom-popup {

        padding: 20px;

    }

    

    #custom-popup h2 {

        font-size: 20px;

    }

    

    #custom-popup p {

        font-size: 14px;

    }

    

    #custom-popup .welcome-text {

        font-size: 24px;

    }

    

    #custom-popup .decorative {

        font-size: 16px;

    }

    

    #custom-popup .buttons button {

        padding: 10px 20px;

        font-size: 14px;

    }

}

/* 按钮粒子效果（可选） */

#custom-popup .buttons button::after {

    content: '';

    position: absolute;

    top: 50%;

    left: 50%;

    width: 200%;

    height: 200%;

    background: transparent;

    pointer-events: none;

    background-image: radial-gradient(circle, rgba(135, 206, 250, 0.5) 1px, transparent 1px); /* 柔和的蓝色粒子 */

    background-size: 15px 15px;

    transform: translate(-50%, -50%) rotate(0deg);

    animation: rotateParticles 20s linear infinite;

    opacity: 0.3;

    border-radius: 50%;

}

@keyframes rotateParticles {

    from { transform: translate(-50%, -50%) rotate(0deg); }

    to { transform: translate(-50%, -50%) rotate(360deg); }

}

.donate_pic img {

    width: 400px;

}

document.addEventListener("DOMContentLoaded", function() {

    const noReminder = localStorage.getItem('noReminder');

    if (!noReminder) {

        // 创建遮罩层

        const overlay = document.createElement('div');

        overlay.id = 'custom-popup-overlay';

        overlay.setAttribute('role', 'dialog');

        overlay.setAttribute('aria-modal', 'true');

        overlay.setAttribute('aria-labelledby', 'popup-title');

        // 创建弹窗容器

        const popup = document.createElement('div');

        popup.id = 'custom-popup';

        // 填充弹窗内容

        popup.innerHTML = `

            <h2 id="popup-title">欢迎来到浪漫宇宙</h2>

            <p class="popup-subtitle">在这里，您将体验到美与自由的交汇点，充满爱与舒适的空间。</p>
            <p class="popup-keyline">探索更多与知识库可能就是你正在找的喔</p>       
            <div class="welcome-text">

                Welcome<span>₍ᐢ. ̮.ᐢ₎</span>

            </div>

            <div class="decorative">*:･. ♡</div>

            <div class="decorative-stars"></div>

            <div class="buttons">

                <button class="no-remind">不再提醒</button>

                <button class="acknowledge">我已知晓</button>

            </div>

        `;

        // 将弹窗添加到遮罩层

        overlay.appendChild(popup);

        // 将遮罩层添加到body

        document.body.appendChild(overlay);

        document.body.classList.add('popup-open'); // 禁用背景滚动

        // 如果使用particles.js，初始化粒子效果

        /*

        particlesJS('particles-js', {

            "particles": {

                "number": { "value": 50 },

                "color": { "value": "#ffffff" }, // 星星颜色改为白色

                "shape": { "type": "circle" },

                "opacity": { "value": 0.8 }, // 提高不透明度

                "size": { "value": 3 },

                "move": { "enable": true, "speed": 1 } // 减慢移动速度以匹配银河效果

            },

            "interactivity": {

                "detect_on": "canvas",

                "events": { "onhover": { "enable": true, "mode": "repulse" } }

            }

        });

        */

        // 设置初始焦点

        const acknowledgeButton = popup.querySelector('.acknowledge');

        acknowledgeButton.focus();

        // 处理按钮点击事件

        const noRemindButton = popup.querySelector('.no-remind');

        acknowledgeButton.addEventListener('click', closePopup);

        noRemindButton.addEventListener('click', function() {

            localStorage.setItem('noReminder', 'true');

            closePopup();

        });

        // 关闭弹窗函数

        function closePopup() {

            // 应用淡出和缩放动画

            popup.style.animation = 'fadeOut 0.3s forwards, shrink 0.3s forwards';

            overlay.style.animation = 'fadeOut 0.3s forwards';

            // 移除弹窗和遮罩层

            setTimeout(() => {

                if (overlay && overlay.parentNode) {

                    overlay.parentNode.removeChild(overlay);

                    document.body.classList.remove('popup-open'); // 恢复背景滚动

                }

            }, 300); // 动画持续时间与 CSS 动画时间匹配

            // 移除键盘事件监听器

            document.removeEventListener('keydown', handleKeyDown);

        }

        // 允许通过按 Esc 键关闭弹窗

        function handleKeyDown(event) {

            if (event.key === 'Escape') {

                closePopup();

            }

        }

        document.addEventListener('keydown', handleKeyDown);

    }

});