/**
 * Web Design Builder - Design Styles
 * 12 unique visual styles for divination websites
 *
 * Each style includes:
 * - Background effects
 * - Card styles
 * - Button styles
 * - Text decorations
 * - Special effects
 */

/* ============================================
   DV-A1 Mystical Dark
   - Purple nebula background
   - Glowing cards
   - Star particle effects
   ============================================ */
.style-mystical-dark {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(124, 58, 237, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(192, 132, 252, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.05) 0%, transparent 70%),
    linear-gradient(180deg, var(--background) 0%, #0D0815 100%);
}

.style-mystical-dark .card {
  background: rgba(26, 16, 37, 0.8);
  border: 1px solid rgba(124, 58, 237, 0.3);
  box-shadow:
    0 0 20px rgba(124, 58, 237, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.style-mystical-dark .card:hover {
  border-color: rgba(124, 58, 237, 0.6);
  box-shadow:
    0 0 30px rgba(124, 58, 237, 0.3),
    0 0 60px rgba(124, 58, 237, 0.1);
}

.style-mystical-dark .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
}

.style-mystical-dark .btn-primary:hover {
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.6);
}

.style-mystical-dark .glow-text {
  text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary);
}

/* ============================================
   DV-A2 Celestial Gold
   - Golden gradient background
   - Elegant gold accents
   - Warm, luxurious feel
   ============================================ */
.style-celestial-gold {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(180, 83, 9, 0.2) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 100%, rgba(245, 158, 11, 0.1) 0%, transparent 50%),
    linear-gradient(180deg, var(--background) 0%, #1A1410 100%);
}

.style-celestial-gold .card {
  background: linear-gradient(145deg, rgba(41, 37, 36, 0.9) 0%, rgba(28, 25, 23, 0.95) 100%);
  border: 1px solid rgba(180, 83, 9, 0.4);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(245, 158, 11, 0.1);
}

.style-celestial-gold .card:hover {
  border-color: rgba(217, 119, 6, 0.6);
  box-shadow:
    0 0 30px rgba(180, 83, 9, 0.2),
    0 8px 30px rgba(0, 0, 0, 0.4);
}

.style-celestial-gold .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 50%, var(--primary) 100%);
  background-size: 200% 200%;
  animation: shimmer-gold 3s ease infinite;
}

.style-celestial-gold .golden-border {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, var(--primary-light), var(--accent), var(--primary)) border-box;
}

@keyframes shimmer-gold {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================
   DV-A3 Ethereal Teal
   - Water ripple background
   - Transparent, airy feel
   - Fresh, calming vibes
   ============================================ */
.style-ethereal-teal {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(13, 148, 136, 0.15) 0%, transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(45, 212, 191, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--background) 0%, #032B29 100%);
}

.style-ethereal-teal .card {
  background: rgba(13, 61, 59, 0.6);
  border: 1px solid rgba(13, 148, 136, 0.3);
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.style-ethereal-teal .card:hover {
  background: rgba(13, 61, 59, 0.8);
  border-color: rgba(45, 212, 191, 0.5);
}

.style-ethereal-teal .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.style-ethereal-teal .ripple-effect::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.3);
  animation: ripple 2s ease-out infinite;
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(4); opacity: 0; }
}

/* ============================================
   DV-A4 Gothic Rose
   - Dark romantic background
   - Rose-tinted elements
   - Dramatic, mysterious atmosphere
   ============================================ */
.style-gothic-rose {
  background:
    radial-gradient(ellipse at 50% 30%, rgba(190, 24, 93, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 50%, rgba(219, 39, 119, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, var(--background) 0%, #150A10 100%);
}

.style-gothic-rose .card {
  background: linear-gradient(145deg, rgba(45, 19, 32, 0.9) 0%, rgba(26, 10, 18, 0.95) 100%);
  border: 1px solid rgba(190, 24, 93, 0.3);
  box-shadow: 0 0 25px rgba(190, 24, 93, 0.15);
}

.style-gothic-rose .card:hover {
  border-color: rgba(244, 114, 182, 0.5);
  box-shadow:
    0 0 35px rgba(190, 24, 93, 0.25),
    inset 0 0 20px rgba(190, 24, 93, 0.05);
}

.style-gothic-rose .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 0 20px rgba(190, 24, 93, 0.4);
}

/* ============================================
   DV-A5 Cosmic Purple
   - Galaxy background with stars
   - Deep space feel
   - Celestial elements
   ============================================ */
.style-cosmic-purple {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.2) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 80%, rgba(165, 180, 252, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.05) 0%, transparent 60%),
    linear-gradient(180deg, var(--background) 0%, #05051A 100%);
}

.style-cosmic-purple .card {
  background: rgba(18, 18, 46, 0.85);
  border: 1px solid rgba(99, 102, 241, 0.25);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 40px rgba(99, 102, 241, 0.1);
  backdrop-filter: blur(12px);
}

.style-cosmic-purple .card:hover {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 0 50px rgba(99, 102, 241, 0.2);
}

.style-cosmic-purple .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #4F46E5 100%);
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.4);
}

/* ============================================
   DV-A6 Mystic Emerald
   - Forest/nature background
   - Green glowing elements
   - Earth connection feel
   ============================================ */
.style-mystic-emerald {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(16, 185, 129, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(110, 231, 183, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--background) 0%, #012A1E 100%);
}

.style-mystic-emerald .card {
  background: rgba(6, 78, 59, 0.7);
  border: 1px solid rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.1);
}

.style-mystic-emerald .card:hover {
  border-color: rgba(52, 211, 153, 0.5);
  box-shadow: 0 0 35px rgba(16, 185, 129, 0.2);
}

.style-mystic-emerald .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* ============================================
   DV-A7 Midnight Blue
   - Deep ocean/night sky
   - Aurora-like effects
   - Serene, peaceful atmosphere
   ============================================ */
.style-midnight-blue {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 0% 50%, rgba(147, 197, 253, 0.08) 0%, transparent 40%),
    linear-gradient(180deg, var(--background) 0%, #081020 100%);
}

.style-midnight-blue .card {
  background: linear-gradient(145deg, rgba(30, 58, 95, 0.8) 0%, rgba(12, 20, 39, 0.9) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.1);
}

.style-midnight-blue .card:hover {
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.2);
}

.style-midnight-blue .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* ============================================
   DV-A8 Vintage Oracle
   - Parchment/sepia background
   - Classical, ancient feel
   - Mystical old-world charm
   ============================================ */
.style-vintage-oracle {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #1C1917 0%, #171412 100%);
}

.style-vintage-oracle .card {
  background: linear-gradient(145deg, rgba(41, 37, 36, 0.95) 0%, rgba(28, 25, 23, 0.98) 100%);
  border: 2px solid rgba(146, 64, 14, 0.4);
  box-shadow:
    inset 0 0 30px rgba(146, 64, 14, 0.05),
    0 4px 20px rgba(0, 0, 0, 0.3);
}

.style-vintage-oracle .card:hover {
  border-color: rgba(180, 83, 9, 0.6);
}

.style-vintage-oracle .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: 1px solid var(--primary-light);
}

/* ============================================
   DV-A9 Neon Cyber
   - Cyberpunk aesthetic
   - Bright neon borders
   - Futuristic, edgy feel
   ============================================ */
.style-neon-cyber {
  background:
    linear-gradient(180deg, var(--background) 0%, #05050A 100%);
}

.style-neon-cyber .card {
  background: rgba(15, 15, 26, 0.9);
  border: 2px solid var(--primary);
  box-shadow:
    0 0 10px var(--primary),
    inset 0 0 10px rgba(0, 255, 136, 0.05);
}

.style-neon-cyber .card:hover {
  box-shadow:
    0 0 20px var(--primary),
    0 0 40px rgba(0, 255, 136, 0.3),
    inset 0 0 20px rgba(0, 255, 136, 0.1);
}

.style-neon-cyber .btn-primary {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  text-shadow: 0 0 10px currentColor;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.4);
}

.style-neon-cyber .btn-primary:hover {
  background: var(--primary);
  color: #000;
  text-shadow: none;
}

.style-neon-cyber .neon-text {
  text-shadow:
    0 0 5px var(--primary),
    0 0 10px var(--primary),
    0 0 20px var(--primary),
    0 0 40px var(--primary);
}

/* ============================================
   DV-A10 Soft Pastel
   - Light, dreamy background
   - Gentle gradients
   - Warm, nurturing feel
   ============================================ */
.style-soft-pastel {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(249, 168, 212, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(167, 139, 250, 0.2) 0%, transparent 50%),
    linear-gradient(180deg, var(--background) 0%, #FDF2F8 100%);
}

.style-soft-pastel .card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(249, 168, 212, 0.5);
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.1);
  backdrop-filter: blur(10px);
}

.style-soft-pastel .card:hover {
  border-color: rgba(251, 207, 232, 0.8);
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.15);
}

.style-soft-pastel .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 4px 15px rgba(249, 168, 212, 0.3);
}

/* ============================================
   DV-A11 Dark Elegance
   - Sophisticated dark theme
   - Gold accents
   - Premium, exclusive feel
   ============================================ */
.style-dark-elegance {
  background: linear-gradient(180deg, #0A0A0A 0%, #050505 100%);
}

.style-dark-elegance .card {
  background: linear-gradient(145deg, rgba(23, 23, 23, 0.95) 0%, rgba(10, 10, 10, 0.98) 100%);
  border: 1px solid rgba(212, 175, 55, 0.2);
  box-shadow:
    0 0 1px rgba(212, 175, 55, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.5);
}

.style-dark-elegance .card:hover {
  border-color: rgba(212, 175, 55, 0.4);
  box-shadow:
    0 0 20px rgba(212, 175, 55, 0.1),
    0 8px 30px rgba(0, 0, 0, 0.6);
}

.style-dark-elegance .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #2D2D2D 100%);
  border: 1px solid var(--accent);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.style-dark-elegance .gold-accent {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* ============================================
   DV-A12 Bohemian Spirit
   - Warm, earthy background
   - Tribal/mystical patterns
   - Free-spirited, artistic feel
   ============================================ */
.style-bohemian-spirit {
  background:
    radial-gradient(ellipse at 20% 30%, rgba(245, 158, 11, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(239, 68, 68, 0.1) 0%, transparent 40%),
    linear-gradient(180deg, var(--background) 0%, #171210 100%);
}

.style-bohemian-spirit .card {
  background: linear-gradient(145deg, rgba(41, 37, 36, 0.9) 0%, rgba(28, 25, 23, 0.95) 100%);
  border: 2px solid rgba(245, 158, 11, 0.3);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    inset 0 0 20px rgba(245, 158, 11, 0.03);
}

.style-bohemian-spirit .card:hover {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 0 0 30px rgba(245, 158, 11, 0.15);
}

.style-bohemian-spirit .btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

/* ============================================
   Common Card Styles (All Themes)
   ============================================ */
.card {
  border-radius: var(--radius-xl);
  transition: all var(--transition-base);
  overflow: hidden;
}

/* ============================================
   Common Button Styles (All Themes)
   ============================================ */
.btn-primary {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  transition: all var(--transition-base);
  cursor: pointer;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

.btn-outline {
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  transition: all var(--transition-base);
  cursor: pointer;
}

.btn-outline:hover {
  background: var(--primary);
  color: var(--text);
}