/* Fonts Setup */
:root {
    --acid: #ccff00;
    --dark: #0a0a0a;
}

/* Custom Scrollbar Removal */
::-webkit-scrollbar {
    display: none;
}

* {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Cursor Hiding */
html,
body,
a,
button,
input,
select {
    cursor: none !important;
}

/* Base resets */
html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* Custom Cursor */
#cursor {
    /* Transitions removed to allow GSAP full control over precision */
}

#cursor.active {
    width: 60px;
    height: 60px;
    background: rgba(204, 255, 0, 0.1);
}

/* Grain Animation */
.grain {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.1;
    pointer-events: none;
    z-index: 9999;
    animation: grain 8s steps(10) infinite;
}

@keyframes grain {

    0%,
    100% {
        transform: translate(0, 0)
    }

    10% {
        transform: translate(-5%, -10%)
    }

    20% {
        transform: translate(-15%, 5%)
    }

    30% {
        transform: translate(7%, -25%)
    }

    40% {
        transform: translate(-5%, 25%)
    }

    50% {
        transform: translate(-15%, 10%)
    }

    60% {
        transform: translate(15%, 0%)
    }

    70% {
        transform: translate(0%, 15%)
    }

    80% {
        transform: translate(3%, 35%)
    }

    90% {
        transform: translate(-10%, 10%)
    }
}

/* Hero Animations */
@keyframes scroll-line {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

.animate-scroll-line {
    animation: scroll-line 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

/* WebGL Background */
#webgl {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Modal states */
.modal-active {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-active>div:last-child {
    transform: scale(1) !important;
}

/* Glassmorphism Refined */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Product Card Grid */
#product-grid {
    border-collapse: collapse;
}

.product-card {
    transition: background 0.5s;
}

.product-card:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Custom scroll-hide */
.scroll-hide::-webkit-scrollbar {
    display: none;
}

/* Text Selection */
::selection {
    background: var(--acid);
    color: var(--dark);
}

/* Inversion for Cursor visibility */
.mix-blend-difference {
    mix-blend-mode: difference;
}