* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

#stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    --mx: 50vw;
    --my: 50vh;
    --r: 0px;

    --px: 0px;
    --py: 0px;

    cursor: default;
}

.layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.layer img {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 112%;
    height: 112%;

    max-width: none;

    object-fit: cover;

    transform:
        translate3d(
            calc(-50% + var(--px)),
            calc(-50% + var(--py)),
            0
        );

    display: block;

    user-select: none;
    pointer-events: none;

    will-change: transform;
}

.layer.base {
    z-index: 1;
}

.layer.top {
    z-index: 2;

    -webkit-mask-image:
        radial-gradient(
            circle at var(--mx) var(--my),
            transparent 0,
            transparent var(--r),
            black calc(var(--r) + 35px)
        );

    mask-image:
        radial-gradient(
            circle at var(--mx) var(--my),
            transparent 0,
            transparent var(--r),
            black calc(var(--r) + 35px)
        );
}
```