/* falling-dots.css (patched: sequential + hidden before start) */

/* Dot animation container positioned below the text wrap area */
.falling-dots-container {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
}

/* Hide/neutralize the anchor so it never shows as a stray dot */
.falling-line-anchor{
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Individual dot style - smaller and sequential */
.falling-dot {
  width: 5px;  /* Reduced size of dots */
  height: 5px;
  border-radius: 50%;
  background-color: white;
  margin: 2px;  /* Reduced spacing between dots */
  opacity: 0;
  animation: fall 0.5s ease-out forwards;
  animation-fill-mode: both; /* keep 0% keyframe during delay -> invisible until its turn */
  will-change: transform, opacity;
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(20px);
  }
}

/* IMPORTANT: account for the first child being .falling-line-anchor */
/* Delay each dot's animation by 0.1s for sequential effect */
.falling-dots-container .falling-dot:nth-child(2) { animation-delay: 0s; }
.falling-dots-container .falling-dot:nth-child(3) { animation-delay: 0.1s; }
.falling-dots-container .falling-dot:nth-child(4) { animation-delay: 0.2s; }
.falling-dots-container .falling-dot:nth-child(5) { animation-delay: 0.3s; }
.falling-dots-container .falling-dot:nth-child(6) { animation-delay: 0.4s; }
.falling-dots-container .falling-dot:nth-child(7) { animation-delay: 0.5s; }