@tailwind base;
@tailwind components;
@tailwind utilities;

#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 9999;
    height: 30px;
    width: auto;
    display: inline-block;
    transform: scaleX(-1) translate(-50%, -50%);
    transform-origin: top left;
}


#custom-cursor svg {

    height: 100%;
    width: auto;
    display: block;
}

.bg-pattern {
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='0.5' fill='%23999'/%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: -1;
    pointer-events: none;
    background-repeat: repeat;
    background-position: 0 0;
    transition: background-position 2s ease-out;
}


@keyframes moveBackground {
    from { background-position: 0 0; }
    to { background-position: 1000px 1000px; }
}