/* --- Positioning and Visibility --- */
#glow-path-svg {
    position: fixed !important; 
    top: 0vw;
    left: 0vw;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: visible;
}

/* --- Motion Path Setup --- */
#glow-worm-group, #trail-group {
    offset-path: url(#motionPath); 
    position: absolute; 
  /*  transform: translate(-50%, -50%); */
  transform-origin: center;
  transform-box: fill-box;
}

#motionPath {
  stroke: rgba(255, 0, 0, 0.6);
  stroke-width: 2px;
  fill: none;
  stroke-dasharray: 6 4;
}

/* --- Glow Worm Styling --- */
#glow-worm {
    r: 15px;
    fill: #fffbd1;
    filter: blur(10px);
    opacity: 0.9;
    animation: glow-pulse 2s infinite alternate ease-in-out;
}

@keyframes glow-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.3);
        opacity: 1;
    }
}

/* --- Scrolling State --- */
.is-scrolling #glow-worm {
    opacity: 0.6;
    filter: blur(15px);
}

/* --- Trail dots --- */
.trail-dot {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,180,0.6) 0%, rgba(255,255,120,0.3) 70%, rgba(255,255,100,0) 100%);
    filter: blur(12px);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.trail-dot2 {
  position: fixed;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  filter: blur(4px);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
  transform: translate(-50%, -50%); /* standard centering anchor */
  will-change: transform, opacity;
}