/* First screen, after the ShipOS reference: a tagline spread across the full
   width, the wordmark running edge to edge beneath it, and the statement on the
   baseline. The dot mark keeps its own Manrope geometry — wordmark.js measures
   it from the DOM, so it follows any size set here. */
.hero {
  /* Night ground, matching the scene's own darkest tone. The tokens flip with
     it, so the control, the rules and the copy follow without their own rules. */
  --hero-paper: #3b444d;
  --ink: #f6f6f6;
  --muted: rgb(246 246 246 / .66);
  --line: rgb(246 246 246 / .2);
  --line-dark: rgb(246 246 246 / .38);
  --surface: rgb(246 246 246 / .06);
  --architect-reveal: 1;
  --descriptor-reveal: 1;
  --statement-reveal: 1;
  --world-reveal: 1;
  min-height: 640px;
  height: 100svh;
  background: var(--hero-paper);
}

.has-js .hero:not(.hero--particles-ready):not(.hero--intro-complete) {
  --architect-reveal: 0;
  --descriptor-reveal: 0;
  --statement-reveal: 0;
  --world-reveal: 0;
}

.hero::before { display: none; }

.hero__world {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--world-reveal);
  transform: none;
  filter: none;
  transition: none;
  will-change: auto;
}

.hero--intro-complete .hero__world { opacity: 1; transform: none; }

/* Preserve the amber lighting and stone materials of the night scene. */
.hero__webgl, .hero__analytics, .hero__world-fallback { filter: none; }

.hero__veil {
  background:
    linear-gradient(180deg, rgb(24 30 38 / .44), transparent 26%, rgb(24 30 38 / .08) 68%, rgb(24 30 38 / .66));
}

/* Full bleed: the composition uses the page margin, not a column. */
.hero__content {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(20px, 3.4vh, 40px);
  padding: clamp(96px, 15vh, 168px) var(--edge) clamp(32px, 5.4vh, 56px);
  transform: none;
  text-align: left;
  color: var(--ink);
  font-family: var(--font-body);
  /* The wordmark is sized from the measure itself, so it lands flush with the
     page margin at every width instead of being tuned per breakpoint. */
  container-type: inline-size;
}

/* The tagline spreads across the full measure, as REBUILDING / AMERICAN /
   SEAPOWER does in the reference. */
.hero__descriptor,
.hero--intro-complete .hero__descriptor {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px clamp(16px, 3vw, 48px);
  width: 100%;
  max-width: none;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(15px, 2.85vw, 36px);
  font-weight: 500;
  letter-spacing: var(--track);
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  text-wrap: nowrap;
  color: var(--ink);
  opacity: var(--descriptor-reveal);
  transform: translateY(calc((1 - var(--descriptor-reveal)) * 12px));
  transition: none;
}
.hero__descriptor span { display: block; }

.hero__lockup {
  align-self: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(8px, 1.5vh, 20px);
}

.hero__identity {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 0;
  transform: none;
}

.hero__logo {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 3.02cqw;
  color: var(--ink);
  font-family: var(--font-mark);
}

.hero__letters {
  position: relative;
  display: block;
  flex: none;
  width: 2.01em;
  font-size: clamp(35px, 13.53cqw, 236px);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.045em;
}

.hero__dotmark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: var(--accent);
  opacity: 0;
}

.has-js .hero:not(.hero--intro-complete) .hero__letters,
.hero--particles-ready .hero__letters { color: transparent; }

/* One line filling the measure, the way SHIP OS fills its screen. The dot block
   is set to the same painted height as the caps beside it, which makes the mark
   1.98 of the word's size wide: 1.98 + .22 gap + 5.081 (ARCHITECT at -.045em)
   = 7.281em, so the word's size is 100cqw / 7.281 = 13.73cqw. */
.hero__architect {
  display: block;
  flex: none;
  margin: 0;
  padding-left: 0;
  font-size: clamp(35px, 13.73cqw, 225px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: .84;
  white-space: nowrap;
  opacity: var(--architect-reveal);
  transform: translateY(calc((1 - var(--architect-reveal)) * 18px));
  clip-path: inset(0 0 calc((1 - var(--architect-reveal)) * 100%) 0);
}

.hero__statement,
.hero--intro-complete .hero__statement {
  align-self: end;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  opacity: var(--statement-reveal);
  transform: translateY(calc((1 - var(--statement-reveal)) * 8px));
  transition: none;
}

.hero__statement p {
  max-width: 44ch;
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(17px, 1.65vw, 24px);
  font-weight: 500;
  letter-spacing: var(--track);
  line-height: 1.18;
  color: var(--ink);
  text-align: left;
  text-transform: none;
  text-wrap: pretty;
}

/* The credit sits on the baseline of the statement, at the far edge.
   Scoped through the parent so it outranks `.hero__statement p`. */
.hero__statement .hero__credit {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.4vw, 22px);
  max-width: 46%;
  margin: 0;
  font-size: clamp(11px, .92vw, 14px);
  font-weight: 500;
  letter-spacing: var(--track);
  line-height: 1.25;
  text-transform: uppercase;
  /* The grey of the Skolkovo mark standing next to it. */
  color: #8b8b8b;
  text-align: right;
}
.hero__statement .hero__credit span { max-width: 22ch; }
.hero__statement .hero__credit-logo {
  flex: 0 0 auto;
  width: auto;
  height: clamp(38px, 3.6vw, 54px);
  display: block;
}

.hero__particles {
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__motion {
  top: 16px;
  bottom: auto;
  left: var(--edge);
  right: auto;
  z-index: 7;
  color: var(--ink);
  border-color: var(--line-dark);
  border-radius: 0;
  background: rgb(16 22 34 / .58);
}

.hero:not(.hero--intro-complete) .hero__motion { visibility: hidden; }
.has-js .site-header:not(.site-header--intro-complete) { opacity: 0; pointer-events: none; }
html:not(.has-js) .site-header--intro { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .hero__descriptor,
  .hero--intro-complete .hero__descriptor { justify-content: flex-start; text-wrap: pretty; }
}

@media (max-width: 700px) {
  .hero { min-height: 680px; }
  .hero__world { inset: 0; width: 100%; height: 100%; }
  .hero__content {
    padding: 92px var(--gutter) 40px;
    gap: 24px;
  }
  .hero__descriptor,
  .hero--intro-complete .hero__descriptor {
    display: block;
    max-width: 22ch;
    font-size: clamp(17px, 5.2vw, 24px);
    line-height: 1.05;
  }
  .hero__descriptor span { display: inline; }
  .hero__statement,
  .hero--intro-complete .hero__statement { display: block; }
  .hero__statement p { max-width: 30ch; font-size: 17px; line-height: 1.25; }
  .hero__statement .hero__credit { max-width: none; margin-top: 22px; justify-content: flex-start; text-align: left; }
  .hero__statement .hero__credit span { max-width: 26ch; }
  .hero__veil {
    background:
      linear-gradient(180deg, rgb(24 30 38 / .48), transparent 24%, rgb(24 30 38 / .12) 62%, rgb(24 30 38 / .72));
  }
  .hero__motion { top: 10px; bottom: auto; left: var(--gutter); right: auto; }
}

@media (max-height: 690px) and (min-width: 701px) {
  .hero { min-height: 560px; }
  .hero__content { padding-top: 96px; gap: 18px; }
  .hero__descriptor,
  .hero--intro-complete .hero__descriptor { font-size: clamp(14px, 2.1vw, 24px); }
  .hero__statement p { font-size: 18px; }
}