:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #020103;
  color: #f9d8e9;
  --night: #020103;
  --night-wine: #16040e;
  --starlight: #fff6dc;
  --rose-light: #ff3d9b;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.night-sky {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgb(111 7 54 / 20%) 0, transparent 29%),
    radial-gradient(circle at 82% 12%, rgb(255 68 151 / 8%) 0, transparent 18%),
    linear-gradient(180deg, #030104 0%, #050106 48%, #000 100%);
}

.night-sky::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.8;
  background-image:
    radial-gradient(circle, rgb(255 248 219 / 90%) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgb(255 109 177 / 72%) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgb(255 255 255 / 58%) 0 0.8px, transparent 1.4px);
  background-position: 8% 18%, 74% 28%, 38% 8%;
  background-size: 157px 173px, 229px 211px, 113px 137px;
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 85%) 58%, transparent 100%);
}

.night-sky::after {
  position: absolute;
  inset: 38% -20% -35%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(119 0 53 / 10%) 0, transparent 68%);
  filter: blur(28px);
}

.moon {
  position: absolute;
  top: clamp(2.6rem, 8vh, 6rem);
  right: clamp(2rem, 9vw, 9rem);
  width: clamp(4rem, 8vw, 7.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(135deg, #fffaf0 4%, #ffd8c7 48%, #cd8067 100%);
  -webkit-mask: radial-gradient(circle at 26% 31%, transparent 0 56%, #000 57%);
  mask: radial-gradient(circle at 26% 31%, transparent 0 56%, #000 57%);
  filter:
    drop-shadow(0 0 1px rgb(255 255 255 / 90%))
    drop-shadow(0 0 12px rgb(255 215 185 / 38%))
    drop-shadow(0 0 30px rgb(255 57 146 / 16%));
  opacity: 0.82;
}

.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--starlight);
  box-shadow: 0 0 8px 2px rgb(255 229 200 / 52%);
  animation: twinkle 5.6s ease-in-out infinite;
}

.star::before,
.star::after {
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  background: linear-gradient(90deg, transparent, rgb(255 241 215 / 92%), transparent);
  transform: translate(-50%, -50%);
}

.star::before {
  width: 23px;
  height: 1px;
}

.star::after {
  width: 17px;
  height: 1px;
  transform: translate(-50%, -50%) rotate(90deg);
}

.star--1 { top: 16%; left: 12%; animation-delay: -1.2s; }
.star--2 { top: 9%; left: 46%; animation-delay: -3.9s; transform: scale(0.68); }
.star--3 { top: 24%; right: 21%; animation-delay: -0.4s; transform: scale(1.15); }
.star--4 { top: 42%; left: 8%; animation-delay: -4.7s; transform: scale(0.58); }
.star--5 { top: 55%; right: 7%; animation-delay: -2.6s; transform: scale(0.72); }
.star--6 { bottom: 19%; left: 19%; animation-delay: -5.1s; transform: scale(0.48); }
.star--7 { bottom: 25%; right: 18%; animation-delay: -1.8s; transform: scale(0.55); }
.star--8 { top: 5%; left: 23%; animation-delay: -6.2s; animation-duration: 7.3s; transform: scale(0.44); }
.star--9 { top: 13%; right: 7%; animation-delay: -2.1s; animation-duration: 6.8s; transform: scale(0.5); }
.star--10 { top: 30%; left: 24%; animation-delay: -4.4s; animation-duration: 7.7s; transform: scale(0.6); }
.star--11 { top: 35%; right: 38%; animation-delay: -1.1s; animation-duration: 6.3s; transform: scale(0.42); }
.star--12 { top: 49%; left: 2%; animation-delay: -3.6s; animation-duration: 8.1s; transform: scale(0.52); }
.star--13 { top: 62%; left: 14%; animation-delay: -5.7s; animation-duration: 6.9s; transform: scale(0.38); }
.star--14 { top: 68%; right: 23%; animation-delay: -0.8s; animation-duration: 7.5s; transform: scale(0.67); }
.star--15 { top: 76%; left: 41%; animation-delay: -3.2s; animation-duration: 6.6s; transform: scale(0.4); }
.star--16 { top: 83%; right: 9%; animation-delay: -4.9s; animation-duration: 8.4s; transform: scale(0.55); }
.star--17 { bottom: 8%; left: 8%; animation-delay: -2.8s; animation-duration: 7.1s; transform: scale(0.36); }
.star--18 { bottom: 12%; right: 34%; animation-delay: -6.5s; animation-duration: 8s; transform: scale(0.42); }
.star--19 { top: 21%; left: 62%; animation-delay: -3.4s; animation-duration: 6.5s; transform: scale(0.46); }
.star--20 { top: 44%; right: 15%; animation-delay: -5.3s; animation-duration: 7.9s; transform: scale(0.38); }
.star--21 { bottom: 33%; left: 29%; animation-delay: -1.6s; animation-duration: 7.2s; transform: scale(0.5); }

@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  42% { opacity: 1; }
  58% { opacity: 0.78; }
}

.coming-soon {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(0.35rem, 1.5vw, 1rem);
  padding: clamp(1rem, 4vw, 3rem);
  overflow: hidden;
  text-align: center;
}

.logo {
  display: block;
  width: min(86vw, 760px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 1.4rem rgb(255 0 128 / 18%))
    drop-shadow(0 1.6rem 3.2rem rgb(0 0 0 / 76%));
}

p {
  margin: -0.8rem 0 0;
  color: #ffd6e9;
  font-size: clamp(0.72rem, 1.4vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  line-height: 1.5;
  text-transform: uppercase;
}

.preview-link {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  padding: 0.82rem 1.25rem;
  border: 1px solid rgb(255 114 181 / 45%);
  border-radius: 999px;
  background: rgb(25 3 14 / 62%);
  box-shadow: 0 0 1.6rem rgb(255 0 128 / 10%);
  color: #ffe8f3;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.preview-link:hover,
.preview-link:focus-visible {
  border-color: #ff69b4;
  box-shadow: 0 0 2rem rgb(255 0 128 / 22%);
  transform: translateY(-2px);
}

.preview-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (max-width: 520px) {
  .moon {
    top: 7.5vh;
    right: 7vw;
    width: clamp(3.4rem, 15vw, 4.8rem);
    opacity: 0.78;
  }

  .star--3 {
    top: 27%;
    right: 9%;
  }

  .logo {
    width: min(104vw, 620px);
    max-width: none;
  }

  p {
    margin-top: -0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}