/* 美化点击粒子效果 */


/* 烟花效果优化 */

.fireworks {
    pointer-events: none;
    position: fixed;
    z-index: 9999;
}


/* 爱心效果美化 */

.click-heart {
    animation: heartFloat 1.5s ease-out forwards;
    pointer-events: none;
    position: fixed;
    z-index: 9999;
    font-size: 20px;
    color: #ff6b9d;
    text-shadow: 0 0 10px rgba(255, 107, 157, 0.8);
}

@keyframes heartFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-30px) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.8);
    }
}


/* 文字点击效果美化 */

.click-show-text {
    pointer-events: none;
    position: fixed;
    z-index: 9999;
    font-weight: 600;
    animation: textFloat 2s ease-out forwards;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(74, 177, 245, 0.6), 0 0 30px rgba(74, 177, 245, 0.4);
    color: #fff;
    user-select: none;
}

@keyframes textFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
    25% {
        opacity: 0.9;
        transform: translateY(-20px) scale(1.1) rotate(-5deg);
    }
    50% {
        opacity: 0.8;
        transform: translateY(-40px) scale(1.15) rotate(5deg);
    }
    75% {
        opacity: 0.5;
        transform: translateY(-60px) scale(1.1) rotate(-3deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-80px) scale(0.9) rotate(0deg);
    }
}


/* 增强粒子效果的光晕 */

.fireworks canvas {
    filter: blur(0.5px);
    opacity: 0.9;
}


/* 暗色模式下的文字效果 */

[data-theme='dark'] .click-show-text {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(74, 177, 245, 0.7), 0 0 30px rgba(74, 177, 245, 0.5);
    color: #fff;
}

[data-theme='dark'] .click-heart {
    color: #ff6b9d;
    text-shadow: 0 0 15px rgba(255, 107, 157, 0.9);
}


/* 移动端优化 */

@media screen and (max-width: 768px) {
    .click-show-text {
        font-size: 14px;
        animation-duration: 1.5s;
    }
    .click-heart {
        font-size: 16px;
        animation-duration: 1.2s;
    }
}


/* 添加点击涟漪效果 */

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.click-ripple {
    position: fixed;
    border-radius: 50%;
    background: rgba(74, 177, 245, 0.3);
    pointer-events: none;
    z-index: 9998;
    animation: ripple 0.6s ease-out;
}