/* ============================================================
   StoryForge Welcome / Threshold Page
   ============================================================ */

/* --- Reset ------------------------------------------------ */

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

/* --- Base ------------------------------------------------- */

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.8;
  min-height: 100dvh;
}

/* --- Page layout ------------------------------------------ */

.welcome-page {
  max-width: 480px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* --- Brand block ------------------------------------------ */

.welcome-brand {
  text-align: center;
  padding: 48px 0 64px;
}

/* THE WORDMARK. The product name carries the candlelight: a vertical gradient
   across the letterforms so the top edge catches light and the feet fall into
   shadow, with a soft gold bloom behind it. text-shadow cannot be used here —
   it paints under background-clipped text — so the glow is a drop-shadow. */
.welcome-wordmark {
  font-family: var(--font-body);
  font-size: 46px;
  /* line-height: 1 clipped the descender. background-clip: text paints glyphs
     only inside the element's background box, and with
     -webkit-text-fill-color: transparent anything outside that box gets no
     paint at all — so the tail of the "g" simply vanished. The box has to be
     tall enough to contain the descenders it is clipping to. */
  line-height: 1.18;
  padding-bottom: 0.06em;
  letter-spacing: 0.02em;
  font-weight: 400;
  margin: 0;
  color: var(--gold);            /* fallback wherever background-clip is unsupported */
  /* Bottom stop lifted from #A87F3E: the descender sits at 74–92% of the box,
     so the tail of the "g" was painted in the gradient's darkest zone at 5.8:1
     against --bg — painted, but too dim to read against a near-black page.
     #C79350 stays warmer and deeper in hue than --gold so the candlelight
     fall-off is intact, at 7.36:1. Kept identical to .brand-wordmark in
     account.css: the two wordmarks share this treatment and must match. */
  background: linear-gradient(180deg, #F3D9A2, var(--gold) 58%, #C79350);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 20px rgba(201, 160, 85, 0.26));
}

/* THE EDITION. Plain white, small, and letterspaced wide so it reads as a mark
   under the name rather than a second heading arguing with it. The hierarchy is
   the point: StoryForge is the product, Companion is which one you are holding.
   --fg is the palette's white; a literal #FFF would sit outside the token
   system and read cold against the vellum warmth above it. */
.welcome-edition {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.46em;
  /* Trimmed from 14px: the wordmark's taller line box now carries some of this
     gap itself, so the optical spacing between the two lines is unchanged. */
  margin: 6px 0 0;
  /* Wide tracking adds a trailing space after the last letter, which throws the
     word visually left of centre. Nudge by half the tracking to optically centre it. */
  text-indent: 0.46em;
}

.welcome-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* The rule used to sit under the wordmark alone; it now closes the two-line
     lockup, so it needs more air above than the edition line does. */
  margin-top: 26px;
}

.welcome-anchor-line {
  height: 0.5px;
  width: 110px;
  background: var(--fg-faint);
}

.welcome-anchor-diamond {
  height: 5px;
  width: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}

/* --- Content area ----------------------------------------- */

.welcome-content {
  text-align: center;
}

.welcome-surface {
  width: 100%;
}

/* --- Greeting --------------------------------------------- */

.welcome-heading {
  font-family: var(--font-body);
  font-size: 22px;
  color: var(--fg);
  line-height: 1.4;
  margin-bottom: 16px;
  font-weight: 400;
}

.welcome-subtitle {
  font-family: var(--font-body);
  font-size: 17px;
  font-style: italic;
  color: var(--fg-muted);
  line-height: 1.6;
  margin-bottom: 40px;
}

/* --- Sign-in button --------------------------------------- */

.welcome-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  background: var(--gold);
  color: var(--bg);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: filter 0.15s;
}

@media (hover: hover) and (pointer: fine) {
  .welcome-btn:hover {
    filter: brightness(1.1);
  }
}

.welcome-btn--outlined {
  background: transparent;
  border: 0.5px solid var(--gold);
  color: var(--gold);
}

/* --outlined is unused: nothing on this page renders a secondary button now,
   and it was already overridden by the SF-VISUAL-01 .welcome-btn re-declaration
   below. Left in place rather than deleted so the variant is here if a second
   option ever returns. */
@media (hover: hover) and (pointer: fine) {
  .welcome-btn--outlined:hover {
    background: var(--container-bg);
    filter: none;
  }
}

.welcome-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Loading state ---------------------------------------- */

.welcome-loading {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  color: var(--fg-muted);
  text-align: center;
  padding: 48px 0;
}

/* --- Availability note ------------------------------------ */

/* Informational, not promotional. It reads as a footnote to the page rather
   than a second offer competing with the sign-in button: no surface, no border,
   no button, and it sits far enough below the door that the eye reaches it last.
   The hairline is the same device the brand lockup uses, cut short so it reads
   as a footer mark rather than a divider between two equal sections. */
.welcome-note {
  margin-top: 56px;
  text-align: center;
}

.welcome-note-rule {
  height: 0.5px;
  width: 64px;
  margin: 0 auto 20px;
  background: var(--fg-faint);   /* decorative only, never carries meaning */
}

/* --font-ui rather than the page's body serif: this is utility text, and the
   serif would give it the same weight as the invitation above it. --fg-label is
   the palette's floor for informational copy (the sub-AA --fg-faint is for
   rules and ornament only). */
.welcome-note-text {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-label);
  margin: 0;
}

/* The domain is the one part worth finding again, so it takes the page's gold.
   nowrap because a URL broken across two lines stops looking like a URL. */
.welcome-note-domain {
  color: var(--gold);
  white-space: nowrap;
}

/* --- Responsive ------------------------------------------- */

@media (max-width: 480px) {
  .welcome-page {
    padding: 32px 20px 64px;
  }

  /* Narrower column means more lines, so the note needs less air above it to
     stay a footnote rather than becoming its own screenful. */
  .welcome-note {
    margin-top: 44px;
  }

  .welcome-note-text {
    font-size: 12.5px;
  }

  .welcome-wordmark {
    font-size: 38px;
  }

  /* Tracking that reads as elegant at 46px starts to look scattered under a
     smaller wordmark, so it tightens with it. */
  .welcome-edition {
    font-size: 10px;
    letter-spacing: 0.38em;
    text-indent: 0.38em;
    margin-top: 5px;
  }

  .welcome-anchor {
    margin-top: 22px;
  }

  .welcome-anchor-line {
    width: 80px;
  }
}

/* SF-VISUAL-01 carry-through (presentation-only; reversible) */
.welcome-btn { background: var(--lit-metal); color: var(--bg); border-radius: var(--btn-radius); box-shadow: var(--lit-metal-sheen); }
@media (hover: hover) and (pointer: fine) {
  .welcome-btn:hover { background: var(--lit-metal); filter: brightness(1.06); }
}

/* Steam was the second way in and read as secondary while Google sat above it.
   Google is no longer offered here, so this is now the only door and takes the
   primary treatment: it simply inherits .welcome-btn, including the
   SF-VISUAL-01 lit-metal surface declared above. No override, no margin — there
   is nothing above it to sit apart from. The class is kept as a hook so the
   button can be targeted without relying on its id. */
.welcome-btn--steam {
  margin-top: 0;
}

/* --- COMPANION is the MOBILE edition ------------------------------------- */

/* Companion names the phone/PWA edition of StoryForge. On a PC — a desktop
   browser, or the Steam desktop client, which is the PC product — there is no
   edition to name: it is just StoryForge. So the mark is hidden by default and
   revealed only on the surfaces it actually describes.

   Hidden by default rather than shown by default on purpose. If a new surface
   ever renders this markup, the safe failure is a missing sub-line, not the
   wrong product name on a PC. */
.welcome-edition { display: none; }

/* Phone and small-tablet widths, where the mobile layout is already in play. */
@media (max-width: 760px) {
  .welcome-edition { display: block; }
}

/* An installed app on a touch device — a tablet PWA held wider than 760px.
   `pointer: coarse` is the part that keeps the Steam desktop client out: it is
   an installed app too, and can report standalone, but it is a PC with a
   mouse. Width alone would not have separated them. */
@media (display-mode: standalone) and (pointer: coarse) {
  .welcome-edition { display: block; }
}

/* ---------------------------------------------------------------------------
   Secondary link to /how-it-works on the new-visitor surface.
   Deliberately quiet: the sign-in button is the primary action and this must
   not compete with it. 44px minimum touch target via padding, focus ring per
   the shared convention.
   --------------------------------------------------------------------------- */
.welcome-learn {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.75rem 0.5rem;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--fg-label);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.welcome-learn:hover {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

.welcome-learn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: inherit;
}