/* 10 Hero (#uvod): the page's first impression and its only h1.
   A full-viewport photo runs under the fixed header; the copy sits bottom-left on an ink
   scrim inside a HUD frame, with a band of four readouts at its foot. On portrait screens
   the photo becomes a band at the top and the copy runs on from its faded lower edge.
   Everything outside .ar-motion is the final state; motion only adds the way there. */

.ar-hero {
  --ar-hero-inset: calc(var(--ar-gutter) / 2);
  /* Phones and portrait tablets: the photo band, never shorter than the whole picture. */
  --ar-hero-band: max(56svh, 100vw * 954 / 1649);
  /* How far the copy climbs into the band's faded lower edge. */
  --ar-hero-lift: 6.5rem;
  --ar-hero-ink: var(--wp--preset--color--ink);
  /* On-screen-display shadow for small type on the photo: whatever the crop puts behind it. */
  --ar-hero-osd:
    0 0 1px color-mix(in srgb, var(--ar-hero-ink) 90%, transparent),
    0 1px 2px color-mix(in srgb, var(--ar-hero-ink) 85%, transparent),
    0 0 0.75rem color-mix(in srgb, var(--ar-hero-ink) 75%, transparent);
  display: grid;
  align-content: end;
  min-height: 100vh;
  min-height: 100svh;
  /* The bottom padding grows with tall screens: the runtime reveals only above 90 % of the
     viewport (and fade-up starts 1.5 rem low), so a band hugging the bottom edge of a tall
     viewport would stay hidden until the first scroll. */
  padding-block:
    calc(var(--ar-hero-band) - var(--ar-hero-lift))
    max(var(--ar-hero-inset) + var(--wp--preset--spacing--30), 10vh - 4rem);
  isolation: isolate;
  background-color: var(--ar-hero-ink);
}

/* 1. Photo, scrim, grain */

.ar-hero__media {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: var(--ar-hero-band);
  overflow: hidden;
  /* Ink under the photo: the scrim deepens towards it and it stands in if the image fails. */
  background-color: var(--ar-hero-ink);
}

.ar-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* In the band the crop leans right: the platform heads for the helicopter crew. */
  object-position: 70% 50%;
}

/* Scrim and vignette in one layer: top for the header and HUD labels, bottom for the copy. */
.ar-hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--ar-hero-ink) 86%, transparent) 0,
      color-mix(in srgb, var(--ar-hero-ink) 66%, transparent) var(--wp--custom--header--height),
      color-mix(in srgb, var(--ar-hero-ink) 30%, transparent) calc(var(--wp--custom--header--height) + 3.5rem),
      transparent 48%),
    linear-gradient(to top,
      var(--ar-hero-ink) 0,
      color-mix(in srgb, var(--ar-hero-ink) 92%, transparent) 14%,
      color-mix(in srgb, var(--ar-hero-ink) 64%, transparent) 30%,
      color-mix(in srgb, var(--ar-hero-ink) 28%, transparent) 46%,
      transparent 62%),
    radial-gradient(130% 95% at 50% 42%, transparent 55%, color-mix(in srgb, var(--ar-hero-ink) 60%, transparent) 100%);
}

/* Grain (.ar-grain) sits above photo and scrim, and fades out with the band's lower edge
   so the band meets the plain ink below without a seam. */
.ar-hero__media::after {
  z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, var(--ar-hero-ink) 55%, transparent);
  mask-image: linear-gradient(to bottom, var(--ar-hero-ink) 55%, transparent);
}

/* 2. HUD frame: brackets on ::before (.ar-hud-frame), two labels along the top edge */

.ar-hero__hud {
  position: absolute;
  inset: calc(var(--wp--custom--header--height) + var(--ar-hero-inset)) var(--ar-hero-inset) auto;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  /* On phones the frame holds the photo band only. */
  height: calc(var(--ar-hero-band) - var(--ar-hero-lift) - var(--wp--custom--header--height) - 2 * var(--ar-hero-inset));
  padding: 0.75rem calc(var(--ar-gutter) - var(--ar-hero-inset));
  color: var(--ar-fg);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--wp--custom--tracking--wide);
  text-transform: uppercase;
  text-shadow: var(--ar-hero-osd);
  pointer-events: none;
}

.ar-hero__hud-tr {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* 3. Copy */

.ar-hero__content,
.ar-hero__stats,
.ar-hero__caption {
  position: relative;
  z-index: 2;
  max-width: var(--ar-container-wide);
}

.ar-hero__content {
  display: grid;
  justify-items: start;
}

/* Over the photo the muted silver of an eyebrow is too faint; mist carries it, and the
   OSD shadow keeps it clear of whatever the crop puts behind it on very wide screens. */
.ar-hero__content .ar-eyebrow {
  color: var(--wp--preset--color--mist);
  text-shadow: var(--ar-hero-osd);
}

.ar-hero__title {
  margin-block-start: 0.875rem;
  font-size: var(--ar-display-xl);
  line-height: 0.92;
  letter-spacing: var(--wp--custom--tracking--tight);
  /* A soft shade keeps the strokes clear where the crop puts the white fuselage behind them. */
  text-shadow: 0 0 0.3em color-mix(in srgb, var(--ar-hero-ink) 45%, transparent);
}

.ar-hero__subtitle {
  margin-block-start: var(--wp--preset--spacing--30);
  color: var(--ar-fg);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--heading-m);
  font-weight: 400;
  line-height: var(--wp--custom--leading--tight);
  text-wrap: balance;
}

/* Three short claims on one line, a hairline after each but the last; a claim that
   wraps keeps its hairline at the end of the line, so no line opens with a dash
   (below 560 px the hairlines go: there the claims wrap anyway). */
.ar-hero__claim {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
  margin-block-start: var(--wp--preset--spacing--30);
  color: var(--wp--preset--color--mist);
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--heading-s);
  font-weight: 700;
  line-height: var(--wp--custom--leading--snug);
}

.ar-hero__claim > span {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.ar-hero__claim > span:not(:last-child)::after {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 1px;
  background-color: var(--ar-fg-muted);
}

.ar-hero__lead {
  margin-block-start: var(--wp--preset--spacing--40);
}

.ar-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--wp--preset--spacing--40);
}

/* 4. Readout band */

.ar-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
  margin-block-start: var(--wp--preset--spacing--60);
}

/* The band's hairline spans the content edges, not the container's gutters. */
.ar-hero__stats::before {
  content: "";
  position: absolute;
  inset: 0 var(--ar-gutter) auto;
  height: 1px;
  background-color: var(--ar-line-strong);
}

/* Readouts on the band keep only their lit tick; the band draws the line. */
.ar-hero__stats .ar-readout:nth-child(-n + 2) {
  background-size: 1.5rem 1px, 0 1px;
}

.ar-hero__caption {
  width: 100%;
  margin-inline: auto;
  margin-block-start: var(--wp--preset--spacing--30);
  padding-inline: var(--ar-gutter);
  text-align: end;
}

@media (max-width: 559.98px) {
  /* Phones stack or wrap the claims, so a hairline would dangle at a line end. */
  .ar-hero__claim > span:not(:last-child)::after {
    display: none;
  }

  .ar-hero__actions {
    justify-self: stretch;
  }

  .ar-hero__actions .ar-btn {
    flex: 1 1 100%;
  }
}

@media (min-width: 768px) {
  .ar-hero__stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ar-hero__stats .ar-readout {
    background-size: 1.5rem 1px, 0 1px;
  }
}

/* Landscape screens (laptops, landscape tablets and phones): the photo fills the hero and
   the copy sits bottom-left on it. Portrait screens keep the band, which shows the whole
   width of the picture instead of a narrow slice of it. */
@media (min-width: 600px) and (min-aspect-ratio: 6/5) {
  .ar-hero {
    padding-block-start: calc(var(--wp--custom--header--height) + var(--ar-hero-inset) + 3.5rem);
  }

  .ar-hero__media {
    inset: 0;
    height: auto;
  }

  .ar-hero__img {
    object-position: 50% 50%;
  }

  .ar-hero__media::after {
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* Length stops from the bottom follow the bottom-aligned copy at any viewport height.
     The left layer tames the low sun, which sits right behind the eyebrow and the h1. */
  .ar-hero__media::before {
    background-image:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--ar-hero-ink) 84%, transparent) 0,
        color-mix(in srgb, var(--ar-hero-ink) 62%, transparent) var(--wp--custom--header--height),
        color-mix(in srgb, var(--ar-hero-ink) 26%, transparent) 20%,
        transparent 34%),
      linear-gradient(to top,
        color-mix(in srgb, var(--ar-hero-ink) 96%, transparent) 0,
        color-mix(in srgb, var(--ar-hero-ink) 90%, transparent) 9rem,
        color-mix(in srgb, var(--ar-hero-ink) 74%, transparent) 19rem,
        color-mix(in srgb, var(--ar-hero-ink) 46%, transparent) 28rem,
        color-mix(in srgb, var(--ar-hero-ink) 18%, transparent) 36rem,
        transparent 46rem),
      linear-gradient(to right,
        color-mix(in srgb, var(--ar-hero-ink) 72%, transparent) 0,
        color-mix(in srgb, var(--ar-hero-ink) 60%, transparent) 22%,
        color-mix(in srgb, var(--ar-hero-ink) 28%, transparent) 46%,
        transparent 68%),
      radial-gradient(120% 110% at 60% 38%, transparent 50%, color-mix(in srgb, var(--ar-hero-ink) 60%, transparent) 100%);
  }

  .ar-hero__hud {
    bottom: var(--ar-hero-inset);
    height: auto;
    letter-spacing: var(--wp--custom--tracking--wider);
  }

  .ar-hero__stats {
    margin-block-start: var(--wp--preset--spacing--50);
  }

  .ar-hero__stats .ar-readout__value {
    font-size: var(--wp--preset--font-size--heading-l);
  }
}

/* Wide screens: the lead and the two actions share the bottom row. */
@media (min-width: 1280px) {
  .ar-hero__content {
    grid-template-columns: minmax(0, 46rem) auto;
    justify-content: space-between;
    column-gap: var(--wp--preset--spacing--60);
  }

  .ar-hero__content > * {
    grid-column: 1 / -1;
  }

  .ar-hero__content > .ar-hero__lead {
    grid-column: 1;
  }

  .ar-hero__content > .ar-hero__actions {
    grid-column: 2;
    align-self: end;
    justify-self: end;
  }
}

/* 5. Motion (only behind the gate) */

/* The settle-in zoom stays on `transform` (the overflow check lifts it); the parallax runs
   on `translate`, vertical only.
   At rest the composition is the reduced-motion one on every viewport. Progress is not 0
   there but vh / (vh + H), which depends on the layout (0.5 for a full-viewport hero, about
   0.64 for the phone band), so the shift is the scroll distance since rest, read back from
   progress: p × (vh + H) − vh, where 100% in `translate` is the photo's own height H, the
   same box the runtime measures. It is 0 at the top of the page and H once the hero has
   left, so the photo lags by 12 % of that. The fade towards the ink base (the scrim
   deepening) waits until progress 0.7, above any resting value the layouts allow.
   Until the runtime sets a progress both properties are invalid and fall back to rest. */
.ar-motion .ar-hero__img {
  --ar-hero-shift: calc((var(--ar-progress) * (100dvh + 100%) - 100dvh) * 0.12);
  --ar-hero-fade: calc(1 - clamp(0, (var(--ar-progress) - 0.7) * 1.8, 0.55));
  translate: 0 var(--ar-hero-shift, 0px) 0;
  opacity: var(--ar-hero-fade, 1);
  animation: ar-hero-settle 2400ms var(--ar-ease-expo) both;
  will-change: transform, translate, opacity;
}

@keyframes ar-hero-settle {
  from {
    transform: scale(1.08);
  }

  to {
    transform: none;
  }
}

/* HUD brackets close in and draw their arms, then the labels type on. */
.ar-motion .ar-hero__hud::before {
  animation: ar-hero-frame var(--ar-dur-long) var(--ar-ease-expo) 150ms both;
}

@keyframes ar-hero-frame {
  from {
    opacity: 0;
    transform: scale(1.03);
    background-size: 0 1px, 1px 0, 0 1px, 1px 0, 0 1px, 1px 0, 0 1px, 1px 0;
  }
}

/* Both ends are inset() shapes, so the wipe interpolates (inset to none would only jump);
   the negative insets leave room for the text shadow and the live dot's ping, and the
   backwards fill drops the clip once the labels are out. */
.ar-motion .ar-hero__hud > span {
  animation: ar-hero-type var(--ar-dur-long) var(--ar-ease-expo) 450ms backwards;
}

.ar-motion .ar-hero__hud > span + span {
  animation-delay: 600ms;
}

@keyframes ar-hero-type {
  from {
    clip-path: inset(-0.75rem 100% -0.75rem -0.75rem);
  }

  to {
    clip-path: inset(-0.75rem);
  }
}

/* The band's hairline draws from the left as the first readout arrives. */
.ar-motion .ar-hero__stats::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--ar-dur-long) var(--ar-ease-expo);
}

.ar-motion .ar-hero__stats:has(.is-revealed)::before {
  transform: none;
}