/* Expertise hero: the copy sits between a human and a machine hand drawn as live dot matrices (js/expertise-hero*.js); scrolling closes the gap. */
.bgap {
  --ink: var(--_base-colors---light-gray, #c8d1d6);
  --ink-2: var(--_base-colors---main-gray, #93a4b1);
  --bg: var(--_base-colors---dark, #15191c);
  --nav-h: 88px;
  --stage-h: 100vh;
  --runway: 60vh;          /* pinned scroll the hero adds */
  --scrim-solid: 56px;     /* under the nav links: fully dark */
  --scrim-h: 196px;        /* where the dissolve band ends */
  --fs-h1: clamp(88px, min(15vw, 24vh), 232px);
  --fs-lead: clamp(19px, min(2vw, 3.3vh), 30px);
  position: relative;
  z-index: 3;
  background: var(--bg);
}
@supports (height: 100svh) {
  .bgap { --stage-h: 100svh; --runway: 60svh; }
}
@media (max-aspect-ratio: 10/11) {
  .bgap { --fs-h1: clamp(88px, 36vw, 200px); --fs-lead: clamp(18px, 5.2vw, 26px); }
}

/* copy: the word sets the column, the lead wraps to the word's width */
.bgap-copy {
  display: grid;
  grid-template-columns: min-content;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.bgap-title {
  margin: 0 0 0 -0.012em;            /* optical: E stem sits just inside the lead's round O */
  font: 600 var(--fs-h1)/0.8 Upton, "Oswald", sans-serif;
  letter-spacing: -0.006em;
  color: var(--ink);
  white-space: nowrap;
}
.bgap-lead {
  margin: calc(var(--fs-h1) * 0.16) 0 0;
  font: 600 var(--fs-lead)/1.17 Upton, "Oswald", sans-serif;
  color: var(--ink-2);
  text-wrap: pretty;
}

.bgap-frame { position: relative; z-index: 1; pointer-events: none; }
.bgap-scene { position: absolute; left: 0; top: 0; }
.bgap-arm { position: absolute; left: 0; top: 0; display: block; max-width: none; user-select: none; background: 0 0 / 100% 100% no-repeat; }
/* both arms are drawn in dots on the canvas; their cut-outs only show (and only download) without script
   or without the sampling maps */
.bgap-arm--human { aspect-ratio: 843 / 318; }
.bgap-arm--ai { aspect-ratio: 832 / 364; }
.bgap[data-arms="photo"] .bgap-arm--human {
  background-image: url(../images/expertise-hero/human.webp);
  background-image: image-set(url(../images/expertise-hero/human.webp) 1x, url(../images/expertise-hero/human@2x.webp) 2x);
}
.bgap[data-arms="photo"] .bgap-arm--ai {
  background-image: url(../images/expertise-hero/ai.webp);
  background-image: image-set(url(../images/expertise-hero/ai.webp) 1x, url(../images/expertise-hero/ai@2x.webp) 2x);
}
.bgap-dots { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.bgap:not(.is-live):not(.is-static) .bgap-dots { display: none; }
.bgap-spark {
  position: absolute; left: 0; top: 0;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    #fff 0, #fff 3.2%, rgba(255, 255, 255, .7) 5.5%, rgba(236, 230, 255, .22) 11%,
    rgba(161, 111, 255, .07) 24%, rgba(161, 111, 255, .02) 48%, rgba(161, 111, 255, 0) 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.bgap[data-arms="dots"] .bgap-spark { visibility: hidden; }   /* the meeting point is a dot on the lattice */

/* a 100svh ruler: the script sizes the scene from it, so mobile toolbars sliding never rescale the arms */
.bgap-probe { position: absolute; left: 0; top: 0; width: 1px; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }

/* the nav horizon: a dark band fixed under the transparent navbar for as long as the hero is on
   screen. Copy and arms scroll into it and dissolve top-down, like content passing under a header,
   instead of fading as whole ghosted blocks. Same colour as the page, so the band itself is invisible. */
.bgap-scrim { display: none; }
.bgap.is-live .bgap-scrim, .bgap.is-static .bgap-scrim {
  display: block;
  position: sticky; top: 0; z-index: 4;
  height: var(--scrim-h);
  margin-bottom: calc(-1 * var(--scrim-h));
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(21 25 28) 0,
    rgb(21 25 28) var(--scrim-solid),
    rgb(21 25 28 / .9) calc(var(--scrim-solid) + (var(--scrim-h) - var(--scrim-solid)) * .2),
    rgb(21 25 28 / .65) calc(var(--scrim-solid) + (var(--scrim-h) - var(--scrim-solid)) * .4),
    rgb(21 25 28 / .35) calc(var(--scrim-solid) + (var(--scrim-h) - var(--scrim-solid)) * .6),
    rgb(21 25 28 / .1) calc(var(--scrim-solid) + (var(--scrim-h) - var(--scrim-solid)) * .8),
    rgb(21 25 28 / 0) 100%);
}

/* live: a sticky stage over a short runway; the script scrubs the scene */
/* the section's last 48px melt into the timeline, so the timeline's chyron fades in instead of being
   sliced by the hero's edge (kept shorter than the chyron's distance from the screen bottom, so the
   chyron never shows through while the stage is still pinned) */
.bgap.is-live {
  height: calc(var(--stage-h) + var(--runway));
  background: linear-gradient(to bottom, var(--bg) calc(100% - 48px), rgb(21 25 28 / 0) 100%);
}
.bgap.is-live .bgap-stage { position: sticky; top: 0; height: var(--stage-h); overflow: hidden; }
.bgap.is-live .bgap-copy {
  position: absolute; left: 50%; top: calc(var(--nav-h) + (100% - var(--nav-h)) / 2);
  transform: translate(-50%, -50%);
}
.bgap.is-live .bgap-title, .bgap.is-live .bgap-lead { will-change: transform, opacity; }
.bgap.is-live .bgap-frame { position: absolute; inset: 0; }
.bgap.is-live .bgap-arm, .bgap.is-live .bgap-spark { will-change: transform; }
.bgap:not(.is-ready) .bgap-scene,
.bgap:not(.is-ready) .bgap-dots { visibility: hidden; }      /* until the script has placed the arms */
.bgap:not(.is-live):not(.is-static) .bgap-scene { visibility: visible; }

/* static (reduced motion): copy, then the finished composition, in normal flow. The top space sits
   on the stage, so the (thinner) scrim starts at the section's top and never covers the h1 on load. */
.bgap.is-static { --scrim-solid: 64px; --scrim-h: 112px; padding: 0 24px; }
.bgap.is-static .bgap-scrim { margin-left: -24px; margin-right: -24px; }
.bgap.is-static .bgap-stage { padding-top: calc(var(--nav-h) + 4vh); }
.bgap.is-static .bgap-frame { overflow: hidden; margin: 3vh -24px 0; }

/* no script: a plain still of the meeting under the copy */
.bgap:not(.is-live):not(.is-static) { padding: calc(var(--nav-h) + 7vh) 24px 8vh; }
.bgap:not(.is-live):not(.is-static) .bgap-frame { aspect-ratio: 1672 / 400; max-width: 1440px; margin: 6vh auto 0; overflow: hidden; }
.bgap:not(.is-live):not(.is-static) .bgap-scene { inset: 0; }
.bgap:not(.is-live):not(.is-static) .bgap-arm--human { left: 0; top: 3%; width: 50.42%; height: auto; }
.bgap:not(.is-live):not(.is-static) .bgap-arm--ai { left: 51.1%; top: 5.75%; width: 49.76%; height: auto; }