/* Collection page – collection.html */

.sparkle-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.sparkle-bg__dot {
  position: absolute;
  display: block;
  border-radius: 50%;
  animation: collection-sparkle-twinkle var(--sparkle-dur, 3s) ease-in-out infinite alternate;
  animation-delay: var(--sparkle-delay, 0s);
}
/* Collection page sparkle dots – electric blue on grey, brighter twinkle */
body.collection-page .collection-intro .sparkle-bg__dot {
  animation-name: collection-sparkle-twinkle;
  box-shadow: 0 0 12px rgba(26, 75, 255, 0.65), 0 0 5px rgba(26, 75, 255, 0.45);
}

@keyframes collection-sparkle-twinkle {
  0% {
    opacity: 0.55;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
  100% {
    opacity: 0.75;
    transform: scale(0.95);
  }
}

.sparkle-bg__dot--1  { top: 8%;  left: 6%;   width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 2.8s; --sparkle-delay: 0.1s; background: rgba(26, 75, 255, 0.95); box-shadow: 0 0 11px rgba(26, 75, 255, 0.6); }
.sparkle-bg__dot--2  { top: 14%; left: 22%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 3.4s; --sparkle-delay: 0.6s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 12px rgba(26, 75, 255, 0.58); }
.sparkle-bg__dot--3  { top: 6%;  left: 41%;  width: 3.5px; height: 3.5px; opacity: 0.8; --sparkle-dur: 2.2s; --sparkle-delay: 1.2s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.sparkle-bg__dot--4  { top: 18%; left: 58%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.1s; --sparkle-delay: 0.3s; background: rgba(26, 75, 255, 0.85); box-shadow: 0 0 9px rgba(26, 75, 255, 0.5); }
.sparkle-bg__dot--5  { top: 11%; left: 78%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 3.1s; --sparkle-delay: 1.8s; background: rgba(26, 75, 255, 0.98); box-shadow: 0 0 12px rgba(26, 75, 255, 0.62); }
.sparkle-bg__dot--6  { top: 22%; left: 91%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.6s; --sparkle-delay: 0.9s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 11px rgba(26, 75, 255, 0.55); }
.sparkle-bg__dot--7  { top: 31%; left: 3%;   width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.8s; --sparkle-delay: 2.1s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.sparkle-bg__dot--8  { top: 38%; left: 15%;  width: 3.5px; height: 3.5px; opacity: 0.86; --sparkle-dur: 2.9s; --sparkle-delay: 0.4s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--9  { top: 44%; left: 33%;  width: 3px; height: 3px; opacity: 0.74; --sparkle-dur: 4.3s; --sparkle-delay: 1.5s; background: rgba(26, 75, 255, 0.8); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--10 { top: 52%; left: 52%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 2.4s; --sparkle-delay: 0.7s; background: rgba(26, 75, 255, 0.96); box-shadow: 0 0 12px rgba(26, 75, 255, 0.58); }
.sparkle-bg__dot--11 { top: 47%; left: 68%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 3.6s; --sparkle-delay: 2.4s; background: rgba(26, 75, 255, 0.85); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.sparkle-bg__dot--12 { top: 58%; left: 84%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.7s; --sparkle-delay: 1.1s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--13 { top: 63%; left: 11%;  width: 3px; height: 3px; opacity: 0.8; --sparkle-dur: 3.9s; --sparkle-delay: 0.2s; background: rgba(26, 75, 255, 0.86); box-shadow: 0 0 10px rgba(26, 75, 255, 0.5); }
.sparkle-bg__dot--14 { top: 71%; left: 27%;  width: 4.5px; height: 4.5px; opacity: 0.92; --sparkle-dur: 2.5s; --sparkle-delay: 1.7s; background: rgba(26, 75, 255, 0.98); box-shadow: 0 0 12px rgba(26, 75, 255, 0.6); }
.sparkle-bg__dot--15 { top: 76%; left: 46%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.0s; --sparkle-delay: 0.8s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--16 { top: 69%; left: 61%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 3.2s; --sparkle-delay: 2.0s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.sparkle-bg__dot--17 { top: 82%; left: 73%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 2.3s; --sparkle-delay: 1.3s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--18 { top: 88%; left: 88%;  width: 4.5px; height: 4.5px; opacity: 0.92; --sparkle-dur: 3.5s; --sparkle-delay: 0.5s; background: rgba(26, 75, 255, 0.98); box-shadow: 0 0 13px rgba(26, 75, 255, 0.62); }
.sparkle-bg__dot--19 { top: 28%; left: 72%;  width: 3px; height: 3px; opacity: 0.72; --sparkle-dur: 4.5s; --sparkle-delay: 2.6s; background: rgba(26, 75, 255, 0.78); box-shadow: 0 0 9px rgba(26, 75, 255, 0.44); }
.sparkle-bg__dot--20 { top: 85%; left: 4%;   width: 3px; height: 3px; opacity: 0.8; --sparkle-dur: 3.0s; --sparkle-delay: 1.9s; background: rgba(26, 75, 255, 0.86); box-shadow: 0 0 10px rgba(26, 75, 255, 0.5); }
.sparkle-bg__dot--21 { top: 35%; left: 88%;  width: 3.5px; height: 3.5px; opacity: 0.86; --sparkle-dur: 2.1s; --sparkle-delay: 0.15s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--22 { top: 56%; left: 38%;  width: 3px; height: 3px; opacity: 0.74; --sparkle-dur: 3.7s; --sparkle-delay: 2.2s; background: rgba(26, 75, 255, 0.8); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--23 { top: 92%; left: 35%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.2s; --sparkle-delay: 1.0s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--24 { top: 4%;  left: 65%;  width: 3.5px; height: 3.5px; opacity: 0.88; --sparkle-dur: 2.8s; --sparkle-delay: 1.6s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.56); }
.sparkle-bg__dot--25 { top: 10%; left: 48%;  width: 4px; height: 4px; opacity: 0.86; --sparkle-dur: 3.3s; --sparkle-delay: 0.35s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 11px rgba(26, 75, 255, 0.56); }
.sparkle-bg__dot--26 { top: 16%; left: 35%;  width: 3px; height: 3px; opacity: 0.8; --sparkle-dur: 2.5s; --sparkle-delay: 1.4s; background: rgba(26, 75, 255, 0.86); box-shadow: 0 0 10px rgba(26, 75, 255, 0.5); }
.sparkle-bg__dot--27 { top: 20%; left: 12%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 3.9s; --sparkle-delay: 0.55s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--28 { top: 25%; left: 55%;  width: 5px; height: 5px; opacity: 0.94; --sparkle-dur: 2.2s; --sparkle-delay: 2.3s; background: rgba(26, 75, 255, 1); box-shadow: 0 0 14px rgba(26, 75, 255, 0.65); }
.sparkle-bg__dot--29 { top: 30%; left: 42%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.0s; --sparkle-delay: 0.85s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.sparkle-bg__dot--30 { top: 33%; left: 62%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 3.1s; --sparkle-delay: 1.95s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.sparkle-bg__dot--31 { top: 36%; left: 8%;   width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 2.7s; --sparkle-delay: 0.25s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.sparkle-bg__dot--32 { top: 40%; left: 75%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.6s; --sparkle-delay: 1.65s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--33 { top: 42%; left: 20%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.4s; --sparkle-delay: 2.55s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--34 { top: 45%; left: 90%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 3.8s; --sparkle-delay: 0.45s; background: rgba(26, 75, 255, 0.96); box-shadow: 0 0 12px rgba(26, 75, 255, 0.6); }
.sparkle-bg__dot--35 { top: 48%; left: 5%;   width: 3px; height: 3px; opacity: 0.74; --sparkle-dur: 4.4s; --sparkle-delay: 1.25s; background: rgba(26, 75, 255, 0.8); box-shadow: 0 0 9px rgba(26, 75, 255, 0.44); }
.sparkle-bg__dot--36 { top: 50%; left: 45%;  width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 2.6s; --sparkle-delay: 0.75s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.sparkle-bg__dot--37 { top: 53%; left: 28%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 3.5s; --sparkle-delay: 2.15s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.sparkle-bg__dot--38 { top: 55%; left: 65%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.9s; --sparkle-delay: 1.05s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.sparkle-bg__dot--39 { top: 57%; left: 48%;  width: 5px; height: 5px; opacity: 0.96; --sparkle-dur: 2.0s; --sparkle-delay: 0.65s; background: rgba(26, 75, 255, 1); box-shadow: 0 0 14px rgba(26, 75, 255, 0.68); }
.sparkle-bg__dot--40 { top: 60%; left: 18%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 4.1s; --sparkle-delay: 1.85s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--41 { top: 62%; left: 82%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 3.2s; --sparkle-delay: 0.95s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--42 { top: 65%; left: 38%;  width: 4px; height: 4px; opacity: 0.86; --sparkle-dur: 2.8s; --sparkle-delay: 2.35s; background: rgba(26, 75, 255, 0.92); box-shadow: 0 0 11px rgba(26, 75, 255, 0.56); }
.sparkle-bg__dot--43 { top: 67%; left: 55%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 3.7s; --sparkle-delay: 0.15s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.sparkle-bg__dot--44 { top: 70%; left: 8%;   width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.3s; --sparkle-delay: 1.45s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.sparkle-bg__dot--45 { top: 72%; left: 92%;  width: 4.5px; height: 4.5px; opacity: 0.9; --sparkle-dur: 4.0s; --sparkle-delay: 0.55s; background: rgba(26, 75, 255, 0.96); box-shadow: 0 0 12px rgba(26, 75, 255, 0.6); }
.sparkle-bg__dot--46 { top: 74%; left: 42%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.4s; --sparkle-delay: 2.05s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--47 { top: 77%; left: 18%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.5s; --sparkle-delay: 1.15s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--48 { top: 79%; left: 58%;  width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 3.0s; --sparkle-delay: 0.35s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.sparkle-bg__dot--49 { top: 81%; left: 32%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.2s; --sparkle-delay: 1.75s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.sparkle-bg__dot--50 { top: 83%; left: 68%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.7s; --sparkle-delay: 2.45s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }
.sparkle-bg__dot--51 { top: 86%; left: 52%;  width: 5px; height: 5px; opacity: 0.94; --sparkle-dur: 2.1s; --sparkle-delay: 0.85s; background: rgba(26, 75, 255, 1); box-shadow: 0 0 14px rgba(26, 75, 255, 0.66); }
.sparkle-bg__dot--52 { top: 89%; left: 22%;  width: 3px; height: 3px; opacity: 0.76; --sparkle-dur: 3.8s; --sparkle-delay: 1.55s; background: rgba(26, 75, 255, 0.82); box-shadow: 0 0 9px rgba(26, 75, 255, 0.46); }
.sparkle-bg__dot--53 { top: 91%; left: 78%;  width: 3.5px; height: 3.5px; opacity: 0.84; --sparkle-dur: 2.9s; --sparkle-delay: 0.25s; background: rgba(26, 75, 255, 0.9); box-shadow: 0 0 10px rgba(26, 75, 255, 0.54); }
.sparkle-bg__dot--54 { top: 94%; left: 48%;  width: 4px; height: 4px; opacity: 0.88; --sparkle-dur: 3.3s; --sparkle-delay: 2.25s; background: rgba(26, 75, 255, 0.94); box-shadow: 0 0 11px rgba(26, 75, 255, 0.58); }
.sparkle-bg__dot--55 { top: 96%; left: 12%;  width: 3px; height: 3px; opacity: 0.78; --sparkle-dur: 4.3s; --sparkle-delay: 1.05s; background: rgba(26, 75, 255, 0.84); box-shadow: 0 0 9px rgba(26, 75, 255, 0.48); }
.sparkle-bg__dot--56 { top: 97%; left: 62%;  width: 3.5px; height: 3.5px; opacity: 0.82; --sparkle-dur: 2.6s; --sparkle-delay: 0.65s; background: rgba(26, 75, 255, 0.88); box-shadow: 0 0 10px rgba(26, 75, 255, 0.52); }