/* ============================================================================
   landing.css — the page shell and the deltas the stripped entry screen needs
   on top of entry-screen.css.

   Load order:  tokens.css  →  entry-screen.css  →  landing.css

   Nothing here restyles the entry screen's mechanics. Every reveal, fade and
   dismiss transition still comes from entry-screen.css unchanged. This file
   only:
     1. binds the module's --es-* tokens to the project tokens,
     2. hosts the intro canvas in the module's backdrop slot,
     3. restores the Jost wordmark treatment on .et-brand,
     4. adds the quiet "Replay intro" link and the button press/focus states,
     5. paints the no-JS fallback.
   ========================================================================== */

/* The wordmark face. It was chosen because the loader used to rasterise its
   particles from it; the dots no longer spell anything, but the chrome
   wordmark keeps the face and its tracking. */
@font-face {
  font-family: Jost;
  src: url("../../assets/fonts/jost.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

/* ── page shell ──────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  overflow: hidden;
}
body {
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button { -webkit-tap-highlight-color: transparent; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── token bridge: module tokens → project tokens ────────────────────────── */
.entry-screen {
  --es-brand: var(--brand);
  --es-paper: var(--paper);
  --es-border: var(--border);
  --es-ink: var(--ink);
  --es-graphite: var(--graphite);
  --es-font-body: var(--font-body);
  --es-font-display: var(--font-display);
}

/* ── the loader lives in the module's backdrop slot ──────────────────────── */
/* The entry screen's own paper background sits behind it, so the settled logo
   keeps rotating under the chrome and fades out with it on dismiss — exactly
   the original's #entry / #entryCanvas relationship. */
.entry-screen .es-backdrop .landing-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ── wordmark: the loader's Jost treatment ───────────────────────────────── */
/* entry-screen.css ships a 700/26px display-font wordmark. The loader used to
   spell "cognia" in Jost 300 with a 0.28em gap between glyph ink bounds; that
   stage is gone, but the chrome wordmark keeps the face and the tracking. */
.entry-screen .et-brand {
  margin: 0 0 9px;
  padding-left: .28em;            /* balances the trailing letter-space */
  font: 300 31px/1 Jost, var(--font-display);
  letter-spacing: .28em;
  color: var(--es-brand);
}

/* ── CTA card ────────────────────────────────────────────────────────────── */
/* The card carries one line of copy. The module's second copy slot is unused,
   so collapse it rather than leaving its 15px bottom margin behind. */
.entry-screen .ec-sub:empty { display: none; margin: 0; }

/* With .ec-sub collapsed, the card would lose the 15px the module puts under
   it. Move that gap onto the title so the copy keeps its distance from the
   button instead of crowding it. */
.entry-screen .ec-title { line-height: 1.35; margin-bottom: 15px; }

/* The module's padding yields a 42px button. The bakeoff stub raised it to the
   44px touch minimum; that is the one place the stub is stricter, so it wins. */
.entry-screen .ec-btn { min-height: 44px; }

/* Press feedback the module doesn't ship (it defines :hover only). */
.entry-screen .ec-btn:active { transform: translateY(0); box-shadow: none; }

/* The module paints a focus ring on the stat cards but not on the buttons. */
.entry-screen .ec-btn:focus-visible,
.entry-screen .social-x:focus-visible {
  outline: 2px solid var(--es-ink);
  outline-offset: 4px;
}

/* Pointer-less devices must not keep a sticky hover lift after a tap. */
@media (hover: none) {
  .entry-screen .ec-btn:hover { transform: none; box-shadow: none; }
}

/* ── the X mark — the one addition to the card ──────────────────────────────
   Where "Replay intro" used to sit (user ruling, v3 round 2). Same quiet
   graphite → brand hover the replay link had, so the card's rhythm is
   unchanged; the glyph is the marketplace toolbar's, at 14px. */
.entry-screen .social-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 8px auto 0;
  border-radius: 8px;
  color: var(--es-graphite);
  cursor: pointer;
  transition: color .14s ease;
}
.entry-screen .social-x svg { width: 14px; height: 14px; }
.entry-screen .social-x:hover { color: var(--es-brand); }

/* Quiet enough to stay a link on a mouse; big enough to hit with a thumb. */
@media (pointer: coarse) {
  .entry-screen .social-x { width: 44px; height: 44px; }
}

/* ── no-JS fallback ──────────────────────────────────────────────────────── */
.nojs {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
  background: var(--paper);
}
.nojs img { width: min(42vmin, 300px); height: auto; }
.nojs p {
  margin: 0;
  max-width: 30ch;
  font: 600 20px/1.35 var(--font-display);
  color: var(--ink);
}
.nojs a {
  padding: 11px 18px;
  border: 1px solid var(--brand);
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font: 600 13.5px var(--font-display);
  text-decoration: none;
}

/* ── reduced motion ──────────────────────────────────────────────────────── */
/* entry-screen.css already collapses the reveal transitions and the float.
   These are the states this file added. */
@media (prefers-reduced-motion: reduce) {
  .entry-screen .ec-btn,
  .entry-screen .social-x { transition: none; }
  .entry-screen .ec-btn:hover { transform: none; box-shadow: none; }
}