/* boog — waaier van zes staande beelden, alinea, drie cijfers */
.boog {
  --boog-kaart-b: 160px;
  --boog-stap: 170px;
  --boog-draai: 9.4deg;
  --boog-hoogte: 230px;
  --boog-podium: 330px;
  --boog-zak: 1;
  position: relative;
  padding-block: 96px clamp(96px, 9vw, 130px);
  text-align: center;
  overflow-x: clip;
}

/* waaier */
.boog .boog__podium { position: relative; height: var(--boog-podium); }
.boog .boog__podium::before { /* zacht licht onder de boog */
  content: ""; position: absolute; left: 50%; top: 40%; width: min(900px, 120vw); height: 260px;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(233, 232, 227, .055), transparent);
}
.boog .boog__waaier { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.boog .boog__kaart {
  /* positie per kaart: afstand tot het midden bepaalt hoogte en draaiing */
  --d: calc(var(--i) - 2.5);                 /* -2.5 … 2.5 */
  --a: max(var(--d), calc(var(--d) * -1));   /* 0.5, 1.5, 2.5 */
  --x: calc(var(--d) * var(--boog-stap));
  --y: calc(((var(--a) - .5) * (var(--a) - .5) * 9px + (var(--a) - .5) * 13px) * var(--boog-zak));
  --r: calc(var(--d) * var(--boog-draai));
  position: absolute; left: 50%; top: 30px;
  width: var(--boog-kaart-b); height: var(--boog-hoogte);
  margin-left: calc(var(--boog-kaart-b) / -2);
  transform-origin: 50% 50%;
  transform: translate3d(var(--x), var(--y), 0) rotate(var(--r));
  transition: transform 1.25s var(--ease), opacity .8s var(--ease);
  transition-delay: calc(var(--a) * 70ms);
  z-index: calc(10 - var(--i));
}
.boog .boog__kaart:nth-child(n+4) { z-index: calc(var(--i) + 1); }
.boog .boog__kaart .beeld {
  width: 100%; height: 100%; border-radius: 16px;
  box-shadow: 0 1px 0 rgba(233, 232, 227, .08) inset, 0 0 0 1px rgba(233, 232, 227, .06), 0 24px 48px -12px rgba(0, 0, 0, .75);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.boog .boog__kaart .beeld[data-label]::after {
  left: 12px; right: 12px; bottom: 12px;
  font-size: 9px; line-height: 1.45; letter-spacing: .1em; text-align: left;
  color: rgba(233, 232, 227, .6);
}
@media (hover: hover) {
  .boog .boog__kaart:hover .beeld { transform: translateY(-10px) scale(1.03); box-shadow: 0 0 0 1px rgba(233, 232, 227, .14), 0 34px 60px -14px rgba(0, 0, 0, .85); }
}

/* per kaart een eigen toon, zodat elk beeld als los portret leest */
.boog .boog__kaart .beeld { background-image:
  radial-gradient(120% 70% at var(--lx, 25%) 0%, rgba(233, 232, 227, var(--lk, .14)), transparent 62%),
  radial-gradient(90% 70% at 100% 100%, var(--tint, rgba(30, 111, 184, .18)), transparent 66%),
  linear-gradient(160deg, var(--top, #262623) 0%, #111110 100%); }
.boog .boog__kaart:nth-child(1) .beeld { --top: #1d1d1b; --lk: .08; --tint: rgba(30, 111, 184, .10); }
.boog .boog__kaart:nth-child(2) .beeld { --top: #2c2a26; --lx: 70%; --tint: rgba(196, 150, 90, .14); }
.boog .boog__kaart:nth-child(3) .beeld { --top: #23252a; --lk: .18; --tint: rgba(30, 111, 184, .26); }
.boog .boog__kaart:nth-child(4) .beeld { --top: #2e2d29; --lx: 60%; --lk: .20; --tint: rgba(233, 232, 227, .07); }
.boog .boog__kaart:nth-child(5) .beeld { --top: #252a2c; --tint: rgba(30, 111, 184, .20); }
.boog .boog__kaart:nth-child(6) .beeld { --top: #30302c; --lx: 40%; --lk: .22; --tint: rgba(196, 150, 90, .10); }

/* startstand voor de waaier-animatie (alleen als js hem aanzet) */
.boog .boog__waaier.is-dicht .boog__kaart {
  transform: translate3d(var(--x), calc(var(--y) + 46px), 0) rotate(var(--r));
  opacity: 0;
}
.is-shot .boog .boog__kaart { transition: none; }

/* alinea */
.boog .boog__tekst {
  max-width: 640px; margin: 22px auto 0;
  font-size: 22px; line-height: 1.45; font-weight: 500; letter-spacing: -0.012em;
  color: var(--wit); text-wrap: balance;
}

/* cijfers */
.boog .boog__cijfers {
  margin: 72px auto 0; max-width: 1040px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.boog .boog__cijfer { display: flex; flex-direction: column-reverse; align-items: center; gap: 14px; }
.boog .boog__cijfer:nth-child(2) { transition-delay: .08s; }
.boog .boog__cijfer:nth-child(3) { transition-delay: .16s; }
.boog .boog__getal {
  margin: 0; font-family: var(--font-tekst);
  font-size: clamp(2.75rem, 4.45vw, 4rem); font-weight: 700; line-height: .92;
  letter-spacing: -0.045em; color: var(--krijt);
  font-variant-numeric: tabular-nums;
}
.boog .boog__label { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.005em; color: var(--grijs); }

/* mobiel: de waaier loopt over de randen, zoals bij de lat */
@media (max-width: 640px) {
  .boog {
    --boog-kaart-b: 172px;
    --boog-stap: 150px;
    --boog-hoogte: 240px;
    --boog-draai: 12deg;
    --boog-zak: 1.6;
    --boog-podium: 348px;
    padding-block: 176px 40px;
  }
  .boog .boog__kaart { top: 22px; }
  .boog .boog__kaart .beeld { border-radius: 14px; box-shadow: 0 1px 0 rgba(233, 232, 227, .12) inset, 0 0 0 1px rgba(233, 232, 227, .10), -6px 16px 30px -8px rgba(0, 0, 0, .9); }
  .boog .boog__kaart .beeld[data-label]::after { left: 10px; right: 10px; bottom: 10px; font-size: 8px; }
  .boog .boog__tekst { max-width: 360px; margin-top: 18px; font-size: 20px; line-height: 1.5; text-wrap: wrap; }
  .boog .boog__cijfers { grid-template-columns: 1fr; gap: 22px; margin-top: 48px; }
  .boog .boog__cijfer { gap: 8px; }
  .boog .boog__getal { font-size: 46px; }
  .boog .boog__label { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .boog .boog__kaart, .boog .boog__kaart .beeld { transition: none; }
  .boog .boog__waaier.is-dicht .boog__kaart { transform: translate3d(var(--x), var(--y), 0) rotate(var(--r)); opacity: 1; }
}

.boog .beeld.is-foto { overflow: hidden; background: #111110; }
.boog .beeld.is-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; filter: saturate(.9) brightness(.9); }

/* mobiel: de drie cijfers naast elkaar */
@media (max-width: 760px) {
  .boog .boog__cijfers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
  .boog .boog__cijfer { gap: 6px; text-align: center; }
  .boog .boog__getal { font-size: clamp(30px, 9vw, 40px); letter-spacing: -0.04em; }
  .boog .boog__label { font-size: 12px; line-height: 1.3; }
}

/* mobiel: alle zes foto's in de breedte, minder lege ruimte erboven */
@media (max-width: 640px) {
  .boog {
    --boog-kaart-b: clamp(84px, 24vw, 104px);
    --boog-stap: clamp(62px, 18vw, 80px);
    --boog-hoogte: clamp(116px, 33vw, 146px);
    --boog-draai: 8deg;
    --boog-zak: 1.1;
    --boog-podium: clamp(190px, 52vw, 230px);
    padding-block: 64px 40px;
  }
  .boog .boog__kaart .beeld { border-radius: 10px; box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .45); }
}
@media (max-width: 640px) {
  .boog {
    --boog-kaart-b: 21vw;
    --boog-stap: 15vw;
    --boog-hoogte: 29vw;
    --boog-draai: 7deg;
    --boog-zak: .8;
    --boog-podium: calc(29vw + 70px);
  }
  .boog .boog__tekst { margin-top: 28px; }
}
/* mobiel: 4 foto's heel in beeld, de buitenste 2 half */
@media (max-width: 640px) {
  .boog {
    --boog-kaart-b: 29vw;
    --boog-stap: 23vw;
    --boog-hoogte: 40vw;
    --boog-draai: 7deg;
    --boog-zak: 1;
    --boog-podium: calc(40vw + 64px);
    padding-block: 56px 40px;
  }
}