/* =========================================================
   ADAMA GOOEY CURSOR
   Codrops Demo 1 inspired implementation
   ========================================================= */

:root {
    --adama-gooey-columns: 30;
    --adama-gooey-color: #00AEEF;
    --adama-gooey-blend: exclusion;
    --adama-gooey-radius: 0px;
}

.adama-gooey {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 999999;

    pointer-events: none;

    overflow: hidden;

    mix-blend-mode: var(--adama-gooey-blend);

    --adama-cell-size: calc(100vw / var(--adama-gooey-columns));

    filter: url("#adama-gooey-filter");
}

/*
 * Grid
 */
.adama-gooey__grid {
    display: grid;

    grid-template-columns:
        repeat(
            var(--adama-gooey-columns),
            var(--adama-cell-size)
        );

    width: 100%;
    height: 100%;

    align-content: start;
}

/*
 * Individual pixel
 */
.adama-gooey__pixel {
    width: var(--adama-cell-size);
    height: var(--adama-cell-size);

    background: var(--adama-gooey-color);

    opacity: 0;

    border-radius: var(--adama-gooey-radius);

    transform: translateZ(0);

    will-change: opacity;
}


/*
 * When mouse is outside
 */
.adama-gooey.is-hidden {
    opacity: 0;
}


/*
 * Firefox:
 * SVG filters on HTML elements can behave differently.
 * Keep the cells visible as a fallback.
 */
@supports (-moz-appearance: none) {

    .adama-gooey {
        filter: none;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --adama-gooey-columns: 15;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .adama-gooey {
        display: none;
    }

}