.particles-layer-1 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particles-layer-1::before,
.particles-layer-1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.particles-layer-1::before {
  width: calc(100% + 375px);
  height: calc(100% + 400px);
  background-image:
    radial-gradient(
      1.5px 1.5px at 80px 120px,
      rgba(201, 168, 76, 0.7) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 260px 340px,
      rgba(201, 168, 76, 0.55) 50%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 420px 90px,
      rgba(255, 255, 255, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 580px 260px,
      rgba(201, 168, 76, 0.6) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 150px 450px,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 700px 180px,
      rgba(201, 168, 76, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 350px 550px,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 500px 400px,
      rgba(201, 168, 76, 0.48) 50%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 50px 600px,
      rgba(201, 168, 76, 0.58) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 640px 520px,
      rgba(255, 255, 255, 0.38) 50%,
      transparent 100%
    ),
    radial-gradient(
      1.5px 1.5px at 200px 700px,
      rgba(201, 168, 76, 0.42) 50%,
      transparent 100%
    ),
    radial-gradient(
      2px 2px at 480px 650px,
      rgba(255, 255, 255, 0.35) 50%,
      transparent 100%
    );
  background-size: 750px 800px;
  animation: drift-slow 90s linear infinite alternate;
}

.particles-layer-1::after {
  width: calc(100% + 400px);
  height: calc(100% + 375px);
  background-image:
    radial-gradient(
      2.5px 2.5px at 120px 200px,
      rgba(201, 168, 76, 0.6) 50%,
      transparent 100%
    ),
    radial-gradient(
      2.5px 2.5px at 380px 100px,
      rgba(255, 255, 255, 0.45) 50%,
      transparent 100%
    ),
    radial-gradient(
      3px 3px at 600px 350px,
      rgba(201, 168, 76, 0.5) 50%,
      transparent 100%
    ),
    radial-gradient(
      2.5px 2.5px at 200px 500px,
      rgba(255, 255, 255, 0.38) 50%,
      transparent 100%
    ),
    radial-gradient(
      2.5px 2.5px at 500px 600px,
      rgba(201, 168, 76, 0.55) 50%,
      transparent 100%
    ),
    radial-gradient(
      3px 3px at 60px 300px,
      rgba(201, 168, 76, 0.42) 50%,
      transparent 100%
    ),
    radial-gradient(
      2.5px 2.5px at 450px 150px,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    ),
    radial-gradient(
      2.5px 2.5px at 700px 500px,
      rgba(201, 168, 76, 0.48) 50%,
      transparent 100%
    );
  background-size: 800px 750px;
  animation: drift-medium 70s linear infinite alternate-reverse;
}

.particles-layer-2 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.particles-layer-2::before {
  content: "";
  position: absolute;
  width: calc(100% + 450px);
  height: calc(100% + 350px);
  top: 0;
  left: 0;
  will-change: transform;
  background-image:
    radial-gradient(
      3.5px 3.5px at 300px 250px,
      rgba(201, 168, 76, 0.32) 50%,
      transparent 100%
    ),
    radial-gradient(
      3px 3px at 100px 400px,
      rgba(255, 255, 255, 0.25) 50%,
      transparent 100%
    ),
    radial-gradient(
      3.5px 3.5px at 550px 150px,
      rgba(201, 168, 76, 0.28) 50%,
      transparent 100%
    ),
    radial-gradient(
      3px 3px at 400px 500px,
      rgba(255, 255, 255, 0.22) 50%,
      transparent 100%
    ),
    radial-gradient(
      3.5px 3.5px at 650px 400px,
      rgba(201, 168, 76, 0.26) 50%,
      transparent 100%
    );
  background-size: 900px 700px;
  animation: drift-large 120s linear infinite alternate;
}

@keyframes drift-slow {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-375px, -400px);
  }
}

@keyframes drift-medium {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-400px, -375px);
  }
}

@keyframes drift-large {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(-450px, -350px);
  }
}

@media (max-width: 768px), (max-height: 600px) {
  .particles-layer-2 {
    display: none;
  }

  .particles-layer-1::before {
    background-image:
      radial-gradient(
        1.5px 1.5px at 80px 120px,
        rgba(201, 168, 76, 0.7) 50%,
        transparent 100%
      ),
      radial-gradient(
        2px 2px at 420px 90px,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
      ),
      radial-gradient(
        2px 2px at 700px 180px,
        rgba(201, 168, 76, 0.5) 50%,
        transparent 100%
      ),
      radial-gradient(
        2px 2px at 50px 600px,
        rgba(201, 168, 76, 0.58) 50%,
        transparent 100%
      ),
      radial-gradient(
        2px 2px at 480px 650px,
        rgba(255, 255, 255, 0.35) 50%,
        transparent 100%
      );
  }

  .particles-layer-1::after {
    background-image:
      radial-gradient(
        2.5px 2.5px at 120px 200px,
        rgba(201, 168, 76, 0.6) 50%,
        transparent 100%
      ),
      radial-gradient(
        3px 3px at 600px 350px,
        rgba(201, 168, 76, 0.5) 50%,
        transparent 100%
      ),
      radial-gradient(
        2.5px 2.5px at 500px 600px,
        rgba(201, 168, 76, 0.55) 50%,
        transparent 100%
      ),
      radial-gradient(
        3px 3px at 60px 300px,
        rgba(201, 168, 76, 0.42) 50%,
        transparent 100%
      ),
      radial-gradient(
        2.5px 2.5px at 450px 150px,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  .particles-layer-1::before,
  .particles-layer-1::after,
  .particles-layer-2::before {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}