/* ==========================================================================
   TWILIGHT CHAMPAGNE LUXURY DESIGN SYSTEM (2026/2027 NEXT-GEN EDITION)
   ========================================================================== */

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

:root {
  /* Twilight Champagne Palette */
  --c-silk: #FAF7F2;
  --c-ivory: #FDFBF7;
  --c-champagne-100: #F6EFE6;
  --c-champagne-200: #EFE4D6;
  --c-champagne-300: #E2D1BF;
  --c-champagne-400: #D0B8A0;
  --c-champagne-500: #B7987C;
  --c-champagne-600: #99785D;
  --c-champagne-700: #7A5B43;
  --c-champagne-800: #573E2C;
  --c-champagne-900: #2C1D14;

  /* Rose Quartz & Twilight Blush */
  --c-rose-100: #FBF0ED;
  --c-rose-200: #F5DDD8;
  --c-rose-300: #E8BFB6;
  --c-rose-400: #D69C90;
  --c-rose-500: #BD7466;
  --c-rose-600: #9E564A;

  /* Ambient Glass & Light */
  --glass-surface: rgba(255, 252, 248, 0.72);
  --glass-surface-hover: rgba(255, 254, 252, 0.90);
  --glass-panel: rgba(255, 250, 245, 0.65);
  --glass-border: rgba(220, 198, 178, 0.45);
  --glass-border-light: rgba(255, 255, 255, 0.88);
  --glass-glow: rgba(214, 156, 144, 0.28);
  --gold-glow: rgba(183, 152, 124, 0.35);

  /* Physics Springs */
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --smooth-fluid: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--c-silk);
  color: var(--c-champagne-900);
  font-family: 'Plus Jakarta Sans', 'Noto Serif SC', -apple-system, sans-serif;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Subtle noise grain texture overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 999;
  opacity: 0.8;
}

/* Dynamic Ambient Canvas */
#ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
}

/* Animated Floating Aurora Glows */
.aurora-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.55;
  animation: floatOrb 18s infinite alternate ease-in-out;
}

.aurora-orb-1 {
  top: -10%;
  left: 15%;
  width: 55vw;
  height: 55vw;
  background: radial-gradient(circle, rgba(232, 191, 182, 0.45) 0%, rgba(246, 239, 230, 0.1) 70%, transparent 100%);
  animation-duration: 22s;
}

.aurora-orb-2 {
  bottom: 5%;
  right: -5%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(214, 156, 144, 0.35) 0%, rgba(226, 209, 191, 0.2) 60%, transparent 100%);
  animation-duration: 26s;
  animation-delay: -5s;
}

.aurora-orb-3 {
  top: 40%;
  left: -10%;
  width: 45vw;
  height: 45vw;
  background: radial-gradient(circle, rgba(183, 152, 124, 0.25) 0%, rgba(245, 221, 216, 0.15) 70%, transparent 100%);
  animation-duration: 19s;
  animation-delay: -10s;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.08); }
  100% { transform: translate(-40px, 80px) scale(0.95); }
}

/* ==========================================================================
   GLASSMORPHISM 2.0 (FROSTED CRYSTAL ACRYLIC)
   ========================================================================== */

.glass-panel {
  background: var(--glass-panel);
  backdrop-filter: blur(32px) saturate(190%) contrast(102%);
  -webkit-backdrop-filter: blur(32px) saturate(190%) contrast(102%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 36px -12px rgba(87, 62, 44, 0.06), 0 0 1px 1px rgba(255, 255, 255, 0.8) inset;
}

.glass-card {
  position: relative;
  background: var(--glass-surface);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 
    0 20px 40px -15px rgba(87, 62, 44, 0.07),
    0 1px 3px 0 rgba(87, 62, 44, 0.02),
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 2px 0 rgba(183, 152, 124, 0.1);
  transition: transform 0.45s var(--spring-bounce), box-shadow 0.45s var(--spring-bounce), border-color 0.3s ease, background 0.3s ease;
  overflow: hidden;
}

/* Spotlight Follow Effect on Cards */
.glass-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.45), transparent 45%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}

.glass-card:hover::before {
  opacity: 1;
}

.glass-card:hover {
  background: var(--glass-surface-hover);
  border-color: rgba(183, 152, 124, 0.7);
  transform: translateY(-5px) scale(1.012);
  box-shadow: 
    0 30px 60px -20px rgba(87, 62, 44, 0.14),
    0 0 35px 2px rgba(214, 156, 144, 0.3),
    inset 0 1px 2px 0 rgba(255, 255, 255, 1);
}

.glass-pill {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(220, 198, 178, 0.5);
  box-shadow: 0 4px 12px -2px rgba(87, 62, 44, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9);
  transition: all 0.35s var(--spring-bounce);
}

.glass-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--c-champagne-500);
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 20px -4px rgba(183, 152, 124, 0.25), inset 0 1px 1px #fff;
}

.glass-input {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(220, 198, 178, 0.5);
  box-shadow: inset 0 2px 4px rgba(87, 62, 44, 0.04), 0 1px 2px rgba(255, 255, 255, 0.8);
  transition: all 0.3s var(--smooth-fluid);
}

.glass-input:focus {
  background: #ffffff;
  border-color: var(--c-rose-500);
  box-shadow: 0 0 0 4px rgba(214, 156, 144, 0.25), inset 0 1px 2px rgba(87, 62, 44, 0.02);
  outline: none;
}

/* ==========================================================================
   TYPOGRAPHY & GRADIENT HEADINGS
   ========================================================================== */

.font-display {
  font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
}

.font-sans-ui {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.text-gradient-luxury {
  background: linear-gradient(135deg, #2C1D14 0%, #573E2C 35%, #9E564A 70%, #D69C90 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-champagne {
  background: linear-gradient(135deg, #7A5B43 0%, #B7987C 50%, #D69C90 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shimmering Badge */
@keyframes shimmerSweep {
  0% { background-position: -250% 0; }
  100% { background-position: 250% 0; }
}

.shimmer-badge {
  background: linear-gradient(105deg, rgba(255,255,255,0.4) 0%, rgba(255,242,235,0.95) 45%, rgba(214,156,144,0.3) 50%, rgba(255,255,255,0.4) 100%);
  background-size: 250% 100%;
  animation: shimmerSweep 5s infinite linear;
}

/* Glowing Border Pulse */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(214, 156, 144, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.6); }
  50% { box-shadow: 0 0 35px rgba(214, 156, 144, 0.45), inset 0 0 15px rgba(255, 255, 255, 0.9); }
}

.glow-pulsating {
  animation: glowPulse 4s infinite ease-in-out;
}

/* Floating Elements */
@keyframes softFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}

.animate-float {
  animation: softFloat 6s infinite ease-in-out;
}

/* Navigation State */
.nav-tab {
  position: relative;
  transition: all 0.3s var(--smooth-fluid);
}

.nav-tab.active {
  color: var(--c-champagne-900);
  font-weight: 700;
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 15%;
  right: 15%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--c-rose-400), var(--c-champagne-500));
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(189, 116, 102, 0.6);
}

/* Tab Panes */
.tab-pane {
  display: none;
  opacity: 0;
  transform: translateY(12px) scale(0.995);
  transition: opacity 0.4s var(--smooth-fluid), transform 0.4s var(--smooth-fluid);
}

.tab-pane.active {
  display: block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
::-webkit-scrollbar-track {
  background: rgba(246, 239, 230, 0.6);
}
::-webkit-scrollbar-thumb {
  background: rgba(183, 152, 124, 0.5);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(183, 152, 124, 0.85);
}

/* Interactive Slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(220, 198, 178, 0.4);
  border-radius: 4px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #BD7466, #99785D);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(153, 120, 93, 0.4), inset 0 1px 2px #fff;
  transition: transform 0.2s var(--spring-bounce);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* Lightbox Modal */
#lightbox-modal {
  transition: opacity 0.35s var(--smooth-fluid);
}
#lightbox-modal.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}
#lightbox-modal:not(.hidden) {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}