/* ==========================================================================
   L-RITÈGE PARIS — Haute Parfumerie Grasse (Depuis 2008)
   Theme: "Royal Amber & Gold" (#FDFBF7, #111215, #D97706, #F59E0B, #EA580C)
   ========================================================================== */

:root {
  --bg-pearl: #FDFBF7;
  --bg-pearl-alt: #F7F3EB;
  --bg-espresso: #111215;
  --bg-espresso-light: #1A1C22;
  --amber-vibrant: #D97706;
  --gold-satin: #F59E0B;
  --copper-warm: #EA580C;
  --text-dark: #141518;
  --text-muted: #5C5953;
  --text-light: #F9F6F0;
  --whatsapp-green: #25D366;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-pearl);
  color: var(--text-dark);
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  overflow-x: hidden;
  background-color: var(--bg-pearl);
  selection-background-color: var(--amber-vibrant);
  selection-color: #ffffff;
}

::selection {
  background-color: var(--amber-vibrant);
  color: #ffffff;
}

/* Typography Helpers */
.font-serif-luxury {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

.font-display-luxury {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #111215;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #D97706, #F59E0B);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #EA580C;
}

/* Glassmorphism Utilities */
.glass-header {
  background: rgba(253, 251, 247, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(217, 119, 6, 0.16);
}

.glass-dark {
  background: rgba(17, 18, 21, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(245, 158, 11, 0.22);
}

.glass-light {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(217, 119, 6, 0.18);
}

/* Luxury Metallic & Amber Gradients */
.bg-amber-gradient {
  background: linear-gradient(135deg, #D97706 0%, #F59E0B 50%, #EA580C 100%);
}

.bg-amber-gradient-hover:hover {
  background: linear-gradient(135deg, #EA580C 0%, #D97706 50%, #F59E0B 100%);
  box-shadow: 0 10px 28px -6px rgba(217, 119, 6, 0.55);
}

.text-gold-gradient {
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 45%, #D97706 85%, #EA580C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.border-gold-subtle {
  border-color: rgba(245, 158, 11, 0.28);
}

/* Hero Ambient Glow */
.hero-ambient-glow {
  background:
    radial-gradient(circle at 75% 38%, rgba(245, 158, 11, 0.22) 0%, rgba(217, 119, 6, 0.08) 38%, transparent 70%),
    radial-gradient(circle at 20% 80%, rgba(234, 88, 12, 0.14) 0%, transparent 55%),
    #111215;
}

.signature-ambient-glow {
  background:
    radial-gradient(circle at 28% 50%, rgba(217, 119, 6, 0.22) 0%, rgba(234, 88, 12, 0.07) 42%, transparent 70%),
    radial-gradient(circle at 85% 20%, rgba(245, 158, 11, 0.15) 0%, transparent 55%),
    #111215;
}

/* Bottle Card Micro-Animations */
.bottle-card {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

.bottle-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px -12px rgba(20, 21, 24, 0.14),
              0 8px 20px -6px rgba(217, 119, 6, 0.18);
  border-color: rgba(217, 119, 6, 0.45);
}

.bottle-img-wrap {
  overflow: hidden;
  position: relative;
}

.bottle-img-wrap img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bottle-card:hover .bottle-img-wrap img {
  transform: scale(1.06);
}

/* Shimmer effect on luxury badges */
@keyframes goldPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45);
  }
  50% {
    box-shadow: 0 0 22px 4px rgba(245, 158, 11, 0.25);
  }
}

.pulse-gold {
  animation: goldPulse 3.2s infinite ease-in-out;
}

@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.animate-float {
  animation: floatSlow 5.5s ease-in-out infinite;
}

/* Olfactory Pyramid Progress Bar Animation */
.pyramid-pill {
  transition: all 0.25s ease;
}
.pyramid-pill:hover {
  background-color: rgba(217, 119, 6, 0.15);
  border-color: #D97706;
  transform: translateY(-1px);
}

/* Accordion Smooth Transition */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-item.active .faq-answer {
  max-height: 420px;
  opacity: 1;
}

.faq-item.active .faq-icon {
  transform: rotate(180deg);
  color: #D97706;
}

/* Modal & Drawer Transitions */
.drawer-backdrop {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.drawer-panel {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* WhatsApp Floating Pulse */
@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-btn {
  background-color: #25D366;
  animation: whatsappPulse 2.5s infinite;
}

.whatsapp-btn:hover {
  background-color: #1ebe5d;
  transform: translateY(-3px) scale(1.03);
}