/* ============================================================================
   Eyas, 02 Gap (The discipline gap / "beneath the surface")
   The cold-truth section. Iceberg/depth motif: content above a luminous
   frost-steel waterline sits in clarity; the heavy truth (numbers) sits below,
   fading into dark water. Near-monochrome + steel only, no amber here.
   All custom classes prefixed .gap-. Held-breath calm, generous negative space.
   ========================================================================== */

.gap {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-deep);
}

/* Colored atmospheric bridge from the hero (desktop): the cold glacial haze
   bleeds into the top of this section and resolves down into the deep water, so
   the hero->gap seam is a soft colour transition, not a hard cut to black. Sits
   above the dark water layer (z 0) and below the content (.gap-wrap, z 1, which
   paints later in the DOM), so headlines stay crisp on top. */
@media (min-width: 901px) {
  .gap::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: clamp(300px, 44vh, 560px);
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg,
        transparent 0%,
        rgba(110, 138, 171, 0.16) 22%,
        rgba(110, 138, 171, 0.09) 42%,
        rgba(36, 52, 76, 0.03) 60%,
        transparent 78%),
      radial-gradient(140% 80% at 56% -22%,
        rgba(226, 238, 250, 0.11) 0%, rgba(175, 200, 228, 0.04) 40%, transparent 64%);
  }
}

/* ── Depth backdrop ────────────────────────────────────────────────────── */
.gap-depth {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Dark water: a quiet depth tint. Lighter through the middle so the discipline
   curve and its rupture read; deeper at top-left (headline contrast) and bottom. */
.gap-depth__water {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(5,7,13,0.72) 0%,
      rgba(5,7,13,0.38) 22%,
      rgba(6,11,22,0.30) 46%,
      rgba(5,8,18,0.62) 74%,
      rgba(4,6,14,0.94) 100%);
}

/* ── The discipline curve (SVG backdrop) ───────────────────────────────────
   preserveAspectRatio=none maps the viewBox's y=320/800 surface line to a stable
   40% of the section height, so it lands in the headline gap regardless of size.
   Stroke widths stay crisp via non-scaling-stroke. */
.gap-curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.gap-curve__line,
.gap-curve__glow {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.gap-curve__line { stroke: url(#discGrad); stroke-width: 2; }
.gap-curve__glow { stroke: #CFE0F2; stroke-width: 6; opacity: 0.4; }
.gap-curve__surface {
  stroke: rgba(226,238,250,0.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.gap-curve__tick {
  stroke: #F4FAFD;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}
.gap-curve__flare { fill: #F4FAFD; }
.gap-curve__halo { fill: #CFE0F2; opacity: 0.5; }

/* Draw-on: the line traces left->right; the plunge follows naturally because it
   sits later along the path. The break accents (tick + flare) light up as the
   draw reaches the rupture. The .reveal class fades the layer in; we neutralise
   its translate so only the stroke animates. */
.gap-curve.reveal { opacity: 0; transform: none; transition: opacity var(--dur-slow, .6s) var(--ease); }
.gap-curve.reveal.is-in { opacity: 1; }
.gap-curve__line,
.gap-curve__glow {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  transition: stroke-dashoffset 2.1s cubic-bezier(.42, 0, .12, 1);
}
.gap-curve.is-in .gap-curve__line,
.gap-curve.is-in .gap-curve__glow { stroke-dashoffset: 0; }
.gap-curve__surface { opacity: 0; transition: opacity 1s var(--ease) .15s; }
.gap-curve.is-in .gap-curve__surface { opacity: 1; }
.gap-curve__tick,
.gap-curve__halo,
.gap-curve__flare { opacity: 0; transition: opacity .5s var(--ease) 1.45s; }
.gap-curve.is-in .gap-curve__tick { opacity: 0.5; }
.gap-curve.is-in .gap-curve__halo { opacity: 0.5; }
.gap-curve.is-in .gap-curve__flare { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gap-curve.reveal { opacity: 1; }
  .gap-curve__line,
  .gap-curve__glow { stroke-dashoffset: 0; transition: none; }
  .gap-curve__surface { opacity: 1; }
  .gap-curve__tick { opacity: 0.5; }
  .gap-curve__halo { opacity: 0.5; }
  .gap-curve__flare { opacity: 1; }
}

/* ── Layout ────────────────────────────────────────────────────────────── */
.gap-wrap {
  position: relative;
  z-index: 1;
}

/* Mobile/default: single column stack. Desktop turns this into two columns. */
.gap-grid {
  display: flex;
  flex-direction: column;
}

/* ── Above the waterline ───────────────────────────────────────────────── */
.gap-above {
  max-width: 880px;
}

.gap-eyebrow {
  margin-bottom: var(--sp-6);
}

.gap-title {
  text-wrap: balance;
  margin-bottom: var(--sp-6);
}
/* The headline dives at the waterline: the surface clause sits in clarity, the
   submerged clause (the steel truth) drops below with room for the waterline to
   pass through the gap. Desktop calibrates the exact gap; mobile keeps it tight. */
.gap-title__surface,
.gap-title__deep {
  display: block;
  text-wrap: balance;
}
.gap-title__deep {
  margin-top: 0.22em;
}

/* Solid steel emphasis (no gradient text). */
.gap-steel {
  color: var(--eyas-steel);
}
/* Der Bindestrich-Ausdruck bricht als Einheit um, nie in sich selbst
   ("you- / in-the-moment" liest sich zerhackt). */
.gap-nowrap {
  white-space: nowrap;
}

.gap-lead {
  max-width: 64ch;
  color: var(--text-mid);
}

/* ── Below the waterline ───────────────────────────────────────────────── */
.gap-below {
  margin-top: clamp(4rem, 9vh, 8rem);
  max-width: 920px;
}

.gap-below__kicker {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-lo);
  margin-bottom: var(--sp-7);
}

/* Numbers woven into editorial sentences, not stat cards. */
.gap-figures {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.gap-figure {
  display: grid;
  grid-template-columns: minmax(0, max-content) 1fr;
  align-items: baseline;
  gap: clamp(1.25rem, 3vw, 3rem);
}

.gap-figure__num {
  font-size: clamp(3rem, 7vw, 5.75rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: var(--tracking-tight);
  color: var(--eyas-frost-white);
  text-shadow: 0 0 34px rgba(226,238,250,0.16);
}

.gap-figure__text {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-mid);
  max-width: 38ch;
  align-self: center;
}

.gap-figures__rule {
  margin: 0;
  opacity: 0.6;
}

/* ── Pivot to hope (full-width closing beat) ───────────────────────────── */
.gap-close {
  margin-top: clamp(3rem, 7vh, 6rem);
}
.gap-close__rule {
  margin-bottom: clamp(2rem, 4vh, 3.25rem);
  opacity: 0.5;
}

.gap-pivot {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--tracking-snug);
  max-width: 52ch;
}

.gap-pivot__soft {
  color: var(--text-lo);
}

.gap-pivot__bright {
  color: var(--eyas-frost);
}

/* ── Desktop composition (>=1024px) ────────────────────────────────────── */
/* Use the full width: narrative in a contained left column, the heavy truth
   set as a deliberate stat block on the right. Kills the dead right half. */
@media (min-width: 1024px) {
  .gap-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    column-gap: clamp(3.5rem, 6vw, 7rem);
    align-items: start;
  }

  .gap-above {
    /* 38ch hier mass sich an der BODY-Schrift (~340px) und zerhackte die
       4.8rem-Headline in Ein-Wort-Zeilen. Die Grid-Spalte (1.06fr) ist die
       richtige Begrenzung; die Headline selbst haelt ihr Mass in eigenen ch. */
    max-width: none;
    padding-top: var(--sp-2); /* optical align with the stat block's kicker */
  }
  .gap-title {
    max-width: 16ch;
    /* leicht unter dem h1-Token, damit der nowrap-Ausdruck
       "you-in-the-moment" sicher in die Grid-Spalte passt */
    font-size: clamp(2.6rem, 3.8vw, 4rem);
  }
  .gap-lead { max-width: 42ch; }

  /* The submerged clause drops below the iceberg waterline, leaving a clear band
     for the photo's reflection line to pass through without slicing glyphs. */
  .gap-title__deep {
    margin-top: clamp(2.2rem, 4.4vh, 3.4rem);
  }

  /* Right column: 60%+ stays above the waterline, ~90% sinks below it. The stat
     block is nudged down so the first figure brackets the surface clause, and the
     gap before the second figure straddles the same waterline as the headline. */
  .gap-below {
    margin-top: 0;
    max-width: none;
    padding-top: clamp(1rem, 2.4vh, 2.2rem);
  }
  .gap-below__kicker {
    margin-bottom: var(--sp-6);
  }

  /* The figures gain breathing room; the gap is wide enough that the waterline
     can run between 60%+ and ~90% in clear water. */
  .gap-figures {
    gap: clamp(var(--sp-7), 5.5vh, var(--sp-9, 5rem));
  }
  .gap-figure {
    /* fixed numeral column so both numbers right-align to the same baseline */
    grid-template-columns: minmax(5.5ch, max-content) 1fr;
    align-items: center;
    gap: clamp(1.5rem, 2vw, 2.5rem);
  }
  .gap-figure__num {
    font-size: clamp(3.5rem, 4.6vw, 5.25rem);
    justify-self: end;
    text-align: right;
  }
  .gap-figure__text { max-width: 32ch; }

  /* Closing beat: full-bleed within the container, centered measure, the line
     lands as its own deliberate moment under both columns. */
  .gap-close { text-align: center; }
  .gap-close__rule {
    margin-inline: auto;
    max-width: 1100px;
  }
  .gap-pivot {
    margin-inline: auto;
    max-width: 60ch;
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  }
}

/* Ultra-wide (>=1440px): hold the measure, let the gutter grow. */
@media (min-width: 1440px) {
  .gap-grid { column-gap: clamp(5rem, 7vw, 8rem); }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* the curve sits quietly behind the stacked content on small screens */
  .gap-curve.is-in { opacity: 0.7; }

  .gap-figure {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .gap-figure__num { line-height: 1; }
  .gap-figure__text { align-self: start; max-width: none; }

  .gap-pivot {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }
}