.velvet-mundial-stars-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.velvet-mundial-star {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
  animation-name: velvetMundialStarTwinkle;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, 0.35))
    drop-shadow(0 0 8px rgba(145, 208, 242, 0.18))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.12));
}

.velvet-mundial-star svg {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes velvetMundialStarTwinkle {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.78);
  }
  18% {
    opacity: var(--twinkleOpacity, 0.55);
    transform: translate3d(var(--driftX, 0px), var(--driftY, 0px), 0) scale(var(--scaleMid, 1.16));
  }
  50% {
    opacity: calc(var(--twinkleOpacity, 0.55) + 0.10);
    transform: translate3d(
      calc(var(--driftX, 0px) * -0.35),
      calc(var(--driftY, 0px) * -0.35),
      0
    ) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .velvet-mundial-stars-layer {
    display: none !important;
  }
}