:root {
  --void: #0a0a14;
  --jade: #2dd4a0;
  --cream: #e8e0d0;
}

*, *::before, *::after { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--void);
}

body { overflow: hidden; }

.splash {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--void);
}

.splash::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 42%, rgba(2, 2, 8, .22) 100%);
}

#stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.ambient-glow {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: min(54vw, 620px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(45, 212, 160, .045) 0%, rgba(45, 212, 160, .015) 42%, transparent 72%);
  filter: blur(34px);
}

.logo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  color: var(--cream);
  animation: logo-in 1s ease-out both;
}

.logo__mark {
  flex: 0 0 auto;
  width: clamp(48px, 4.4vw, 62px);
  height: auto;
}

.logo__text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: .035em;
  white-space: nowrap;
}

.logo__text span { color: var(--jade); }

@keyframes logo-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .logo { gap: 14px; }
  .logo__mark { width: 48px; }
  .logo__text { font-size: clamp(1.8rem, 9vw, 2.25rem); }
  .ambient-glow { width: 110vw; }
}

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