/* De tijdelijke pagina op kennismaatschap.nl, tot de nieuwe site live gaat. Bouwt op tokens.css en
   site.css (knoppen, label, het raster van het beeldmerk). Het blauwe blokje zweeft boven het gat en
   landt hier nog niet: dat doet het pas op de nieuwe site. De pagina heeft geen script nodig. */

.binnenkort {
  --land: 0;
  --b-opbouw-duur: 720ms;
  --b-val-duur: 1300ms;
  --b-zweef-hoogte: 10px;
  --b-zweef-duur: 6400ms;
}

.bk {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(100% - 2 * var(--rand), var(--breed));
  margin-inline: auto;
  isolation: isolate;
}
.bk::before,
.bk::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.bk::before {
  top: -18vw;
  right: -14vw;
  width: 64vw;
  height: 64vw;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--km-blauw) 13%, transparent), transparent);
}
.bk::after {
  bottom: -26vw;
  left: -18vw;
  width: 56vw;
  height: 56vw;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--km-groen) 16%, transparent), transparent);
}

.bk-kop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: clamp(24px, 4vh, 40px); }
.bk-merk { width: clamp(160px, 14vw, 200px); height: auto; aspect-ratio: 603.8 / 119.4; }

.bk-midden {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: center;
  gap: clamp(32px, 6vw, 104px);
  padding-block: clamp(32px, 5.8vh, 96px);
}
.bk-tekst { container-type: inline-size; }

/* Naast het beeldmerk schaalt de kop mee met zijn kolom, zodat hij op elke breedte twee regels houdt.
   Op een smal scherm loopt hij groot over drie regels. */
.bk-titel {
  margin-top: 26px;
  max-width: 11.5em;
  font-size: min(clamp(2.5rem, 1.3rem + 4.6vw, 5.75rem), 10.8cqi);
  font-variation-settings: 'opsz' 96;
  font-weight: 720;
  line-height: 0.98;
  letter-spacing: -0.032em;
}
.bk-lead { margin-top: 28px; max-width: 34em; font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); }
.bk-contact { margin-top: 30px; max-width: 34em; font-size: 0.9375rem; color: var(--fg-3); }

.bk-beeld {
  justify-self: end;
  width: min(100%, 400px);
  container-type: inline-size;
}

.bk-voet {
  padding: 24px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--lijn);
  font-size: 0.875rem;
  color: var(--fg-3);
}

/* Het beeldmerk bouwt zich op, het blauwe blokje valt in beeld en blijft dan boven het gat zweven. */
.bk-beeld .raster .blok:not(.blauw) { animation: opbouw var(--b-opbouw-duur) var(--ease) both; animation-delay: calc((4 - var(--r)) * 110ms + var(--k) * 45ms); }
.bk-beeld .blauw-val { animation: vallen var(--b-val-duur) var(--ease-veer) 560ms both; }
.bk-beeld .raster .blok.blauw { animation: zweven var(--b-zweef-duur) var(--ease-in-uit) infinite; }

@media (max-width: 799px) {
  .bk-midden { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 40px; }
  .bk-beeld { grid-row: 1; justify-self: start; width: min(36vw, 168px); }
  .bk-titel { margin-top: 20px; font-size: clamp(2.5rem, 1.3rem + 4.6vw, 5.75rem); }
}

@media (max-width: 639px) {
  .binnenkort { --b-zweef-hoogte: 6px; }
  .knoppen .knop { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-beeld .raster .blok:not(.blauw), .bk-beeld .blauw-val, .bk-beeld .raster .blok.blauw { animation: none; }
}