/* ========================================
   THRIVING ERA FREQUENCY PALETTES V2.0
   Each offering carries its own energetic signature
   ======================================== */

/* SHARED FOUNDATION - All pages include */
:root {
  /* Core Thriving Era */
  --sage-primary: #82915b;
  --gold-warm: #cd9b2d;
  --cream-warm: #faf8f4;
  --cream-deep: #f2ede5;
  --text-primary: #2c2c2c;
  --text-secondary: #4a4a4a;
  
  /* Typography */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Source Sans Pro', sans-serif;
  
  /* Transitions */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ELITE MASTERY - Sunset Alchemy Frequency */
.elite-mastery {
  --elite-coral: #ff9a8b;
  --elite-peach: #ffd3b6;
  --elite-sunset: #ffaa85;
  --elite-blush: #ff8fab;
  --elite-gold: #f7d060;
  --elite-cream: #fff5ed;
  --gradient-elite: linear-gradient(135deg, var(--elite-coral) 0%, var(--elite-sunset) 50%, var(--elite-gold) 100%);
  --shadow-luxury: 0 30px 100px rgba(255, 154, 139, 0.4);
}

.elite-hero {
  background: var(--gradient-elite);
  color: white;
}

.elite-card {
  background: var(--cream-luxe);
  border: 3px solid rgba(212, 175, 55, 0.1);
  box-shadow: var(--shadow-luxury);
}

.elite-button {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  color: white;
  box-shadow: 0 15px 40px rgba(10, 10, 10, 0.5);
}

/* ============================================
   AI ACCELERATION FREQUENCY (High-Tech/Future)
   ============================================ */
.frequency-ai-acceleration {
  --primary: #1a1a2e;
  --secondary: #16213e;
  --accent: #0f3460;
  --electric: #00d4ff;
  --neon: #39ff14;
  --silver: #c0c0c0;
  --deep-space: #0a0a0f;
  --gradient-ai: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--accent) 100%);
  --shadow-tech: 0 20px 60px rgba(0, 212, 255, 0.2);
}

.ai-acceleration-hero {
  background: var(--gradient-ai);
  color: white;
  position: relative;
}

.ai-acceleration-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, transparent 30%, rgba(0, 212, 255, 0.1) 50%, transparent 70%),
    linear-gradient(-45deg, transparent 30%, rgba(57, 255, 20, 0.1) 50%, transparent 70%);
  animation: aiPattern 15s linear infinite;
}

@keyframes aiPattern {
  0% { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

.ai-card {
  background: linear-gradient(145deg, white 0%, #f8f9fa 100%);
  border: 2px solid rgba(0, 212, 255, 0.1);
  box-shadow: var(--shadow-tech);
}

.ai-acceleration-button {
  background: linear-gradient(135deg, var(--primary) 0%, var(--electric) 100%);
  color: white;
  box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
}

/* ============================================
   AI FOUNDATION FREQUENCY (Approachable/Starter)
   ============================================ */
.frequency-ai-foundation {
  --primary: #2c3e50;
  --secondary: #34495e;
  --accent: #82915b;
  --soft-blue: #74b9ff;
  --gentle-green: #55a3ff;
  --warm-gray: #636e72;
  --light-bg: #dfe6e9;
  --gradient-foundation: linear-gradient(135deg, var(--primary) 0%, var(--accent) 50%, var(--soft-blue) 100%);
}

.ai-foundation-hero {
  background: var(--gradient-foundation);
  color: white;
}

.foundation-card {
  background: white;
  border: 2px solid rgba(116, 185, 255, 0.15);
  box-shadow: 0 15px 40px rgba(44, 62, 80, 0.15);
}

.ai-foundation-button {
  background: linear-gradient(135deg, var(--primary) 0%, var(--soft-blue) 100%);
  color: white;
  box-shadow: 0 10px 25px rgba(116, 185, 255, 0.3);
}

/* ============================================
   BRAND MASTERY PLUS FREQUENCY (Enhanced/Premium)
   ============================================ */
.frequency-brand-mastery-plus {
  --primary: #82915b;
  --secondary: #6b8e71;
  --enhanced: #9d6c8c;
  --royal-purple: #6a4c93;
  --rose-gold: #e8b4cb;
  --deep-sage: #5d6d49;
  --gradient-mastery: linear-gradient(135deg, var(--primary) 0%, var(--enhanced) 50%, var(--royal-purple) 100%);
}

.brand-mastery-plus-hero {
  background: var(--gradient-mastery);
  color: white;
}

.mastery-plus-card {
  background: linear-gradient(145deg, #fdfcfb 0%, white 50%, #faf9f6 100%);
  border: 2px solid rgba(157, 108, 140, 0.15);
  box-shadow: 0 20px 50px rgba(106, 76, 147, 0.15);
}

.brand-mastery-plus-button {
  background: linear-gradient(135deg, var(--primary) 0%, var(--enhanced) 50%, var(--royal-purple) 100%);
  color: white;
  box-shadow: 0 12px 35px rgba(157, 108, 140, 0.3);
}

/* ============================================
   SHARED FREQUENCY COMPONENTS
   ============================================ */

/* Animated Background Patterns */
.frequency-flow {
  position: relative;
  overflow: hidden;
}

.frequency-flow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.6;
  animation: frequencyWave 20s ease-in-out infinite;
}

@keyframes frequencyWave {
  0%, 100% { 
    transform: translateX(0) scale(1);
    opacity: 0.6;
  }
  33% { 
    transform: translateX(10px) scale(1.02);
    opacity: 0.4;
  }
  66% { 
    transform: translateX(-5px) scale(0.98);
    opacity: 0.7;
  }
}

/* Frequency Transmission Effects */
.frequency-pulse {
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 1;
  }
  50% { 
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.frequency-glow {
  box-shadow: 0 0 20px currentColor;
  animation: glow 4s ease-in-out infinite;
}

@keyframes glow {
  0%, 100% { 
    box-shadow: 0 0 20px currentColor;
  }
  50% { 
    box-shadow: 0 0 30px currentColor, 0 0 40px currentColor;
  }
}

/* ============================================
   RESPONSIVE FREQUENCY ADJUSTMENTS
   ============================================ */

/* Mobile: Softer frequencies for smaller screens */
@media (max-width: 767px) {
  .frequency-elite {
    --shadow-luxury: 0 15px 50px rgba(10, 10, 10, 0.3);
  }
  
  .frequency-ai-acceleration {
    --shadow-tech: 0 10px 30px rgba(0, 212, 255, 0.15);
  }
  
  .ai-acceleration-hero::before {
    animation-duration: 25s; /* Slower on mobile for performance */
  }
}

/* Tablet: Enhanced frequencies */
@media (min-width: 768px) and (max-width: 1023px) {
  .frequency-glow {
    box-shadow: 0 0 25px currentColor;
  }
}

/* Desktop: Full frequency transmission */
@media (min-width: 1024px) {
  .frequency-elite {
    --shadow-luxury: 0 40px 120px rgba(10, 10, 10, 0.5);
  }
  
  .frequency-ai-acceleration {
    --shadow-tech: 0 25px 80px rgba(0, 212, 255, 0.25);
  }
  
  .frequency-glow {
    box-shadow: 0 0 35px currentColor, 0 0 55px currentColor;
  }
}

/* ============================================
   ACCESSIBILITY & REDUCED MOTION
   ============================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .frequency-elite {
    --primary: #000000;
    --gold: #ffff00;
  }
  
  .frequency-ai-acceleration {
    --electric: #00ffff;
    --neon: #00ff00;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .frequency-flow::before,
  .frequency-pulse,
  .frequency-glow,
  .ai-acceleration-hero::before {
    animation: none;
  }
  
  .frequency-glow {
    box-shadow: 0 0 15px currentColor;
  }
}

/* ============================================
   UTILITY CLASSES FOR QUICK APPLICATION
   ============================================ */

/* Apply frequency palette to any element */
.apply-elite { @extend .frequency-elite; }
.apply-ai-acceleration { @extend .frequency-ai-acceleration; }
.apply-ai-foundation { @extend .frequency-ai-foundation; }
.apply-brand-mastery-plus { @extend .frequency-brand-mastery-plus; }

/* Quick frequency effects */
.transmit-frequency { @extend .frequency-flow; }
.pulse-frequency { @extend .frequency-pulse; }
.glow-frequency { @extend .frequency-glow; }

/* Brand alignment check */
.frequency-aligned {
  position: relative;
}

.frequency-aligned::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 1.2rem;
  opacity: 0.7;
}