/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 20:4 Unexpected "<"

**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Paint Splatter Effect</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #f5f5f5;
            position: relative;
        }
    </style>
</head>
<body>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        console.log("✅ Paint splatter effect is running!");

        const paletteColors = [
            "#D9E6EA", "#A5CAD2", "#5BA6CA", "#6495ED", "#003366", 
            "#FFAD60", "#D983AB", "#E2C1A1", "#F2D63C", "#C1A27D"
        ];

        function getRandomColor() {
            return paletteColors[Math.floor(Math.random() * paletteColors.length)];
        }

        let currentColor = getRandomColor();
        setInterval(() => {
            currentColor = getRandomColor();
        }, 1000);

        document.addEventListener("mousemove", function (event) {
            const splatter = document.createElement("div");
            splatter.style.position = "absolute";
            splatter.style.left = event.clientX + "px";
            splatter.style.top = event.clientY + "px";
            splatter.style.width = Math.random() * 10 + 5 + "px";
            splatter.style.height = splatter.style.width;
            splatter.style.backgroundColor = currentColor;
            splatter.style.borderRadius = "50%";
            splatter.style.opacity = "1";
            splatter.style.transition = "opacity 0.5s ease-out";
            document.body.appendChild(splatter);

            setTimeout(() => {
                splatter.style.opacity = "0";
                setTimeout(() => splatter.remove(), 500);
            }, 500);
        });
    });
</script>

</body>
</html>
