/*!
 * Boosten merk-intro, korte versie (ca. 2,2 s)
 * Hoort bij boosten-intro.js. Alle klassen hebben het voorvoegsel "bi-".
 * Tijden staan in ms en worden vermenigvuldigd met --bi-k (1 = zoals ontworpen, 1.2 = 20% trager).
 */

@property --bi-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

/* ---------- afdekking tot het script de intro heeft opgebouwd (zie head-snippet.html) ---------- */
html.bi-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #0a1e2f;
  animation: biFailsafe 1ms linear 3s forwards;
}

/* ---------- overlay ---------- */
.bi {
  --bi-k: 1;
  --bi-s: 1;
  --bi-bg: #0a1e2f;
  --bi-fg: #f8f4f1;
  --bi-dim: rgba(248, 244, 241, .55);
  --bi-hair: rgba(248, 244, 241, .07);
  --bi-hair2: rgba(248, 244, 241, .26);
  --bi-gt: #e0ac48;
  --bi-st2: rgba(248, 244, 241, .8);
  --bi-flash: #f8f4f1;
  --bi-gold: #cf941c;

  /* rig-geometrie desktop (ontwerp op 1440 x 900) */
  --bi-mi: translate(214.5px, 45px) scale(1.875);
  --bi-fl: 1;
  --bi-ws: .4469;
  --bi-cx: 720px;
  --bi-cy: 450px;
  --bi-rs: 1;

  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
  font-family: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* eigen compositielaag: voorkomt dat geanimeerde elementen van de pagina in Chromium door de overlay heen tekenen */
  isolation: isolate;
  transform: translateZ(0);
  animation: biFailsafe 1ms linear 5s forwards;
}
.bi[popover] {
  /* reset van de standaard popover-stijl van de browser */
  margin: 0; padding: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  background: transparent; color: inherit; overflow: hidden; inset: 0;
}
.bi[popover]::backdrop { background: transparent; }
.bi[data-theme="light"] {
  --bi-bg: #f8f4f1;
  --bi-fg: #113450;
  --bi-dim: #5c6b75;
  --bi-hair: rgba(17, 52, 80, .08);
  --bi-hair2: rgba(17, 52, 80, .26);
  --bi-gt: #a8741a;
  --bi-st2: #113450;
  --bi-flash: #113450;
}
.bi *, .bi *::before, .bi *::after { box-sizing: border-box; }
.bi img { max-width: none; }
.bi.bi-skipping { animation: biSkipOut 240ms ease-out forwards, biFailsafe 1ms linear 5s forwards; }
@keyframes biSkipOut { to { opacity: 0; visibility: hidden; } }
@keyframes biFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ---------- twee helften die langs de diagonaal (-17 graden, zelfde hoek als de breuk in het beeldmerk) openscheuren ---------- */
.bi-half { position: absolute; inset: 0; pointer-events: none; }
.bi-h-top { animation: biSplitTop calc(760ms * var(--bi-k)) cubic-bezier(.76, 0, .24, 1) calc(1450ms * var(--bi-k)) both; }
.bi-h-bot { animation: biSplitBot calc(760ms * var(--bi-k)) cubic-bezier(.76, 0, .24, 1) calc(1450ms * var(--bi-k)) both; }
/* masker: een groot gedraaid vlak waarvan de onder- of bovenrand precies op de scheurlijn door het midden ligt.
   Bewust geen clip-path: clip-path op een geanimeerd element gaf in Chromium gaten waar de pagina doorheen kwam. */
.bi-mask { position: absolute; left: 50%; top: 50%; width: 400vmax; height: calc(200vmax + 1px); margin-left: -200vmax; overflow: hidden; }
.bi-h-top .bi-mask { margin-top: -200vmax; transform-origin: 50% calc(100% - 1px); transform: rotate(-17deg); }
.bi-h-bot .bi-mask { margin-top: -1px; transform-origin: 50% 1px; transform: rotate(-17deg); }
/* podium: exact het scherm, terug-gedraaid zodat het recht staat */
.bi-stage {
  position: absolute; width: var(--bi-vw, 100vw); height: var(--bi-vh, 100vh); overflow: hidden;
  background: var(--bi-bg); transform: rotate(17deg); transform-origin: 50% 50%;
  left: calc(200vmax - var(--bi-vw, 100vw) / 2);
}
.bi-h-top .bi-stage { top: calc(200vmax - var(--bi-vh, 100vh) / 2); }
.bi-h-bot .bi-stage { top: calc(1px - var(--bi-vh, 100vh) / 2); }
@keyframes biSplitTop { from { transform: translate(0, 0); } to { transform: translate(12vw, -100%); } }
@keyframes biSplitBot { from { transform: translate(0, 0); } to { transform: translate(-12vw, 100%); } }

/* ---------- rasterlijnen ---------- */
.bi-gl {
  position: absolute; top: 0; width: 1px; height: 100%;
  left: calc(50% + var(--bi-gx) * var(--bi-s));
  background: var(--bi-hair); transform-origin: top;
  animation: biGl calc(600ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(var(--bi-gd) * var(--bi-k)) both;
}
@keyframes biGl { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.bi-g1 { --bi-gx: -560px; --bi-gd: 0ms; }
.bi-g2 { --bi-gx: -336px; --bi-gd: 30ms; }
.bi-g3 { --bi-gx: -112px; --bi-gd: 60ms; }
.bi-g4 { --bi-gx: 112px; --bi-gd: 90ms; }
.bi-g5 { --bi-gx: 336px; --bi-gd: 120ms; }
.bi-g6 { --bi-gx: 560px; --bi-gd: 150ms; }

/* ---------- hoekmarkeringen, randteksten, teller ---------- */
.bi-hud { position: absolute; width: 28px; height: 28px; color: var(--bi-dim); animation: biHud calc(450ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(40ms * var(--bi-k)) both; }
.bi-hud svg { display: block; }
.bi-hud-tl { left: 40px; top: 40px; }
.bi-hud-tr { right: 40px; top: 40px; }
.bi-hud-bl { left: 40px; bottom: 40px; }
.bi-hud-br { right: 40px; bottom: 40px; }
.bi-hud-tr svg { transform: scaleX(-1); }
.bi-hud-bl svg { transform: scaleY(-1); }
.bi-hud-br svg { transform: scale(-1, -1); }
@keyframes biHud { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }

.bi-hudt {
  position: absolute; font: 700 12px/1 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--bi-dim); white-space: nowrap;
  animation: biFadeUp calc(450ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(140ms * var(--bi-k)) both;
}
.bi-hudt-tl { left: 84px; top: 48px; }
.bi-hudt-tr { right: 84px; top: 48px; }
.bi-hudt-bc { left: 0; width: 100%; text-align: center; bottom: 48px; font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .06em; text-transform: none; }
@keyframes biFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.bi-ctr {
  position: absolute; left: 84px; bottom: 46px; display: flex; align-items: center; gap: 12px;
  font: 500 12px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--bi-fg);
  animation: biFadeUp calc(450ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(140ms * var(--bi-k)) both;
}
.bi-ctr-l { font: 700 12px/1 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--bi-gt); }
.bi-ctr-n { min-width: 4ch; counter-reset: bin var(--bi-n); animation: biCount calc(1300ms * var(--bi-k)) cubic-bezier(.45, 0, .2, 1) calc(80ms * var(--bi-k)) both; }
.bi-ctr-n::after { content: counter(bin) "%"; }
@keyframes biCount { from { --bi-n: 0; } to { --bi-n: 100; } }
.bi-ctr-bar { width: 120px; height: 2px; background: var(--bi-hair2); }
.bi-ctr-fill { height: 100%; background: var(--bi-gold); transform-origin: left; animation: biFillX calc(1300ms * var(--bi-k)) cubic-bezier(.45, 0, .2, 1) calc(80ms * var(--bi-k)) both; }
@keyframes biFillX { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.bi-flash { position: absolute; inset: 0; background: var(--bi-flash); opacity: 0; animation: biFlash calc(360ms * var(--bi-k)) ease-out calc(605ms * var(--bi-k)) both; }
@keyframes biFlash { 0% { opacity: 0; } 15% { opacity: .14; } 100% { opacity: 0; } }

/* ---------- rig: alles rond het logo, ontworpen op 1440 x 900 en meegeschaald via --bi-s ---------- */
.bi-rig {
  position: absolute; left: 50%; top: 50%;
  width: 1440px; height: 900px; margin: -450px 0 0 -720px;
  transform: scale(var(--bi-s)); transform-origin: 50% 50%;
}

.bi-charge {
  position: absolute; left: 440px; width: 560px; top: 449px; height: 2px;
  background: var(--bi-gold); box-shadow: 0 0 14px rgba(207, 148, 28, .55); transform-origin: center;
  animation: biCharge calc(520ms * var(--bi-k)) linear 0ms both;
}
@keyframes biCharge {
  0% { transform: scaleX(0); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  45% { transform: scaleX(1); }
  62% { transform: scaleX(1); animation-timing-function: cubic-bezier(.7, 0, .84, 0); }
  100% { transform: scaleX(0); }
}

.bi-streaks { position: absolute; left: var(--bi-cx); top: var(--bi-cy); width: 0; height: 0; transform: rotate(-36deg); }
.bi-stk { position: absolute; left: 0; height: 2px; opacity: 0; }
.bi-s-gold .bi-stk { background: var(--bi-gold); animation: biStkA calc(380ms * var(--bi-k)) cubic-bezier(.3, 0, .2, 1) calc((160ms + var(--bi-sd) * .6) * var(--bi-k)) both; }
.bi-s-low .bi-stk { background: var(--bi-st2); animation: biStkB calc(380ms * var(--bi-k)) cubic-bezier(.3, 0, .2, 1) calc((160ms + var(--bi-sd) * .6) * var(--bi-k)) both; }
.bi-k1 { top: -96px; width: 180px; --bi-sd: 0ms; }
.bi-k2 { top: -58px; width: 90px; --bi-sd: 40ms; }
.bi-k3 { top: -22px; width: 240px; --bi-sd: 80ms; }
.bi-k4 { top: 14px; width: 130px; --bi-sd: 20ms; }
.bi-k5 { top: 44px; width: 210px; --bi-sd: 110ms; }
.bi-k6 { top: 78px; width: 70px; --bi-sd: 60ms; }
.bi-k7 { top: 112px; width: 160px; --bi-sd: 140ms; }
.bi-s-low .bi-k1 { top: -110px; }
.bi-s-low .bi-k3 { top: -40px; }
.bi-s-low .bi-k5 { top: 30px; }
.bi-s-low .bi-k7 { top: 96px; }
@keyframes biStkA { 0% { opacity: 0; transform: translateX(calc(620px * var(--bi-fl))); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(-160px * var(--bi-fl))); } }
@keyframes biStkB { 0% { opacity: 0; transform: translateX(calc(-620px * var(--bi-fl) - 100%)); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(160px * var(--bi-fl) - 100%)); } }

.bi-rings, .bi-shards { position: absolute; left: var(--bi-cx); top: var(--bi-cy); width: 0; height: 0; }
.bi-ring { position: absolute; left: -160px; top: -160px; width: 320px; height: 320px; overflow: visible; opacity: 0; }
.bi-r1 { color: var(--bi-gold); animation: biRing calc(700ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(605ms * var(--bi-k)) both; }
.bi-r2 { color: var(--bi-fg); animation: biRing calc(850ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(660ms * var(--bi-k)) both; }
@keyframes biRing { 0% { opacity: 0; transform: scale(calc(.5 * var(--bi-rs))); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(calc(3 * var(--bi-rs))); } }

.bi-shard {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: var(--bi-gold);
  clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); opacity: 0;
  animation: biShard calc(600ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(605ms * var(--bi-k)) both;
}
.bi-sh-alt { background: var(--bi-fg); width: 8px; height: 8px; left: -4px; top: -4px; }
.bi-sh1 { --bi-dx: 222px; --bi-dy: 60px; }
.bi-sh2 { --bi-dx: 68px; --bi-dy: 188px; }
.bi-sh3 { --bi-dx: -177px; --bi-dy: 177px; }
.bi-sh4 { --bi-dx: -212px; --bi-dy: -57px; }
.bi-sh5 { --bi-dx: -65px; --bi-dy: -179px; }
.bi-sh6 { --bi-dx: 170px; --bi-dy: -170px; }
@keyframes biShard { 0% { opacity: 1; transform: translate(0, 0) scale(.3); } 100% { opacity: 0; transform: translate(calc(var(--bi-dx) * var(--bi-fl)), calc(var(--bi-dy) * var(--bi-fl))) scale(1); } }

/* beeldmerk: twee helften die langs de diagonaal naar binnen schieten en vastklikken */
.bi-mark { position: absolute; left: 435px; top: 325px; width: 141px; height: 160px; animation: biMarkMove calc(500ms * var(--bi-k)) cubic-bezier(.7, 0, .15, 1) calc(680ms * var(--bi-k)) both; }
@keyframes biMarkMove { from { transform: var(--bi-mi); } to { transform: translate(0, 0) scale(1); } }
.bi-punch { position: absolute; inset: 0; animation: biPunch calc(340ms * var(--bi-k)) cubic-bezier(.2, .6, .2, 1) calc(600ms * var(--bi-k)) both; }
@keyframes biPunch { 0% { transform: scale(1); } 25% { transform: scale(1.07); } 100% { transform: scale(1); } }
.bi-punch img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.bi-p-gold { animation: biPGold calc(460ms * var(--bi-k)) linear calc(150ms * var(--bi-k)) both; }
.bi-p-low { animation: biPLow calc(460ms * var(--bi-k)) linear calc(150ms * var(--bi-k)) both; }
@keyframes biPGold {
  0% { opacity: 0; filter: blur(10px); transform: translate(calc(380px * var(--bi-fl)), calc(-280px * var(--bi-fl))); animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  72% { opacity: 1; filter: blur(0); transform: translate(calc(10px * var(--bi-fl)), calc(-7px * var(--bi-fl))); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  100% { opacity: 1; filter: blur(0); transform: translate(0, 0); }
}
@keyframes biPLow {
  0% { opacity: 0; filter: blur(10px); transform: translate(calc(-380px * var(--bi-fl)), calc(280px * var(--bi-fl))); animation-timing-function: cubic-bezier(.3, 0, .1, 1); }
  72% { opacity: 1; filter: blur(0); transform: translate(calc(-10px * var(--bi-fl)), calc(7px * var(--bi-fl))); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  100% { opacity: 1; filter: blur(0); transform: translate(0, 0); }
}

/* woordmerk: letters uit de echte logo-afbeelding, letter voor letter omhoog; gouden schakel in de oo als laatste */
.bi-wm { position: absolute; left: 612px; top: 374px; width: 879px; height: 179px; overflow: hidden; transform-origin: 0 0; transform: scale(var(--bi-ws)); }
.bi-lt { position: absolute; top: 0; height: 179px; animation: biLtUp calc(520ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc((760ms + var(--bi-ld) * .5) * var(--bi-k)) both; }
.bi-lt img { display: block; height: 179px; }
.bi-lt1 { left: 0; --bi-ld: 0ms; } .bi-lt1 img { width: 140px; }
.bi-lt2 { left: 140px; --bi-ld: 65ms; } .bi-lt2 img { width: 251px; }
.bi-lt3 { left: 391px; --bi-ld: 130ms; } .bi-lt3 img { width: 132px; }
.bi-lt4 { left: 523px; --bi-ld: 195ms; } .bi-lt4 img { width: 95px; }
.bi-lt5 { left: 618px; --bi-ld: 260ms; } .bi-lt5 img { width: 132px; }
.bi-lt6 { left: 750px; --bi-ld: 325ms; } .bi-lt6 img { width: 129px; }
@keyframes biLtUp { from { transform: translateY(105%); } to { transform: translateY(0); } }
.bi-lk { position: absolute; left: 238px; top: 76px; width: 59px; height: 62px; display: block; animation: biLkPop calc(340ms * var(--bi-k)) cubic-bezier(.2, .6, .2, 1) calc(1000ms * var(--bi-k)) both; }
@keyframes biLkPop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
.bi-lk-ring { position: absolute; left: 237px; top: 77px; width: 60px; height: 60px; overflow: visible; color: var(--bi-gold); opacity: 0; animation: biLkRing calc(560ms * var(--bi-k)) cubic-bezier(.16, 1, .3, 1) calc(1020ms * var(--bi-k)) both; }
@keyframes biLkRing { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: scale(2.3); } }

.bi-bar {
  position: absolute; left: 435px; top: 518px; width: 570px; height: 4px; background: var(--bi-gold);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 100%, 0 100%); transform-origin: left;
  animation: biBar calc(420ms * var(--bi-k)) cubic-bezier(.7, 0, .2, 1) calc(980ms * var(--bi-k)) both;
}
@keyframes biBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* gouden scheurlijn, boven de helften */
.bi-split { position: absolute; left: 50%; top: 50%; width: 200vmax; height: 2px; margin: -1px 0 0 -100vmax; transform: rotate(-17deg); pointer-events: none; }
.bi-split-line {
  width: 100%; height: 100%; background: var(--bi-gold); box-shadow: 0 0 16px rgba(207, 148, 28, .6); transform-origin: left;
  animation: biSplitLine calc(700ms * var(--bi-k)) linear calc(1250ms * var(--bi-k)) both;
}
@keyframes biSplitLine {
  0% { transform: scaleX(0); opacity: 1; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  30% { transform: scaleX(1); opacity: 1; }
  55% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* overslaan-knop */
.bi-skip {
  position: absolute; right: 84px; bottom: 32px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; margin: 0;
  border: 1px solid var(--bi-hair2); border-radius: 6px; background: transparent; color: var(--bi-fg);
  font: 700 12px/1 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; transition: background 140ms cubic-bezier(.2, .6, .2, 1);
  animation: biSkipLife calc(1450ms * var(--bi-k)) linear 0ms both;
}
.bi-skip:hover { background: var(--bi-hair); }
.bi-skip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(207, 148, 28, .45); }
@keyframes biSkipLife { 0% { opacity: 0; visibility: visible; } 14% { opacity: 1; } 90% { opacity: 1; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }

/* ---------- mobiel / smal: gestapelde lockup (ontwerp op 390 x 844) ---------- */
@media (max-width: 760px) {
  .bi {
    --bi-mi: translate(0px, 92px) scale(1.667);
    --bi-fl: .55;
    --bi-ws: .2905;
    --bi-cx: 195px;
    --bi-cy: 422px;
    --bi-rs: .62;
  }
  .bi-rig { width: 390px; height: 844px; margin: -422px 0 0 -195px; }
  .bi-charge { left: 75px; width: 240px; top: 421px; }
  .bi-mark { left: 142px; top: 270px; width: 106px; height: 120px; }
  .bi-wm { left: 67px; top: 410px; }
  .bi-bar { left: 67px; top: 474px; width: 256px; }
  .bi-g1 { --bi-gx: -175px; }
  .bi-g2 { --bi-gx: 0px; }
  .bi-g3 { --bi-gx: 175px; }
  .bi-g4, .bi-g5, .bi-g6 { display: none; }
  .bi-hud-tl { left: 14px; top: 14px; }
  .bi-hud-tr { right: 14px; top: 14px; }
  .bi-hud-bl { left: 14px; bottom: 14px; }
  .bi-hud-br { right: 14px; bottom: 14px; }
  .bi-hudt-tl { left: 52px; top: 22px; }
  .bi-hudt-tr, .bi-hudt-bc { display: none; }
  .bi-ctr { left: 52px; bottom: 22px; }
  .bi-ctr-bar { width: 64px; }
  .bi-skip { right: 48px; bottom: 10px; }
}

/* ---------- site-entree: optionele hooks voor je eigen hero ----------
 * data-bi-hero        op de hero-wrapper: zoomt zacht van 107% naar 100% terwijl de scheur opengaat
 * data-bi-reveal="1".."8"  op koppen, tekst en knoppen: komen gestaffeld omhoog
 * data-bi-reveal="side"    op een zijkaart of beeld: schuift van rechts in
 */
html.bi-intro [data-bi-hero] { transform: scale(1.07); transform-origin: 50% 40%; }
html.bi-intro [data-bi-reveal] { opacity: 0; }
html.bi-revealing [data-bi-hero] { animation: biHeroIn 1100ms cubic-bezier(.16, 1, .3, 1) both; }
html.bi-revealing [data-bi-reveal] { animation: biHx 750ms cubic-bezier(.16, 1, .3, 1) calc(200ms + var(--bi-rd, 0ms)) both; }
html.bi-revealing [data-bi-reveal="side"] { animation: biSide 850ms cubic-bezier(.16, 1, .3, 1) 250ms both; }
[data-bi-reveal="1"] { --bi-rd: 0ms; }
[data-bi-reveal="2"] { --bi-rd: 48ms; }
[data-bi-reveal="3"] { --bi-rd: 96ms; }
[data-bi-reveal="4"] { --bi-rd: 144ms; }
[data-bi-reveal="5"] { --bi-rd: 192ms; }
[data-bi-reveal="6"] { --bi-rd: 240ms; }
[data-bi-reveal="7"] { --bi-rd: 288ms; }
[data-bi-reveal="8"] { --bi-rd: 336ms; }
@keyframes biHeroIn { from { transform: scale(1.07); } to { transform: scale(1); } }
@keyframes biHx { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes biSide { from { opacity: 0; transform: translateX(70px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- minder beweging gewenst: nooit een intro ---------- */
@media (prefers-reduced-motion: reduce) {
  .bi, html.bi-pending::before { display: none !important; }
  html.bi-intro [data-bi-hero], html.bi-intro [data-bi-reveal] { opacity: 1; transform: none; animation: none; }
}