.rmbe-effect-ripple {
    border: 1px solid rgba(98, 190, 255, 0.48);
    background:
        linear-gradient(180deg, #103f69 0%, #0a2e4f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -10px 22px rgba(0, 15, 31, 0.20),
        0 0 0 1px rgba(15, 112, 176, 0.24),
        0 6px 18px rgba(0, 12, 28, 0.18);
}

.rmbe-effect-ripple .rmbe-button__surface {
    background:
        radial-gradient(
            circle 76px at var(--rmbe-x) var(--rmbe-y),
            rgba(103, 204, 255, calc(0.18 * var(--rmbe-active))) 0%,
            rgba(66, 165, 225, calc(0.09 * var(--rmbe-active))) 34%,
            rgba(21, 93, 148, 0) 72%
        ),
        linear-gradient(110deg, rgba(255, 255, 255, 0.035), transparent 38%, rgba(100, 200, 255, 0.025) 64%, transparent);
    transition: opacity 180ms ease;
}

.rmbe-effect-ripple:hover,
.rmbe-effect-ripple:focus-visible {
    filter: brightness(1.06);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.11),
        inset 0 -10px 22px rgba(0, 15, 31, 0.15),
        0 0 0 1px rgba(57, 162, 228, 0.32),
        0 7px 20px rgba(0, 12, 28, 0.20);
}

.rmbe-ripple-wave {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    margin: -7.5px 0 0 -7.5px;
    border: 1.5px solid rgba(170, 226, 255, 0.70);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(var(--rmbe-wave-x), var(--rmbe-wave-y), 0) scale(0.38);
    transform-origin: center;
    box-shadow:
        0 0 0 6px rgba(122, 207, 255, 0.16),
        0 0 0 12px rgba(92, 184, 238, 0.07),
        0 0 12px rgba(120, 211, 255, 0.25);
    animation: rmbe-ripple-expand 1150ms cubic-bezier(0.12, 0.72, 0.26, 1) forwards;
}

.rmbe-ripple-wave:nth-last-child(even) {
    animation-duration: 1280ms;
    border-color: rgba(151, 217, 255, 0.54);
}

@keyframes rmbe-ripple-expand {
    0% {
        opacity: 0;
        transform: translate3d(var(--rmbe-wave-x), var(--rmbe-wave-y), 0) scale(0.35);
    }
    12% {
        opacity: 0.82;
    }
    62% {
        opacity: 0.31;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--rmbe-wave-x), var(--rmbe-wave-y), 0) scale(7.8);
    }
}

@media (hover: none) {
    .rmbe-effect-ripple:hover {
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rmbe-effect-ripple .rmbe-button__surface {
        background: linear-gradient(110deg, rgba(255, 255, 255, 0.035), transparent 38%, rgba(100, 200, 255, 0.025) 64%, transparent);
    }

    .rmbe-ripple-wave {
        display: none !important;
        animation: none !important;
    }
}