:root {
  --void: #05050a;
  --deep-blue: #0a0e2a;
  --deep-purple: #1a0a2e;
  --silver: #c9d1e0;
  --silver-dim: #6b7590;
  --glow: #8a7fff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--void);
  overflow: hidden;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

/* Ambient shifting glow field */
.glow-field {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(60, 40, 120, 0.35), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(20, 30, 90, 0.4), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(90, 60, 160, 0.25), transparent 55%);
  filter: blur(40px);
  animation: drift 22s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(3%, -2%) rotate(4deg) scale(1.05); }
  100% { transform: translate(-3%, 2%) rotate(-3deg) scale(1.02); }
}

/* Faint stars / static specks */
.haze {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(201,209,224,0.5), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(201,209,224,0.4), transparent),
    radial-gradient(1px 1px at 60% 80%, rgba(201,209,224,0.3), transparent),
    radial-gradient(1px 1px at 30% 65%, rgba(201,209,224,0.35), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(201,209,224,0.25), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(201,209,224,0.4), transparent);
  background-repeat: repeat;
  opacity: 0.6;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
  text-align: center;
}

h1 {
  font-size: clamp(2.5rem, 9vw, 6rem);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--silver);
  text-shadow:
    0 0 10px rgba(138, 127, 255, 0.6),
    0 0 30px rgba(90, 60, 160, 0.5),
    0 0 60px rgba(40, 20, 80, 0.6);
  animation: pulse 4.5s ease-in-out infinite;
  padding-left: 0.35em; /* offset letter-spacing so text stays centered */
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.85;
    text-shadow:
      0 0 10px rgba(138, 127, 255, 0.5),
      0 0 30px rgba(90, 60, 160, 0.4),
      0 0 60px rgba(40, 20, 80, 0.5);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 16px rgba(138, 127, 255, 0.85),
      0 0 45px rgba(90, 60, 160, 0.7),
      0 0 90px rgba(60, 30, 110, 0.7);
  }
}

.divider {
  width: 60px;
  height: 1px;
  margin: 1.5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--silver-dim), transparent);
  opacity: 0.6;
}