/* Shared sparkle effect for all pages that don't load styles.css.
   Sparkle layers + animations only - keep this file self-contained. */

.bg-fx-sparkles {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
}
.sparkle-layer {
  position: absolute; inset: 0;
  background-repeat: repeat;
}
.sparkle-layer-1 {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 78%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 47% 32%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 88%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 76% 24%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 67%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 8%,  #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 16% 51%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 38% 96%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 55% 14%, #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 7% 65%,  #EAFBFF, transparent 60%),
    radial-gradient(1.2px 1.2px at 71% 47%, #EAFBFF, transparent 60%);
  background-size: 280px 280px;
  animation: twinkleFast 4.5s ease-in-out infinite;
  opacity: 0.85;
}
.sparkle-layer-2 {
  background-image:
    radial-gradient(2px 2px at 11% 27%,     #6DDDEB, transparent 65%),
    radial-gradient(1.5px 1.5px at 29% 63%, #67A4E1, transparent 65%),
    radial-gradient(2px 2px at 47% 14%,     #6DDDEB, transparent 65%),
    radial-gradient(1.5px 1.5px at 64% 71%, #67A4E1, transparent 65%),
    radial-gradient(2px 2px at 81% 41%,     #6DDDEB, transparent 65%),
    radial-gradient(1.5px 1.5px at 96% 86%, #67A4E1, transparent 65%),
    radial-gradient(1.8px 1.8px at 19% 89%, #6DDDEB, transparent 65%),
    radial-gradient(1.5px 1.5px at 38% 38%, #67A4E1, transparent 65%);
  background-size: 360px 360px;
  filter: drop-shadow(0 0 5px #6DDDEB);
  animation: twinkleSlow 7s ease-in-out infinite, sparkleDrift 90s linear infinite;
  opacity: 0.75;
}
.sparkle-layer-3 {
  background-image:
    radial-gradient(1.5px 1.5px at 19% 42%, #62FFC6, transparent 65%),
    radial-gradient(2px 2px at 53% 81%,     #8A5CFF, transparent 65%),
    radial-gradient(1.5px 1.5px at 77% 17%, #9C9FEC, transparent 65%),
    radial-gradient(2px 2px at 91% 52%,     #62FFC6, transparent 65%),
    radial-gradient(1.5px 1.5px at 25% 8%,  #8A5CFF, transparent 65%),
    radial-gradient(1.8px 1.8px at 43% 60%, #F5C56F, transparent 65%),
    radial-gradient(1.5px 1.5px at 67% 92%, #62FFC6, transparent 65%);
  background-size: 420px 420px;
  filter: drop-shadow(0 0 6px #8A5CFF);
  animation: twinkleMid 5.5s ease-in-out infinite reverse, sparkleDrift 120s linear infinite reverse;
  opacity: 0.65;
}
@keyframes twinkleFast {
  0%, 100% { opacity: 0.25; transform: scale(0.9); }
  50%      { opacity: 0.95; transform: scale(1.05); }
}
@keyframes twinkleSlow {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}
@keyframes twinkleMid {
  0%, 100% { opacity: 0.20; }
  50%      { opacity: 0.75; }
}
@keyframes sparkleDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40px, -25px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle-layer-1, .sparkle-layer-2, .sparkle-layer-3 { animation: none; opacity: 0.5; }
}