/* Dust Effect Styles */
#footer {
  position: relative;
}

#dust-scene {
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

#dust-scene li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#dust-specks {
  position: absolute;
  z-index: 999;
  height: 100vh;
  width: 100vw;
}

.dust-speck {
  opacity: 0;
  height: 4px;
  width: 4px;
  background: rgba(255, 255, 255, 0.9);
  position: absolute;
  border-radius: 50%;
  z-index: 99;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.dust-layer {
  position: absolute;
  height: 200vh;
  width: 200vw;
  top: -50vh;
  left: -50vw;
  animation-timing-function: linear;
  animation-name: dust-float;
  animation-iteration-count: infinite;
}

#dust-layer-1 {
  opacity: 0.25;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
              radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
              radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
              radial-gradient(circle at 60% 10%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
              radial-gradient(circle at 10% 60%, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 150px 150px, 200px 200px, 180px 180px, 120px 120px, 160px 160px;
  animation-duration: 120s;
}

#dust-layer-2 {
  opacity: 0.2;
  background: radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.12) 1px, transparent 1px),
              radial-gradient(circle at 30% 60%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
              radial-gradient(circle at 90% 40%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
              radial-gradient(circle at 15% 85%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
              radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 130px 130px, 170px 170px, 140px 140px, 110px 110px, 190px 190px;
  animation-duration: 90s;
}

#dust-layer-3 {
  opacity: 0.15;
  background: radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
              radial-gradient(circle at 70% 10%, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
              radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
              radial-gradient(circle at 85% 60%, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
              radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 100px 100px, 140px 140px, 120px 120px, 90px 90px, 160px 160px;
  animation-duration: 70s;
}

/* Animations */
@keyframes dust-twinkle {
  0% {
    transform: translate(0px, 0px);
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    transform: translate(150px, 80px);
    opacity: 0;
  }
}

@keyframes dust-float {
  0% {
    transform: translate(0px, 0px);
  }
  100% {
    transform: translate(100vw, 50vh);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dust-layer {
    height: 150vh;
    width: 150vw;
    top: -25vh;
    left: -25vw;
  }
  
  #dust-layer-1 { animation-duration: 80s; }
  #dust-layer-2 { animation-duration: 60s; }
  #dust-layer-3 { animation-duration: 50s; }
}