/*
  prakash.systems — root landing page: ASCII moon-phase reveal.
  A static disk rendered on a CSS grid of fixed-pixel cells (guarantees
  a true circle regardless of font/device). Each cell is individually
  timed via animation-delay to flip from shadow to lit color, following
  the real terminator-ellipse formula — so the shadow visibly recedes
  across the disk from new moon to full moon, rather than a flat fade.
  The fully-lit color is the page's own rotating accent, tying the
  reveal into the same "surprise color" system as the rest of the site.
  Plays as the middle act of the boot sequence (gateway.js reveals
  .moon-wrap once the boot text finishes, then waits out the animation
  before showing the command shell) — no longer directly clickable;
  navigation happens via the ssh-style commands afterward.
*/

:root {
  --moon-cell: clamp(3px, 0.9vw, 6px);
  --moon-dark: #4a4a4a;
}

.crt-shell--wide {
  max-width: 960px;
}

.moon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin: 20px 0 28px;
}

.moon-wrap[hidden] {
  display: none;
}

.moon-ascii {
  display: grid;
  grid-template-columns: repeat(84, var(--moon-cell));
  grid-auto-rows: calc(var(--moon-cell) * 2);
  margin: 0;
  font-family: 'IBM Plex Mono', 'Consolas', monospace;
  font-size: calc(var(--moon-cell) / 0.6);
  line-height: calc(var(--moon-cell) * 2);
  letter-spacing: 0;
  user-select: none;
}

.moon-ascii span {
  overflow: hidden;
  white-space: nowrap;
}

.moon-ascii span.bg {
  pointer-events: none;
}

.moon-ascii .cell {
  color: var(--moon-dark);
  animation-name: moon-reveal;
  animation-duration: 0.4s;
  animation-timing-function: ease-out;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.moon-ascii .cell.mare {
  animation-name: moon-reveal-mare;
}

.moon-ascii .cell.bright {
  animation-name: moon-reveal-bright;
}

@keyframes moon-reveal {
  from { color: var(--moon-dark); }
  to   { color: var(--accent); }
}

@keyframes moon-reveal-mare {
  from { color: var(--moon-dark); }
  to   { color: color-mix(in srgb, var(--accent) 55%, black); }
}

@keyframes moon-reveal-bright {
  from { color: var(--moon-dark); }
  to   { color: color-mix(in srgb, var(--accent) 55%, white); }
}

.moon-ascii.skip-to-end .cell {
  animation: none !important;
  color: var(--accent);
}
.moon-ascii.skip-to-end .cell.mare {
  color: color-mix(in srgb, var(--accent) 55%, black);
}
.moon-ascii.skip-to-end .cell.bright {
  color: color-mix(in srgb, var(--accent) 55%, white);
}

@media (prefers-reduced-motion: reduce) {
  .moon-ascii .cell {
    animation: none !important;
    color: var(--accent);
  }
  .moon-ascii .cell.mare {
    color: color-mix(in srgb, var(--accent) 55%, black);
  }
  .moon-ascii .cell.bright {
    color: color-mix(in srgb, var(--accent) 55%, white);
  }
}