Volumetric Light Rays

.volumetric-container {
  width: 400px;
  height: 300px;
  background: #0a0a1a;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.light-source {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #ffd700 50%, transparent 70%);
  filter: blur(20px);
  opacity: 0.9;
}
.light-ray {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.1) 70%, transparent 90%);
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
  animation: light-flicker 6s infinite ease-in-out;
}
.light-ray:nth-child(2) {
  background: linear-gradient(60deg, transparent 20%, rgba(255, 255, 255, 0.05) 60%, transparent 80%);
  animation-delay: 1s;
}
.light-ray:nth-child(3) {
  background: linear-gradient(30deg, transparent 40%, rgba(255, 165, 0, 0.08) 80%, transparent 95%);
  animation-delay: 2s;
}
.dust-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  animation: dust-float 8s infinite linear;
}
.dust-particle:nth-child(4) { top: 20%; left: 70%; animation-delay: 0s; }
.dust-particle:nth-child(5) { top: 40%; left: 80%; animation-delay: 1s; }
.dust-particle:nth-child(6) { top: 60%; left: 60%; animation-delay: 2s; }
.dust-particle:nth-child(7) { top: 80%; left: 75%; animation-delay: 3s; }
@keyframes light-flicker {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
@keyframes dust-float {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translate(-50px, 50px) rotate(180deg); opacity: 0; }
}