.stars, .stars-2, .stars-3, .stars-big {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  background: transparent;
}

/* Sloj 1 — sitna zrnca svjetla */
.stars {
  width: 3.5px;
  height: 3.5px;
  opacity: .7;
  box-shadow: 4vw 8vh 1px #fff, 12vw 20vh 1px #fff, 18vw 74vh 1px #fff, 23vw 46vh 1px #fff, 29vw 15vh 1px #fff, 35vw 62vh 1px #fff, 41vw 33vh 1px #fff, 47vw 85vh 1px #fff, 52vw 11vh 1px #fff, 58vw 54vh 1px #fff, 64vw 27vh 1px #fff, 69vw 78vh 1px #fff, 74vw 39vh 1px #fff, 80vw 6vh 1px #fff, 85vw 58vh 1px #fff, 90vw 24vh 1px #fff, 95vw 71vh 1px #fff, 8vw 56vh 1px #fff, 15vw 91vh 1px #fff, 26vw 67vh 1px #fff, 33vw 9vh 1px #fff, 44vw 49vh 1px #fff, 50vw 94vh 1px #fff, 61vw 43vh 1px #fff, 67vw 14vh 1px #fff, 76vw 88vh 1px #fff, 82vw 31vh 1px #fff, 88vw 64vh 1px #fff, 97vw 17vh 1px #fff, 54vw 70vh 1px #fff,
    14.9vw 81.8vh 1px #fff, 75.3vw 26.7vh 1px #fff, 49.6vw 44.8vh 1px #fff, 64.6vw 76.4vh 1px #fff, 11vw 5.6vh 1px #fff, 82.2vw 43.2vh 1px #fff, 75.2vw 3.2vh 1px #fff, 44.8vw 70.1vh 1px #fff, 24vw 90.9vh 1px #fff, 88.5vw 5.8vh 1px #fff, 4.4vw 53.4vh 1px #fff, 92.2vw 38.5vh 1px #fff, 22.8vw 42.3vh 1px #fff, 4.8vw 23.6vh 1px #fff, 44vw 49.1vh 1px #fff, 24.4vw 24.5vh 1px #fff, 23vw 45.7vh 1px #fff, 29.8vw 5vh 1px #fff, 82.4vw 54.8vh 1px #fff, 63.7vw 20.3vh 1px #fff, 97.3vw 83vh 1px #fff, 13.6vw 33.9vh 1px #fff, 71.3vw 69.1vh 1px #fff, 91.9vw 42.3vh 1px #fff, 81.7vw 65.3vh 1px #fff;
  animation: driftA 60s ease-in-out infinite, iskri 6s ease-in-out infinite alternate;
}

/* Sloj 2 — srednja zrnca, malo zlatnkasta */
.stars-2 {
  width: 3px;
  height: 3px;
  opacity: .62;
  box-shadow: 6vw 14vh var(--gold-pale), 14vw 63vh var(--gold-pale), 21vw 35vh var(--gold-pale), 31vw 80vh var(--gold-pale), 39vw 19vh var(--gold-pale), 48vw 60vh var(--gold-pale), 56vw 28vh var(--gold-pale), 63vw 92vh var(--gold-pale), 71vw 44vh var(--gold-pale), 79vw 12vh var(--gold-pale), 86vw 73vh var(--gold-pale), 93vw 50vh var(--gold-pale), 10vw 84vh var(--gold-pale), 25vw 7vh var(--gold-pale), 37vw 52vh var(--gold-pale), 45vw 24vh var(--gold-pale), 59vw 76vh var(--gold-pale), 68vw 17vh var(--gold-pale), 77vw 66vh var(--gold-pale), 91vw 30vh var(--gold-pale),
    93.8vw 91.1vh var(--gold-pale), 7.4vw 10.9vh var(--gold-pale), 82.2vw 71.4vh var(--gold-pale), 66.3vw 31.7vh var(--gold-pale), 60.2vw 59.4vh var(--gold-pale), 57.8vw 17.7vh var(--gold-pale), 43.3vw 39.6vh var(--gold-pale), 71.4vw 95.5vh var(--gold-pale), 93.1vw 53.6vh var(--gold-pale), 44.7vw 27.9vh var(--gold-pale), 5.4vw 5.6vh var(--gold-pale), 46.6vw 32.6vh var(--gold-pale), 38.5vw 85.9vh var(--gold-pale), 52.5vw 55.1vh var(--gold-pale), 24.7vw 5.2vh var(--gold-pale);
  animation: driftB 80s ease-in-out infinite, iskri 8s ease-in-out infinite alternate;
}

/* Sloj 3 — najsitnija, jedva vidljiva prašina */
.stars-3 {
  width: 1.8px;
  height: 1.8px;
  opacity: .42;
  box-shadow: 9vw 42vh #fff, 17vw 12vh #fff, 28vw 58vh #fff, 36vw 87vh #fff, 49vw 38vh #fff, 57vw 9vh #fff, 66vw 69vh #fff, 73vw 22vh #fff, 84vw 47vh #fff, 92vw 83vh #fff, 13vw 72vh #fff, 42vw 15vh #fff, 62vw 51vh #fff, 88vw 5vh #fff,
    24.8vw 53.6vh #fff, 37.5vw 59.2vh #fff, 62.1vw 9.1vh #fff, 3.3vw 80.9vh #fff, 26.9vw 24.8vh #fff, 97.6vw 46.7vh #fff, 82.3vw 47.3vh #fff, 63.4vw 17vh #fff, 62.9vw 83.7vh #fff, 52.2vw 71.9vh #fff, 66.5vw 9vh #fff, 74.8vw 58vh #fff, 30.9vw 5.9vh #fff, 85.1vw 47vh #fff, 71vw 84.7vh #fff, 70.6vw 88.7vh #fff;
  animation: driftC 100s ease-in-out infinite, iskri 10s ease-in-out infinite alternate;
}

/* Sloj 4 — rijetke, veće zlatne iskre (naglasak) */
.stars-big {
  width: 3.5px;
  height: 3.5px;
  opacity: .85;
  box-shadow: 11vw 18vh 2px var(--gold), 27vw 41vh 2px var(--gold), 38vw 10vh 2px var(--gold), 53vw 67vh 2px var(--gold), 71vw 26vh 2px var(--gold), 83vw 74vh 2px var(--gold), 94vw 33vh 2px var(--gold),
    24.7vw 12.6vh 2px var(--gold), 40vw 17.4vh 2px var(--gold), 8.4vw 40.3vh 2px var(--gold), 90.1vw 77.4vh 2px var(--gold), 75.5vw 23.6vh 2px var(--gold), 53.5vw 28.7vh 2px var(--gold), 18.6vw 12.9vh 2px var(--gold);
  animation: driftD 50s ease-in-out infinite, iskri 12s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce){
  .stars, .stars-2, .stars-3, .stars-big{ animation: none; }
}

/* treptanje */
@keyframes iskri {
  0%   { opacity: .15; }
  50%  { opacity: .7; }
  100% { opacity: .9; }
}

/* blago lebdenje */
@keyframes driftA {
  0%   { transform: translate3d(-15px,-15px,0) scale(1); }
  25%  { transform: translate3d(25px,-20px,0) scale(1.05); }
  50%  { transform: translate3d(30px,15px,0) scale(.95); }
  75%  { transform: translate3d(-20px,25px,0) scale(1.02); }
  100% { transform: translate3d(-15px,-15px,0) scale(1); }
}
@keyframes driftB {
  0%   { transform: translate3d(15px,12px,0) scale(1); }
  20%  { transform: translate3d(-20px,8px,0) scale(1.03); }
  45%  { transform: translate3d(10px,-15px,0) scale(.97); }
  70%  { transform: translate3d(-12px,20px,0) scale(1.04); }
  100% { transform: translate3d(15px,12px,0) scale(1); }
}
@keyframes driftC {
  0%   { transform: translate3d(-10px,15px,0) scale(1); }
  30%  { transform: translate3d(15px,10px,0) scale(1.04); }
  55%  { transform: translate3d(20px,-12px,0) scale(.96); }
  80%  { transform: translate3d(-15px,-20px,0) scale(1.03); }
  100% { transform: translate3d(-10px,15px,0) scale(1); }
}
@keyframes driftD {
  0%   { transform: translate3d(20px,-15px,0) scale(1); }
  35%  { transform: translate3d(-15px,20px,0) scale(1.06); }
  70%  { transform: translate3d(25px,10px,0) scale(.94); }
  100% { transform: translate3d(20px,-15px,0) scale(1); }
}