/* Background SVG / layering */
.background {
    --background: #080808;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 0;
    overflow: hidden;
    background-color: var(--background); /* matches SVG base */
}

.bg-svg {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.bg-svg rect {
    fill: var(--background);
}

@media (prefers-reduced-motion: reduce) {
    .pulses,
    .ripples {
        display: none;
    }
}

/* Cursor-following ripple styles */
.cursor-ripple {
    fill: none;
    stroke: #1db954;
    stroke-width: 0.6;
    opacity: 0.85;
    transform-origin: center;
    transform-box: fill-box;
    animation: ripple-anim 0.9s linear forwards;
}

@keyframes ripple-anim {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(10);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-ripple {
        animation: none;
        display: none;
    }
}