html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "Inter", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  color: #ffffff;
  background: #000000;
  -webkit-font-smoothing: antialiased;
}

/* True cinematic deep-space backdrop */
#starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background:
    radial-gradient(circle at 50% 50%, rgba(80,40,140,0.18), transparent 70%),
    radial-gradient(circle at 30% 80%, rgba(180,120,60,0.08), transparent 80%),
    #000000;
  animation: nebulaMotion 48s ease-in-out infinite alternate;
  z-index: -2;
}

@keyframes nebulaMotion {
  0% { background-position: 40% 10%; }
  50% { background-position: 60% 70%; }
  100% { background-position: 30% 20%; }
}

/*** PREMIUM CONTENT ***/
.content {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Cinematic glowing halo behind the branding */
.content::before {
  content: "";
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,215,130,0.22), rgba(130,80,220,0.22), transparent 70%);
  filter: blur(60px);
  opacity: 0.7;
  z-index: -1;
  animation: haloPulse 12s ease-in-out infinite;
}

@keyframes haloPulse {
  0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.9; transform: translate(-50%, -50%) scale(1.07); }
  100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
}

/*** BRAND NAME ***/
h1 {
  font-size: clamp(3.2rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f8d98f;
  text-shadow:
    0 0 25px rgba(170,130,255,0.9),
    0 0 80px rgba(255,210,130,0.85),
    0 0 140px rgba(255,180,80,0.7);
  transform: translateY(12px);
  opacity: 0;
  animation: brandFade 1.8s cubic-bezier(.16,.84,.44,1) forwards;
}

@keyframes brandFade {
  0% { opacity: 0; filter: blur(14px); transform: translateY(30px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(12px); }
}

/*** TAGLINE ***/
.tagline {
  margin-top: 1.4rem;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 300;
  color: #d8d4ff;
  text-shadow: 0 0 18px rgba(180,140,255,0.7);
  opacity: 0;
  animation: taglineFade 2.4s cubic-bezier(.16,.84,.44,1) forwards 0.8s;
}

@keyframes taglineFade {
  0% { opacity: 0; filter: blur(8px); transform: translateY(20px); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/*** FOOTER ***/
footer {
  position: absolute;
  bottom: 22px;
  width: 100%;
  text-align: center;
  color: #8887a5;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px rgba(40,40,80,0.8);
}

/*** RESPONSIVE TWEAKS ***/
@media (max-width: 600px) {
  .content::before {
    width: 360px;
    height: 360px;
  }
}