/* Soft falling meteors — QQSTAR (realistic fade into background) */
.qqstar-meteors{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:1 !important;
}
.qqstar-meteor{
  position:absolute;
  top:-12%;
  width:3px;
  height:110px;
  border-radius:999px;
  /* Belakang (atas) samar menyatu background → depan (bawah) batu terang */
  background:linear-gradient(
    180deg,
    rgba(90,2,2,0) 0%,
    rgba(120,10,10,0) 12%,
    rgba(200,40,30,.06) 28%,
    rgba(230,100,50,.18) 42%,
    rgba(255,160,70,.4) 58%,
    rgba(255,200,110,.7) 74%,
    rgba(255,230,170,.92) 88%,
    rgba(255,248,230,1) 100%
  );
  -webkit-mask-image:linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,.08) 18%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.75) 70%,
    #000 100%
  );
  mask-image:linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,.08) 18%,
    rgba(0,0,0,.35) 40%,
    rgba(0,0,0,.75) 70%,
    #000 100%
  );
  box-shadow:none;
  opacity:0;
  transform:rotate(28deg);
  transform-origin:bottom center;
  animation-name:qqstarMeteorFall;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform,opacity;
}
/* Soft glow trail layer (extra samar) */
.qqstar-meteor::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:14px;
  height:100%;
  margin-left:-7px;
  border-radius:999px;
  background:linear-gradient(
    180deg,
    transparent 0%,
    rgba(255,80,40,.0) 15%,
    rgba(255,120,50,.1) 45%,
    rgba(255,180,80,.22) 72%,
    rgba(255,220,140,.18) 100%
  );
  filter:blur(6px);
  opacity:.9;
  pointer-events:none;
  z-index:0;
}
/* Rock head — depan (ujung jatuh) */
.qqstar-meteor::after{
  content:"";
  position:absolute;
  bottom:-4px;
  left:50%;
  width:9px;
  height:9px;
  margin-left:-4.5px;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%,
      #fffef6 0%,
      #ffe09a 28%,
      #ffc04a 55%,
      #c86a18 78%,
      #5a2a0a 100%);
  box-shadow:
    0 0 6px 2px rgba(255,220,150,.9),
    0 0 14px 4px rgba(255,160,60,.45);
  filter:none;
  -webkit-mask-image:none;
  mask-image:none;
  z-index:2;
}

.qqstar-meteor:nth-child(1){ left:6%;  width:2px; height:70px;  animation-duration:6.8s; animation-delay:0s; }
.qqstar-meteor:nth-child(1)::after{ width:6px; height:6px; margin-left:-3px; }

.qqstar-meteor:nth-child(2){ left:18%; width:4px; height:130px; animation-duration:8.4s; animation-delay:1.1s; }
.qqstar-meteor:nth-child(2)::after{ width:12px; height:12px; margin-left:-6px; }

.qqstar-meteor:nth-child(3){ left:31%; width:2px; height:55px;  animation-duration:7.2s; animation-delay:2.6s; }
.qqstar-meteor:nth-child(3)::after{ width:5px; height:5px; margin-left:-2.5px; }

.qqstar-meteor:nth-child(4){ left:44%; width:5px; height:160px; animation-duration:9.5s; animation-delay:0.4s; }
.qqstar-meteor:nth-child(4)::after{ width:14px; height:14px; margin-left:-7px; }

.qqstar-meteor:nth-child(5){ left:57%; width:3px; height:95px;  animation-duration:7.8s; animation-delay:3.5s; }
.qqstar-meteor:nth-child(5)::after{ width:8px; height:8px; margin-left:-4px; }

.qqstar-meteor:nth-child(6){ left:69%; width:2px; height:62px;  animation-duration:6.5s; animation-delay:1.9s; }
.qqstar-meteor:nth-child(6)::after{ width:6px; height:6px; margin-left:-3px; }

.qqstar-meteor:nth-child(7){ left:78%; width:4px; height:140px; animation-duration:10.2s; animation-delay:4.2s; }
.qqstar-meteor:nth-child(7)::after{ width:11px; height:11px; margin-left:-5.5px; }

.qqstar-meteor:nth-child(8){ left:12%; width:3px; height:85px;  animation-duration:8.9s; animation-delay:5.1s; }
.qqstar-meteor:nth-child(8)::after{ width:8px; height:8px; margin-left:-4px; }

.qqstar-meteor:nth-child(9){ left:86%; width:2px; height:48px;  animation-duration:7.0s; animation-delay:2.2s; }
.qqstar-meteor:nth-child(9)::after{ width:5px; height:5px; margin-left:-2.5px; }

.qqstar-meteor:nth-child(10){ left:25%; width:5px; height:175px; animation-duration:11s; animation-delay:6.0s; }
.qqstar-meteor:nth-child(10)::after{ width:15px; height:15px; margin-left:-7.5px; }

.qqstar-meteor:nth-child(11){ left:50%; width:2px; height:58px;  animation-duration:6.2s; animation-delay:3.8s; }
.qqstar-meteor:nth-child(11)::after{ width:5px; height:5px; margin-left:-2.5px; }

.qqstar-meteor:nth-child(12){ left:63%; width:4px; height:115px; animation-duration:9.1s; animation-delay:7.3s; }
.qqstar-meteor:nth-child(12)::after{ width:10px; height:10px; margin-left:-5px; }

.qqstar-meteor:nth-child(13){ left:95%; width:3px; height:88px;  animation-duration:8.0s; animation-delay:1.5s; }
.qqstar-meteor:nth-child(13)::after{ width:9px; height:9px; margin-left:-4.5px; }

.qqstar-meteor:nth-child(14){ left:3%;  width:2px; height:72px;  animation-duration:7.6s; animation-delay:4.8s; }
.qqstar-meteor:nth-child(14)::after{ width:7px; height:7px; margin-left:-3.5px; }

@keyframes qqstarMeteorFall{
  0%{
    transform:translate3d(0,-10vh,0) rotate(28deg);
    opacity:0;
  }
  6%{
    opacity:1;
  }
  70%{
    opacity:.9;
  }
  100%{
    transform:translate3d(-32vw,120vh,0) rotate(28deg);
    opacity:0;
  }
}

@media (prefers-reduced-motion:reduce){
  .qqstar-meteors{display:none;}
}
@media (max-width:640px){
  .qqstar-meteor:nth-child(n+9){display:none;}
  .qqstar-meteor::before{filter:blur(5px);}
}