@layer base {
    :root {
        /* Soft Light Mode - Premium Paper feel */
        --background: 0.94 0.01 270;
        --foreground: 0.25 0.02 270;
        --accent: 0.60 0.16 230;
        --border: 0.88 0.02 270;
        --card: 0.96 0.01 270;
        --muted: 0.90 0.02 270;
        --muted-foreground: 0.45 0.02 270;
        --fractal-noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");

        /* Decorative Elements Visibility */
        --grid-opacity: 0.12;
        --gradient-opacity: 0.35;
    }

    .dark {
        --background: 0.09 0.01 270;
        --foreground: 0.93 0.01 90;
        --accent: 0.72 0.14 230;
        --border: 0.20 0.01 270;
        --card: 0.12 0.01 270;
        --muted: 0.16 0.01 270;
        --muted-foreground: 0.58 0 0;
        --fractal-noise-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.1'/%3E%3C/svg%3E");

        /* Decorative Elements Visibility */
        --grid-opacity: 0.06;
        --gradient-opacity: 0.25;
    }

    * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border-color: oklch(var(--border));
        transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
    }

    body {
        background-color: oklch(var(--background));
        color: oklch(var(--foreground));
        cursor: none;
    }

    .noise {
        animation: foreground 1s steps(2) infinite;
        /* background-image: url(https://www.azerbaijaniswho.design/noise.png); */
        background-image: var(--fractal-noise-image);
        background-position: 50%;
        background-size: 60px;
        bottom: -20rem;
        height: calc(100vh + 50rem);
        left: -10rem;
        pointer-events: none;
        position: fixed;
        top: -20rem;
        width: calc(100% + 50rem);
        z-index: 999999
    }


    @keyframes foreground {
        0% {
            transform: translate3d(0, 9rem, 0)
        }

        10% {
            transform: translate3d(-1rem, -4rem, 0)
        }

        20% {
            transform: translate3d(-8rem, 2rem, 0)
        }

        30% {
            transform: translate3d(9rem, -9rem, 0)
        }

        40% {
            transform: translate3d(-2rem, 7rem, 0)
        }

        50% {
            transform: translate3d(-9rem, -4rem, 0)
        }

        60% {
            transform: translate3d(2rem, 6rem, 0)
        }

        70% {
            transform: translate3d(7rem, -8rem, 0)
        }

        80% {
            transform: translate3d(-9rem, 1rem, 0)
        }

        90% {
            transform: translate3d(6rem, -5rem, 0)
        }

        to {
            transform: translate3d(-7rem, 0, 0)
        }
    }


    html {
        scroll-behavior: smooth;
    }
}

/* Custom Cursor */
#custom-cursor {
    width: 20px;
    height: 20px;
    background-color: oklch(var(--foreground));
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.2s ease;
}

#custom-cursor-dot {
    width: 4px;
    height: 4px;
    background-color: oklch(var(--accent));
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}

/* Hide custom cursor on mobile */
@media (max-width: 768px) {
    #custom-cursor, #custom-cursor-dot {
        display: none;
    }

    body {
        cursor: auto;
    }
}

/* Scroll Progress Bar */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: oklch(var(--accent));
    z-index: 100;
}

/* Minimal Line Preloader */
#preloader-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: oklch(var(--accent));
    transition: width 0.2s ease-out;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Grid & Visual Elements */
.grid-overlay {
    opacity: var(--grid-opacity);
    background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px);
    background-size: 64px 64px;
    color: oklch(var(--foreground));
}

.hero-gradient {
    opacity: var(--gradient-opacity);
}

.icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.visual-element {
    opacity: 0;
}

.theme-transition * {
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}