:root{
  --bg-deep: #05060c;
  --bg-mid: #0a0d1a;
  --accent: #7ee0ff;
  --accent-2: #9d8cff;
  --glow: 0 0 20px rgba(126,224,255,.55), 0 0 60px rgba(157,140,255,.35);
}

html, body {
  height: 100%;
}
body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at 10% 10%, #0b1533 0%, transparent 50%),
    radial-gradient(900px 700px at 90% 20%, #0f1a40 0%, transparent 50%),
    radial-gradient(1000px 1000px at 50% 120%, #111a3e 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-mid));
  color: #e8f5ff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  overflow: hidden;
}

#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

.nebula {
  position: fixed;
  inset: -20vh -20vw;
  background:
    radial-gradient(60vh 60vh at 70% 40%, rgba(120, 60, 220, .10), transparent 60%),
    radial-gradient(70vh 70vh at 30% 70%, rgba(20, 200, 255, .12), transparent 60%),
    radial-gradient(40vh 40vh at 80% 80%, rgba(200, 140, 255, .10), transparent 60%);
  filter: blur(40px) saturate(120%);
  pointer-events: none;
  z-index: 1;
  animation: drift 60s linear infinite alternate;
}
@keyframes drift {
  from { transform: translate3d(-2vw, -2vh, 0) scale(1.05); }
  to   { transform: translate3d( 2vw,  2vh, 0) scale(1.1); }
}

.center-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4vmin;
}

.logo {
  display: inline-grid;
  gap: 1.2vmin;
  padding: 3.5vmin 5vmin;
  border-radius: 28px;
  background: rgba(8,12,28,.35);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 10px 40px rgba(0,0,0,.5), var(--glow);
  border: 1px solid rgba(126,224,255,.15);
  animation: float 5.5s ease-in-out infinite;
}
.logo h1 {
  margin: 0;
  font-size: clamp(28px, 6vw, 64px);
  letter-spacing: .06em;
  background: linear-gradient(90deg, #c7f1ff, #9ad3ff 30%, #b6a8ff 70%, #e8e4ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 8px rgba(126,224,255,.4);
}
.logo p {
  margin: 0;
  opacity: .9;
  font-size: clamp(14px, 2.4vw, 20px);
  letter-spacing: .12em;
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.orbits {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}
.orbit {
  position: absolute;
  border: 1px dashed rgba(126,224,255,.2);
  border-radius: 50%;
  animation: spin linear infinite;
  box-shadow: 0 0 40px rgba(126,224,255,.05) inset;
}
.orbit.one { width: 44vmin; height: 44vmin; animation-duration: 32s; }
.orbit.two { width: 64vmin; height: 64vmin; animation-duration: 56s; }
.orbit.three { width: 84vmin; height: 84vmin; animation-duration: 80s; }
@keyframes spin { from { transform: rotate(0deg);} to{ transform: rotate(360deg);} }

.sky {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.object {
  position: absolute;
  will-change: transform;
  filter: drop-shadow(0 0 6px rgba(126,224,255,.7));
}

footer {
  position: fixed;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: .14em;
  color: rgba(200, 232, 255, .6);
  z-index: 3;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .orbit,.logo,.nebula,.object { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}