@import url('../root.css');


html, body {
      margin: 0; padding: 0; height: 100%; overflow: hidden;
      color: var(--main-text);
    }

    .background {
      position: absolute;
      top: 0; left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      z-index: 1;
      pointer-events: none;
    }

    /* Variante 1: Glowing Circles */
    .bg-particles-circles {
      background: var(--background);
    }
    .particle-circle {
      position: absolute;
      width: 6px;
      height: 6px;
      background: radial-gradient(circle, #d1d1d1 0%, #acacac 100%);
      border-radius: 50%;
      box-shadow: 0 0 12px #d1d1d1, 0 0 24px #d1d1d1;
      animation: circleGlow 6s ease-in-out infinite;
    }
    @keyframes circleGlow {
      0%   { 
        transform: scale(0.3) translate(0px, 0px); 
        opacity: 0; 
        box-shadow: 0 0 8px #d1d1d1, 0 0 16px #d1d1d1; 
      }
      10%  { 
        transform: scale(1) translate(0px, 0px); 
        opacity: 0.8; 
        box-shadow: 0 0 12px #d1d1d1, 0 0 24px #d1d1d1; 
      }
      50%  { 
        transform: scale(1.5) translate(calc(var(--move-x) * 0.5), calc(var(--move-y) * 0.5)); 
        opacity: 1; 
        box-shadow: 0 0 18px #d1d1d1, 0 0 36px #d1d1d1; 
      }
      90%  { 
        transform: scale(1) translate(var(--move-x), var(--move-y)); 
        opacity: 0.8; 
        box-shadow: 0 0 12px #d1d1d1, 0 0 24px #d1d1d1; 
      }
      100% { 
        transform: scale(0.3) translate(var(--move-x), var(--move-y)); 
        opacity: 0; 
        box-shadow: 0 0 8px #d1d1d1, 0 0 16px #d1d1d1; 
      }
    }