/* Landing page. Tokens and the reset come from base.css. */
body {
  position: relative;
  overflow: hidden;
}

/* --- background layers --------------------------------------------------- */

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

/* Two very large, heavily blurred blobs drifting on long cycles. They read as
   atmosphere rather than as shapes. */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.aurora i {
  position: absolute;
  display: block;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.2;
  will-change: transform;
}
.aurora i:nth-child(1) {
  top: -28vmax;
  left: -18vmax;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 62%);
  animation: drift-a 46s ease-in-out infinite alternate;
}
.aurora i:nth-child(2) {
  right: -24vmax;
  bottom: -30vmax;
  background: radial-gradient(circle, var(--violet) 0%, transparent 62%);
  animation: drift-b 61s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmax, 6vmax, 0) scale(1.14); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.08); }
  to   { transform: translate3d(-8vmax, -7vmax, 0) scale(0.94); }
}

/* Darkens the edges so the wordmark keeps the centre of attention. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(3, 5, 8, 0.82) 100%);
}

/* --- chrome -------------------------------------------------------------- */

.top, .strip {
  position: fixed;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  z-index: 2;
  padding: max(20px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.top { top: 0; justify-content: space-between; }
.strip { bottom: 0; justify-content: space-between; gap: 16px; }

.mark { color: var(--muted); }

.enter {
  padding: 7px 14px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}
.enter:hover, .enter:focus-visible {
  background: rgba(111, 216, 230, 0.08);
  border-color: rgba(111, 216, 230, 0.5);
}

.strip .cell { white-space: nowrap; }
.strip .cell:nth-child(2) { flex: 1; text-align: center; }

.status { display: inline-flex; align-items: center; gap: 7px; }
.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: pulse 3.2s ease-in-out infinite;
}
.status.ok   .dot { background: var(--cyan);   box-shadow: 0 0 8px var(--cyan); }
.status.down .dot { background: #ff7a6b; box-shadow: 0 0 8px #ff7a6b; animation: none; }
@keyframes pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* --- centrepiece --------------------------------------------------------- */

main {
  --ring: min(46vmin, 300px);
  position: relative;
  /* Sits below the fixed bars, which are full-width and would otherwise be
     covered by this full-viewport box. */
  z-index: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  height: 100%;
  padding: 0 24px;
  text-align: center;
}

/* Hairline through the reticle's centre, fading out well before the edges, so
   the ring and the wordmark read as one arrangement rather than two stacked
   objects. Anchored to the reticle's own box, so it stays put at any size. */
.halo {
  position: relative;
  display: grid;
  place-items: center;
  margin-bottom: -7vmin;
}
.horizon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translate(-50%, -50%);
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--line) 22%,
    rgba(111, 216, 230, 0.32) 50%,
    var(--line) 78%,
    transparent 100%
  );
}

.reticle {
  width: var(--ring);
  height: var(--ring);
  opacity: 0.62;
}
.reticle circle { fill: none; stroke-width: 0.9; }
.r-dim  { stroke: rgba(120, 145, 175, 0.28); }
.r-core { fill: var(--cyan); stroke: none; opacity: 0.9; }
.r-spin {
  stroke: var(--cyan);
  stroke-dasharray: 9 91;
  stroke-linecap: round;
  opacity: 0.75;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 24s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

h1 {
  position: relative;
  margin: 0;
  font-size: clamp(30px, 8.5vw, 76px);
  font-weight: 200;
  letter-spacing: 0.22em;
  /* Trailing letter-spacing would otherwise push the word off-centre. */
  text-indent: 0.22em;
  text-shadow: 0 0 42px rgba(111, 216, 230, 0.28);
  animation: breathe 9s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: 0.88; }
  50%      { opacity: 1; }
}

.sub {
  margin: 18px 0 0;
  font-size: 13px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--muted);
}

@media (max-width: 560px) {
  main { --ring: min(52vmin, 240px); }
  .top, .strip {
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
             max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    font-size: 10px;
    letter-spacing: 0.1em;
  }
  .strip .cell:nth-child(2) { display: none; }
  .halo { margin-bottom: -9vmin; }
}

/* Large-scale ambient motion goes; the reticle stays. */
@media (prefers-reduced-motion: reduce) {
  .aurora i, h1, .dot { animation: none; }
  .r-spin { animation-duration: 40s; }
}