@layer stars;
@layer stars {
    .twinkling-nodes-background {
    min-height: 100vh;
    overflow-x: hidden;
  }
  
  /* Four layers for depth and randomness */
  .twinkling-nodes-background::before,
  .twinkling-nodes-background::after,
  .twinkling-nodes-background .layer1,
  .twinkling-nodes-background .layer2 {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: -1;
    background-repeat: repeat;
    background-size: 400px 400px; /* Large tile reduces visible repetition */
  }
  
  /* Layer 1: Sparse small dots */
  .twinkling-nodes-background::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='80' cy='120' r='2' fill='%2358a6ff' filter='url(%23glow)'/%3E%3Ccircle cx='240' cy='280' r='1.5' fill='%23679eff'/%3E%3Ccircle cx='320' cy='60' r='2.5' fill='%2379c0ff' filter='url(%23glow)'/%3E%3C/svg%3E");
    animation: twinkle1 8s infinite ease-in-out;
  }
  
  /* Layer 2: Different positions/sizes */
  .twinkling-nodes-background::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cfilter id='glow2'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='160' cy='240' r='2' fill='%234c9eff'/%3E%3Ccircle cx='40' cy='340' r='1.8' fill='%2358a6ff' filter='url(%23glow2)'/%3E%3Ccircle cx='300' cy='180' r='2.2' fill='%23679eff'/%3E%3C/svg%3E");
    animation: twinkle2 16s infinite ease-in-out;
  }
  
  /* Extra pseudo-layers via extra divs (for more variety without JS) */
  .layer1 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cfilter id='glow3'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='100' cy='200' r='1.7' fill='%2379c0ff' filter='url(%23glow3)'/%3E%3Ccircle cx='360' cy='100' r='2.3' fill='%2358a6ff'/%3E%3C/svg%3E");
    animation: twinkle3 12s infinite ease-in-out;
  }
  
  .layer2 {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cfilter id='glow4'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='220' cy='140' r='2' fill='%23679eff'/%3E%3Ccircle cx='60' cy='300' r='1.9' fill='%234c9eff' filter='url(%23glow4)'/%3E%3C/svg%3E");
    animation: twinkle4 20s infinite ease-in-out;
  }
  
  @keyframes twinkle1 { 0%,100% { opacity: 0; } 50% { opacity: 0.8; } }
  @keyframes twinkle2 { 0%,100% { opacity: 0; } 40% { opacity: 0.8; } }
  @keyframes twinkle3 { 0%,100% { opacity: 0; } 60% { opacity: 0.8; } }
  @keyframes twinkle4 { 0%,100% { opacity: 0; } 30% { opacity: 0.8; } }
}