/* --- Root Variables & Styling --- */

        body {
            font-family: 'Inter', sans-serif;
            background-color: #0b0f19;
            color: #f3f4f6;
        }
        .font-serif {
            font-family: 'Cormorant Garamond', serif;
        }
        .gold-text {
            color: #d4af37;
        }
        .gold-bg {
            background-color: #d4af37;
        }
        .gold-border {
            border-color: #d4af37;
        }

        /* --- Ribbon-Cutting Overlay Styles --- */
        #ribbonOverlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background-color: #0b0f19;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 1s ease, visibility 1s ease;
        }

        #ribbonOverlay.cut {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .ribbon-container {
            position: relative;
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .ribbon-half {
            position: absolute;
            width: 50%;
            height: 100%;
            background: linear-gradient(135deg, #b8860b, #ffd700, #b8860b);
            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
            transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
        }

        .ribbon-left {
            left: 0;
            border-right: 2px solid #8b6508;
        }

        .ribbon-right {
            right: 0;
            border-left: 2px solid #8b6508;
        }

        /* Cut Animation */
        #ribbonOverlay.cut .ribbon-left {
            transform: translateX(-100%) rotate(-10deg);
        }

        #ribbonOverlay.cut .ribbon-right {
            transform: translateX(100%) rotate(10deg);
        }

        .cut-button {
            position: relative;
            z-index: 10;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .cut-button:hover {
            transform: scale(1.1);
        }