/* Custom Styles for Enchanted Tea & Treasures */

:root {
    --navy-900: #0F172A;
    --gold-500: #D4AF37;
    --gold-600: #B8942E;
    --gold-100: #FDF9F3;
    --stone-50: #FAFAF9;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Manrope', sans-serif;
    color: var(--navy-900);
    background-color: var(--stone-50);
}

h1, h2, h3, h4, .font-serif {
    font-family: 'Cormorant Garamond', serif;
}

/* Custom Tailwind Config via Style Tag */
.text-navy-900 { color: var(--navy-900); }
.bg-navy-900 { background-color: var(--navy-900); }
.text-gold-600 { color: var(--gold-600); }
.text-gold-400 { color: var(--gold-500); }
.bg-gold-600 { background-color: var(--gold-600); }
.bg-gold-100 { background-color: var(--gold-100); }

/* Hero Animations */
.hero-anim {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-anim:nth-child(1) { animation-delay: 0.1s; }
.hero-anim:nth-child(2) { animation-delay: 0.3s; }
.hero-anim:nth-child(3) { animation-delay: 0.5s; }
.hero-anim:nth-child(4) { animation-delay: 0.7s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Reveal Classes */
.reveal-left, .reveal-right, .reveal-up {
    opacity: 0;
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

.reveal-up {
    transform: translateY(50px);
}

.revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* Navbar Scroll State */
nav.scrolled {
    background-color: rgba(250, 250, 249, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.1);
}

/* Mobile Menu Transitions */
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

#menu-btn.active #line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

#menu-btn.active #line2 {
    width: 100%;
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Selection List Styling */
ul li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

ul li span:first-child {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.125rem;
    font-weight: 500;
}

/* Smooth Image Loading */
img {
    image-rendering: -webkit-optimize-contrast;
}