@keyframes gradientBG {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
      
      #preloader {
        position: fixed;
        inset: 0;
        background: linear-gradient(-45deg, #8e8d96, #c1bbff, #acacd1, #ffffff);
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }
      svg {
        width: 200px;
        filter: drop-shadow(0 0 6px #2f3191);
      }


      /* Stage 1: Scatter and fade-in animation for parts */
      .part {
        opacity: 0;
        transform-origin: center;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease;
      }

      /* Animate each part with delay */
      .part1 {
        animation-name: assemble;
        animation-duration: 0.8s;
        animation-delay: 0.2s;
      }
      .part2 {
        animation-name: assemble;
        animation-duration: 0.8s;
        animation-delay: 0.4s;
      }
      .part3 {
        animation-name: assemble;
        animation-duration: 0.8s;
        animation-delay: 0.6s;
      }
      .part4 {
        animation-name: assemble;
        animation-duration: 0.8s;
        animation-delay: 0.8s;
      }
      .part5 {
        animation-name: assemble;
        animation-duration: 0.8s;
        animation-delay: 1s;
      }

      @keyframes assemble {
        0% {
          opacity: 0;
          transform: translate(calc(var(--x) * 50px), calc(var(--y) * 50px))
            scale(0.5);
        }
        100% {
          opacity: 1;
          transform: translate(0, 0) scale(1);
        }
      }

      /* Stage 2: Glow pulse for entire logo */
      .logoGroup {
        animation-name: glowPulse;
        animation-duration: 2.5s;
        animation-delay: 1.2s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-timing-function: ease-in-out;
      }


      /* Stage 3: Light sweep */
      #lightSweep{
        fill: white;
        opacity: 0;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        filter: drop-shadow(0 0 10px #fff);
        
      }
      .lightSweep {
        animation-name: sweep;
        animation-duration: 1.2s;
        animation-delay: 3.8s;
      }

      @keyframes sweep {
        0% {
          opacity: 0;
          transform: translateX(-150%);
        }
        30% {
          opacity: 0.8;
        }
        100% {
          opacity: 0;
          transform: translateX(150%);
        }
      }