/* ripple.css - 只加粗涟漪边框，往外扩散时逐渐变细，速度稳定 */

/* 主容器 - 全屏覆盖，完全独立 */
.universal-ripple {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 核心能量源点 - 降低亮度版本 */
.ripple-origin {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(120, 120, 120, 0.6) 0%,
            rgba(80, 150, 220, 0.5) 30%,
            rgba(60, 110, 180, 0.3) 60%,
            transparent 80%);
    filter: blur(1px) brightness(0.9);
    box-shadow:
        0 0 20px 10px rgba(80, 150, 220, 0.3),
        0 0 40px 20px rgba(60, 110, 180, 0.15);
    animation: origin-pulse 3s ease-out infinite;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 涟漪波环基础样式 */
.ripple-wave {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    border-style: solid;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.1);
}

/* 涟漪扩散动画 - 往外扩散时逐渐变细 */
@keyframes ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0.7;
        border-color: rgba(102, 179, 255, 0.8);
        border-width: 4px;
    }

    20% {
        opacity: 0.6;
        border-color: rgba(66, 133, 244, 0.7);
        border-width: 3px;
    }

    50% {
        opacity: 0.3;
        border-color: rgba(42, 159, 214, 0.5);
        border-width: 2px;
    }

    80% {
        opacity: 0.1;
        border-color: rgba(42, 159, 214, 0.2);
        border-width: 1px;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
        border-color: rgba(42, 159, 214, 0);
        border-width: 0.5px;
    }
}

/* 涟漪波 - 稳定速度，不堆叠 */
/* 使用相同的动画时间，但延迟不同，确保波之间保持稳定间隔 */
.wave-a {
    width: 150vmax;
    height: 150vmax;
    border: 4px solid rgba(102, 179, 255, 0.7);
    animation: ripple-expand 12s linear infinite;
}

.wave-b {
    width: 160vmax;
    height: 160vmax;
    border: 4px solid rgba(66, 133, 244, 0.6);
    animation: ripple-expand 12s linear infinite 2s;
}

.wave-c {
    width: 170vmax;
    height: 170vmax;
    border: 4px solid rgba(42, 159, 214, 0.5);
    animation: ripple-expand 12s linear infinite 4s;
}

.wave-d {
    width: 180vmax;
    height: 180vmax;
    border: 4px solid rgba(66, 133, 244, 0.4);
    animation: ripple-expand 12s linear infinite 6s;
}

.wave-e {
    width: 190vmax;
    height: 190vmax;
    border: 4px solid rgba(42, 159, 214, 0.3);
    animation: ripple-expand 12s linear infinite 8s;
}

.wave-f {
    width: 200vmax;
    height: 200vmax;
    border: 4px solid rgba(66, 133, 244, 0.2);
    animation: ripple-expand 12s linear infinite 10s;
}

/* 原点脉动动画 */
@keyframes origin-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
        filter: blur(2px) brightness(1.3);
    }
}