body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    min-height: 300vh;
}

.test {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: #FFF; 
    position: relative; /* Establishes positioning context */
    overflow: hidden; /* Prevents animated gradients from causing scrollbars */
}

/* Forces the SVG wrapper to cover the entire parent and sit in the background */
.svg-background {
    position: absolute;
    inset: 0; /* Shorthand for top, right, bottom, left: 0 */
    z-index: 0;
    pointer-events: none; /* Prevents the SVG from blocking clicks */
}

/* Ensures the SVG scales like 'background-size: cover' */
.svg-background svg {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

/* Keeps your text above the background */
.content {
    position: relative;
    z-index: 1;
}

.ball {
    position: relative;
    z-index: 1;
    width: 120px;
    height: 120px;
    background: #111;
    border-radius: 50%;
    cursor: grab;
    opacity: 0.8;
    
    /* Critical for custom JS drag */
    touch-action: none; 
    user-select: none;
}

.ball:active {
    cursor: grabbing;
}