stylesheet">

/* Font Classes */
.satisfy-regular {
    font-family: "Satisfy", cursive;
    font-weight: 400;
    font-style: normal;
}

.moirai-one-regular {
    font-family: "Moirai One", system-ui;
    font-weight: 400;
    font-style: normal;
}

/* Root Colors */
:root {
    --burgundy: #740A03;
    --cream: #F1E9E9;
    --peach: #FFD6C1;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Typewriter Cursor */
#typewriter::after {
    content: '|';
    color: #D8A48F;
    animation: blink 0.7s step-end infinite;
}
@keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

/* Body */
body {
    background-color: var(--burgundy);
    color: var(--cream);
    font-family: 'Moirai One', system-ui; /* Updated font */
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Serif / Headings */
.serif {
    font-family: 'Satisfy', cursive; /* Updated font */
}

/* Custom UI Elements */
.btn-pill {
    padding: 12px 30px;
    border-radius: 9999px;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Moirai One', system-ui; /* buttons now use Moirai One */
}

.btn-burgundy { background: var(--burgundy); color: var(--cream); }
.btn-peach { background: var(--peach); color: var(--burgundy); }
.btn-peach:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    background: var(--cream);
}

/* Nav */
.glass-nav {
    background: rgba(116, 10, 3, 0.8);
    backdrop-filter: blur(10px);
}

/* Page */
.page { display: none; min-height: 100vh; animation: fadeIn 0.8s ease; }
.page.active { display: block; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Video Pulse Button */
.video-btn {
    width: 120px; height: 120px;
    border-radius: 50%;
    border: 1px solid var(--peach);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    animation: pulse 2s infinite;
    font-family: 'Moirai One', system-ui; /* consistent font */
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 214, 193, 0.4); }
    70% { box-shadow: 0 0 0 20px rgba(255, 214, 193, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 214, 193, 0); }
}

.rotating-text {
    position: absolute; width: 100%; height: 100%;
    animation: rotate 10s linear infinite;
    font-size: 8px; text-transform: uppercase; letter-spacing: 2px;
    font-family: 'Moirai One', system-ui;
}
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Sidebar / Modal */
.sidebar-panel {
    position: fixed; top: 0; right: 0; height: 100vh; width: 100%; max-width: 450px;
    background: var(--burgundy); border-left: 1px solid rgba(241, 233, 233, 0.1);
    z-index: 3000; transform: translateX(100%); transition: transform 0.5s ease;
}
.sidebar-panel.open { transform: translateX(0); }

.overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.7); 
    z-index: 2999; display: none;
}
.overlay.open { display: block; }

/* Product Card Hover */
.product-card img { transition: transform 0.7s ease; }
.product-card:hover img { transform: scale(1.05); }