.page1 {
        position: relative;
        background-color: transparent;
}
.bg-animation {
        position: absolute;
        top:64px;
        left: 0;
        width: 100%;
        height: 90vh;
}
.ripple {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--star);
  box-shadow: 0 0 6px 2px var(--star);

  opacity: 0.6;
  animation: twinkle 2s infinite ease-in-out alternate,
             float 8s infinite ease-in-out alternate;
}

/* Twinkle: glow fade like a star */
@keyframes twinkle {
  0% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0.3; transform: scale(1); }
}

/* Small gentle drift for life-like motion */
@keyframes float {
  0% { transform: translate(0, 0); }
  100% { transform: translate(var(--dx), var(--dy)); }
}


/* We’ll generate 20 unique positions using nth-child */
.ripple:nth-child(1)  { top: 5%;  left: 15%;  --dx: 20px; --dy: -10px; animation-delay: 0s, 2s; }
.ripple:nth-child(2)  { top: 25%; left: 80%;  --dx: -25px; --dy: 15px; animation-delay: 1s, 1s; }
.ripple:nth-child(3)  { top: 60%; left: 45%;  --dx: 10px; --dy: -15px; animation-delay: 2s, 3s; }
.ripple:nth-child(4)  { top: 35%; left: 10%;  --dx: -15px; --dy: 10px; animation-delay: 1.5s, 0s; }
.ripple:nth-child(5)  { top: 80%; left: 70%;  --dx: 25px; --dy: -10px; animation-delay: 0.5s, 2s; }
.ripple:nth-child(6)  { top: 12%; left: 60%;  --dx: -20px; --dy: 25px; animation-delay: 2.5s, 1s; }
.ripple:nth-child(7)  { top: 50%; left: 30%;  --dx: 15px; --dy: 20px; animation-delay: 0.8s, 1s; }
.ripple:nth-child(8)  { top: 90%; left: 40%;  --dx: 10px; --dy: -15px; animation-delay: 1.2s, 2.5s; }
.ripple:nth-child(9)  { top: 70%; left: 85%;  --dx: -10px; --dy: -25px; animation-delay: 2s, 0.5s; }
.ripple:nth-child(10) { top: 55%; left: 5%;   --dx: 25px; --dy: 15px; animation-delay: 0.3s, 1.5s; }
.ripple:nth-child(11) { top: 10%; left: 90%;  --dx: -20px; --dy: -10px; animation-delay: 2.2s, 2s; }
.ripple:nth-child(12) { top: 65%; left: 20%;  --dx: 15px; --dy: 10px; animation-delay: 1.8s, 1.2s; }
.ripple:nth-child(13) { top: 40%; left: 55%;  --dx: -15px; --dy: 25px; animation-delay: 1s, 0s; }
.ripple:nth-child(14) { top: 30%; left: 35%;  --dx: 25px; --dy: -25px; animation-delay: 0.6s, 1s; }
.ripple:nth-child(15) { top: 85%; left: 15%;  --dx: 20px; --dy: -10px; animation-delay: 2.4s, 1.8s; }
.ripple:nth-child(16) { top: 75%; left: 50%;  --dx: -25px; --dy: 20px; animation-delay: 1.6s, 0.5s; }
.ripple:nth-child(17) { top: 20%; left: 25%;  --dx: 10px; --dy: -20px; animation-delay: 2.8s, 2s; }
.ripple:nth-child(18) { top: 60%; left: 10%;  --dx: 20px; --dy: 15px; animation-delay: 1.3s, 0.8s; }
.ripple:nth-child(19) { top: 15%; left: 75%;  --dx: -15px; --dy: 10px; animation-delay: 0.4s, 1.5s; }
.ripple:nth-child(20) { top: 45%; left: 65%;  --dx: 25px; --dy: -15px; animation-delay: 2.6s, 2s; }