/* ---- Theme knobs ---- */
:root {
  --stop-x: 26%;
  --stop-y: -6%;
  --tilt: 65deg;                 /* rotated crescent */
  --anim-duration: 10s;          /* slow approach */
  --eclipse-size: min(86vw, 440px);   /* shared width for eclipse + wordmark */
  --stack-gap: clamp(18px, 5vmin, 56px); /* space between animation and wordmark */

  --bg: #000;
  --fg: #fff;
}

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

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow: hidden; /* avoid scrollbars; content is sized to viewport */
}

.page {
  min-height: 100dvh; /* better on mobile */
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--stack-gap);
  padding: clamp(12px, 4vmin, 40px);
}

/* ---- Eclipse animation ---- */
.universe {
  display: grid;
  place-items: center;
  width: var(--eclipse-size);
  aspect-ratio: 1 / 1; /* square */
}

.solar-system {
  position: relative;
  width: 100%;
  transform: rotate(var(--tilt)); /* rotate to get that "turned" crescent */
  transform-origin: center;
}

.solar-system__inner {
  position: relative;
  width: 100%;
  padding-bottom: 100%; /* keeps it square */
}

.sun {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #ffffff 40%, #ffffff 66%, #ffffff 100%);
  border-radius: 50%;
}

.moon {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 98%;
  height: 98%;
  background: var(--bg);
  border-radius: 50%;
  animation: moonToLogo var(--anim-duration) linear 1 forwards;
  opacity: 1;
}

/* Static on load? comment animation and keep final transform */
/* .moon { animation: none; transform: translate3d(var(--stop-x), var(--stop-y), 0); } */

@keyframes moonToLogo {
  from { transform: translate3d(80%, 80%, 0); }
  to   { transform: translate3d(var(--stop-x), var(--stop-y), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .moon { animation: none; transform: translate3d(var(--stop-x), var(--stop-y), 0); }
}

/* ---- Brand wordmark ---- */
.brand {
  position: relative;
  width: var(--eclipse-size);  /* matches eclipse width so it never spills under */
  display: grid;
  place-items: center;
}

.wordmark {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}