:root {
            --cursor-size: 20px;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: transparent;
            color: #1a1a1a;
            overflow-x: hidden;
            cursor: none;
            margin: 0;
            position: relative;
            /* Prevent rubber-banding on mobile */
            overscroll-behavior-y: none;
        }

        /* Restore default cursor on touch devices */
        @media (hover: none) and (pointer: coarse) {
            body {
                cursor: auto;
            }
            .cursor-dot, .cursor-outline {
                display: none !important;
            }
        }

        h1, h2, h3, h4, .font-display {
            font-family: 'Syne', sans-serif;
        }

        /* 1. Grain Texture Overlay */
        .noise-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 50;
            opacity: 0.06;
            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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        /* 2. Custom Cursor */
        .cursor-dot,
        .cursor-outline {
            position: fixed;
            top: 0;
            left: 0;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            z-index: 10000;
            pointer-events: none;
            mix-blend-mode: difference;
        }
        .cursor-dot {
            width: 8px;
            height: 8px;
            background-color: white;
        }
        .cursor-outline {
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            transition: width 0.2s, height 0.2s, background-color 0.2s;
        }
        
        /* 3. Interactive Canvas Background */
        #gradient-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            background-color: #f8f7f4;
        }

        /* 4. Text Reveal Animation */
        .reveal-text {
            clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
            transform: translateY(100px);
            opacity: 0;
            transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal-text.visible {
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
            transform: translateY(0);
            opacity: 1;
        }

        /* 5. Gemini Prompt Glow */
        .gemini-glow {
            position: relative;
        }
        .gemini-glow::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(45deg, #ff00cc, #3333ff, #00ccff);
            z-index: -1;
            border-radius: 18px;
            filter: blur(15px);
            opacity: 0.6;
            animation: border-rotate 4s linear infinite;
            background-size: 200% 200%;
        }
        @keyframes border-rotate {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* 6. Marquee */
        .marquee-container {
            overflow: hidden;
            white-space: nowrap;
        }
        .marquee-content {
            display: inline-block;
            animation: marquee 40s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        /* 7. Image Interactions */
        .art-card {
            perspective: 1000px;
        }
        .art-card img {
            transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s;
            will-change: transform;
        }
        /* Mobile Specific Card Styles */
        @media (hover: hover) {
            .art-card:hover img {
                transform: scale(1.03) rotateX(2deg) rotateY(-2deg);
                filter: contrast(110%);
            }
        }
        
        /* 8. Magnetic Buttons */
        .magnetic-btn {
            transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        /* Mobile Menu Transitions */
        #mobile-menu-overlay {
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
        }
        #mobile-menu-overlay.open {
            transform: translateY(0%);
            opacity: 1;
        }
        #mobile-menu-overlay.closed {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }

        /* Smooth Scrollbar hide */
        ::-webkit-scrollbar { width: 0px; background: transparent; }