/* TrueTech Base landing page
   Architectural night: one navy ground, one line of light, hairlines instead of
   boxes. Geist variable carries the whole hierarchy through weight and scale.
   No remote assets, no runtime dependencies. */

/* ---------------------------------------------------------------- font ---- */

@font-face {
  font-family: "Geist Var";
  src: url("/assets/fonts/Geist-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------- tokens ---- */

:root {
  --ink-900: #08111b;
  --ink-800: #0d1a27;
  --ink-700: #132433;
  --navy: #1e2e3d;
  --slate: #546e87;
  --accent: #5dade2;
  --accent-hi: #3498db;

  --fg: #f2f7fb;
  --fg-2: #b3c6d6;
  --fg-3: #8aa1b6;

  --hairline: color-mix(in srgb, var(--slate) 46%, transparent);
  --hairline-lit: color-mix(in srgb, var(--accent) 62%, transparent);

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 50ch;
  --band: clamp(4.5rem, 11vh, 8.5rem);

  --sans: "Geist Var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.75s;
}

/* ---------------------------------------------------------------- reset ---- */

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

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

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 100%;
  font-weight: 350;
  line-height: 1.6;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, picture { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul { margin: 0; }
ol { padding: 0; list-style: none; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent-hi); }

::selection { background: var(--accent); color: var(--ink-900); }

/* --------------------------------------------------------------- a11y ----- */

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

.skip {
  position: absolute;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1.1rem;
  border-radius: 0.35rem;
  background: var(--accent);
  color: var(--ink-900);
  font-weight: 550;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s var(--ease);
}
.skip:focus-visible { transform: translateY(0); }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.3rem;
}

/* ----------------------------------------------------------- masthead ----- */

.masthead {
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.35rem, 3.4vh, 2.4rem) var(--gutter) 0;
}

.masthead__mark { display: block; line-height: 0; }
.masthead__mark img { width: clamp(128px, 13vw, 168px); height: auto; }
.masthead__mark:focus-visible { outline-offset: 6px; }

.masthead__state {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.34rem 0.85rem 0.38rem;
  border: 1px solid var(--hairline);
  border-radius: 100px;
  color: var(--fg-2);
  font-size: 0.75rem;
  font-weight: 450;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  background: color-mix(in srgb, var(--ink-900) 55%, transparent);
}
.masthead__state::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* --------------------------------------------------------------- hero ----- */

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  /* minmax(0, 1fr) is load-bearing: the hairline under BASE is deliberately
     wider than the viewport, and an auto-sized column would inherit that
     max-content width and push the whole copy block past the right gutter. */
  grid-template-columns: minmax(0, 1fr);
  align-content: end;
  min-height: 100svh;
  padding: calc(var(--band) + 2rem) var(--gutter) clamp(3.5rem, 9vh, 6rem);
  overflow: clip;
}

/* The page ground under the plate. On wide viewports the plate is anchored at
   its own aspect ratio, so the region above it needs its own light rather than
   a flat field. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(130% 82% at 58% 104%, color-mix(in srgb, var(--navy) 82%, transparent) 0%, transparent 62%),
    radial-gradient(70% 50% at 88% 8%, color-mix(in srgb, var(--navy) 44%, transparent) 0%, transparent 70%);
}

.hero__plate {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__plate picture {
  position: absolute;
  inset: 0;
}

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 50%;
}

/* Left-weighted scrim: the plate's own negative space is on the left, so the
   copy sits in the dark and the lit structure stays visible on the right. The
   first stop also feathers the plate's top edge into the page ground, which is
   what lets the wide layout anchor the art at its native aspect. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--ink-900) 0%, rgb(8 17 27 / 0.62) 11%, rgb(8 17 27 / 0.12) 30%, rgb(8 17 27 / 0) 46%),
    linear-gradient(0deg, var(--ink-900) 0%, rgb(8 17 27 / 0.7) 16%, rgb(8 17 27 / 0) 54%),
    linear-gradient(100deg, rgb(8 17 27 / 0.96) 0%, rgb(8 17 27 / 0.9) 26%, rgb(8 17 27 / 0.52) 52%, rgb(8 17 27 / 0.06) 84%);
}

/* Progressive enhancement only: a cool pool of light that follows a fine
   pointer. Never painted until enhance.js sets --gx/--gy. */
.hero__glow {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    38rem 38rem at var(--gx, 70%) var(--gy, 45%),
    color-mix(in srgb, var(--accent) 15%, transparent) 0%,
    transparent 62%);
  transition: opacity 0.6s var(--ease);
}
.enh-glow .hero__glow { opacity: 1; }

.hero__body {
  position: relative;
  width: min(100%, 62ch);
}

.hero__title { margin: 0 0 clamp(1rem, 2.4vh, 1.75rem); }

.hero__word {
  display: block;
  font-size: clamp(4.25rem, 16.5vw, 12rem);
  font-weight: 620;
  letter-spacing: -0.055em;
  line-height: 0.8;
  color: var(--fg);
  text-indent: -0.045em; /* optical: pull the B's stem to the gutter */
}

/* The hairline under BASE runs off the right edge, echoing the horizon line in
   the plate. This is the page's one ornament. */
.hero__title::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: clamp(1.1rem, 2.6vh, 1.9rem);
  width: 100vw;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 85%, transparent) 0%,
    color-mix(in srgb, var(--accent) 46%, transparent) 34%,
    color-mix(in srgb, var(--accent) 14%, transparent) 66%,
    transparent 88%);
}

.hero__slogan {
  font-size: clamp(1.4rem, 3.3vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: clamp(0.85rem, 2vh, 1.25rem);
}
.hero__slogan-a { font-weight: 520; color: var(--fg); }
.hero__slogan-b { font-weight: 300; color: var(--fg-2); }
/* nowrap keeps each half whole; inline-block would have eaten the word space. */
.hero__slogan-a, .hero__slogan-b { white-space: nowrap; }

.hero__lede {
  max-width: var(--measure);
  color: var(--fg-3);
  font-size: clamp(1rem, 1.05vw + 0.78rem, 1.15rem);
  line-height: 1.62;
  text-wrap: balance;
  margin-bottom: clamp(1.75rem, 4vh, 2.5rem);
}

/* A drawn cue, not a label: the hero fills the viewport, so the page has to
   say that something follows without pre-spending the motif's own words. */
.hero__cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.1rem, 3vh, 2rem);
  display: none;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  color: var(--accent);
}
.hero__cue span {
  width: 3.25rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent));
}
.hero__cue svg {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cue svg { animation: nudge 3.4s var(--ease) infinite; }
}
@keyframes nudge {
  0%, 62%, 100% { transform: translateY(0); opacity: 0.75; }
  78% { transform: translateY(4px); opacity: 1; }
}

/* ------------------------------------------------------------ controls ---- */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.92rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0.45rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 520;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.22s var(--ease), border-color 0.22s var(--ease),
    color 0.22s var(--ease), box-shadow 0.28s var(--ease), transform 0.22s var(--ease);
}

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink-900);
  font-weight: 560;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 62%, transparent);
}
.btn--primary:hover {
  --btn-bg: #7cc0ea;
  color: var(--ink-900);
  transform: translateY(-1px);
  box-shadow: 0 16px 38px -14px color-mix(in srgb, var(--accent) 78%, transparent);
}
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  border-color: var(--hairline);
  color: var(--fg);
  background: color-mix(in srgb, var(--ink-900) 40%, transparent);
}
.btn--ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--fg);
}

.btn__arrow {
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.28s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(3px); }

/* A marginal side-by-side fit is fragile at 320-400px, so the phone layout
   commits to a full-width stack with proper thumb targets. */
@media (max-width: 30em) {
  .controls { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; padding-block: 1.02rem; }
}

/* -------------------------------------------------------------- motif ----- */

.motif {
  position: relative;
  container-type: inline-size;
  padding: clamp(4.5rem, 13vh, 9rem) var(--gutter) clamp(3.75rem, 9vh, 6.5rem);
  background:
    radial-gradient(120% 90% at 78% -10%, color-mix(in srgb, var(--navy) 78%, transparent) 0%, transparent 62%),
    var(--ink-800);
}

.motif__rule {
  height: 1px;
  margin-bottom: clamp(2.75rem, 7vh, 4.5rem);
  background: linear-gradient(90deg, transparent 0%, var(--hairline) 6%, var(--hairline) 94%, transparent 100%);
  position: relative;
  overflow: hidden;
}
.motif__rule::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateX(-120%);
}

.motif__beats {
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}

.beat {
  position: relative;
  padding-top: clamp(1.1rem, 2.6vh, 1.6rem);
  border-top: 1px solid color-mix(in srgb, var(--slate) 26%, transparent);
}

.beat__word {
  font-size: clamp(2.1rem, 4.6vw, 3.35rem);
  font-weight: 600;
  letter-spacing: -0.042em;
  line-height: 1;
  margin-bottom: 0.65rem;
  color: var(--fg);
}
.beat__stop { color: var(--accent); }

.beat__line {
  max-width: 32ch;
  color: var(--fg-2);
  font-size: clamp(1rem, 0.9vw + 0.8rem, 1.1rem);
  line-height: 1.55;
}

@container (min-width: 42rem) {
  .motif__beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------- close ----- */

.close {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(5rem, 15vh, 10rem) var(--gutter);
  background: var(--ink-900);
  text-align: center;
}

.close__watermark {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: min(46rem, 118vw);
  height: auto;
  translate: -50% -50%;
  opacity: 0.055;
  /* Dissolve the mark's edges so it reads as light on the wall rather than a
     grey hexagon pasted behind the copy. */
  mask-image: radial-gradient(closest-side, #000 26%, rgb(0 0 0 / 0.35) 62%, transparent 88%);
}

.close__body {
  max-width: 44ch;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: clamp(0.9rem, 2.4vh, 1.35rem);
}

.close__title {
  font-size: clamp(2.35rem, 6vw, 3.9rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

.close__line {
  color: var(--fg-2);
  font-size: clamp(1rem, 0.9vw + 0.8rem, 1.125rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.close .controls { justify-content: center; margin-top: clamp(0.5rem, 1.6vh, 1rem); }

/* ------------------------------------------------------------- footer ----- */

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: clamp(2rem, 5vh, 3rem) var(--gutter);
  border-top: 1px solid color-mix(in srgb, var(--slate) 22%, transparent);
  background: var(--ink-900);
  color: var(--fg-3);
  font-size: 0.875rem;
}

.foot__mark { width: 132px; height: auto; opacity: 0.72; }

.foot__nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.foot__nav a {
  color: var(--fg-2);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--slate) 40%, transparent);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.foot__nav a:hover { color: var(--accent); border-color: var(--accent); }

.foot__legal { margin: 0; }

/* ------------------------------------------------------------ responsive -- */

@media (min-width: 48em) {
  .hero { align-content: center; }
  .hero__cue { display: flex; }
  .hero__plate img { object-position: 62% 50%; }
}

/* Wide viewports: stop cropping the art. The plate is 2.33:1 and a
   viewport-height cover throws away 40% of its width, including the light
   sweeping across the floor. Anchored to the bottom at its own aspect ratio it
   is shown whole, and the page ground carries the space above it. */
@media (min-width: 64em) {
  .hero { align-content: end; padding-bottom: clamp(4.5rem, 11vh, 8rem); }
  .hero__plate {
    inset: auto 0 0 0;
    aspect-ratio: 1915 / 821;
  }
  .hero__plate img { object-position: 50% 100%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, var(--ink-900) 0%, rgb(8 17 27 / 0.58) 9%, rgb(8 17 27 / 0.1) 26%, rgb(8 17 27 / 0) 42%),
      linear-gradient(100deg, rgb(8 17 27 / 0.94) 0%, rgb(8 17 27 / 0.84) 24%, rgb(8 17 27 / 0.4) 52%, rgb(8 17 27 / 0) 82%);
  }
}

@media (min-width: 80em) {
  .hero__body { width: min(100%, 56ch); }
}

/* Short landscape phones: stop the hero from becoming a scroll trap. */
@media (max-height: 34em) and (min-width: 40em) {
  .hero { min-height: auto; padding-block: calc(var(--band) + 1rem) 3rem; }
  .hero__word { font-size: clamp(3.25rem, 11vw, 6rem); }
}

/* ---------------------------------------------------------------- motion -- */

/* Reveals are opt-in: without JavaScript nothing is ever hidden. */
.enh [data-reveal] > * {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    filter var(--dur) var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.enh [data-reveal].is-in > * {
  opacity: 1;
  transform: none;
  filter: none;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motif__rule::after {
      animation: sweep linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 44%;
    }
  }
}

@keyframes sweep {
  from { transform: translateX(-120%); }
  to { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .enh [data-reveal] > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .hero__glow { display: none; }
  .motif__rule::after { display: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --fg-2: #dfe9f2;
    --fg-3: #c6d5e2;
    --hairline: color-mix(in srgb, var(--slate) 88%, transparent);
  }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgb(8 17 27 / 0.88) 0%, rgb(8 17 27 / 0.3) 30%, rgb(8 17 27 / 0.1) 50%),
      linear-gradient(0deg, var(--ink-900) 0%, rgb(8 17 27 / 0.85) 22%, rgb(8 17 27 / 0.2) 62%),
      linear-gradient(100deg, rgb(8 17 27 / 0.99) 0%, rgb(8 17 27 / 0.96) 34%, rgb(8 17 27 / 0.74) 60%, rgb(8 17 27 / 0.3) 90%);
  }
  .beat, .foot { border-color: var(--slate); }
  .btn--ghost { border-color: var(--fg-2); }
}

@media print {
  .hero__plate, .hero__glow, .hero__cue, .close__watermark { display: none; }
  body { background: #fff; color: #000; }
}