:root {
            --cream: #FAF9F6;
            --caramel: #C68B59;
            --blush: #EAC7C7;
            --teddy-brown: #5D4037;
            --soft-sage: #D4E2D4;
        }

        body {
            background-color: var(--cream);
            color: #2D2D2D;
            font-family: 'Outfit', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        h1, h2, h3, .serif { font-family: 'Playfair Display', serif; }
        .cursive { font-family: 'La Belle Aurore', cursive; font-size: 1.5rem; }
        .rounded-font { font-family: 'Fredoka', sans-serif; }

        /* Smooth reveal animations */
        .reveal { opacity: 0; transform: translateY(40px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
        .reveal.visible { opacity: 1; transform: translateY(0); }

        .glass-nav {
            background: rgba(250, 249, 246, 0.9);
            backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid rgba(93, 64, 55, 0.05);
        }

        .teddy-card {
            background: white;
            border-radius: 20px;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(0,0,0,0.03);
        }

        .teddy-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 40px 80px -20px rgba(93, 64, 55, 0.1);
        }

        .btn-plush {
            background: var(--teddy-brown);
            color: white;
            padding: 14px 36px;
            border-radius: 100px;
            font-weight: 600;
            letter-spacing: 0.05em;
            transition: all 0.4s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-plush:hover {
            background: var(--caramel);
            transform: scale(1.02);
            box-shadow: 0 10px 30px rgba(198, 139, 89, 0.3);
        }

        .search-bar {
            background: rgba(93, 64, 55, 0.05);
            transition: all 0.3s ease;
        }

        .search-bar:focus-within {
            background: white;
            box-shadow: 0 0 0 2px var(--blush);
        }

        .hero-img {
            background-image: url('https://images.unsplash.com/photo-1559440666-44449836a992?auto=format&fit=crop&q=80&w=1920');
            background-size: cover;
            background-position: center;
        }

        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }

        .marquee-container {
            display: flex;
            width: 200%;
            animation: marquee 40s linear infinite;
        }

        .modal-blur {
            backdrop-filter: blur(8px);
            background: rgba(93, 64, 55, 0.2);
        }

        .badge-limited {
            background: linear-gradient(135deg, #C68B59, #5D4037);
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        /* Custom Animations for Gallery */
    @keyframes camera-float {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-20px) rotate(5deg); }
    }
    @keyframes film-strip {
        0% { transform: translateX(0); }
        100% { transform: translateX(-100%); }
    }
    @keyframes light-leak {
        0%, 100% { opacity: 0.05; transform: scale(1); }
        50% { opacity: 0.1; transform: scale(1.1); }
    }
    @keyframes rotate-slow {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    @keyframes flash {
        0%, 100% { opacity: 0; }
        50% { opacity: 0.3; }
    }
    @keyframes polaroid-pop {
        0% { transform: scale(0) rotate(-10deg); opacity: 0; }
        100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }

    /* Animation Classes */
    .animate-camera-float { animation: camera-float 6s ease-in-out infinite; }
    .animate-film-strip { animation: film-strip 20s linear infinite; }
    .animate-light-leak { animation: light-leak 8s ease-in-out infinite; }
    .animate-rotate-slow { animation: rotate-slow 20s linear infinite; }
    .animate-flash { animation: flash 3s ease-in-out; }
    .animate-polaroid-pop { animation: polaroid-pop 0.7s ease-out forwards; }

    /* Existing Animations (reused) */
    .animate-slide-up { 
        animation: slide-up 1s ease-out forwards; 
        opacity: 0;
    }
    .animate-fade-in { 
        animation: fade-in 1s ease-out forwards; 
        opacity: 0;
    }
    .animate-float-gentle { animation: float-gentle 5s ease-in-out infinite; }
    .animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }
    .animate-scroll-down { animation: scroll-down 2s ease-in-out infinite; }
    .animate-pulse { animation: pulse 2s ease-in-out infinite; }
    .animate-count { animation: count-up 1s ease-out forwards; }

    /* Gallery Specific Styles */
    .gallery-filter {
        background: white;
        border: 2px solid #D2691E;
        color: #D2691E;
        padding: 0.75rem 2rem;
        border-radius: 100px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 0.1em;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    .gallery-filter.active {
        background: #D2691E;
        color: white;
    }
    .gallery-filter:hover {
        letter-spacing: 0.15em;
    }

    .gallery-item {
        opacity: 0;
        transform: translateY(30px);
        animation: slide-up 0.8s ease-out forwards;
    }

    .scroll-trigger {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease-out;
    }
    .scroll-trigger.revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Custom Colors */
    .text-teddy-brown { color: #8B4513; }
    .text-blush { color: #F8C8DC; }
    .text-caramel { color: #D2691E; }
    .bg-blush { background-color: #F8C8DC; }

    .cursive {
        font-family: 'Brush Script MT', cursive;
        font-style: italic;
    }

    .btn-plush {
        background: #8B4513;
        color: white;
        padding: 1.5rem 3rem;
        border-radius: 100px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-size: 10px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    .btn-plush:hover {
        letter-spacing: 0.15em;
        box-shadow: 0 0 30px rgba(139, 69, 19, 0.3);
    }