/* Обертка с частицами */

.premium-bg-dots {

  position: fixed;

  inset: 0;

  z-index: -1;

  pointer-events: none;

  overflow: hidden;

}



/* Сами кружочки */

.premium-bg-dots span {

  position: absolute;

  left: var(--x);

  top: var(--y);

  width: var(--s);

  height: var(--s);

  border-radius: 50%;



  background: rgba(255, 255, 255, var(--o));

  box-shadow:

    0 0 10px rgba(255, 255, 255, calc(var(--o) * 0.7)),

    0 0 24px rgba(120, 95, 255, calc(var(--o) * 0.9));



  transform: translate3d(0, 0, 0);

  animation:

    premiumDotFloat 12s ease-in-out infinite,

    premiumDotPulse 5.5s ease-in-out infinite;

  animation-delay: var(--d), calc(var(--d) * -1);

}



/* Плавное дорогое движение */

@keyframes premiumDotFloat {

  0% {

    transform: translate3d(0, 0, 0);

  }



  25% {

    transform: translate3d(8px, -12px, 0);

  }



  50% {

    transform: translate3d(-5px, -20px, 0);

  }



  75% {

    transform: translate3d(-12px, -6px, 0);

  }



  100% {

    transform: translate3d(0, 0, 0);

  }

}



/* Очень мягкая пульсация */

@keyframes premiumDotPulse {

  0%, 100% {

    opacity: 0.45;

    filter: blur(0px);

  }



  50% {

    opacity: 1;

    filter: blur(0.3px);

  }

}



/* Чтобы на телефонах было легче */

@media (max-width: 767px) {

  .premium-bg-dots span {

    animation-duration: 14s, 6.5s;

  }



  .premium-bg-dots span:nth-child(n + 10) {

    display: none;

  }

}



/* Уважение к настройке "уменьшить анимацию" */

@media (prefers-reduced-motion: reduce) {

  .premium-bg-dots span {

    animation: none;

  }

}    


.premium-bg-dots span:nth-child(1){--x:18%; --y:27%; --s:6px; --d:0s; --o:.28;}
.premium-bg-dots span:nth-child(2){--x:61%; --y:20%; --s:5px; --d:1.4s; --o:.18;}
.premium-bg-dots span:nth-child(3){--x:77%; --y:20%; --s:4px; --d:2.1s; --o:.14;}
.premium-bg-dots span:nth-child(4){--x:32%; --y:42%; --s:3px; --d:.8s; --o:.15;}
.premium-bg-dots span:nth-child(5){--x:46%; --y:55%; --s:7px; --d:2.8s; --o:.24;}
.premium-bg-dots span:nth-child(6){--x:89%; --y:48%; --s:5px; --d:1.9s; --o:.18;}
.premium-bg-dots span:nth-child(7){--x:90%; --y:55%; --s:4px; --d:.5s; --o:.12;}
.premium-bg-dots span:nth-child(8){--x:74%; --y:82%; --s:7px; --d:3.2s; --o:.22;}
.premium-bg-dots span:nth-child(9){--x:63%; --y:89%; --s:4px; --d:1.1s; --o:.13;}
.premium-bg-dots span:nth-child(10){--x:88%; --y:96%; --s:3px; --d:2.4s; --o:.12;}
.premium-bg-dots span:nth-child(11){--x:43%; --y:89%; --s:2px; --d:1.7s; --o:.11;}
.premium-bg-dots span:nth-child(12){--x:31%; --y:89%; --s:2px; --d:.2s; --o:.10;}
.premium-bg-dots span:nth-child(13){--x:30%; --y:55%; --s:2px; --d:2.7s; --o:.08;}
.premium-bg-dots span:nth-child(14){--x:57%; --y:20%; --s:2px; --d:3.6s; --o:.09;}
.premium-bg-dots span:nth-child(15){--x:75%; --y:34%; --s:2px; --d:1.5s; --o:.07;}