:root {
            --cocoa: #2D1B14;
            --dark-choc: #1A0F0A;
            --cream: #F9F7F2;
            --gold: #D4AF37;
            --charcoal: #121212;
            --dusty-rose: #E5D1D0;
        }

        body {
            background-color: var(--cream);
            color: var(--dark-choc);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .serif { font-family: 'Playfair Display', serif; }
        .cursive { font-family: 'Beth Ellen', cursive; }

        /* Animation System */
        .page-node { display: none; opacity: 0; }
        .page-node.active { display: block; animation: fadeIn 1.2s forwards ease-out; }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Intro Splash */
        #intro-overlay {
            position: fixed; inset: 0; background: var(--cocoa);
            z-index: 10000; display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            transition: opacity 1.5s ease;
            background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
        }

        .gold-line {
            height: 1px; width: 0; background: var(--gold);
            margin-top: 10px; transition: width 2s ease;
        }

        /* Scroll Drip */
        .drip-line {
            width: 1px; background: var(--dark-choc);
            height: 80px; position: relative;
            animation: dripDown 3s infinite;
        }
        @keyframes dripDown {
            0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
            50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
            100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
        }

        /* Custom UI */
        .btn-luxe {
            padding: 1rem 2rem; border: 1px solid var(--dark-choc);
            font-size: 10px; letter-spacing: 4px; text-transform: uppercase;
            transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
            background: transparent; cursor: pointer;
        }
        .btn-luxe:hover { background: var(--dark-choc); color: var(--cream); }

        .btn-gold { border-color: var(--gold); color: var(--gold); }
        .btn-gold:hover { background: var(--gold); color: white; }

        .nav-link { font-size: 10px; text-transform: uppercase; letter-spacing: 3px; cursor: pointer; transition: opacity 0.3s; }
        .nav-link:hover { opacity: 0.5; }

        .cake-card img { transition: transform 2s ease, filter 0.8s ease; filter: sepia(20%) brightness(0.9); }
        .cake-card:hover img { transform: scale(1.05); filter: sepia(0%) brightness(1); }

        .modal {
            position: fixed; inset: 0; background: rgba(0,0,0,0.4);
            backdrop-filter: blur(10px); display: none; z-index: 9999;
            align-items: center; justify-content: center; padding: 20px;
        }
        .modal.active { display: flex; }

        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        /* Parallax Background */
        .parallax-bg {
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }

        /* Cart & Sidebar */
        #side-drawer {
            position: fixed; top: 0; right: 0; height: 100%; width: 100%; max-width: 450px;
            background: white; transform: translateX(100%); transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
            z-index: 10001; box-shadow: -10px 0 30px rgba(0,0,0,0.05);
        }
        #side-drawer.active { transform: translateX(0); }