/* ============================================
   THEMED PAGE BACKGROUNDS
   Zero-image, CSS-only atmospheric effects
   ============================================ */

/* ─── ZODIAC THEME: Light cosmic with subtle stars ─── */
.theme-zodiac {
  background: linear-gradient(160deg, #f0f0ff 0%, #e8e0f7 25%, #ede5ff 50%, #e0e8ff 75%, #f0f0ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

.theme-zodiac .header {
  background: rgba(240, 240, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(139, 92, 246, 0.12);
}

.theme-zodiac .calculator-card,
.theme-zodiac .result-card,
.theme-zodiac .card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.1);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.08);
}

.theme-zodiac .footer {
  background: linear-gradient(135deg, #1a1145 0%, #0f0c29 100%);
}

/* Twinkling stars (subtle purple dots on light bg) */
.theme-zodiac::before,
.theme-zodiac::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.theme-zodiac::before {
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(139,92,246,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 45%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(2px 2px at 40% 15%, rgba(139,92,246,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 60%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 30%, rgba(139,92,246,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 70%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 80%, rgba(139,92,246,0.15) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 85%, rgba(139,92,246,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 10%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 95%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 50%, rgba(139,92,246,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 90%, rgba(139,92,246,0.2) 0%, transparent 100%);
  animation: twinkle 4s ease-in-out infinite alternate;
}

.theme-zodiac::after {
  background-image:
    radial-gradient(1px 1px at 5% 50%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 70%, rgba(139,92,246,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 35%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 80%, rgba(139,92,246,0.25) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 75% 55%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 40%, rgba(139,92,246,0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 10%, rgba(139,92,246,0.2) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 50% 25%, rgba(139,92,246,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 95%, rgba(139,92,246,0.15) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 65%, rgba(139,92,246,0.2) 0%, transparent 100%);
  animation: twinkle 4s ease-in-out infinite alternate-reverse;
}

@keyframes twinkle {
  0% { opacity: 0.4; }
  100% { opacity: 1; }
}

.theme-zodiac .header,
.theme-zodiac main,
.theme-zodiac .footer {
  position: relative;
}

.theme-zodiac .header {
  z-index: 100;
}

.theme-zodiac main,
.theme-zodiac .footer {
  z-index: 1;
}


/* ─── LOVE THEME: Soft pink-to-coral + floating hearts ─── */
.theme-love {
  background: linear-gradient(160deg, #fff5f7 0%, #ffe0e6 30%, #ffd6e0 60%, #fff0f3 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.theme-love .header {
  background: rgba(255, 245, 247, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 107, 107, 0.1);
}

.theme-love .calculator-card,
.theme-love .result-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 107, 107, 0.1);
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.08);
}

.theme-love .footer {
  background: linear-gradient(135deg, #2d1f2f 0%, #1a1225 100%);
}

/* Floating hearts */
.theme-love::before {
  content: '💕';
  position: fixed;
  top: -20px;
  left: 10%;
  font-size: 1.2rem;
  opacity: 0.15;
  animation: floatHeart1 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.theme-love::after {
  content: '💗';
  position: fixed;
  top: -20px;
  right: 15%;
  font-size: 1rem;
  opacity: 0.12;
  animation: floatHeart2 15s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes floatHeart1 {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.15; }
  90% { opacity: 0.15; }
  100% { transform: translateY(100vh) rotate(20deg); opacity: 0; }
}

@keyframes floatHeart2 {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.12; }
  90% { opacity: 0.12; }
  100% { transform: translateY(100vh) rotate(-15deg); opacity: 0; }
}

.theme-love .header,
.theme-love main,
.theme-love .footer {
  position: relative;
}

.theme-love .header {
  z-index: 100;
}

.theme-love main,
.theme-love .footer {
  z-index: 1;
}


/* ─── QUIZ THEME: Playful purple-to-pink gradient ─── */
.theme-quiz {
  background: linear-gradient(160deg, #faf5ff 0%, #f3e8ff 25%, #fce7f3 50%, #fdf2f8 75%, #faf5ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

.theme-quiz .header {
  background: rgba(250, 245, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
}

.theme-quiz .card,
.theme-quiz .calculator-card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(139, 92, 246, 0.08);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.06);
}

.theme-quiz .footer {
  background: linear-gradient(135deg, #1f1a2e 0%, #111827 100%);
}


/* ─── Ensure content stays above pseudo-elements ─── */
.theme-zodiac > main,
.theme-zodiac > footer,
.theme-love > main,
.theme-love > footer,
.theme-quiz > main,
.theme-quiz > footer {
  position: relative;
  z-index: 1;
}

.theme-zodiac > header,
.theme-love > header,
.theme-quiz > header {
  position: relative;
  z-index: 100;
}