#darkness {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;

    z-index: 100;
}

#darkness-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills container without distortion */
    transition: mask-position 0.1s ease; /* Smooth movement of the spotlight */

    /* Mask: Radial gradient centered at mouse position */
    mask-image: radial-gradient(
        circle at var(--mouse-x) var(--mouse-y), /* Center at CSS variables */
        rgba(255, 255, 255, 0) 0%, /* Fully transparent (white = opaque mask) */
        rgba(255, 255, 255, 0.7) 100px, /* Fade start */
        rgba(255, 255, 255, 1.0) 200px /* Fade end */
    );
    -webkit-mask-image: radial-gradient( /* Safari support */
        circle at var(--mouse-x) var(--mouse-y),
        rgba(255, 255, 255, 0) 0%, /* Fully visible (white = opaque mask) */
        rgba(255, 255, 255, 0.7) 100px, /* Fade start */
        rgba(255, 255, 255, 1.0) 200px /* Fade end */
    );
}

#rope {
    position: absolute;
    top: 0px;
    left: 5%;

    z-index: 101;
}