/* Manse — holding page.
 *
 * The palette is the app's, ported from ../Manual/theme/tokens.ts. Note it is
 * NOT themed here: the app has light and dark palettes, but its sign-in hero
 * draws the dark `ink` ground in both, which is exactly why the `onInk*` tokens
 * exist and exactly why they are the only text colors that never invert. This
 * page is that hero. So it commits to the ink ground and needs no light mode —
 * matching the app means staying dark, not following the OS.
 */

:root {
  --ink: #22312a; /* the ground */
  --amber: #d9a13b; /* the accent — the roofline, the dot */
  --spruce: #33604a;

  --on-ink-strong: #edf2ea; /* wordmark */
  --on-ink: #e8ede6;
  --tagline: #a9b8ac;
  --on-ink-muted: #9fb0a2; /* body copy */
  --on-ink-subtle: #93a498; /* footer, rules */

  --font-display: "Zilla Slab", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2.5rem 1.5rem;

  background-color: var(--ink);
  /* A single soft bloom behind the mark, so the ground is not a flat fill.
     Sits under everything and is purely decorative. */
  background-image: radial-gradient(
    ellipse 70% 55% at 50% 28%,
    rgba(51, 96, 74, 0.38),
    transparent 70%
  );
  background-repeat: no-repeat;

  font-family: var(--font-body);
  color: var(--on-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* `width` is load-bearing, not decoration. As a flex item under
     `align-items: center` the cross size is shrink-to-fit, which resolved
     against the text's max-content and overflowed the viewport on narrow
     screens. A definite width makes `max-width` the cap it looks like. */
  width: 100%;
  max-width: 34rem;
}

/* Sized to sit *over* the wordmark rather than float above it — in the app icon
   the roof is wider than the letterform it covers, and it stops reading as a
   roof the moment it is narrower. */
.roof {
  width: clamp(9rem, 60vw, 15.5rem);
  height: auto;
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 12vw, 4.75rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--on-ink-strong);
}

/* The amber period, carried over from the app's `Manual.` wordmark. */
.dot {
  color: var(--amber);
}

.tagline {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 3.4vw, 1.1875rem);
  line-height: 1.45;
  color: var(--tagline);
  text-wrap: balance;
}

.blurb {
  margin-top: 1.75rem;
  max-width: 30rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--on-ink-muted);
  text-wrap: pretty;
}

/* The mono, wide-tracked spec label the app uses for its eyebrows, flanked by
   hairlines. `.rule` is the flexible part, so the label stays centered and the
   rules absorb the width. */
.status {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 22rem);
  margin-top: 2.75rem;

  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--amber);
}

.rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to var(--rule-direction, right),
    rgba(147, 164, 152, 0.45),
    transparent
  );
}

.status .rule:first-child {
  --rule-direction: left;
}

/* 404 only: the status row carries a link back rather than a label. */
.back {
  color: var(--amber);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.back:hover,
.back:focus-visible {
  border-bottom-color: var(--amber);
}

.footer {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--on-ink-subtle);
}

/* Entrance: one stagger down the stack. Transform + opacity only, so it stays
   on the compositor. */
@media (prefers-reduced-motion: no-preference) {
  .roof,
  .wordmark,
  .tagline,
  .blurb,
  .status,
  .footer {
    animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  .roof {
    animation-delay: 0.05s;
  }
  .wordmark {
    animation-delay: 0.14s;
  }
  .tagline {
    animation-delay: 0.24s;
  }
  .blurb {
    animation-delay: 0.34s;
  }
  .status {
    animation-delay: 0.44s;
  }
  .footer {
    animation-delay: 0.54s;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}