html {
    background-color: #fbfbfb;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

::selection {
    background-color: #22bbad;
    color: #171717;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #fbfbfb;
}

::-webkit-scrollbar-thumb {
    background: #171717;
}

/* Image Hover Reveal Styles for Work Grid */
.work-item .img-wrapper {
    overflow: hidden;
}

.work-item img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
    filter: grayscale(100%);
}

.work-item:hover img {
    transform: scale(1.05);
    filter: grayscale(0%);
}

/* Smooth modal transition */
#modal {
    transition: opacity 0.4s ease-in-out;
}
#modal.show {
    opacity: 1;
}

/* Menu Toggle */
.menu-open .line-1 {
    transform: translateY(4px) rotate(45deg);
}
.menu-open .line-2 {
    transform: translateY(-4px) rotate(-45deg);
}

/* 1. Ensure the parent container can't be clicked and stays in the background */
.hero-circles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    /* Softens all circles at once for a modern 'glassmorphism' look */
    filter: blur(60px); 
}

/* 2. The wrapper handles the slow random drifting movement */
.hero-circle-wrapper {
    position: absolute;
    pointer-events: none;
    will-change: transform; /* Optimization for smoother GSAP animations */
}

/* 3. The inner circle handles the mouse-parallax and visual styling */
.hero-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /* Increased opacity slightly (0.3) to make faster movement more visible */
    background: radial-gradient(
        circle, 
        rgba(34, 187, 173, 0.3) 0%, 
        rgba(34, 187, 173, 0) 75%
    );
    /* Individual blur can help smaller circles feel 'sharper' than big ones */
    filter: blur(40px); 
}

.hero-rotating-gradient {
    width: 900px;
    height: 900px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        rgba(34, 187, 173, 0.10),
        rgba(34, 187, 173, 0.02),
        rgba(255, 255, 255, 0),
        rgba(34, 187, 173, 0.08),
        rgba(255, 255, 255, 0)
    );
    border-radius: 9999px;
    filter: blur(90px);
    opacity: 0.35;
    will-change: transform;
}

.hero-grain {
    opacity: 0.035;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(0,0,0,0.7) 0.5px, transparent 0.6px),
        radial-gradient(circle at 80% 40%, rgba(0,0,0,0.5) 0.5px, transparent 0.6px),
        radial-gradient(circle at 40% 80%, rgba(0,0,0,0.4) 0.5px, transparent 0.6px),
        radial-gradient(circle at 60% 60%, rgba(0,0,0,0.35) 0.5px, transparent 0.6px);
    background-size: 120px 120px, 140px 140px, 160px 160px, 180px 180px;
    mix-blend-mode: multiply;
    will-change: transform;
}

/* -------------------------------- */
/* IMAGE PROTECTION */
/* -------------------------------- */
img {
    user-select: none;
    -webkit-user-drag: none;
}