---
// Background.astro - Dot pattern and ambient glow background with smooth theme transitions
---

<div class="theme-transition-all fixed inset-0 -z-10 overflow-hidden">
  <!-- Dot pattern background -->
  <div
    class="bg-grid-pattern theme-transition-bg absolute inset-0 bg-[center_top_-1px] [mask-image:radial-gradient(white,transparent_85%)]"
  >
  </div>

  <!-- Ambient glow effects -->
  <div
    class="animate-glow theme-transition-bg absolute left-1/4 top-1/4 h-96 w-96 -translate-x-1/2 -translate-y-1/2 rounded-full bg-zinc-400/20 opacity-50 blur-3xl dark:bg-zinc-500/20"
  >
  </div>
  <div
    class="animate-glow animation-delay-1000 theme-transition-bg absolute bottom-1/3 right-1/4 h-64 w-64 translate-x-1/2 translate-y-1/2 rounded-full bg-zinc-300/20 opacity-40 blur-3xl dark:bg-zinc-600/20"
  >
  </div>

  <!-- Theme transition overlay -->
  <div
    id="theme-transition-overlay"
    class="pointer-events-none absolute inset-0 bg-white opacity-0 dark:bg-zinc-900"
  >
  </div>
</div>

<script>
  // Theme transition script
  document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.querySelector('[data-theme-toggle]');
    const overlay = document.getElementById('theme-transition-overlay');

    if (themeToggle && overlay) {
      themeToggle.addEventListener('click', () => {
        // Add transitioning class to optimize performance
        document.documentElement.classList.add('theme-transitioning');

        // Fade in overlay
        overlay.style.opacity = '0.15';
        overlay.style.transition = 'opacity 0.3s ease';

        setTimeout(() => {
          // Fade out overlay
          overlay.style.opacity = '0';

          // Remove transitioning class after animation completes
          setTimeout(() => {
            document.documentElement.classList.remove('theme-transitioning');
          }, 700);
        }, 300);
      });
    }
  });
</script>

<style>
  /* Grid pattern for dots */
  .bg-grid-pattern {
    background-size: 24px 24px;
    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.15) 1px, transparent 1px);
    transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* Dark mode version */
  :global(.dark) .bg-grid-pattern {
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  }

  /* Ambient glow animations */
  .animate-glow {
    animation: glow 12s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    transition:
      background-color 0.7s cubic-bezier(0.65, 0, 0.35, 1),
      opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .animation-delay-1000 {
    animation-delay: 1s;
  }

  @keyframes glow {
    0%,
    100% {
      opacity: 0.4;
      transform: translate(0, 0) scale(1);
    }
    25% {
      opacity: 0.5;
      transform: translate(5%, 5%) scale(1.1);
    }
    50% {
      opacity: 0.3;
      transform: translate(0, 10%) scale(0.95);
    }
    75% {
      opacity: 0.5;
      transform: translate(-5%, 5%) scale(1.05);
    }
  }

  /* Theme transition overlay */
  #theme-transition-overlay {
    transition: opacity 0.3s ease;
    z-index: 10;
  }
</style>