/* Astralis Nova Celestial Drift Layer */
#astralis-celestial-drift{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}

#astralis-celestial-drift .celestial{
  position:fixed;
  display:block;
  pointer-events:none;
  user-select:none;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  mix-blend-mode:screen;
  will-change:transform,opacity,left,top,filter;
}

#astralis-celestial-drift .earth{
  width:clamp(78px,10vw,150px);
  left:-16vw;
  top:58vh;
  opacity:.72;
  filter:drop-shadow(0 0 16px rgba(130,190,255,.30));
  animation:astralisEarthDrift 220s linear infinite;
}

#astralis-celestial-drift .mars{
  width:clamp(58px,8vw,110px);
  left:104vw;
  top:24vh;
  opacity:.62;
  filter:drop-shadow(0 0 12px rgba(255,128,92,.22));
  animation:astralisMarsDrift 190s linear infinite;
}

#astralis-celestial-drift .gas{
  width:clamp(120px,18vw,250px);
  left:76vw;
  top:72vh;
  opacity:.42;
  filter:drop-shadow(0 0 18px rgba(98,144,255,.18));
  animation:astralisGasDrift 320s linear infinite;
}

#astralis-celestial-drift .ringed{
  width:clamp(104px,14vw,190px);
  left:auto;
  right:1.5vw;
  top:10vh;
  opacity:.68;
  mix-blend-mode:screen;
  filter:saturate(1.16) contrast(1.06) drop-shadow(0 0 13px rgba(150,188,255,.3)) drop-shadow(0 0 28px rgba(105,124,255,.14));
  transform-origin:50% 50%;
  animation:astralisRingedDrift 260s linear infinite,astralisRingedGlow 7.5s ease-in-out infinite;
}

#astralis-celestial-drift .comet{
  width:clamp(96px,14vw,220px);
  left:-32vw;
  top:12vh;
  opacity:.28;
  filter:blur(.15px) drop-shadow(0 0 14px rgba(161,228,255,.18));
  animation:astralisCometPass 132s linear infinite;
}

@keyframes astralisEarthDrift{
  0%{transform:translate3d(-8vw,0,0) scale(.82) rotate(0deg);opacity:0}
  8%{opacity:.68}
  45%{transform:translate3d(42vw,-3vh,0) scale(.95) rotate(120deg);opacity:.74}
  88%{opacity:.55}
  100%{transform:translate3d(120vw,-7vh,0) scale(1.02) rotate(300deg);opacity:0}
}

@keyframes astralisMarsDrift{
  0%{transform:translate3d(0,0,0) scale(.75) rotate(0deg);opacity:0}
  10%{opacity:.58}
  56%{transform:translate3d(-54vw,4vh,0) scale(.9) rotate(-110deg);opacity:.62}
  100%{transform:translate3d(-124vw,11vh,0) scale(1.02) rotate(-260deg);opacity:0}
}

@keyframes astralisGasDrift{
  0%{transform:translate3d(0,0,0) scale(1.02) rotate(0deg);opacity:0}
  9%{opacity:.34}
  50%{transform:translate3d(-18vw,-2vh,0) scale(1.05) rotate(40deg);opacity:.40}
  100%{transform:translate3d(-42vw,3vh,0) scale(1.08) rotate(80deg);opacity:0}
}

@keyframes astralisRingedDrift{
  0%{transform:translate3d(0,0,0) scale(.9) rotate(-3deg);opacity:0}
  8%{opacity:.62}
  52%{transform:translate3d(-42vw,8vh,0) scale(.98) rotate(42deg);opacity:.7}
  88%{opacity:.5}
  100%{transform:translate3d(-118vw,17vh,0) scale(1.05) rotate(96deg);opacity:0}
}

@keyframes astralisRingedGlow{
  0%,100%{filter:saturate(1.12) contrast(1.04) brightness(.94) drop-shadow(0 0 12px rgba(150,188,255,.26)) drop-shadow(0 0 24px rgba(105,124,255,.12))}
  50%{filter:saturate(1.24) contrast(1.08) brightness(1.08) drop-shadow(0 0 18px rgba(150,214,255,.38)) drop-shadow(0 0 34px rgba(140,105,255,.2))}
}

@keyframes astralisCometPass{
  0%{transform:translate3d(0,0,0) rotate(-14deg) scale(.58);opacity:0}
  12%{opacity:.22}
  52%{transform:translate3d(62vw,20vh,0) rotate(-12deg) scale(.88);opacity:.30}
  100%{transform:translate3d(140vw,46vh,0) rotate(-10deg) scale(1.02);opacity:0}
}

@media(max-width:700px){
  #astralis-celestial-drift .earth{top:63vh;width:clamp(52px,14vw,92px)}
  #astralis-celestial-drift .mars{top:30vh;width:clamp(42px,11vw,78px)}
  #astralis-celestial-drift .gas{top:76vh;width:clamp(84px,24vw,160px);opacity:.32}
  #astralis-celestial-drift .ringed{top:9vh;right:1vw;width:clamp(82px,20vw,122px);opacity:.62}
  #astralis-celestial-drift .comet{top:13vh;width:clamp(72px,20vw,160px);opacity:.20}
}

@media(prefers-reduced-motion:reduce){
  #astralis-celestial-drift{display:none}
}