@keyframes floatAnimation {
    0% { transform: translate(0, 0); }
    50% { transform: translate(var(--randomX, 15px), var(--randomY, 15px)); }
    100% { transform: translate(0, 0); }
}

:root {
    --dot-size: 0.25em;
    --line-color: #333;
    --line-contrast: 2000%;
    --photo-brightness: 80%;
    --photo-contrast: 120%;
    --blend-mode: hard-light;
}

.random-image {
    position: absolute;
    width: 30vw;
    max-width: 400px;
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    display: none;
    z-index: -1;
    overflow: hidden;

    /* Crisp Halftone Effect */
    filter: grayscale(100%) brightness(var(--photo-brightness)) contrast(var(--photo-contrast));

    /* Edge Blur Effect */
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
}

/* 3-Layer Halftone Effect */
.random-image::before,
.random-image::after,
.random-image .halftone-layer {
    content: "";
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle at center, var(--line-color) 30%, transparent 31%);
    background-size: var(--dot-size) var(--dot-size);
    image-rendering: pixelated;
    filter: contrast(var(--line-contrast));
    mix-blend-mode: var(--blend-mode);
    opacity: 0.5;
    pointer-events: none;
}

/* Rotating & Layering the Halftone Grids */
.random-image::before {
    transform: rotate(15deg);
    animation: radialHalftoneMove 20s infinite linear;
}

.random-image::after {
    transform: rotate(-15deg);
    animation: radialHalftoneMove 20s infinite reverse linear;
}

.random-image .halftone-layer {
    transform: rotate(30deg);
    animation: slowScaleShift 30s infinite alternate ease-in-out;
}

/* Radial Movement for Dots */
@keyframes radialHalftoneMove {
    0% {
        background-position: center;
    }
    100% {
        background-position: 50% 10%;
    }
}

/* Slight Dot Scaling for a Breathing Effect */
@keyframes slowScaleShift {
    0% {
        background-size: calc(var(--dot-size) * 1);
    }
    50% {
        background-size: calc(var(--dot-size) * 0.5);
    }
    100% {
        background-size: calc(var(--dot-size) * 1.2);
    }
}

.container {
    position: relative;
    z-index: 10;
}