:root {
  color-scheme: dark;
  background: #02091a;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  min-height: 100svh;
  background: #02091a;
}
.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  background: #02091a;
}
.layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform, opacity, filter;
}
.base { z-index: 1; }
.cloud-back {
  z-index: 2;
  opacity: .34;
  animation: cloudFar 22s ease-in-out infinite alternate;
}
.planet {
  z-index: 3;
  animation: planetFloat 14s ease-in-out infinite alternate;
}
.ribbons {
  z-index: 4;
  opacity: .82;
  animation: ribbonsMove 18s ease-in-out infinite alternate;
}
.cloud-front {
  z-index: 5;
  opacity: .22;
  filter: blur(3px);
  animation: cloudNear 15s ease-in-out infinite alternate-reverse;
}
@keyframes planetFloat {
  0% {
    transform: translate3d(-0.8%, 0.7%, 0) scale(0.992);
    filter: brightness(.96) saturate(.98);
  }
  50% {
    transform: translate3d(0.2%, -0.2%, 0) scale(1.006);
    filter: brightness(1.04) saturate(1.03);
  }
  100% {
    transform: translate3d(0.9%, -1.0%, 0) scale(1.018);
    filter: brightness(1.01) saturate(1.01);
  }
}
@keyframes ribbonsMove {
  0% {
    transform: translate3d(-1.6%, 0.5%, 0) rotate(-0.9deg) scale(0.992);
    opacity: .72;
    filter: brightness(.95) saturate(1);
  }
  50% {
    transform: translate3d(0.3%, -0.2%, 0) rotate(0.2deg) scale(1.006);
    opacity: .9;
    filter: brightness(1.08) saturate(1.06);
  }
  100% {
    transform: translate3d(1.7%, -0.9%, 0) rotate(1deg) scale(1.018);
    opacity: .78;
    filter: brightness(1.01) saturate(1.03);
  }
}
@keyframes cloudFar {
  0% {
    transform: translate3d(-2.2%, 0.4%, 0) scale(1.016);
    opacity: .24;
  }
  50% {
    transform: translate3d(-0.4%, -0.2%, 0) scale(1.03);
    opacity: .31;
  }
  100% {
    transform: translate3d(1.8%, -0.7%, 0) scale(1.044);
    opacity: .4;
  }
}
@keyframes cloudNear {
  0% {
    transform: translate3d(2.1%, -0.3%, 0) scale(1.02);
    opacity: .14;
  }
  50% {
    transform: translate3d(0.4%, 0.1%, 0) scale(1.04);
    opacity: .21;
  }
  100% {
    transform: translate3d(-2%, 0.7%, 0) scale(1.058);
    opacity: .29;
  }
}
@media (max-width: 700px) {
  .planet { animation-duration: 11s; }
  .ribbons { animation-duration: 14s; }
  .cloud-back { animation-duration: 18s; }
  .cloud-front { animation-duration: 12s; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-back, .planet, .ribbons, .cloud-front {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}