<!-- ---
// Twinkling Star Background 
const numStars = 1600;
const stars = Array.from({ length: numStars }).map(() => ({
  left: `${Math.random() * 100}%`,
  top: `${Math.random() * 100}%`,
  size: `${Math.random() * 2 + 1}px`,
  delay: `${7 * Math.random()}s`,
  // hsl: `hsl(${Math.random() * 360}, 100%, 50%)`, // background: ${hsl}; 
}));
---
<div
  class="fixed top-0 left-0 w-full h-full pointer-events-none overflow-hidden"
>
  {
    stars.map(({ left, top, size, delay }) => (
      <div
        class="absolute bg-none dark:bg-yellow-50 rounded-full animate-twinkle"
        style={`
            left: ${left};
            top: ${top};
            width: ${size};
            height: ${size};
            animation-delay: ${delay};
        `}
      />
    ))
  }
</div> -->

<!-- Gradient Cycle Background -->
<!-- <div
  class="gradient animate-cycleBg fixed top-0 left-0 w-full h-full -z-1 pointer-events-none overflow-hidden"
/>
<style>
  .gradient {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
  }
</style> -->

<!-- Single Image Background -->
<!-- <style>
  html::before {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: url(/src/assets/backgrounds/bwca-dusk.png) no-repeat center center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
  }
</style> -->

<!-- Dual Image Background -->
<style>
  html::before,
  html::after {
    content: "";
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    transition: opacity 0.25s ease-in-out;
    pointer-events: none;
  }

  html::before {
    background-image: url(/src/assets/backgrounds/bwca-day.png);
    opacity: 1;
  }

  html.dark::before {
    opacity: 0;
  }

  html::after {
    background-image: url(/src/assets/backgrounds/bwca-night.png);
    opacity: 0;
  }

  html.dark::after {
    opacity: 1;
  }
</style>
