/* ==========================================================================
   CHIRAKEKAREN AMBIENCE - LUXURY ARCHITECTURAL STYLESHEET
   Timeless Heritage (Est. 1905) • Glass & Interior Architecture
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --forest-950: #081610;
    --forest-900: #0E2319;
    --forest-800: #163829;
    --forest-700: #1E4E39;
    --gold-400: #E6D09C;
    --gold-500: #C5A059;
    --gold-600: #A9833D;
    --gold-bronze: #8F6B2A;
    --alabaster: #FAF8F5;
    --ivory-surface: #F5F1EA;
    --charcoal-body: #2B332F;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--charcoal-body);
    background-color: var(--alabaster);
    overflow-x: hidden;
    line-height: 1.65;
}

/* Luxury Typography */
h1, h2, h3, .font-serif-luxury {
    font-family: 'Cinzel', serif;
    letter-spacing: -0.01em;
}

.font-editorial {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Glassmorphism Navigation */
.glass-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 25px -4px rgba(8, 22, 16, 0.05);
}

/* Metallic Champagne Text & Borders */
.text-gold-300 {
    color: #F5E6BE !important;
}

.gold-gradient-text {
    background: linear-gradient(135deg, #F7E5B5 0%, #D4AF37 40%, #FFF0C2 65%, #A9833D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
    background: linear-gradient(135deg, #C5A059 0%, #DFBF7D 50%, #B89248 100%);
}

.hairline-gold-border {
    border-color: rgba(197, 160, 89, 0.28);
}

/* Luxury Architectural Badges */
.badge-clean-white {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #1c1917 !important;
    border: 1px solid rgba(228, 228, 231, 0.95);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    display: inline-block;
}

.badge-luxury {
    background: rgba(10, 30, 21, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #F5E6BE !important;
    border: 1px solid rgba(197, 160, 89, 0.45);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.85rem;
    border-radius: 9999px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    display: inline-block;
}

/* Luxury Interactive Buttons */
.gold-btn {
    background: linear-gradient(135deg, #C5A059 0%, #E6D09C 50%, #B89248 100%);
    color: #081610;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.8125rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 25px -5px rgba(197, 160, 89, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gold-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -6px rgba(197, 160, 89, 0.6);
    filter: brightness(1.06);
}

.glass-btn {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    font-weight: 600;
    letter-spacing: 0.04em;
    font-size: 0.8125rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(230, 208, 156, 0.85);
    color: #E6D09C;
    transform: translateY(-2px);
}

/* Smooth Luxury Transitions */
.hero-slide {
    transition: opacity 1200ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Luxury Card Hover Micro-Interactions */
.luxury-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
}

.luxury-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 45px -12px rgba(8, 22, 16, 0.12);
    border-color: rgba(197, 160, 89, 0.65);
}

/* Product Card Image Zoom */
.product-image-container img {
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1);
}

.luxury-card:hover .product-image-container img {
    transform: scale(1.06);
}

/* WhatsApp Floating Button Pulse */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.65);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

.whatsapp-pulse {
    animation: pulse-green 2.2s infinite;
}

/* Elegant Smooth Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Refined Subtle Scrollbars */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FAF8F5;
}
::-webkit-scrollbar-thumb {
    background: #C5A059;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #A9833D;
}