/* ==========================================================================
   EYE GALLERY - PREMIUM STYLESHEET
   Complete Eyewear Solutions - Luxury Design System
   ========================================================================== */

/* 1. Custom Core Variables */
:root {
  /* Colors */
  --color-charcoal: #3E3E3E;
  --color-slate: #555555;
  --color-white: #FFFFFF;
  --color-gold: #C9A43A;
  --color-gold-light: #DFBA4F;
  --color-cyan: #00AEEF;
  --color-green: #43B649;
  --color-red: #E53935;
  --color-yellow: #FFD400;
  
  /* Gradients */
  --gradient-main: linear-gradient(135deg, #3E3E3E 0%, #2A2A2A 100%);
  --gradient-gold: linear-gradient(135deg, #C9A43A 0%, #FFD400 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  --gradient-glass-dark: linear-gradient(135deg, rgba(62, 62, 62, 0.8) 0%, rgba(30, 30, 30, 0.85) 100%);
  
  /* Shadows */
  --shadow-premium: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
  --shadow-premium-hover: 0 30px 60px -20px rgba(199, 164, 58, 0.15);
  --shadow-gold-glow: 0 10px 25px -5px rgba(201, 164, 58, 0.4);
  
  /* Layout */
  --border-radius-premium: 20px;
}

/* 2. Global Reset and Smooth Scrolling */
html {
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', 'Open Sans', sans-serif;
  color: var(--color-slate);
  background-color: var(--color-white);
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: var(--color-slate);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-charcoal);
}

/* 3. Luxury Typography Classes */
.heading-luxury {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.subheading-luxury {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* 4. Glassmorphism Design Elements */
.glass-panel {
  background: var(--gradient-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-premium);
}

.glass-panel-dark {
  background: rgba(30, 30, 30, 0.94); /* Flat dark luxury backdrop */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0; /* Flat banner shape to avoid overlap bleeding */
}

.glass-card {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(201, 164, 58, 0.3);
  transform: translateY(-8px);
}

/* 5. Custom Button & Interactive Glow Effects */
.btn-gold-glow {
  background: var(--color-gold);
  color: var(--color-white);
  box-shadow: 0 4px 14px rgba(201, 164, 58, 0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-gold-glow:hover {
  background: var(--color-gold-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-glow);
}

.btn-gold-outline {
  border: 2px solid var(--color-gold);
  color: var(--color-gold);
  background: transparent;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-gold-outline:hover {
  background: var(--color-gold);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(201, 164, 58, 0.2);
}

/* Custom Navigation Link Underlines */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-gold);
  transition: width 0.3s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 6. Framer Motion Replications (Entrance Animations) */
.animate-hidden {
  opacity: 0;
  will-change: transform, opacity;
}

/* Animate States */
.animate-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-scale-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Animated Classes Triggered by JS */
.animate-in.animate-fade-up,
.animate-in.animate-scale-in,
.animate-in.animate-slide-left,
.animate-in.animate-slide-right {
  opacity: 1;
  transform: none;
}

/* Micro delays for grid staggers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Elegant Loop Floating Animations */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes float-delayed {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-element {
  animation: float 6s ease-in-out infinite;
}

.floating-element-delayed {
  animation: float-delayed 7s ease-in-out infinite;
}

/* Product Card Zoom */
.product-card-image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-card:hover .product-card-image {
  transform: scale(1.08);
}

/* Continuous Gold CTA Pulse Glow */
@keyframes cta-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 164, 58, 0.4);
    transform: scale(1);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(201, 164, 58, 0);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 164, 58, 0);
    transform: scale(1);
  }
}

.animate-pulse-gold {
  animation: cta-pulse 2.2s infinite ease-in-out;
}