/* Background transition specific styles */
body {
  /* Ensure smooth transition for background color */
  transition: background 0.6s ease-in-out, color 0.6s ease-in-out;
}

/* Smooth transitions for text elements when background changes */
h1,
h2,
h3,
p,
span,
a,
div {
  transition: color 0.6s ease-in-out, text-shadow 0.6s ease-in-out;
}

/* Ensure header has a smooth transition */
header {
  transition: background 0.6s ease-in-out, border-color 0.6s ease-in-out,
    box-shadow 0.6s ease-in-out;
}

/* Make the background animation more vibrant */
body.white-background {
  background-image: radial-gradient(
      circle at 20% 80%,
      rgba(126, 34, 206, 0.05) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 20%,
      rgba(168, 85, 247, 0.07) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 40%,
      rgba(147, 51, 234, 0.03) 0%,
      transparent 50%
    );
}

/* More intense purple accents during the transition */
body.white-background .feature-card-glass {
  box-shadow: 0 10px 30px rgba(126, 34, 206, 0.15),
    0 5px 15px rgba(126, 34, 206, 0.1);
}

/* Add subtle pulsing effect to section headers during transition */
@keyframes subtlePulse {
  0%,
  100% {
    text-shadow: 0 0 15px rgba(126, 34, 206, 0.3);
  }
  50% {
    text-shadow: 0 0 25px rgba(126, 34, 206, 0.5);
  }
}

body.white-background .section-header-glass h2 {
  animation: subtlePulse 3s ease-in-out infinite;
}

/* Smoother transition for feature cards */
.feature-card-glass {
  transition: background 0.6s ease-in-out, box-shadow 0.6s ease-in-out,
    transform 0.3s ease-in-out !important;
}