/*
 * NekoOne Moon Engine v0.1.0
 * Stable motion base: duration 23400 / startX -80 / startY 80 / endRatio 0.82 / arcHeight 150 / curvePower 0.75 / rotation 16
 */

.nekoone-moon-engine{
  position:relative;
  width:100%;
  height:var(--nekoone-moon-height,360px);
  overflow:hidden;
  isolation:isolate;
  pointer-events:none;
}

.nekoone-moon-engine--background-on{
  background:#000;
}

.nekoone-moon-engine--background-off{
  background:transparent;
}

.nekoone-moon-engine__stage{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
}

.nekoone-moon-engine__stars{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}

.nekoone-moon-engine__star{
  position:absolute;
  width:2px;
  height:2px;
  border-radius:50%;
  background:#fff;
  opacity:.7;
  box-shadow:0 0 6px rgba(255,255,255,.7);
  animation:nekooneMoonTwinkle var(--star-speed,4s) ease-in-out infinite;
  animation-delay:var(--star-delay,0s);
}

.nekoone-moon-engine__star--big{
  width:3px;
  height:3px;
  opacity:.95;
}

.nekoone-moon-engine__triangle-label{
  position:absolute;
  z-index:2;
  color:rgba(216,230,255,.75);
  font-family:Georgia,"Yu Mincho",serif;
  font-size:.68rem;
  letter-spacing:.06em;
  text-shadow:0 0 6px rgba(0,0,0,.8);
  pointer-events:none;
}

.nekoone-moon-engine__triangle-label--vega{ top:18%; left:30%; }
.nekoone-moon-engine__triangle-label--deneb{ top:10%; left:47%; }
.nekoone-moon-engine__triangle-label--altair{ top:26%; left:63%; }

.nekoone-moon-engine__meteor{
  position:absolute;
  z-index:2;
  width:120px;
  height:2px;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(140,220,255,0));
  filter:drop-shadow(0 0 6px rgba(255,255,255,.7));
}

.nekoone-moon-engine__meteor--one{
  top:18%;
  left:62%;
  transform:rotate(28deg);
  animation:nekooneMoonMeteorOne 5s linear infinite;
}

.nekoone-moon-engine__meteor--two{
  top:34%;
  left:18%;
  transform:rotate(20deg);
  animation:nekooneMoonMeteorTwo 5s linear infinite 2.2s;
}

.nekoone-moon-engine__orb{
  position:absolute;
  left:0;
  top:0;
  width:var(--nekoone-moon-size,120px);
  height:var(--nekoone-moon-size,120px);
  transform:translate3d(0,0,0) rotate(16deg);
  z-index:4;
  will-change:transform;
}

.nekoone-moon-engine__glow,
.nekoone-moon-engine__halo,
.nekoone-moon-engine__moon{
  position:absolute;
  inset:0;
  border-radius:50%;
}

.nekoone-moon-engine__glow{
  inset:-4%;
  background:radial-gradient(circle,rgba(255,250,210,.22) 0%,rgba(255,255,255,.10) 38%,rgba(255,255,255,0) 70%);
  filter:blur(4px);
  opacity:.92;
}

.nekoone-moon-engine__halo{
  inset:-16%;
  border:2px solid rgba(190,30,30,.0);
  box-shadow:0 0 0 rgba(255,70,70,0);
  opacity:0;
}

.nekoone-moon-engine--halo-red .nekoone-moon-engine__halo{
  border-color:rgba(215,42,42,.70);
}

.nekoone-moon-engine--halo-purple .nekoone-moon-engine__halo{
  border-color:rgba(184,112,255,.68);
}

.nekoone-moon-engine--halo-blue .nekoone-moon-engine__halo{
  border-color:rgba(110,180,255,.68);
}

.nekoone-moon-engine--halo-off .nekoone-moon-engine__halo{
  display:none;
}

.nekoone-moon-engine__moon{
  overflow:hidden;
  background:
    radial-gradient(circle at 36% 34%,rgba(255,255,255,.98) 0%,rgba(252,248,230,.95) 36%,rgba(236,230,206,.92) 66%,rgba(205,194,170,.88) 100%);
  box-shadow:
    0 0 14px rgba(255,255,255,.30),
    0 0 38px rgba(255,245,220,.10);
}

.nekoone-moon-engine__shadow{
  position:absolute;
  width:104%;
  height:104%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(5,5,8,1) 0%,rgba(3,3,6,1) 70%,rgba(0,0,0,.92) 100%);
  box-shadow:0 0 18px rgba(0,0,0,.36);
  will-change:transform,opacity;
}

.nekoone-moon-engine--stars-off .nekoone-moon-engine__stars,
.nekoone-moon-engine--stars-off .nekoone-moon-engine__triangle-label{
  display:none;
}

@keyframes nekooneMoonTwinkle{
  0%,100%{opacity:.28; transform:scale(.86)}
  50%{opacity:1; transform:scale(1.18)}
}

@keyframes nekooneMoonMeteorOne{
  0%{opacity:0; transform:translate3d(0,0,0) rotate(28deg)}
  10%{opacity:1}
  35%{opacity:0; transform:translate3d(130px,90px,0) rotate(28deg)}
  100%{opacity:0; transform:translate3d(130px,90px,0) rotate(28deg)}
}

@keyframes nekooneMoonMeteorTwo{
  0%{opacity:0; transform:translate3d(0,0,0) rotate(20deg)}
  12%{opacity:1}
  38%{opacity:0; transform:translate3d(150px,95px,0) rotate(20deg)}
  100%{opacity:0; transform:translate3d(150px,95px,0) rotate(20deg)}
}

@media(max-width:600px){
  .nekoone-moon-engine__triangle-label{
    font-size:.62rem;
  }

  .nekoone-moon-engine__meteor{
    width:92px;
  }
}

@media(prefers-reduced-motion:reduce){
  .nekoone-moon-engine__star,
  .nekoone-moon-engine__meteor{
    animation:none!important;
  }
}