/* Wave Background component styles (ported from the React inline styles) */

.waves-component {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000; /* overridden inline via data-background */
    /* pointer position, updated by waves.js */
    --x: -0.5rem;
    --y: 50%;
}

.waves-component .js-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.waves-component .pointer-dot {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    transform: translate3d(calc(var(--x) - 50%), calc(var(--y) - 50%), 0);
    will-change: transform;
    pointer-events: none;
}