:root {
  color-scheme: dark;
  --black: #020205;
  --logo-width: min(58vw, 720px);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--black);
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.space {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 49%, rgba(34, 36, 61, 0.22), transparent 32%),
    linear-gradient(180deg, #020206 0%, #04040a 48%, #010104 100%);
}

.starfield {
  position: absolute;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
}

.nebula {
  position: absolute;
  z-index: -3;
  width: min(72vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
  opacity: 0.13;
  pointer-events: none;
  animation: nebula-drift 16s ease-in-out infinite alternate;
}

.nebula--violet {
  top: -45%;
  left: -20%;
  background: radial-gradient(circle, rgba(104, 70, 255, 0.72), transparent 67%);
}

.nebula--blue {
  right: -28%;
  bottom: -52%;
  background: radial-gradient(circle, rgba(29, 112, 213, 0.68), transparent 68%);
  animation-delay: -7s;
}

.vignette {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 32%, rgba(0, 0, 0, 0.32) 72%, rgba(0, 0, 0, 0.78) 100%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.018), transparent 35%);
}

.logo-stage {
  position: relative;
  z-index: 1;
  width: var(--logo-width);
  aspect-ratio: 184.72 / 139.64;
  cursor: crosshair;
  filter: drop-shadow(0 0 24px rgba(215, 225, 255, 0.12));
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.logo-source,
.particle-logo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.logo-source {
  display: block;
  user-select: none;
  pointer-events: none;
  opacity: 1;
  transition: opacity 260ms ease, filter 360ms ease;
}

.logo-stage.is-active .logo-source {
  opacity: 0;
  filter: blur(2px);
}

.particle-logo {
  overflow: visible;
  pointer-events: none;
}

@keyframes nebula-drift {
  from {
    transform: translate3d(-2%, -1%, 0) scale(0.94);
  }
  to {
    transform: translate3d(4%, 3%, 0) scale(1.06);
  }
}

@media (max-width: 720px) {
  :root {
    --logo-width: min(82vw, 560px);
  }

  .nebula {
    width: 110vw;
    filter: blur(70px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nebula {
    animation: none;
  }
}