:root {
            --base: #FFFDDE;
            --lavender: #D9D7F1;
            --peach: #FDC3A1;
            --bold-red: #D25D5D;
            --transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        body {
            background-color: var(--base);
            color: var(--bold-red);
            font-family: 'Space Grotesk', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, h4, .brand-font {
            font-family: 'Barriecito', cursive;
        }

        /* Abstract Animations */
        @keyframes float {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            33% { transform: translate(25px, -30px) rotate(3deg); }
            66% { transform: translate(-15px, 15px) rotate(-2deg); }
        }

        @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%) }
        }

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

        .hero-bg {
            background: linear-gradient(135deg, #FFFDDE 0%, #D9D7F1 50%, #FDC3A1 100%);
            background-size: 200% 200%;
            animation: moveGradient 20s ease infinite;
        }

        @keyframes moveGradient {
            0% { background-position: 0% 50% }
            50% { background-position: 100% 50% }
            100% { background-position: 0% 50% }
        }

        .floating-obj { animation: float 10s ease-in-out infinite; }
        
        /* Lens Magnifier */
        .lens-overlay {
            position: fixed; width: 280px; height: 280px;
            border: 1px solid var(--bold-red); border-radius: 50%;
            pointer-events: none; z-index: 9000; display: none;
            overflow: hidden; box-shadow: 0 0 120px rgba(210, 93, 93, 0.25);
            backdrop-filter: contrast(1.3) brightness(1.1) saturate(1.4);
        }

        /* Page Layouts */
        .page-container { display: none; opacity: 0; transform: translateY(20px); transition: var(--transition); }
        .page-container.active { display: block; opacity: 1; transform: translateY(0); }

        .abstract-grid-item { position: absolute; transition: var(--transition); cursor: pointer; }
        .abstract-grid-item:hover { z-index: 50; transform: scale(1.15) !important; }

        .horizontal-scroller { display: flex; width: 400vw; transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); }

        /* UI Elements */
        .glass-nav { background: rgba(255, 253, 222, 0.7); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(210, 93, 93, 0.1); }
        .filter-btn.active { background: var(--bold-red); color: var(--base); }
        
        .custom-cursor {
            width: 10px; height: 10px; background: var(--bold-red); border-radius: 50%;
            position: fixed; pointer-events: none; z-index: 10000; transition: transform 0.1s;
        }

        /* Modal Transitions */
        .overlay-active { overflow: hidden; }
        .modal-enter { transform: translateX(100%); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
        .modal-show { transform: translateX(0); }