/* One-screen brain hero (review variant, 2026-10-22): copy on the left, the edited v1b brain on the right.
   The hero slides under the sticky nav, so nav + hero together fill exactly one screen (100svh).
   --hb-band matches the left edge of the image (sampled ~#120D1C), so the image fades into the band without a seam. */
/* --hb-max caps nav + hero on tall screens: past ~760px the brain grows over the copy and the text gets hard to read (Tim, 2026-10-22) */
.hero-brain {
  --hb-max: 760px;
  --hb-band: #110c1b;
  --hb-under: calc(var(--nav-h) + 1px);
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(100svh, var(--hb-max));
  margin-top: calc(-1 * var(--hb-under));
  padding-top: var(--hb-under);
  background: var(--hb-band);
  border-bottom: 0;
  overflow: hidden;
  isolation: isolate;
}
/* a browser without svh units keeps the plain one-screen height */
@supports not (min-height: 100svh) {
  .hero-brain {
    min-height: 100vh;
  }
}

/* art: a 16:9 frame, anchored right; the canvas sits on the same box, so dot coordinates are plain fractions of the image */
.hb-art {
  position: absolute;
  inset: var(--hb-under) 0 0 0;
  z-index: 0;
  container-type: size;
}
.hb-frame {
  position: absolute;
  right: 0;
  top: 50%;
  height: min(100cqh, 56.25cqw * 1.35);
  aspect-ratio: 16 / 9;
  transform: translateY(-50%);
}
.hb-frame img,
.hb-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hb-frame img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
  mask-image: linear-gradient(90deg, transparent 0, #000 18%);
}
.hb-frame canvas {
  pointer-events: none;
  mix-blend-mode: screen;
}
/* a dark scrim under the copy column; the middle-left of the image is already calm, this only tames the stray filaments */
.hb-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--hb-band) 0,
    rgba(17, 12, 27, 0.88) 22%,
    rgba(17, 12, 27, 0.55) 38%,
    rgba(17, 12, 27, 0) 50%
  );
  /* only the middle band: the source icons at the top and the bottom keep their full glow */
  -webkit-mask-image: linear-gradient(180deg, transparent 14%, #000 30%, #000 70%, transparent 86%);
  mask-image: linear-gradient(180deg, transparent 14%, #000 30%, #000 70%, transparent 86%);
}

.hero-brain .wrap {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding-top: var(--s-6);
  padding-bottom: var(--s-6);
}
.hero-brain .hero-copy {
  max-width: min(720px, 42vw);
  container-type: inline-size;
}
.hero-brain .hero-title {
  font-size: clamp(40px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: none;
  font-weight: 700;
  color: var(--band-text);
}
/* "Jouw fundament" is 7.77 em wide in Inter 700 at this tracking (home-hero.css); 12.5 cqi keeps it on one line, 10 svh keeps short screens in one view */
@supports (font-size: 1cqi) {
  .hero-brain .hero-title {
    font-size: min(96px, 12.5cqi, 10svh);
  }
}
.hero-brain .hero-line {
  display: block;
  white-space: nowrap;
}
.hero-brain .hero-accent {
  color: var(--band-violet);
}
/* variant B: "Iedereen probeert AI." is ~10.4 em wide, so its size follows 9.4 cqi instead of 12.5 */
@supports (font-size: 1cqi) {
  .hero-brain .hero-title-b {
    font-size: min(84px, 9.4cqi, 8.5svh);
  }
}
.hero-brain .hero-title-b .hero-line-sub {
  display: block;
  white-space: normal;
  margin-top: 0.25em;
  font-size: 0.56em;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--band-violet);
  text-wrap: balance;
}
.hero-brain .hero-sub {
  color: var(--band-muted);
  max-width: 46ch;
  margin: clamp(16px, 3svh, 32px) 0;
}
.hero-brain .btn-ghost {
  background: transparent;
  color: var(--band-text);
  border-color: rgba(244, 242, 248, 0.45);
}
.hero-brain .btn-ghost:hover {
  background: rgba(244, 242, 248, 0.08);
  border-color: var(--band-text);
}
.hero-brain :focus-visible {
  outline-color: var(--band-violet);
}

/* too narrow for copy + brain side by side: show the copy only; the brain never drops below the text (Tim, 2026-10-22) */
@media (max-width: 1023px) {
  .hero-brain {
    min-height: 0;
  }
  .hero-brain .wrap {
    padding-top: var(--s-8);
    padding-bottom: var(--s-8);
  }
  .hero-brain .hero-copy {
    max-width: 640px;
  }
  .hero-brain .hero-sub {
    max-width: none;
  }
  .hb-art {
    display: none;
  }
}

/* home nav on the hero: light text on the band colour; hero-brain.js sets .is-solid past the hero (same rules as body:has(.hero-pipeline) in site.css) */
body:has(.hero-brain) .nav {
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) {
  background: rgba(13, 11, 24, 0.72);
  border-bottom-color: transparent;
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .lockup g[fill="#FFFFFF"] {
  fill: #ffffff;
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .lockup .epithet {
  fill: #8a8fa3;
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .nav-menu a {
  color: var(--band-muted);
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .nav-menu a:hover,
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .lang a:hover {
  color: var(--band-text);
  background: rgba(244, 242, 248, 0.08);
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .lang {
  border-color: rgba(244, 242, 248, 0.3);
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .lang a {
  color: var(--band-muted);
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .lang a.on {
  background: var(--band-text);
  color: var(--band);
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) .burger {
  color: var(--band-text);
  border-color: rgba(244, 242, 248, 0.3);
  background: transparent;
}
body:has(.hero-brain) .nav:not(.is-solid):not(.is-open) :focus-visible {
  outline-color: var(--band-violet);
}
main:has(> .hero-brain) {
  --sec-y: clamp(64px, 9vw, 128px);
}