/* ==================================================================
   THE GREEN TURTLES — sparkles.css
   ------------------------------------------------------------------
   Standalone styling for the twinkling background sparkles — see
   sparkles.js (adds a touch of extra per-sparkle timing jitter on
   load; there's no click interaction here).
   ================================================================== */

/* Not interactive — pointer-events: none lets clicks fall through to
   whatever's behind (same reasoning as .bubbles in bubbles.css). */
.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Small star-shaped twinkles made with a rotated square (CSS "diamond"). */
.sparkle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: rotate(45deg);
  opacity: 0;
  animation: twinkle 4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: rotate(45deg) scale(0.5); }
  50%      { opacity: 1; transform: rotate(45deg) scale(1.2); }
}

.sparkle:nth-child(1) { top: 12%; left: 10%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 20%; left: 80%; animation-delay: 0.6s; }
.sparkle:nth-child(3) { top: 35%; left: 45%; animation-delay: 1.2s; }
.sparkle:nth-child(4) { top: 8%;  left: 60%; animation-delay: 1.8s; }
.sparkle:nth-child(5) { top: 50%; left: 90%; animation-delay: 2.4s; }
.sparkle:nth-child(6) { top: 60%; left: 6%;  animation-delay: 3s; }
.sparkle:nth-child(7) { top: 15%; left: 30%; animation-delay: 1.5s; }
.sparkle:nth-child(8) { top: 40%; left: 15%; animation-delay: 2.1s; }