/* ============================================================================
   Eyas — 01 Hero
   Cinematic, wide, editorial. Layered glacier + crystalline falcon + steel glow.
   Foreground copy left-aligned (~55%). All custom classes prefixed .hero-.
   Default CSS state = the FINAL, visible state (no-JS / reduced-motion safe).
   JS adds .hero--anim to set the FROM-state, then GSAP animates back to visible.
   ========================================================================== */

.hero {
  --hero-nav-h: 76px;                /* room for the fixed nav */
  position: relative;               /* anchor for the bg layers + corner kicker */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 16vh, 11rem) clamp(4rem, 9vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

/* ── Background layers ─────────────────────────────────────────────────── */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 1. Glacier — full-bleed cover, slow ambient pan (CSS) + parallax (JS) */
.hero-bg__glacier {
  position: absolute;
  inset: -6% -8%;
  background:
    url("/img/brand/glacier-bg.webp") center 30% / cover no-repeat,
    var(--bg-deep);
  transform-origin: center;
  animation: hero-pan 46s ease-in-out infinite alternate;
  will-change: transform;
  filter: saturate(0.92) brightness(0.78);
}
@keyframes hero-pan {
  0%   { transform: scale(1.06) translate3d(-1.2%, -0.8%, 0); }
  100% { transform: scale(1.12) translate3d(1.4%, 0.6%, 0); }
}

/* Scrim gradient — darken for >=4.5:1 text contrast on the left.
   First layer = soft top vignette: diffusely fades the hard upper edge of the
   image into the dark space beneath the nav. */
.hero-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(135% 64% at 50% -6%,
      rgba(5,7,13,0.82) 0%, rgba(5,7,13,0.30) 34%, transparent 62%),
    linear-gradient(90deg,
      rgba(5,7,13,0.94) 0%, rgba(5,7,13,0.82) 28%,
      rgba(6,9,18,0.58) 46%, rgba(7,11,22,0.30) 66%,
      rgba(7,11,22,0.12) 86%, transparent 100%),
    linear-gradient(0deg,
      rgba(5,7,13,0.82) 0%, rgba(5,7,13,0.10) 36%, transparent 70%);
}

/* 2. Breathing steel glow behind the falcon (right side) */
.hero-bg__glow {
  position: absolute;
  top: 50%;
  right: 6%;
  width: min(60vw, 760px);
  height: min(60vw, 760px);
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
    rgba(175,200,228,0.34) 0%, rgba(175,200,228,0.14) 38%,
    rgba(110,138,171,0.05) 60%, transparent 74%);
  filter: blur(8px);
  animation: hero-breathe 7.5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes hero-breathe {
  0%, 100% { opacity: 0.55; transform: translateY(-50%) scale(0.97); }
  50%      { opacity: 1;    transform: translateY(-50%) scale(1.04); }
}

/* 3. The cinematic falcon — right, large.
   It is a rectangular image (not a cutout), so a radial feather mask dissolves
   its hard edges into the dark page instead of showing an inserted rectangle. */
.hero-bg__falcon {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(68vw, 1080px);
  height: auto;
  transform: translateY(-50%);
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,0.55));
  -webkit-mask-image: radial-gradient(76% 100% at 82% 44%, #000 40%, rgba(0,0,0,0.4) 70%, transparent 100%);
          mask-image: radial-gradient(76% 100% at 82% 44%, #000 40%, rgba(0,0,0,0.4) 70%, transparent 100%);
  will-change: transform, opacity, filter;
}

/* 4. Localized aurora haze + left vignette */
.hero-bg__aurora {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 78% 28%, rgba(226,238,250,0.10) 0%, transparent 46%),
    radial-gradient(100% 80% at 12% 80%, rgba(110,138,171,0.10) 0%, transparent 50%);
  mix-blend-mode: screen;
  opacity: 0.9;
}
.hero-bg__left {
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at -6% 50%, rgba(5,7,13,0.72) 0%, transparent 52%);
}

/* ── Foreground ───────────────────────────────────────────────────────── */
.hero-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-copy {
  max-width: 58ch;
  width: min(100%, 760px);
}

/* Eyebrow as a top-left corner kicker, aligned to the content column and laid
   over the dark upper corner of the image so it always reads cleanly. */
.hero-eyebrow {
  position: absolute;
  top: calc(var(--hero-nav-h) + var(--sp-3));
  left: calc((100% - min(100%, var(--container))) / 2 + var(--gutter));
  z-index: 2;
  margin: 0;
  text-shadow: 0 1px 16px rgba(5,7,13,0.9);
}

.hero-title {
  /* Heavier display weight for the weight-contrast against the 400 subline
     (the global .display token sits lighter). Solid color, never gradient. */
  font-weight: 700;
  margin-bottom: var(--sp-5);
}
/* Flex-wrap so wrapped lines stay flush-left: word spacing via column-gap does
   NOT leave a hanging indent on wrapped lines (the old margin-left did, which
   pushed every line except the first one inward). */
.hero-title__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.24em;
  row-gap: 0.06em;
}
.hero-word {
  display: inline-block;          /* per-word reveal in the load timeline */
}
.hero-word--accent {
  color: var(--accent);           /* solid steel, NOT gradient text */
  text-shadow: 0 0 38px rgba(175,200,228,0.35);
}

.hero-lead {
  /* Calmer subline: stepped down from the .lead scale and muted so it reads as
     secondary to the display title rather than a competing subhead. */
  max-width: 52ch;
  margin-bottom: var(--sp-7);
  font-size: var(--fs-body);
  font-weight: 400;        /* clearly lighter than the 700 display headline */
  line-height: 1.6;
  color: var(--text-lo);
}

/* CTA row */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}

/* Trust row */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  list-style: none;
  color: var(--text-mid);
  font-size: var(--fs-sm);
}
.hero-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  position: relative;
}
.hero-trust__item + .hero-trust__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-5) / 2 - 1px);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
}
.hero-trust__icon {
  color: var(--accent);
  flex: none;
}

/* ── Scroll cue ───────────────────────────────────────────────────────── */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.5vh, 2.5rem);
  transform: translateX(-50%);
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-lo);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  transition: color var(--dur-base) var(--ease);
}
.hero-scroll:hover { color: var(--text-mid); }
.hero-scroll__line {
  position: relative;
  width: 1px;
  height: 44px;
  background: linear-gradient(180deg, rgba(186,212,240,0.30), transparent);
  overflow: hidden;
}
.hero-scroll__line::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 40%;
  background: linear-gradient(180deg, var(--accent), transparent);
  animation: hero-scroll-drop 2.2s var(--ease) infinite;
}
@keyframes hero-scroll-drop {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(160%); opacity: 0; }
}

/* ── Cinematic load: FROM-state (only when JS is active) ──────────────── */
/* Default (above) is the visible final state, so no-JS users see everything. */
.hero--anim .hero-bg__glacier,
.hero--anim .hero-bg__falcon,
.hero--anim .hero-bg__glow,
.hero--anim .hero-eyebrow,
.hero--anim .hero-title__line .hero-word,
.hero--anim .hero-lead,
.hero--anim .hero-cta > *,
.hero--anim .hero-trust__item,
.hero--anim .hero-scroll {
  opacity: 0;
}

/* ════════════════════════════════════════════════════════════════════════
   CINEMATIC DESKTOP HERO (>=901px) — full-bleed key visual, not a floating object
   The bespoke 16:9 key visual is a COMPLETE composed frame: a crystalline ice
   falcon on the right, dark aurora negative space on the left, ice-mist on the
   floor. Treating it as a 68vw object in the right half (with a radial mask, on
   top of a separate glacier) made it read as an inserted rectangle. Here it
   becomes the full-bleed cinematic stage: the title is seated in the real
   dark-left of the frame and the falcon's glowing eye is the focal counterweight
   on the right. The competing glacier layer is retired. Mobile (<=900) untouched.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* the key visual is its own complete scene; the glacier only competed with it */
  .hero-bg__glacier { display: none; }

  /* full-bleed cinematic cover, no mask, no float */
  .hero-bg__falcon {
    inset: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: 66% 40%;   /* bias right so the eye stays in frame, keep dark-left */
    -webkit-mask-image: none;
            mask-image: none;
  }

  /* cinematic scrim: deep shadow under the title on the left, falcon stays vivid
     on the right; a floor vignette grounds the frame, a top fade dissolves the
     image beneath the nav. */
  .hero-bg__scrim {
    background:
      linear-gradient(90deg,
        rgba(5,7,13,0.95) 0%, rgba(5,7,13,0.88) 22%,
        rgba(5,7,13,0.66) 40%, rgba(6,9,18,0.34) 56%,
        rgba(7,11,22,0.08) 74%, transparent 90%),
      linear-gradient(0deg,
        rgba(5,7,13,0.82) 0%, rgba(12,20,34,0.20) 18%, transparent 44%),
      linear-gradient(180deg,
        rgba(5,7,13,0.74) 0%, transparent 18%);
  }

  /* Push the key visual into the background so the title leads. This layer
     paints on TOP of the falcon (the scrim/glow sit behind the opaque image and
     can't dim it; GSAP overrides the image's own opacity/filter on load). The
     veil is a touch heavier on the right where the falcon sits, and the lower-
     left corner is deepened for the eyebrow + title + meta row. Text lives in
     .hero-wrap above all of this, so it stays at full strength. */
  .hero-bg__left {
    background:
      linear-gradient(90deg,
        rgba(5,7,13,0.40) 0%, rgba(5,7,13,0.34) 46%, rgba(5,7,13,0.56) 100%),
      radial-gradient(78% 116% at -6% 46%, rgba(4,6,12,0.82) 0%, transparent 58%);
  }

  /* the breathing glow rides over the falcon's eye as a living accent
     (keeps the base translateY(-50%) + hero-breathe keyframe).
     Position auf das Auge des neuen Key-Visuals kalibriert (~78% x, ~30% y). */
  .hero-bg__glow {
    top: 33%;
    right: 7%;
    width: min(30vw, 420px);
    height: min(30vw, 420px);
  }

  /* title seated in the dark-left, controlled measure so it never runs under
     the falcon (baseline for the 901-1023 band; >=1024 refines further) */
  .hero-copy {
    width: min(54%, 660px);
    max-width: 60ch;
  }
  .hero-title {
    font-size: clamp(3rem, 5.8vw, 5.2rem);
    margin-bottom: var(--sp-6);
  }
  /* From 901px up the subline can run over the lighter falcon image zone, where
     --text-lo can dip under 4.5:1. Lift the floor to --text-mid here already
     (>=1024 refines further), so contrast holds across the whole desktop band. */
  .hero-lead {
    color: var(--text-mid);
  }
}

/* ── Desktop polish (>=1024px) ───────────────────────────────────────────
   Asymmetric two-column composition (Linear / Arc'teryx register): a confident
   text column at ~50-52% of the measure, optically centered against the falcon
   key-visual on the right. Tighten vertical rhythm, lift the lead to a more
   readable tone, and keep the headline cinematic without wrapping awkwardly at
   1440. Mobile rules below are untouched. */
@media (min-width: 1024px) {
  .hero {
    /* Match the (slightly taller, padded) desktop nav so the corner eyebrow
       clears the frosted rail with intentional breathing room. */
    --hero-nav-h: 96px;
    /* Nudge the whole block a hair below true center so it reads as optically
       centered against the falcon (whose visual mass sits slightly high). */
    align-items: center;
    padding-block: clamp(8rem, 17vh, 12rem) clamp(5rem, 10vh, 8rem);
  }
  /* Text column: a controlled measure that uses the left half of the stage and
     leaves the falcon room to breathe on the right, never running full-bleed. */
  .hero-copy {
    max-width: 60ch;
    width: min(52%, 720px);
  }
  /* Slightly smaller display ceiling than the global token so "Become / the
     falcon / that waits." breaks into a clean three-line cadence at 1440
     instead of an oversized awkward wrap. */
  .hero-title {
    font-size: clamp(3.8rem, 6vw, 6.4rem);
    letter-spacing: var(--tracking-tight);
    margin-bottom: var(--sp-6);
  }
  /* The lead is secondary, but it must stay legible. Lift one step from faint
     to mid and hold a tight 46ch measure so it never sprawls. */
  .hero-lead {
    /* 42ch statt 46ch: die Subline endet vor dem Schnabel des Falken,
       statt in die helle Bildflaeche zu laufen */
    max-width: 42ch;
    font-size: var(--fs-lead);
    line-height: 1.58;
    color: var(--text-mid);
    margin-bottom: var(--sp-8);
  }
  .hero-cta { margin-bottom: var(--sp-7); }
  /* Scroll-Cue: parked at the content column's left edge so it whispers,
     but stays VERTICAL (line + drop point down, same as mobile). The earlier
     horizontal variant read as "scroll sideways". */
  .hero-scroll {
    left: calc((100% - min(100%, var(--container))) / 2 + var(--gutter));
    transform: none;
    align-items: flex-start;
    color: var(--text-faint);
    font-size: var(--fs-eyebrow);
    letter-spacing: var(--tracking-wider);
  }
  .hero-scroll__line { margin-left: 1.4em; }
}

/* Ultra-wide (>=1440px): give the headline a touch more presence and widen the
   text column's right-hand gap so the falcon bleeds generously off the edge. */
@media (min-width: 1440px) {
  .hero-copy { width: min(52%, 820px); }
  .hero-title { font-size: clamp(5rem, 5.4vw, 7rem); }
}

/* ── Responsive: <= 900px single column, falcon becomes a backdrop ────── */
@media (max-width: 900px) {
  .hero {
    align-items: flex-end;
    padding-block: clamp(8rem, 22vh, 12rem) clamp(5rem, 12vh, 8rem);
  }
  .hero-bg__falcon {
    top: 26%;
    right: 50%;
    width: min(124vw, 720px);
    transform: translate(50%, -50%);
    opacity: 0.38;
    filter: drop-shadow(0 18px 50px rgba(0,0,0,0.5)) saturate(0.9);
  }
  .hero-bg__glow {
    top: 30%;
    right: 50%;
    transform: translate(50%, -50%);
    width: min(120vw, 620px);
    height: min(120vw, 620px);
  }
  @keyframes hero-breathe {
    0%, 100% { opacity: 0.45; transform: translate(50%, -50%) scale(0.97); }
    50%      { opacity: 0.85; transform: translate(50%, -50%) scale(1.04); }
  }
  /* Soft top vignette + a near-solid dark lower zone, so the falcon reads as an
     upper backdrop and the copy sits on clean dark space below it. */
  .hero-bg__scrim {
    background:
      radial-gradient(120% 52% at 50% -4%,
        rgba(5,7,13,0.80) 0%, rgba(5,7,13,0.28) 38%, transparent 66%),
      linear-gradient(180deg,
        rgba(5,7,13,0.50) 0%, rgba(5,7,13,0.26) 24%,
        rgba(5,7,13,0.74) 54%, rgba(5,7,13,0.94) 80%, rgba(5,7,13,0.98) 100%);
  }
  .hero-bg__left { background: none; }
  .hero-copy { max-width: none; width: 100%; }
  .hero-lead { max-width: 58ch; }
  /* Keep the headline in the left column so it stops at the falcon's head
     instead of running across it: cap the width and step the size down so the
     words wrap cleanly down the left edge rather than overflowing onto the bird. */
  .hero-title {
    max-width: 54%;
    font-size: clamp(2rem, 9.5vw, 2.6rem);
    line-height: 1.06;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-block: clamp(7.5rem, 20vh, 10rem) clamp(5.5rem, 14vh, 8rem);
  }
  .hero-cta { gap: var(--sp-3); }
  .hero-cta__primary,
  .hero-cta__ghost { flex: 1 1 100%; }
  .hero-trust { font-size: var(--fs-xs); gap: var(--sp-2) var(--sp-4); }
  .hero-trust__item + .hero-trust__item::before {
    left: calc(-1 * var(--sp-4) / 2 - 1px);
  }
}

/* ── Reduced motion: kill all ambient loops, hold final state ─────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-bg__glacier { animation: none; transform: scale(1.06); }
  .hero-bg__glow { animation: none; opacity: 0.7; }
  .hero-scroll__line::after { animation: none; opacity: 0.6; transform: none; }
  .hero--anim .hero-bg__glacier,
  .hero--anim .hero-bg__falcon,
  .hero--anim .hero-bg__glow,
  .hero--anim .hero-eyebrow,
  .hero--anim .hero-title__line .hero-word,
  .hero--anim .hero-lead,
  .hero--anim .hero-cta > *,
  .hero--anim .hero-trust__item,
  .hero--anim .hero-scroll { opacity: 1; }
}