* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
}

@font-face {
    font-family: raleway_f;
    src: url(../fonts/raleway-regular.woff2);
    font-display: swap;
}

@font-face {
    font-family: raleway_f;
    src: url(../fonts/raleway-black.woff2);
    font-weight: 900;
    font-display: swap;
}

html {
    scrollbar-width: none;
}

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

body {
    background-color: var(--bg);
    color: var(--fg);
    font-family: raleway_f, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.5s var(--transition-smooth), color 0.5s var(--transition-smooth);
    cursor: none;
    overflow-x: hidden;
    touch-action: manipulation;
}

@media (pointer: coarse) {

    body,
    * {
        cursor: auto;
    }
}

/* Noise Texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 200px 200px;
    opacity: var(--noise-opacity);
}

.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    pointer-events: none;
    z-index: 99999;
    left: var(--cursor-x, 0);
    top: var(--cursor-y, 0);
    transform: translate(-50%, -50%) scale(1);
    mix-blend-mode: difference;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    opacity: 0;
    will-change: transform, opacity;
}

body:hover .custom-cursor.has-moved {
    opacity: 1;
}

.custom-cursor.cursor-hover {
    transform: translate(-50%, -50%) scale(3);
    background-color: #ffffff;
    opacity: 1;
    mix-blend-mode: difference;
}

/* Animations */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}