/* ==========================================================================
   Mantis public teaser — runmantis.com
   Static, dependency-free stylesheet. One system sans-serif stack, no web fonts,
   no script.

   Palette: the canonical Mantis palette (docs/architecture/brand.md).
   The page is dark only. There is no light mode and no theme switch.

   Composition: one screen, one hierarchy. The word MANTIS. is set on a
   full-bleed Mantis Orange datum line; the statement sits beneath the datum
   with "Coming soon." directly beneath the statement as a subordinate status
   line; the moonshark attribution sits at the foot. MANTIS., the statement,
   the status, and the attribution all start at the same left coordinate: the
   single --gutter anchor. The only motion is the reveal: the datum draws in,
   the word settles onto it, the lines beneath follow. After that the page is
   still. With prefers-reduced-motion everything is simply present.
   Mantis Orange appears twice: the datum and the full stop after MANTIS.
   ========================================================================== */

:root {
  /* Canonical palette */
  --orange: #F7941D;
  --black: #101010;
  --midnight: #151821;
  --steel: #2A3142;
  --white: #F5F5F5;

  /* Derived tones: White at reduced opacity over Black. */
  --fg: var(--white);
  --fg-muted: rgba(245, 245, 245, 0.72);

  /* Type: one family, four sizes. */
  --font: "Inter", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-mark: min(21vw, 20rem);
  --fs-statement: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  --fs-status: 1.125rem;
  --fs-small: 0.9375rem;

  /* Layout */
  --gutter: 20px;        /* the one horizontal anchor: every text block starts here */
  --datum-gap: 0.05em;   /* space between the baseline of MANTIS. and the datum */
  --line-gap: 24px;      /* space between the datum and the statement */
  --status-gap: 10px;    /* space between the statement and "Coming soon." */

  /* Reveal timing (used only when motion is allowed) */
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

@media (min-width: 720px) {
  :root { --gutter: 48px; --fs-mark: min(17.5vw, 20rem); --line-gap: 32px; --status-gap: 12px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 64px; --line-gap: 40px; --status-gap: 14px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--black);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  background: var(--black);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-status);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

h1, p { margin: 0; }

::selection { background: var(--orange); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   The stage: MANTIS. on the datum, the statement beneath, the status beneath
   that. .mark, .line, and .colophon each pad from --gutter, so the M of
   MANTIS., the P of Precision, the C of Coming, and the A of the attribution
   share one left coordinate.
   -------------------------------------------------------------------------- */
.teaser {
  grid-row: 2;
  /* Sit slightly above the geometric centre so the composition reads as held, not dropped. */
  padding-bottom: 4vh;
}

.mark {
  padding-inline: var(--gutter);
  /* Optical alignment. Every first glyph on the page is pulled left by its own
     left side bearing so its ink, not its advance box, starts exactly on the
     --gutter anchor. Bearings are those of the system font the stack resolves
     to on macOS (SF Pro), measured with canvas measureText at 1000 px; other
     system sans faces (Helvetica Neue, Arial, Helvetica) differ by at most
     0.015 em, so they land within a few pixels rather than a dozen. */
  text-indent: -0.0586em;   /* M, weight 700 */
  margin-bottom: var(--datum-gap);
  font-size: var(--fs-mark);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  /* A line box the height of the capitals: the bottom edge is the baseline, so the
     word stands on the datum. line-height 0.75 approximates this in every font;
     text-box-trim makes it exact where supported. */
  line-height: 0.75;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
  white-space: nowrap;
}
.mark__stop { color: var(--orange); }

.datum {
  height: 2px;
  background: var(--orange);
}
@media (min-width: 1200px) {
  .datum { height: 3px; }
}

.line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--status-gap);
  padding-inline: var(--gutter);
  margin-top: var(--line-gap);
}
.statement {
  /* No max-width: the statement takes the full column so it sets on one line
     wherever the column allows (from about 700 px). On phones it wraps naturally
     and text-wrap: balance evens the two lines. */
  font-size: var(--fs-statement);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-wrap: balance;
  text-indent: -0.0651em;   /* P, weight 500: ink on the anchor (see .mark) */
}
.status {
  /* A status line under the statement: same anchor, smaller, muted. Not a
     button, badge, pill, or box. */
  font-size: var(--fs-status);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-muted);
  text-indent: -0.0395em;   /* C, weight 500: ink on the anchor (see .mark) */
}

/* --------------------------------------------------------------------------
   Colophon
   -------------------------------------------------------------------------- */
.colophon {
  grid-row: 3;
  align-self: end;
  padding: 24px var(--gutter) 28px;
  font-size: var(--fs-small);
  color: var(--fg-muted);
  text-indent: -0.0122em;   /* A, weight 400: ink on the anchor (see .mark) */
}

/* --------------------------------------------------------------------------
   Reveal. Only when the visitor has not asked for reduced motion; otherwise
   every element is simply present, and nothing on the page depends on the
   motion having played.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .datum {
    transform: scaleX(0);
    transform-origin: left center;
    animation: datum-draw 1100ms var(--ease) 300ms forwards;
  }
  .mark {
    opacity: 0;
    transform: translateY(-0.14em);
    animation: mark-settle 900ms var(--ease) 700ms forwards;
  }
  .statement, .status, .colophon p {
    opacity: 0;
    transform: translateY(6px);
    animation: rise 700ms var(--ease) forwards;
  }
  .statement  { animation-delay: 1450ms; }
  .status     { animation-delay: 1700ms; }
  .colophon p { animation-delay: 1950ms; }

  @keyframes datum-draw {
    to { transform: scaleX(1); }
  }
  @keyframes mark-settle {
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes rise {
    to { opacity: 1; transform: translateY(0); }
  }
}