/* ===== 鼠标点击特效 =====
 * 水波纹(ripple)与粒子(particle)两种效果,均不影响页面交互。
 */

/* ---------- 水波纹 ---------- */
.click-ripple {
    position: fixed;
    z-index: 9998;
    border-radius: 50%;
    background: color-mix(in srgb, var(--s-color-primary) 32%, transparent);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.9;
    animation: click-ripple-expand 620ms cubic-bezier(0.2, 0, 0, 1) forwards;
    will-change: transform, opacity;
}

@keyframes click-ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.75;
    }
    60% {
        opacity: 0.35;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* ---------- 粒子迸发 ---------- */
.click-particle {
    position: fixed;
    z-index: 9998;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--s-color-primary) 78%, transparent);
    pointer-events: none;
    opacity: 1;
    transform: translate(0, 0) scale(1);
    animation: click-particle-burst 560ms cubic-bezier(0.2, 0, 0, 1) forwards;
    will-change: transform, opacity;
}

@keyframes click-particle-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    70% {
        opacity: 0.85;
    }
    100% {
        transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.2);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .click-ripple,
    .click-particle {
        display: none !important;
    }
}