/* ═══════════════════════════════════════════════════════════════════
   NOOR THEME - PARTICLES & ADVANCED EFFECTS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Floating Particles Background ────────────────────────────────── */
.noor-particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.noor-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: hsl(var(--primary) / 0.4);
  border-radius: 50%;
  animation: noorFloatUp 15s linear infinite;
}

.noor-particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
.noor-particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 18s; width: 6px; height: 6px; }
.noor-particle:nth-child(3) { left: 30%; animation-delay: 4s; animation-duration: 14s; }
.noor-particle:nth-child(4) { left: 40%; animation-delay: 1s; animation-duration: 20s; width: 3px; height: 3px; }
.noor-particle:nth-child(5) { left: 50%; animation-delay: 3s; animation-duration: 16s; }
.noor-particle:nth-child(6) { left: 60%; animation-delay: 5s; animation-duration: 13s; width: 5px; height: 5px; }
.noor-particle:nth-child(7) { left: 70%; animation-delay: 2.5s; animation-duration: 19s; }
.noor-particle:nth-child(8) { left: 80%; animation-delay: 4.5s; animation-duration: 15s; width: 4px; height: 4px; }
.noor-particle:nth-child(9) { left: 90%; animation-delay: 1.5s; animation-duration: 17s; }
.noor-particle:nth-child(10) { left: 15%; animation-delay: 6s; animation-duration: 21s; width: 7px; height: 7px; }

@keyframes noorFloatUp {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) scale(1.5);
    opacity: 0;
  }
}

/* ── Sparkle Effect on Hover ──────────────────────────────────────── */
.theme-noor .sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gradient-gold);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: noorSparkle 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes noorSparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1.5) rotate(180deg);
    opacity: 0;
  }
}

/* ── Ripple Effect for Buttons ───────────────────────────────────── */
.theme-noor .noor-icon-btn,
.theme-noor .noor-quicklink,
.theme-noor .noor-cp-item {
  position: relative;
  overflow: hidden;
}

.theme-noor .noor-icon-btn::after,
.theme-noor .noor-quicklink::after,
.theme-noor .noor-cp-item::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: hsl(var(--primary) / 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.theme-noor .noor-icon-btn:active::after,
.theme-noor .noor-quicklink:active::after,
.theme-noor .noor-cp-item:active::after {
  width: 200%;
  height: 200%;
}

/* ── Floating Orbs/Aurora Background ───────────────────────────── */
.theme-noor .noor-aurora-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.theme-noor .noor-aurora-bg::before,
.theme-noor .noor-aurora-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: noorAuroraMove 20s ease-in-out infinite;
}

.theme-noor .noor-aurora-bg::before {
  width: 600px;
  height: 600px;
  background: hsl(var(--primary) / 0.3);
  top: -200px;
  left: -100px;
  animation-delay: 0s;
}

.theme-noor .noor-aurora-bg::after {
  width: 500px;
  height: 500px;
  background: hsl(var(--accent) / 0.25);
  bottom: -150px;
  right: -100px;
  animation-delay: -10s;
}

@keyframes noorAuroraMove {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(50px, 50px) scale(1.1);
  }
  50% {
    transform: translate(-30px, 100px) scale(0.95);
  }
  75% {
    transform: translate(80px, -50px) scale(1.05);
  }
}

/* ── Enhanced Verse Card Effects ─────────────────────────────────── */
.theme-noor .verse-card {
  position: relative;
}

.theme-noor .verse-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.1), transparent);
  transition: left 0.7s ease;
  pointer-events: none;
}

.theme-noor .verse-card:hover::before {
  left: 100%;
}

/* ── Shimmer Border Effect ───────────────────────────────────────── */
.theme-noor .shimmer-border {
  position: relative;
  background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--card)));
  border-radius: 1rem;
}

.theme-noor .shimmer-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary)));
  background-size: 200% 100%;
  animation: noorShimmerBorder 3s linear infinite;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-noor .shimmer-border:hover::before {
  opacity: 1;
}

@keyframes noorShimmerBorder {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* ── Glow Text Effect ──────────────────────────────────────────── */
.theme-noor .glow-text {
  animation: noorTextGlow 2s ease-in-out infinite alternate;
}

@keyframes noorTextGlow {
  from {
    text-shadow: 0 0 5px hsl(var(--primary) / 0.5),
                 0 0 10px hsl(var(--primary) / 0.3),
                 0 0 20px hsl(var(--primary) / 0.2);
  }
  to {
    text-shadow: 0 0 10px hsl(var(--primary) / 0.8),
                 0 0 20px hsl(var(--primary) / 0.5),
                 0 0 40px hsl(var(--primary) / 0.3);
  }
}

/* ── Bounce In Animation for Elements ────────────────────────────── */
.theme-noor .bounce-in {
  animation: noorBounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes noorBounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Pulse Ring Animation ───────────────────────────────────────── */
.theme-noor .pulse-ring {
  position: relative;
}

.theme-noor .pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid hsl(var(--primary) / 0.5);
  animation: noorPulseRing 2s ease-out infinite;
}

@keyframes noorPulseRing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* ── Rotating Gradient Border ───────────────────────────────────── */
.theme-noor .rotating-border {
  position: relative;
  background: hsl(var(--card));
  border-radius: 1rem;
  z-index: 1;
}

.theme-noor .rotating-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary-glow)), hsl(var(--primary)));
  z-index: -1;
  animation: noorRotateBorder 4s linear infinite;
}

.theme-noor .rotating-border::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background: conic-gradient(from 0deg, hsl(var(--primary)), hsl(var(--accent)), hsl(var(--primary-glow)), hsl(var(--primary)));
  z-index: -1;
  animation: noorRotateBorder 4s linear infinite;
  filter: blur(10px);
  opacity: 0.5;
}

@keyframes noorRotateBorder {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ── Wave Animation for Audio Playing ───────────────────────────── */
.theme-noor .audio-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
}

.theme-noor .audio-wave span {
  width: 3px;
  background: hsl(var(--primary));
  border-radius: 3px;
  animation: noorAudioWave 1s ease-in-out infinite;
}

.theme-noor .audio-wave span:nth-child(1) { height: 8px; animation-delay: 0s; }
.theme-noor .audio-wave span:nth-child(2) { height: 15px; animation-delay: 0.1s; }
.theme-noor .audio-wave span:nth-child(3) { height: 10px; animation-delay: 0.2s; }
.theme-noor .audio-wave span:nth-child(4) { height: 18px; animation-delay: 0.3s; }
.theme-noor .audio-wave span:nth-child(5) { height: 12px; animation-delay: 0.4s; }

@keyframes noorAudioWave {
  0%, 100% {
    transform: scaleY(0.5);
    opacity: 0.5;
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* ── Floating Badge Animation ───────────────────────────────────── */
.theme-noor .floating-badge {
  animation: noorFloatBadge 3s ease-in-out infinite;
}

@keyframes noorFloatBadge {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-3px) rotate(-5deg);
  }
}

/* ── Gradient Text Shine ────────────────────────────────────────── */
.theme-noor .shine-text {
  background: linear-gradient(90deg, 
    hsl(var(--foreground)) 0%, 
    hsl(var(--primary)) 25%, 
    hsl(var(--accent)) 50%, 
    hsl(var(--primary)) 75%, 
    hsl(var(--foreground)) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: noorShineText 3s linear infinite;
}

@keyframes noorShineText {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

/* ── Neon Flicker Effect ────────────────────────────────────────── */
.theme-noor .neon-flicker {
  animation: noorNeonFlicker 2s infinite alternate;
}

@keyframes noorNeonFlicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 10px hsl(var(--primary) / 0.8),
                 0 0 20px hsl(var(--primary) / 0.6),
                 0 0 40px hsl(var(--primary) / 0.4);
  }
  41% {
    opacity: 1;
  }
  42% {
    opacity: 0.8;
  }
  43% {
    opacity: 1;
  }
  46% {
    opacity: 0.7;
  }
  47% {
    opacity: 1;
  }
}

/* ── Floating Dust Particles ────────────────────────────────────── */
.noor-dust-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.noor-dust {
  position: absolute;
  width: 2px;
  height: 2px;
  background: hsl(var(--accent) / 0.3);
  border-radius: 50%;
  animation: noorDustFloat 20s ease-in-out infinite;
}

.noor-dust:nth-child(1) { left: 5%; top: 20%; animation-delay: 0s; }
.noor-dust:nth-child(2) { left: 15%; top: 60%; animation-delay: 3s; }
.noor-dust:nth-child(3) { left: 25%; top: 40%; animation-delay: 7s; }
.noor-dust:nth-child(4) { left: 35%; top: 80%; animation-delay: 2s; }
.noor-dust:nth-child(5) { left: 45%; top: 10%; animation-delay: 5s; }
.noor-dust:nth-child(6) { left: 55%; top: 50%; animation-delay: 8s; }
.noor-dust:nth-child(7) { left: 65%; top: 30%; animation-delay: 1s; }
.noor-dust:nth-child(8) { left: 75%; top: 70%; animation-delay: 4s; }
.noor-dust:nth-child(9) { left: 85%; top: 25%; animation-delay: 6s; }
.noor-dust:nth-child(10) { left: 95%; top: 55%; animation-delay: 9s; }

@keyframes noorDustFloat {
  0%, 100% {
    transform: translate(0, 0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.6;
  }
  100% {
    transform: translate(100px, -100px);
    opacity: 0;
  }
}

/* ── Comet Trail Effect ─────────────────────────────────────────── */
.noor-comet {
  position: absolute;
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.8), transparent);
  animation: noorComet 8s linear infinite;
  opacity: 0;
}

.noor-comet:nth-child(1) { top: 20%; animation-delay: 0s; }
.noor-comet:nth-child(2) { top: 50%; animation-delay: 3s; }
.noor-comet:nth-child(3) { top: 80%; animation-delay: 6s; }

@keyframes noorComet {
  0% {
    left: -100px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* ── Star Twinkle Background ────────────────────────────────────── */
.noor-stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.noor-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: noorTwinkle 3s ease-in-out infinite;
}

.noor-star:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.noor-star:nth-child(2) { top: 20%; left: 80%; animation-delay: 0.5s; }
.noor-star:nth-child(3) { top: 30%; left: 40%; animation-delay: 1s; }
.noor-star:nth-child(4) { top: 40%; left: 60%; animation-delay: 1.5s; }
.noor-star:nth-child(5) { top: 50%; left: 20%; animation-delay: 2s; }
.noor-star:nth-child(6) { top: 60%; left: 90%; animation-delay: 0.3s; }
.noor-star:nth-child(7) { top: 70%; left: 30%; animation-delay: 0.8s; }
.noor-star:nth-child(8) { top: 80%; left: 70%; animation-delay: 1.3s; }
.noor-star:nth-child(9) { top: 15%; left: 50%; animation-delay: 1.8s; }
.noor-star:nth-child(10) { top: 85%; left: 15%; animation-delay: 2.3s; }

@keyframes noorTwinkle {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
}