/* intro.css — the landing intro slab for gifts.wtf.
 *
 * Matches the shape the rest of the house already uses: Intel Maps opens with a
 * statement, a promise line and the core action inline; StickerCap opens with a
 * plain sentence, a proof line and a strip of live counters. This gives gifts.wtf
 * the same arrival: what it is, what is in it, and the search box, before any
 * click.
 *
 * Palette is the existing theme tokens only, so it themes with the site in both
 * light and WTF/dark. Nothing here restyles an existing selector; every rule is
 * scoped under #gwIntro, which intro.js creates.
 */

#gwIntro {
  max-width: 1180px;
  margin: 0 auto;
  padding: 26px 16px 6px;
  box-sizing: border-box;

  /* The desktop sheet gives this a glass panel, but that rule is gated to
     >=900px. Below it the intro was painting straight onto the body's pastel
     gradient, which measured 1.23:1 for the caption and 2.14:1 for the
     headline: unreadable in the default light theme. A panel at ALL widths is
     the floor; the desktop sheet still layers glass on top. */
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

/* ---- the statement ------------------------------------------------------ */
#gwIntro .gi-line {
  margin: 0 0 6px;
  font-family: var(--font-bubble), system-ui, sans-serif;
  font-size: clamp(21px, 4.2vw, 34px);
  line-height: 1.12;
  letter-spacing: .1px;
  color: var(--ink-hi);
}
#gwIntro .gi-line b {
  color: var(--p400);
  font-weight: inherit;
}

#gwIntro .gi-sub {
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-mid);
}
#gwIntro .gi-sub strong {
  color: var(--ink-mid);
  font-weight: 700;
}
#gwIntro .gi-sub a {
  color: var(--p300);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
#gwIntro .gi-sub a:hover { border-bottom-color: currentColor; }

/* the live caption above the counter strip, same language as the Stats pulse */
#gwIntro .gi-cap {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-lo);
}
#gwIntro .gi-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gain, #3FD08A);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gain, #3FD08A) 22%, transparent);
}

/* ---- the core action ---------------------------------------------------- */
#gwIntro .gi-search {
  display: flex;
  gap: 8px;
  align-items: stretch;
  max-width: 620px;
  margin: 0 0 18px;
}
#gwIntro .gi-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px solid var(--hairline-2);
  background: var(--well);
  color: var(--ink-hi);
  font-size: 13.5px;
}
#gwIntro .gi-input::placeholder { color: var(--ink-lo); }
#gwIntro .gi-input:focus {
  outline: none;
  border-color: var(--p300);
  box-shadow: 0 0 0 3px var(--tint-weak);
}
#gwIntro .gi-go {
  flex: 0 0 auto;
  padding: 10px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--p400);
  color: var(--on-accent);
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
}
#gwIntro .gi-go:hover { background: var(--p500); }
#gwIntro .gi-go:focus-visible { outline: 2px solid var(--p300); outline-offset: 2px; }

/* ---- the live counter strip -------------------------------------------- */
#gwIntro .gi-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
#gwIntro .gi-stat {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--panel);
  min-width: 0;
}
#gwIntro .gi-k {
  display: block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-lo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#gwIntro .gi-v {
  display: block;
  margin-top: 3px;
  font-family: var(--font-num, ui-monospace, monospace);
  font-size: clamp(16px, 3.4vw, 21px);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-hi);
  line-height: 1.1;
}
/* the no-data glyph keeps the site convention: a dash, never a fake zero */
#gwIntro .gi-v.is-wait { color: var(--ink-lo); }

#gwIntro .gi-q {
  display: inline-block;
  margin-left: 4px;
  width: 11px; height: 11px; line-height: 11px;
  border-radius: 50%;
  background: var(--hover);
  color: var(--ink-lo);
  font-size: 8px;
  text-align: center;
  cursor: help;
  vertical-align: 1px;
}

@media (min-width: 620px) {
  #gwIntro .gi-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  #gwIntro { padding: 28px 20px 10px; }
  #gwIntro .gi-stats { grid-template-columns: repeat(5, 1fr); gap: 10px; }

  /* ---- bring the intro above the fold ---------------------------------
     The hero was a full-viewport slab (min-height clamp(500px, min(84vh,
     89vw), 860px)), which pushed the statement, the search and the counters
     entirely below the fold. Both sibling properties open with the statement
     and the numbers visible, so on a wide screen the hero becomes a banner
     instead of a doorway. The wordmark, the video and the CTA all stay.
     Untouched below 900px, where a tall hero still reads well. */
  #gwLanding .gw-hero {
    min-height: clamp(300px, 38vh, 400px);
    padding-top: clamp(18px, 3vh, 36px);
    padding-bottom: clamp(20px, 3.5vh, 40px);
  }
  /* The wordmark is an absolutely-positioned cover image filling the hero box.
     Shortening the box made it crop tall enough to collide with the rotor and
     the CTA underneath, so on desktop it scales to fit and sits high instead. */
  #gwLanding .gw-hero-logo {
    object-fit: contain;
    object-position: center 34%;
  }
}