/* 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 */
  --melt: 48px;            /* the live section's bottom edge melting into the timeline */
  --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; }
/* the meeting point, in the orange of the timeline's first line: the script sizes and places it, from the
   gap between the fingertips to the head of that line. Fixed to the screen while live, so it can let go of
   the hands; in the section's flow when static. It sits under the stage (it comes first), so it steps out
   from behind the machine's fingertip and, on portrait screens, passes behind the hand riding up past it. */
.bgap-point {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  background: var(--_base-colors---orange, #e2692f);
  pointer-events: none;
  visibility: hidden;
}
.bgap.is-live .bgap-point { position: fixed; will-change: transform; }
.bgap.is-ready .bgap-point.is-on { visibility: visible; }

/* 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 --melt px 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% - var(--melt)), 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 { 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; }