/**
 * Reusable hover wave effect
 * Apply `.hover-wave` to any block-level component and optionally override
 * the CSS custom properties below to adjust size, speed, and color.
 */

.hover-wave {
    position: relative;
    overflow: hidden;
}

.hover-wave::after {
    content: '';
    position: absolute;
    width: var(--wave-width, 420px);
    height: var(--wave-height, 160%);
    bottom: var(--wave-bottom-offset, -30%);
    right: var(--wave-right-offset, -220px);
    background: linear-gradient(135deg,
        var(--wave-color-start, rgba(var(--theme-alternate-magenta-rgb), 0.6)) 0%,
        var(--wave-color-end, rgba(var(--theme-primary-rgb), 0.3)) 100%);
    opacity: 0;
    transform: translateX(var(--wave-start-translate, 80%));
    transform-origin: center;
    pointer-events: none;
    filter: blur(var(--wave-blur-start, 14px));
    will-change: transform, opacity, filter;
    z-index: var(--wave-overlay-z-index, 1);
}

.hover-wave:hover::after,
.hover-wave.wave-active::after {
    animation: hover-wave-sweep var(--wave-duration, 3.4s)
        var(--wave-easing, cubic-bezier(0.6, 0, 0.4, 1)) forwards;
}

@keyframes hover-wave-sweep {
    0% {
        opacity: var(--wave-opacity-start, 1);
        transform: translateX(var(--wave-start-translate, 80%));
        filter: blur(var(--wave-blur-start, 14px));
    }
    90% {
        opacity: var(--wave-opacity-mid, 1);
        transform: translateX(var(--wave-mid-translate, -360%));
        filter: blur(var(--wave-blur-mid, 12px));
    }
    100% {
        opacity: var(--wave-opacity-end, 0);
        transform: translateX(var(--wave-end-translate, -440%));
        filter: blur(var(--wave-blur-end, 18px));
    }
}