.light-effect {
  position: fixed;
  z-index: 101;
}

.light-effect::before,
.light-effect::after {
  animation-play-state: paused;
  opacity: 0;
}

.light-effect.active::before,
.light-effect.active::after {
  animation-play-state: running;
  opacity: initial;
}

@keyframes lightMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.light-effect::before,
.light-effect::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffffff;
  pointer-events: none;
  will-change: transform, opacity;
}

.light-effect::before {
  opacity: 0.9;
  box-shadow:
    5vw 95vh rgba(255,255,255,0.9), 12vw 80vh rgba(255,255,255,0.7), 18vw 110vh rgba(255,255,255,0.8),
    24vw 70vh rgba(255,255,255,0.6), 30vw 102vh rgba(255,255,255,0.9), 36vw 88vh rgba(255,255,255,0.7),
    42vw 115vh rgba(255,255,255,0.85), 48vw 60vh rgba(255,255,255,0.6), 54vw 98vh rgba(255,255,255,0.8),
    60vw 74vh rgba(255,255,255,0.7), 66vw 105vh rgba(255,255,255,0.85), 72vw 50vh rgba(255,255,255,0.6),
    78vw 92vh rgba(255,255,255,0.8), 84vw 68vh rgba(255,255,255,0.7), 90vw 110vh rgba(255,255,255,0.9),
    96vw 82vh rgba(255,255,255,0.75), 2vw 40vh rgba(255,255,255,0.6), 10vw 30vh rgba(255,255,255,0.5),
    20vw 140vh rgba(255,255,255,0.9), 34vw 130vh rgba(255,255,255,0.8), 46vw 150vh rgba(255,255,255,0.85),
    58vw 120vh rgba(255,255,255,0.7), 70vw 140vh rgba(255,255,255,0.8), 82vw 160vh rgba(255,255,255,0.85),
    94vw 135vh rgba(255,255,255,0.9), 40vw 20vh rgba(255,255,255,0.6), 14vw 10vh rgba(255,255,255,0.5);
  animation: floatUpSmall 20s linear infinite;
}

.light-effect::after {
  width: 5px;
  height: 5px;
  opacity: 0.7;
  filter: blur(0.6px);
  box-shadow:
    8vw 110vh rgba(255,255,255,0.7), 22vw 95vh rgba(255,255,255,0.6), 38vw 125vh rgba(255,255,255,0.65),
    54vw 85vh rgba(255,255,255,0.6), 70vw 130vh rgba(255,255,255,0.7), 86vw 100vh rgba(255,255,255,0.65),
    50vw 30vh rgba(255,255,255,0.55), 30vw 50vh rgba(255,255,255,0.5), 10vw 20vh rgba(255,255,255,0.45),
    90vw 160vh rgba(255,255,255,0.6), 5vw 140vh rgba(255,255,255,0.6), 60vw 150vh rgba(255,255,255,0.65);
  animation: floatUpLarge 30s linear infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(0);
    opacity: 0.3;
  }
  5% {
    opacity: 1;
  }
  100% {
    transform: translateY(-140vh);
    opacity: 0.3;
  }
}

@keyframes floatUpSmall {
  0% { transform: translateY(0) translateX(0); opacity: 0.3; }
  8% { transform: translateY(-11vh) translateX(-0.5vw); opacity: 0.85; }
  16% { transform: translateY(-22vh) translateX(-0.9vw); }
  24% { transform: translateY(-34vh) translateX(-1.0vw); }
  32% { transform: translateY(-46vh) translateX(-0.6vw); }
  40% { transform: translateY(-58vh) translateX(0.6vw); }
  48% { transform: translateY(-70vh) translateX(0.8vw); }
  56% { transform: translateY(-82vh) translateX(0.4vw); }
  64% { transform: translateY(-95vh) translateX(-0.8vw); }
  72% { transform: translateY(-107vh) translateX(-1.0vw); }
  80% { transform: translateY(-118vh) translateX(-0.6vw); }
  88% { transform: translateY(-130vh) translateX(-0.3vw); }
  100% { transform: translateY(-140vh) translateX(0); opacity: 0.3; }
}

@keyframes floatUpLarge {
  0% { transform: translateY(0) translateX(0); opacity: 0.3; }
  10% { transform: translateY(-14vh) translateX(-1.2vw); opacity: 0.85; }
  20% { transform: translateY(-28vh) translateX(-2.0vw); }
  30% { transform: translateY(-42vh) translateX(-2.2vw); }
  40% { transform: translateY(-56vh) translateX(-1.4vw); }
  50% { transform: translateY(-70vh) translateX(-0.8vw); }
  60% { transform: translateY(-84vh) translateX(0.6vw); }
  70% { transform: translateY(-98vh) translateX(1.4vw); }
  80% { transform: translateY(-112vh) translateX(1.8vw); }
  90% { transform: translateY(-126vh) translateX(0.9vw); }
  100% { transform: translateY(-140vh) translateX(0); opacity: 0.3; }
}