.bg-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background-size: 400% 400%;
  background-blend-mode: screen;
  filter: brightness(1.1) saturate(1.3) blur(8px);
  will-change: opacity, background-position;
  transition: opacity 2s ease;
}

/* Gradient Layers */
.bg1 {
  background-image: linear-gradient(-45deg, #658ee4, #dfb068, #cb6be3, #15f153);
  /* background-image: linear-gradient(-45deg, #658ee4, #dfb068, #cb6be3, #15bef1); */
  animation: gradientMotion 30s ease infinite, fadeToggle 60s ease-in-out infinite;
}

.bg2 {
  background-image: linear-gradient(-45deg, #658ee4, #dfb068, #cb6be3, #15f153);
  /* background-image: linear-gradient(-45deg, #658ee4, #dfb068, #cb6be3, #15bef1); */
  animation: gradientMotion 30s ease infinite reverse, fadeToggleAlt 60s ease-in-out infinite;
  opacity: 0;
}

/* Smooth horizontal movement */
@keyframes gradientMotion {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Fade timing for .bg1 */
@keyframes fadeToggle {
  0%, 25%, 100% { opacity: 1; }
  50%, 75%      { opacity: 0; }
}

/* Opposite fade for .bg2 */
@keyframes fadeToggleAlt {
  0%, 25%, 100% { opacity: 0; }
  50%, 75%      { opacity: 1; }
}

/* Mobile & performance-friendly adjustments */
@media (max-width: 768px) {
  .bg-layer {
    background-size: 200% 200%;
    filter: brightness(1.05) saturate(1.2) blur(5px);
  }

  .bg1,
  .bg2 {
    /* animation-duration: 45s, 90s; */ /* Reduced Speed Background Animation */
    animation-duration: 30s, 60s;  /* Full Speed Background Animation */
  }
}

/* Respect user accessibility preferences */
@media (prefers-reduced-motion: reduce) {
  .bg-layer {
    display: none !important;
  }

  body {
    background-color: #f5f5f5;
    background-image: linear-gradient(-45deg, #e2ded2, #d4cabc, #c5b8a6, #f0ede7);
    background-size: cover;
    background-position: center;
  }
}