/* =========================
   Universal glow backgrounds
   ========================= */

:root {
  --glow-green-opacity: 0.96;
  --glow-yellow-opacity: 0.95;
  --glow-purple-opacity: 0.96;
  --glow-blue-opacity: 0.95;

  --glow-dark-opacity: 0.42;
  --glow-dark-saturation: 0.78;
  --glow-dark-brightness: 0.82;
}

/* =========================
   Animations
   ========================= */

@keyframes glowPulse {
  0%, 100% {
    background-position: 0% 50%;
    opacity: 1;
    filter: brightness(1.05) saturate(1);
  }
  50% {
    background-position: 100% 50%;
    opacity: 1;
    filter: brightness(1.16) saturate(1.04);
  }
}

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

@keyframes glowGreenCycle {
  0% {
    background-position: 0% 50%;
    filter: brightness(1) saturate(1);
  }
  33% {
    background-position: 40% 50%;
    filter: brightness(1.03) saturate(1.02);
  }
  66% {
    background-position: 100% 50%;
    filter: brightness(0.98) saturate(0.98);
  }
  100% {
    background-position: 0% 50%;
    filter: brightness(1) saturate(1);
  }
}

/* =========================
   Shared glow layer
   ========================= */

.bg-glow-green,
.bg-glow-yellow,
.bg-glow-purple,
.bg-glow-blue {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-repeat: no-repeat;
  will-change: background-position, opacity, filter;
}

/* =========================
   Light mode glows
   ========================= */

.bg-glow-green {
  background:
    linear-gradient(
      270deg,
      rgba(34, 197, 94, 0.78),
      rgba(16, 185, 129, 0.72),
      rgba(6, 95, 70, 0.62),
      rgba(16, 185, 129, 0.72),
      rgba(34, 197, 94, 0.78)
    );
  background-size: 500% 500%;
  animation: glowGreenCycle 10s ease-in-out infinite;
  opacity: var(--glow-green-opacity);
}

.bg-glow-yellow {
  background:
    linear-gradient(
      270deg,
      rgba(255, 243, 176, 0.72),
      rgba(255, 216, 77, 0.64),
      rgba(255, 183, 3, 0.58),
      rgba(251, 133, 0, 0.54),
      rgba(255, 183, 3, 0.58),
      rgba(255, 216, 77, 0.64),
      rgba(255, 243, 176, 0.72)
    );
  background-size: 800% 800%;
  animation: glowSweep 14s ease-in-out infinite;
  opacity: var(--glow-yellow-opacity);
}

.bg-glow-purple {
  background:
    linear-gradient(
      270deg,
      rgba(96, 165, 250, 0.62),
      rgba(139, 92, 246, 0.66),
      rgba(239, 68, 68, 0.56),
      rgba(139, 92, 246, 0.66),
      rgba(96, 165, 250, 0.62)
    );
  background-size: 800% 800%;
  animation: glowPulse 6s ease-in-out infinite;
  opacity: var(--glow-purple-opacity);
}

.bg-glow-blue {
  background:
    linear-gradient(
      270deg,
      rgba(186, 230, 253, 0.76),
      rgba(125, 211, 252, 0.68),
      rgba(59, 130, 246, 0.56),
      rgba(37, 99, 235, 0.50),
      rgba(59, 130, 246, 0.56),
      rgba(125, 211, 252, 0.68),
      rgba(186, 230, 253, 0.76)
    );
  background-size: 800% 800%;
  animation: glowSweep 13s ease-in-out infinite;
  opacity: var(--glow-blue-opacity);
}

/* =========================
   Dark mode glows
   ========================= */

.dark .bg-glow-green,
.dark .bg-glow-yellow,
.dark .bg-glow-purple,
.dark .bg-glow-blue {
  opacity: var(--glow-dark-opacity);
  filter: saturate(var(--glow-dark-saturation))
          brightness(var(--glow-dark-brightness));
}

.dark .bg-glow-green {
  background:
    linear-gradient(
      270deg,
      rgba(34, 197, 94, 0.34),
      rgba(16, 185, 129, 0.28),
      rgba(6, 95, 70, 0.42),
      rgba(16, 185, 129, 0.28),
      rgba(34, 197, 94, 0.34)
    );
  background-size: 500% 500%;
  animation: glowGreenCycle 10s ease-in-out infinite;
}

.dark .bg-glow-yellow {
  background:
    linear-gradient(
      270deg,
      rgba(255, 243, 176, 0.30),
      rgba(255, 216, 77, 0.28),
      rgba(255, 183, 3, 0.24),
      rgba(251, 133, 0, 0.22),
      rgba(255, 183, 3, 0.24),
      rgba(255, 216, 77, 0.28),
      rgba(255, 243, 176, 0.30)
    );
  background-size: 800% 800%;
  animation: glowSweep 14s ease-in-out infinite;
}

.dark .bg-glow-purple {
  background:
    linear-gradient(
      270deg,
      rgba(96, 165, 250, 0.16),
      rgba(139, 92, 246, 0.20),
      rgba(236, 72, 153, 0.18),
      rgba(139, 92, 246, 0.20),
      rgba(96, 165, 250, 0.16)
    );
  background-size: 800% 800%;
  animation: glowPulse 6s ease-in-out infinite;
}

.dark .bg-glow-blue {
  background:
    linear-gradient(
      270deg,
      rgba(56, 189, 248, 0.18),
      rgba(59, 130, 246, 0.22),
      rgba(37, 99, 235, 0.24),
      rgba(30, 64, 175, 0.22),
      rgba(59, 130, 246, 0.20),
      rgba(56, 189, 248, 0.18)
    );
  background-size: 800% 800%;
  animation: glowSweep 13s ease-in-out infinite;
}

/* =========================
   Reduced motion
   ========================= */

@media (prefers-reduced-motion: reduce) {
  .bg-glow-green,
  .bg-glow-yellow,
  .bg-glow-purple,
  .bg-glow-blue {
    animation: none !important;
  }
}