/*
 * wooary parallax hero.
 *
 * Implements the depth-sorted layer approach from the parallax blueprint, adapted from
 * its React/Tailwind assumption to this stack: MacCMS renders server-side through the
 * ThinkPHP5 template engine, so there is no React and no Tailwind here. The effect is
 * plain CSS transforms driven by one rAF-throttled scroll listener.
 *
 * Stacking order (matches the blueprint's z-index logic):
 *   back  (10)  sky photograph          - slowest, moves ~12% of scroll
 *   mid   (15)  skyline, dim + blurred  - medium, ~28%
 *   text  (20)  headline + CTAs         - ~45%, fades out as it leaves
 *   front (30)  skyline, solid + sharp  - fastest, ~70%, pointer-events:none
 *
 * The same 19KB SVG serves both skyline layers at different scale/tint/blur. Shipping
 * one file twice is far cheaper than two near-identical assets, and it guarantees the
 * two ridgelines are the same shape, which is what sells the depth.
 */

.wa-hero {
  position: relative;
  min-height: clamp(520px, 82vh, 900px);
  overflow: hidden;
  background: var(--wa-ink);
  display: flex;
  align-items: center;
  isolation: isolate;          /* keep hero z-indexes out of the page stacking context */
}

.wa-hero__layer {
  position: absolute;
  inset-inline: 0;
  will-change: transform;      /* promote once, not on every frame */
}

/* ---------- back: sky ---------- */
.wa-hero__back {
  z-index: var(--wa-z-hero-back);
  top: -8%;                    /* overscan, so the parallax offset never reveals an edge */
  height: 116%;
  background-image: var(--wa-hero-sky);
  background-size: cover;
  background-position: center 30%;
}

/* Scrim: the headline must stay legible over an arbitrary photograph. Two gradients -
   one vertical for text contrast, one radial to pull focus toward the centre. */
.wa-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: calc(var(--wa-z-hero-back) + 1);
  background:
    linear-gradient(to bottom,
      rgba(11,13,18,.72) 0%,
      rgba(11,13,18,.30) 38%,
      rgba(11,13,18,.65) 72%,
      var(--wa-ink) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 35%, rgba(11,13,18,.55) 100%);
  pointer-events: none;
}

/* ---------- skyline layers ---------- */
.wa-hero__skyline {
  display: block;
  inline-size: 100%;
  block-size: auto;
  pointer-events: none;
}

.wa-hero__mid {
  z-index: var(--wa-z-hero-mid);
  bottom: 4%;
  color: #161A23;              /* silhouette uses currentColor */
  opacity: .85;
  filter: blur(1.5px);         /* atmospheric perspective: distance reads as softness */
  --wa-scale: 1.06;            /* read back by hero.js so translate does not drop it */
  transform: scale(var(--wa-scale));
}

.wa-hero__front {
  z-index: var(--wa-z-hero-front);
  bottom: -1px;                /* seal the seam against the section below */
  color: var(--wa-ink);
  --wa-scale: 1.22;
  transform: scale(var(--wa-scale));
  transform-origin: bottom center;
  pointer-events: none;        /* blueprint: never block the CTAs behind it */
}

/* ---------- text ---------- */
.wa-hero__inner {
  position: relative;
  z-index: var(--wa-z-hero-text);
  inline-size: 100%;
  max-inline-size: var(--wa-max);
  margin-inline: auto;
  padding-inline: var(--wa-gut);
  padding-block: var(--wa-8) var(--wa-9);
  text-align: center;
}

.wa-hero__eyebrow {
  font-size: var(--wa-t-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--wa-amber);
  margin-block-end: var(--wa-3);
  font-weight: 600;
}
/* Uppercase + wide tracking is a Latin typographic device; it damages Arabic and
   Persian, which have no case and connect their letters. */
[dir="rtl"] .wa-hero__eyebrow { text-transform: none; letter-spacing: .06em; }

.wa-hero__title {
  font-family: var(--wa-font-display);
  font-size: var(--wa-t-hero);
  line-height: var(--wa-lh-tight);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--wa-bone);
  margin: 0 0 var(--wa-4);
  text-shadow: 0 4px 40px rgba(0,0,0,.65);
}
[dir="rtl"] .wa-hero__title { letter-spacing: 0; }

.wa-hero__title em {
  font-style: normal;
  background: linear-gradient(120deg, var(--wa-amber-lt), var(--wa-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wa-hero__sub {
  font-size: var(--wa-t-body);
  line-height: var(--wa-lh-body);
  color: var(--wa-mute);
  max-inline-size: 62ch;
  margin-inline: auto;
  margin-block-end: var(--wa-6);
}

.wa-hero__cta { display: flex; gap: var(--wa-3); justify-content: center; flex-wrap: wrap; }

/* ---------- language pills ---------- */
.wa-hero__langs {
  margin-block-start: var(--wa-6);
  display: flex; gap: var(--wa-2); justify-content: center; flex-wrap: wrap;
}
.wa-hero__lang {
  font-size: var(--wa-t-xs);
  padding: 6px 14px;
  border-radius: var(--wa-r-pill);
  border: 1px solid var(--wa-line);
  color: var(--wa-mute);
  background: rgba(18,21,28,.6);
  backdrop-filter: blur(8px);
  transition: color var(--wa-fast) var(--wa-ease),
              border-color var(--wa-fast) var(--wa-ease);
}
.wa-hero__lang:hover,
.wa-hero__lang[aria-current="true"] { color: var(--wa-amber); border-color: var(--wa-amber); }

/* ---------- mobile ----------
   Blueprint Phase 7: parallax is unreliable on mobile browsers - iOS Safari in
   particular throttles scroll events during momentum, which turns the effect into
   visible stepping. Below 820px the JS stops writing transforms (see hero.js) and the
   layers are pinned, so the hero degrades to a clean static composition. */
@media (max-width: 820px) {
  .wa-hero { min-height: 74vh; }
  .wa-hero__mid   { filter: none; opacity: .9; --wa-scale: 1.15; transform: scale(var(--wa-scale)); }
  .wa-hero__front { --wa-scale: 1.5; transform: scale(var(--wa-scale)); }
  .wa-hero__inner { padding-block: var(--wa-7) var(--wa-8); }
  .wa-hero__sub   { display: none; }   /* protect the fold on small screens */
}