/* 3rd Eye Guyz — front door page styles.
   tokens.css is the design constitution in code: palette, type, scale,
   .wave-rule and .btn all come from there. Nothing below redefines a token. */
/* tokens.css is loaded by its own <link> in index.html, ahead of this file.
   An @import here would serialise the two requests and put a second round
   trip on the critical path — the brief requires trivially-green CWV. */

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; }

:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 2px; }
/* The `hidden` attribute is applied by the UA stylesheet, so any author
   `display` rule beats it — .form is display:flex, which left the form on
   screen after a successful signup. This restores the attribute's meaning. */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── HERO — full viewport ─────────────────────────────────────────────── */
.hero {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: clamp(3rem, 9vh, 5rem) 1.25rem clamp(2rem, 6vh, 3rem);
}

/* The art area — starfield and glyph. Grain lives here and nowhere else:
   per brand.md, art gets grain and the interface stays clean vector. */
.hero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero__vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(10,106,144,.20), transparent 70%);
}
.hero__grain { position: absolute; inset: 0; opacity: .13; mix-blend-mode: overlay; }

.lockup { display: flex; flex-direction: column; align-items: center; gap: clamp(.9rem,2.4vh,1.4rem); }
.eye { width: clamp(90px, 14vw, 150px); height: auto; display: block; }
.wordmark {
  font-size: clamp(2rem, 7.4vw, 4.25rem); font-weight: 800;
  letter-spacing: .09em; color: var(--gold); text-wrap: balance;
  margin: 0 0 0 .09em; /* optical: absorb the trailing letter-space */
}

.headline {
  font-family: var(--font-display); text-transform: uppercase;
  font-weight: 700; letter-spacing: .045em; line-height: 1.08;
  font-size: clamp(1.55rem, 4.7vw, 2.9rem);
  color: var(--text); text-wrap: balance;
  max-width: 17ch; margin: clamp(1.1rem,3.2vh,1.9rem) auto 0;
}
.subhead {
  font-size: clamp(1rem, 1.9vw, 1.1875rem); color: var(--text);
  max-width: 34ch; margin: clamp(.7rem,2vh,1.05rem) auto 0; text-wrap: balance;
}


/* ── SPEC STRIP ───────────────────────────────────────────────────────── */
.strip {
  padding: clamp(2.25rem,6vh,3.5rem) 1.25rem clamp(1.75rem,4vh,2.5rem);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(1rem,2.6vh,1.5rem);
}
.spec {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem;
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .11em;
  color: var(--gold); margin: 0; padding: 0; list-style: none;
}
.spec li { display: flex; align-items: center; gap: .9rem; }
.spec li:not(:last-child)::after {
  content: ""; width: 5px; height: 5px; background: var(--orange);
  transform: rotate(45deg); opacity: .75;
}
.proof {
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}

/* The approved divider from tokens.css. Its ::before fills the waveform mask
   with 2px vertical stripes, which at this width reads as dotted noise rather
   than a wave — so the fill is made solid here. The mask, height and colour
   token are untouched; revert this one rule to get the striped original. */
.wave-rule {
  position: absolute; top: 1.2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; width: min(88%, 32rem); margin: 0;
}
.wave-rule::before { background: var(--wave); }

/* ── TRANSMISSIONS ────────────────────────────────────────────────────── */
/* ── TRANSMISSIONS — the form sits inside the art's own negative space ── */
.transmissions {
  position: relative; overflow: hidden;
  padding: 3rem 1.25rem clamp(2rem,5vh,3rem);
  min-height: 27rem; display: flex; align-items: center;
  text-align: left;
}
.transmissions__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  /* fade top and bottom into the ink so the band has no hard edges */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 87%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 15%, #000 87%, transparent);
}
.transmissions__inner {
  position: relative; z-index: 1;
  max-width: 26rem; margin-left: clamp(0rem, 4vw, 3rem);
}
.transmissions h2 {
  font-size: clamp(1.35rem,3.4vw,2rem); color: var(--gold);
  font-weight: 700; letter-spacing: .14em; margin: 0;
}
.transmissions__lede { color: var(--text-muted); max-width: 32ch; margin: .75rem 0 0; }

.form {
  display: flex; flex-wrap: wrap; gap: .6rem;
  max-width: 26rem; margin: clamp(1.3rem,3.4vh,1.9rem) 0 0;
}
.form input[type="email"] {
  flex: 1 1 15rem; min-width: 0;
  font-family: var(--font-body); font-size: 1rem; color: var(--text);
  background: rgba(244,233,212,.05);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .75rem .9rem;
}
.form input[type="email"]::placeholder { color: rgba(157,179,196,.65); }
.form input[type="email"]:focus { border-color: var(--gold); background: rgba(244,233,212,.08); }
.btn { font-weight: 700; font-size: 1rem; }
.form__status {
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em;
  color: var(--gold); margin: 1rem 0 0; max-width: 34ch;
}
.form__caption { font-size: var(--size-small); color: var(--text-muted); margin: .9rem 0 0; }
.form__caption a { color: var(--gold); text-underline-offset: 2px; }
.form__caption a:hover { color: var(--gold-hi); }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(157,179,196,.14);
  padding: 1.5rem 1.25rem 2.25rem; text-align: center;
  font-size: var(--size-small); color: var(--text-muted);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem .85rem;
}
.footer a { color: var(--text-muted); text-decoration: none; border-bottom: 1px solid rgba(157,179,196,.3); }
.footer a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.footer__sep { opacity: .4; }
.footer .links { display: flex; align-items: center; gap: .6rem; }

/* Drift is slow enough to read as still; motion preference wins outright. */
@media (prefers-reduced-motion: no-preference) {
  .hero__stars { animation: drift 240s linear infinite; }
}
@keyframes drift { from { transform: translateY(0); } to { transform: translateY(-14px); } }

/* ── narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 46rem) {
  /* art above, form below — the side-by-side has no room on a phone */
  .transmissions { flex-direction: column; min-height: 0; text-align: center; padding-top: 2.75rem; }
  .transmissions__art {
    position: relative; inset: auto; height: 13rem; width: 100%;
    -webkit-mask-image:
      linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent),
      linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
            mask-image:
      linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent),
      linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-composite: intersect;
  }
  .transmissions__inner { margin: 1.25rem 0 0; max-width: none; }
  .transmissions__lede { margin-left: auto; margin-right: auto; }
  .form { justify-content: center; margin-left: auto; margin-right: auto; }
  .wave-rule { top: .7rem; }
}

@media (max-width: 30rem) {
  /* three beats on one line wrap into a trailing orphan separator */
  .spec { flex-direction: column; align-items: center; gap: .45rem; }
  .spec li:not(:last-child)::after { display: none; }

  /* button matches the input rather than floating narrower beneath it */
  .form input[type="email"], .btn { flex: 1 1 100%; }

  /* stack into meaningful lines instead of wrapping a lone "·" */
  .footer { flex-direction: column; gap: .55rem; }
  .footer > .footer__sep { display: none; }   /* inner one stays */
}