/*
  Scoutr waitlist.

  Tokens are lifted from the sibling repos rather than invented here:
  the brand and semantic colours from ../scoutr-platform/packages/ui/src/theme.css,
  the dark-green screen palette from ../scoutr/client/src/pages/, and the official
  mark colours from ../scoutr-platform/packages/ui/src/scoutr-arrow.tsx.

  The theme over there is light-only (ADR-0023). A dark-green hero is built as a
  section with explicit colours, never as a theme mode -- which is exactly what this
  page is, top to bottom.
*/

:root {
  /* Brand greens */
  --forest-dark: #021704;
  --forest: #133015;
  --forest-deep: #0f1f0f;
  --forest-border: #2d4a2d;

  /* Golds. --gold is the CTA fill; --gold-brand is the official mark gold. */
  --gold: #c8a84b;
  --gold-hover: #b8943b;
  --gold-brand: #b8a06a;
  --gold-sand: #c8b98a;

  /* Text on dark */
  --cream: #f5f0e8;
  --sage: #a3b8a3;
  /*
     Lifted off the legacy #4a6a4a, which scores 2.82:1 on the input fill and fails AA.
     The labels here are visually hidden, so the placeholder is the only thing naming the
     field on screen -- it has to be readable. #739473 is 5.08:1 and still clearly
     recessive against the cream a person types in.
  */
  --placeholder: #739473;

  --radius-md: 8px;
  --radius-xl: 12px;

  /* How far past `cover` the topo layer is zoomed. See .topo. */
  --topo-zoom: 6;

  /*
    How strongly the topo blends inside a pool. Held back on narrow screens: the pools are
    sized in viewport units, and on a phone the hero fills the whole screen, so there is
    no placement that misses the text the way the desktop layout allows.

    0.42 is not a taste value. Measured against the tile's brightest pixel under the
    worst mask coverage a phone produces, 0.478 is where the 12px gold eyebrow falls to
    4.5:1. This sits under that with a little room. Raising it past ~0.47 makes that
    label fail WCAG AA.
  */
  --topo-strength: 0.42;

  /* Home.tsx:122, verbatim. Shared by body and .topo -- see .topo for why. */
  --forest-gradient: linear-gradient(
    135deg,
    oklch(0.18 0.05 145) 0%,
    oklch(0.28 0.06 145) 50%,
    oklch(0.22 0.06 155) 100%
  );

  /* theme.css:58-59 */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

@media (min-width: 768px) {
  :root {
    --topo-strength: 1;
  }
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--cream);
  background-color: var(--forest-dark);
  background-image: var(--forest-gradient);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Topo contour layer -------------------------------------------------- */

.topo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* The zoomed child is far larger than the viewport. */
  overflow: hidden;

  /*
    The group carries its own copy of the page gradient, and that is load-bearing rather
    than redundant. `mix-blend-mode` on the child blends with the backdrop INSIDE the
    nearest stacking context, and the mask below creates one -- so without a base painted
    here the child would blend against transparency and the soft-light would be lost.
    Painting the gradient here gives it the right thing to blend with.

    It is seamless because it is the same token as `body`, and both are viewport-sized and
    viewport-fixed, so the two copies land on the same pixels. Where the mask is fully
    transparent, what shows through is the body's own gradient at the identical colour.
  */
  background-image: var(--forest-gradient);

  /*
    The shade. Without it the texture sits evenly over everything and the whole screen
    reads as busy at any opacity. Masking it down to two soft pools means most of the
    page is just the forest gradient, and the contours that do survive can be run much
    harder -- that contrast is what makes them read as highlights rather than noise.

    Both pools are kept to the right and the bottom, away from the headline and the form,
    which are left-aligned on desktop.
  */
  --topo-mask:
    radial-gradient(58% 50% at 82% 14%, #000 0%, rgb(0 0 0 / 0.45) 45%, transparent 72%),
    radial-gradient(46% 40% at 88% 88%, #000 0%, rgb(0 0 0 / 0.35) 45%, transparent 70%);
  -webkit-mask-image: var(--topo-mask);
  mask-image: var(--topo-mask);
}

.topo-image {
  position: absolute;
  inset: 0;
  background-image: url('/topo-bg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /*
    Blended, not composited. The tile carries near-white flecks, and painting those over
    the gradient at any useful strength washes out the small gold labels -- measured, the
    eyebrow drops to 2.9:1 even at 0.3 opacity. `soft-light` lightens the forest base
    toward a lighter GREEN instead of toward white, so a highlight stays in the palette
    and the page stays green, which is the brief. It also cannot blow out: on a dark base
    soft-light is bounded well short of white.
  */
  mix-blend-mode: soft-light;
  opacity: var(--topo-strength);

  /*
    Zoomed hard so only two or three broad ridges cross a pool.

    Scaling the element is what makes this safe at every aspect ratio. A percentage
    `background-size` is a percentage of the container WIDTH with height left to `auto`,
    so on a tall phone the scaled image is shorter than the screen and leaves a band of
    bare gradient. Scaling up from `cover` cannot uncover anything.

    topo-bg.webp is 1536x1024 and there is no larger source, so this trades sharpness for
    separation -- at 6 the tile renders far above native resolution and reads as soft
    ridges rather than contour lines. That is the intent here, but it is the ceiling: more
    zoom is just gradient.
  */
  transform: scale(var(--topo-zoom));
}



/* ---- Layout -------------------------------------------------------------- */

.shell {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  margin-inline: auto;
  max-width: 1120px;
  padding-inline: clamp(1.5rem, 5vw, 2.5rem);
  padding-block: clamp(1.5rem, 4vw, 2.25rem);
}

.site-header {
  display: flex;
  align-items: center;
  padding-block: 0.5rem 0;
}

.wordmark {
  display: block;
  height: clamp(26px, 5.5vw, 34px);
  width: auto;
}

.hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 12vh, 6rem);
  max-width: 46rem;
}

.site-footer {
  padding-block: 1.5rem 0.5rem;
}

/* ---- Type ---------------------------------------------------------------- */

/*
  The tracked-out uppercase label. This is the one repeated typographic convention in
  the design system -- scoutr-logo.tsx:107 and Landing.tsx use it identically as
  `text-xs font-semibold tracking-widest uppercase`.
*/
.eyebrow,
.tagline {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-brand);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-bottom: 1.5rem;
}

.eyebrow-rule {
  display: block;
  height: 1px;
  width: 2.5rem;
  flex: none;
  background: var(--gold-brand);
}

h1 {
  margin: 0;
  font-size: clamp(2.25rem, 9vw, 4rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cream);
  text-wrap: balance;
}

.lede {
  margin: 1.75rem 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 2.6vw, 1.125rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--sage);
}

.lede-strong {
  margin-top: 1.25rem;
  font-weight: 600;
  color: var(--cream);
}

.tagline {
  color: var(--gold-sand);
}

/* ---- Form ---------------------------------------------------------------- */

.waitlist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
  max-width: 30rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/*
  The dark-green input, from HunterCheckout.tsx:360 -- forest-deep fill, forest-border
  hairline, gold on focus.
*/
input[type='text'],
input[type='tel'],
input[type='email'] {
  height: 48px;
  width: 100%;
  padding-inline: 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--cream);
  background-color: var(--forest-deep);
  border: 1px solid var(--forest-border);
  border-radius: var(--radius-xl);
  outline: none;
  transition:
    border-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}

input::placeholder {
  color: var(--placeholder);
}

input:hover:not(:focus) {
  border-color: #3d5f3d;
}

input:focus-visible {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgb(200 168 75 / 0.25);
}

.field.invalid input {
  border-color: #d4746a;
}

.field-error {
  margin: 0;
  padding-inline: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #e0958c;
}

/* Honeypot: out of view, out of the tab order, invisible to assistive tech. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
  height: 56px;
  width: 100%;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a1400;
  background-color: var(--gold);
  border: none;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition:
    background-color 200ms var(--ease-out),
    transform 160ms var(--ease-out);
}

.cta:hover:not(:disabled) {
  background-color: var(--gold-hover);
}

/* theme.css:262-265 -- the global press feedback, kept. */
.cta:active:not(:disabled) {
  transform: scale(0.97);
}

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

.cta:disabled {
  opacity: 0.6;
  cursor: progress;
}

.cta-arrow {
  font-size: 1.0625rem;
  line-height: 1;
}

.form-status {
  margin: 0.25rem 0 0;
  min-height: 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #e0958c;
}

.form-status:empty {
  min-height: 0;
}

/* ---- Success state ------------------------------------------------------- */

.confirmed {
  margin-top: 2.5rem;
  max-width: 30rem;
  padding: 1.75rem;
  background-color: rgb(15 31 15 / 0.7);
  border: 1px solid var(--forest-border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-xl);
}

/* Focus target only, never operated -- so no ring. */
.confirmed:focus {
  outline: none;
}

.confirmed-heading {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gold);
}

.confirmed-body {
  margin: 0.625rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--sage);
}

/* ---- Utilities ----------------------------------------------------------- */

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

[hidden] {
  display: none !important;
}

/* theme.css .animate-fade-up, with a per-element stagger. */
.animate-fade-up {
  animation: fade-up 0.5s var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-up {
    animation: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
  .cta:active:not(:disabled) {
    transform: none;
  }
}