/* style.css */
:root {
    --wine-deep: #3a0202;
    --gold-shimmer: #d4af37;
    --gold-soft: #f4e4bc;
    --ink: #050505;
}
body { 
    background-color: var(--wine-deep); 
    color: var(--gold-soft);
    font-family: 'Space Grotesk', sans-serif;
    background-image: url('https://www.transparenttextures.com/patterns/black-linen.png');
    overflow-x: hidden;
}
.serif-vntg { font-family: 'Italiana', serif; }
.syne { font-family: 'Syne', sans-serif; }

/* Shimmer Animation for that "Mouth-Watering" Look */
.shimmer {
    background: linear-gradient(90deg, #d4af37, #f4e4bc, #d4af37);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 3s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* Flip Logic Maintained */
.card-container { perspective: 1000px; width: 160px; height: 220px; }
.card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}
.flipped .card-inner { transform: rotateY(180deg) rotateZ(5deg); }
.card-front, .card-back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden; border: 2px solid var(--gold-shimmer);
}
.card-back { 
    transform: rotateY(180deg); background: var(--gold-shimmer);
    color: var(--wine-deep); display: flex; align-items: center; justify-content: center;
    font-weight: 800; text-transform: uppercase; font-size: 0.65rem; text-align: center;
}

/* Floral Model Section */
.floral-wrap { position: relative; height: 600px; overflow: hidden; }
.model-cutout {
    position: absolute; bottom: -50px; left: 50%;
    transform: translateX(-50%); width: 100%; max-width: 500px;
    z-index: 10; filter: drop-shadow(0 0 30px rgba(0,0,0,0.8));
}
.flower-overlay {
    position: absolute; bottom: 0; width: 110%; left: -5%;
    z-index: 20; mix-blend-mode: screen; pointer-events: none;
}

.animate-marquee { display: flex; width: 200%; animation: scroll 25s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* MOBILE-ONLY FONT SIZE ADJUSTMENTS */
/* These styles only apply on screens smaller than 768px (typical tablet/mobile breakpoint) */
@media screen and (max-width: 767px) {
    /* Reduce "THE OBSESSION" heading by 4 font sizes (1 more font down from previous) */
    #newsletter h2.syne {
        font-size: 2.3rem !important; /* Reduced from 2.8rem to 2.3rem (1 more font size down) */
        line-height: 0.8;
    }
    
    /* Reduce the description text by 1-2 font sizes */
    #newsletter p.mb-10 {
        font-size: 0.7rem !important;
        letter-spacing: 0.2em;
    }
    
    /* Footer adjustments - Lans Multimedia heading */
    footer h2.syne.text-6xl {
        font-size: 2rem !important;
    }
    
    /* Footer description paragraph */
    footer p.max-w-sm.text-xs {
        font-size: 0.65rem !important;
        line-height: 1.6;
    }
    
    /* "Beauty is such a sweet thing" quote */
    footer p.serif-vntg.text-3xl {
        font-size: 1.5rem !important;
    }
    
    /* Additional mobile spacing fixes */
    #newsletter .bg-black {
        padding: 2rem 1.5rem !important;
    }
    
    /* Ensure the form doesn't overflow */
    #newsletter form {
        flex-direction: column !important;
        gap: 1rem;
    }
    
    #newsletter input[type="email"] {
        width: 100%;
        font-size: 0.9rem;
    }
}

/* Extra small devices (phones under 480px) - fine-tune if needed */
@media screen and (max-width: 480px) {
    /* Further reduce for very small screens if necessary */
    #newsletter h2.syne {
        font-size: 2rem !important;
    }
    
    footer h2.syne.text-6xl {
        font-size: 1.8rem !important;
    }
    
    footer p.serif-vntg.text-3xl {
        font-size: 1.3rem !important;
    }
}