/* === BASE STYLE FOR DUST PARTICLES === */
.dust {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.38);
  filter: blur(1px);
  opacity: 0;
  will-change: transform, opacity;
  animation-timing-function: ease-in-out;
  mix-blend-mode: screen;
}

#dust1 {
  width: 3px;
  height: 3px;
  box-shadow:
    2vw 8vh #fff4, 6vw 18vh #fff4, 10vw 30vh #fff4, 14vw 42vh #fff4, 18vw 12vh #fff4,
    22vw 55vh #fff4, 26vw 20vh #fff4, 30vw 68vh #fff4, 34vw 35vh #fff4, 38vw 80vh #fff4,
    42vw 48vh #fff4, 46vw 10vh #fff4, 50vw 28vh #fff4, 54vw 72vh #fff4, 58vw 16vh #fff4,
    62vw 60vh #fff4, 66vw 22vh #fff4, 70vw 44vh #fff4, 74vw 78vh #fff4, 78vw 36vh #fff4,
    82vw 52vh #fff4, 86vw 6vh #fff4, 90vw 88vh #fff4, 94vw 30vh #fff4;
  animation:
    driftUp 40s linear infinite,
    fadeInOut 12s ease-in-out infinite;
  animation-delay: -6s, -2s;
  opacity: 0.0;
}

/* ===== LAYER 2 — médios (drift down, médios) ===== */
#dust2 {
  width: 5px;
  height: 5px;
  background: rgba(255,255,255,0.34);
  box-shadow:
    3vw 12vh #fff3, 9vw 24vh #fff3, 15vw 40vh #fff3, 21vw 6vh #fff3, 27vw 52vh #fff3,
    33vw 28vh #fff3, 39vw 72vh #fff3, 45vw 18vh #fff3, 51vw 64vh #fff3, 57vw 30vh #fff3,
    63vw 80vh #fff3, 69vw 48vh #fff3, 75vw 14vh #fff3, 81vw 56vh #fff3, 87vw 34vh #fff3,
    93vw 90vh #fff3, 6vw 84vh #fff3, 18vw 76vh #fff3, 30vw 92vh #fff3, 42vw 96vh #fff3;
  animation:
    driftDown 55s linear infinite,
    fadeInOut 16s ease-in-out infinite;
  animation-delay: -10s, -4s;
  opacity: 0.0;
}

/* ===== LAYER 3 — maiores (drift left, lentos) ===== */
#dust3 {
  width: 7px;
  height: 7px;
  background: rgba(255,255,255,0.30);
  filter: blur(1.2px);
  box-shadow:
    5vw 6vh #fff2, 12vw 22vh #fff2, 19vw 38vh #fff2, 26vw 10vh #fff2, 33vw 56vh #fff2,
    40vw 34vh #fff2, 47vw 72vh #fff2, 54vw 20vh #fff2, 61vw 64vh #fff2, 68vw 28vh #fff2,
    75vw 82vh #fff2, 82vw 46vh #fff2, 89vw 14vh #fff2, 96vw 68vh #fff2, 8vw 90vh #fff2,
    16vw 86vh #fff2, 24vw 94vh #fff2, 32vw 98vh #fff2;
  animation:
    driftLeft 70s linear infinite,
    fadeInOut 20s ease-in-out infinite;
  animation-delay: -14s, -6s;
  opacity: 0.0;
}

/* ===== LAYER 4 — suaves e maiores (drift right, mais lentos) ===== */
#dust4 {
  width: 9px;
  height: 9px;
  background: rgba(255,255,255,0.26);
  filter: blur(1.6px);
  box-shadow:
    4vw 16vh #fff1, 11vw 36vh #fff1, 18vw 56vh #fff1, 25vw 8vh #fff1, 32vw 66vh #fff1,
    39vw 44vh #fff1, 46vw 78vh #fff1, 53vw 26vh #fff1, 60vw 60vh #fff1, 67vw 32vh #fff1,
    74vw 86vh #fff1, 81vw 50vh #fff1, 88vw 18vh #fff1, 95vw 74vh #fff1, 7vw 92vh #fff1,
    22vw 88vh #fff1, 36vw 94vh #fff1, 50vw 98vh #fff1, 64vw 92vh #fff1;
  animation:
    driftRight 85s linear infinite,
    fadeInOut 24s ease-in-out infinite;
  animation-delay: -18s, -8s;
  opacity: 0.0;
}

/* ===== KEYFRAMES (GPU-friendly using translate3d) ===== */
@keyframes driftUp {
  from { transform: translate3d(0, 8vh, 0); }
  to   { transform: translate3d(0, -40vh, 0); }
}

@keyframes driftDown {
  from { transform: translate3d(0, -8vh, 0); }
  to   { transform: translate3d(0, 40vh, 0); }
}

@keyframes driftLeft {
  from { transform: translate3d(8vw, 0, 0); }
  to   { transform: translate3d(-40vw, 0, 0); }
}

@keyframes driftRight {
  from { transform: translate3d(-8vw, 0, 0); }
  to   { transform: translate3d(40vw, 0, 0); }
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0; }
  15%, 85% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

/* small accessibility / perf tweak */
@media (prefers-reduced-motion: reduce) {
  #dust1,
  #dust2,
  #dust3,
  #dust4 {
    animation: none;
    opacity: .5;
  }
}