:root {
  --bg-1: #05070f;
  --bg-2: #0b1230;
  --star: rgba(255, 255, 255, 0.85);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}

body {
  font-family: sans-serif;
}

.scene {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(60, 90, 170, 0.18), transparent 45%),
    radial-gradient(circle at 80% 15%, rgba(90, 120, 220, 0.12), transparent 35%),
    radial-gradient(circle at 50% 80%, rgba(50, 70, 140, 0.16), transparent 40%),
    linear-gradient(180deg, var(--bg-2), var(--bg-1));
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 25% 70%, var(--star), transparent),
    radial-gradient(2px 2px at 45% 35%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 70% 25%, var(--star), transparent),
    radial-gradient(2px 2px at 85% 80%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 60% 60%, var(--star), transparent),
    radial-gradient(2px 2px at 35% 90%, var(--star), transparent),
    radial-gradient(1.5px 1.5px at 90% 40%, var(--star), transparent);
  background-size: 100% 100%;
  opacity: 0.9;
  animation: twinkle 3.5s ease-in-out infinite alternate;
  pointer-events: none;
}

.logo {
  position: relative;
  z-index: 1;
  width: min(340px, 70vw);
  height: auto;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.2));
}

@keyframes twinkle {
  from {
    opacity: 0.55;
  }
  to {
    opacity: 0.95;
  }
}