/* ==========================================================================
   hero.css — section 1
   Every value here was measured off design/snapshots/section_1.png, not
   estimated. Numbers are design pixels at the 393px frame, expressed via
   --u so the section scales proportionally on narrower phones.
   ========================================================================== */

/* The hero does NOT sit on the page gradient — it carries its own background
   entirely, ending in flat magenta before section 2 begins at #0d043c.
   (The snapshots each include a sliver of the following section, which is what
   makes the boundaries look continuous until you sample past them.)

   Structure, measured across the frame at 13 heights: a vertical ramp, with a
   horizontal ramp laid over it whose influence decays with depth. The blue
   spread between the left and right edges collapses 79 -> 0 from top to bottom,
   so by the base the colour is uniform across the frame. That is a vertical
   gradient plus a masked horizontal one, which is exactly reproducible. */

.hero {
  position: relative;
  min-height: calc(586 * var(--u));
  overflow: hidden;
  isolation: isolate;
  /* Vertical ramp — the centre column, sampled at x = 196. */
  background-image: linear-gradient(
    180deg,
    #001555 0%,
    #011354 13%,
    #021251 20%,
    #06104f 27%,
    #0c0f4d 34%,
    #1c0c4a 47%,
    #4c105c 80%,
    #68106c 87%,
    #87137e 94%,
    #9e158a 100%
  );
}

/* Horizontal ramp. Transparent at the centre so the vertical ramp shows
   through unmodified, opaque at both edges with the exact sampled corner
   colours. The mask decays it to nothing by the base, reproducing the
   collapse of the horizontal spread. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    90deg,
    var(--hero-1) 0%,
    rgb(0 21 85 / 0) 50%,
    var(--hero-5) 100%
  );
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0) 94%);
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0) 94%);
}

/* --- Header row ------------------------------------------------------- */
/* Pill and mark both centre on y = 35.8, so the row is centre-aligned. */

.hero__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(16 * var(--u));
}

.hero__mark {
  width: calc(74 * var(--u));
  height: auto;
}

/* --- Language switcher ------------------------------------------------ */

.lang {
  position: relative;
}

.lang__toggle {
  /* Establishes the containing block for the enlarged tap target below.
     Without it, ::after resolves against .lang and is centred on the wrong box. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(46 * var(--u));
  height: calc(33 * var(--u));
  border: calc(1.5 * var(--u)) solid currentColor;
  border-radius: calc(8 * var(--u));
  font-size: calc(15 * var(--u));
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
  color: var(--color-text);
}

/* The visible control is 33px tall — below the 44px minimum tap target — so
   a transparent pseudo-element extends the hit area without altering layout. */
.lang__toggle::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}

.lang__menu {
  position: absolute;
  top: calc(100% + 6 * var(--u));
  left: 0;
  z-index: 3;
  min-width: calc(46 * var(--u));
  padding: calc(4 * var(--u));
  border: calc(1.5 * var(--u)) solid rgb(255 255 255 / 0.5);
  border-radius: calc(8 * var(--u));
  background-color: rgb(0 4 55 / 0.96);
  backdrop-filter: blur(8px);
}

.lang__menu[hidden] {
  display: none;
}

.lang__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: calc(8 * var(--u));
  border-radius: calc(5 * var(--u));
  font-size: calc(15 * var(--u));
}

.lang__link[aria-current="true"] {
  font-weight: var(--fw-bold);
}

.lang__link:hover {
  background-color: rgb(255 255 255 / 0.12);
}

/* --- Headline --------------------------------------------------------- */
/* Font sizes solved from glyph ink widths, not estimated: three headline
   strings independently gave 29.74 / 30.06 / 29.89, and both subhead strings
   gave 24.04 / 24.01. Line tops at y = 105/142/178 give a 36.5px line height;
   the subhead's 229/260 gives 31px. */

.hero__intro {
  position: relative;
  padding-top: calc(41 * var(--u));
  text-align: center;
}

.hero__title {
  font-size: calc(30 * var(--u));
  line-height: calc(36.5 / 30);
  font-weight: var(--fw-bold);
  /* Authored in sentence case and uppercased visually: screen readers
     announce all-caps source text letter by letter. */
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

/* Line tops at y = 229 and 260 give a 31px line height. */
.hero__sub {
  margin-top: calc(15 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: calc(31 / 24);
  font-weight: var(--fw-regular);
}

/* --- Artwork ---------------------------------------------------------- */
/* Placement solved by direct optimisation, not by eye: the page was rendered
   with the artwork hidden, then the asset composited over that plate at ~4,700
   candidate (width, left, top) combinations and scored against the snapshot
   over y 300-594. Colour-threshold landmarking was tried first and abandoned —
   the card's pink is indistinguishable from the section's own magenta base.
   Optimum: width 664, left -168, top 214. It bleeds off both edges. */

.hero__art {
  position: absolute;
  top: calc(214 * var(--u));
  left: 50%;
  transform: translateX(calc(-50% - 32.5 * var(--u)));
  z-index: -1;
  width: calc(664 * var(--u));
  max-width: none;
  pointer-events: none;
}