/* Aanpak animation: the 09-aanpak illustration with code motion. The Aanpak hero and home section 02 load it
   (v2-light "stronger" copy, migrated to v3 on 2026-10-21; both pages carry the same SVG markup).
   base.webp is the still with the moving parts painted out; the SVG puts each cut part back in the same
   1200x800 space, so the parts stay registered at every width. Source and tuning: outputs/hero-animations-v2/aanpak-anim/
   (v2-light "stronger" pass: .../aanpak-anim/stronger/00-notes.md).
   Rest pose = no transform, so reduced motion shows the plain illustration. */

.aanpak-anim {
  position: relative;
}
.aanpak-anim .aa-layers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.aa-layers * {
  transform-box: view-box;
}

/* At 1440 the figure is ~470 px wide, so 1 viewBox unit is ~0.4 px: amplitudes below are 2-3x the v3 ones
   (Tim 2026-10-21: the v3 motion read as a still image). */

/* The whole scene floats a few px; img and SVG share the document timeline, so they stay registered. */
.aanpak-anim > img,
.aanpak-anim > .aa-layers {
  animation: aa-float 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes aa-float {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: translateY(-4px);
  }
}

/* Magnifier: the lens is open and shows a magnified copy of base.webp. The copy gets the inverse of the
   lens move, so the map stays fixed in the world and only the zoom follows the lens. Keep the keyframe
   stops and values of aa-mag and aa-lensmap in step. */
.aa-mag {
  transform-origin: 240px 500px;
  animation: aa-mag 10s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aa-lensmap {
  transform-origin: 240px 500px;
  animation: aa-lensmap 10s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aa-glint {
  fill: #fff;
  opacity: 0;
  transform: rotate(24deg);
  transform-origin: 131px 500px;
  animation: aa-glint 5s ease-in-out infinite 1.2s;
}
@keyframes aa-mag {
  0%,
  6% {
    transform: translate(0, 0) rotate(0);
  }
  22%,
  30% {
    transform: translate(22px, 14px) rotate(-5deg);
  }
  48%,
  56% {
    transform: translate(-18px, 16px) rotate(4deg);
  }
  72%,
  78% {
    transform: translate(12px, -12px) rotate(-2deg);
  }
  94%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes aa-lensmap {
  0%,
  6% {
    transform: rotate(0) scale(1) translate(0, 0);
  }
  22%,
  30% {
    transform: rotate(5deg) scale(1.32) translate(-22px, -14px);
  }
  48%,
  56% {
    transform: rotate(-4deg) scale(1.32) translate(18px, -16px);
  }
  72%,
  78% {
    transform: rotate(2deg) scale(1.22) translate(-12px, 12px);
  }
  94%,
  100% {
    transform: rotate(0) scale(1) translate(0, 0);
  }
}
@keyframes aa-glint {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(24deg);
  }
  6% {
    opacity: 0.7;
  }
  30%,
  100% {
    opacity: 0;
    transform: translateX(200px) rotate(24deg);
  }
}

/* Pin: stands on the map, outside the lens. The 5 s loop is half the lens loop, so a hop falls when the lens comes home. */
.aa-pin {
  transform-origin: 267px 500px;
  animation: aa-pin 5s infinite;
}
.aa-pinshade {
  transform-origin: 267px 501px;
  animation: aa-pinshade 5s infinite;
}
.aa-ripple {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  opacity: 0;
  transform-origin: 267px 500px;
  animation: aa-ripple 5s ease-out infinite;
}
@keyframes aa-pin {
  0% {
    transform: none;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  8% {
    transform: translateY(-28px);
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
  }
  14% {
    transform: translateY(0) scale(1.07, 0.9);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  17% {
    transform: translateY(-6px) scale(0.98, 1.02);
    animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1);
  }
  20%,
  100% {
    transform: none;
  }
}
@keyframes aa-pinshade {
  0% {
    transform: none;
    opacity: 1;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.35, 1);
  }
  8% {
    transform: scale(0.5);
    opacity: 0.35;
    animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35);
  }
  14% {
    transform: scale(1.15);
    opacity: 1;
  }
  17% {
    transform: scale(0.9);
  }
  20%,
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes aa-ripple {
  0%,
  13% {
    opacity: 0;
    transform: scale(0.3);
  }
  15% {
    opacity: 0.95;
  }
  36%,
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

/* Robot arm: lifts the block, sets it on the stack, lets go and rises empty; the block merges into the
   stack and a new one forms in the gripper. The upper arm turns A round the shoulder (521,220), the forearm
   turns -A round the elbow (597,181), so the gripper never tilts. The block is outside the arm groups (it
   stays on the stack), so it carries the same two turns as one list: keep its A values and stops in step
   with aa-arm. Lift -20deg = 30 units up, set +10deg = 15 units down (the stack top). */
.aa-arm {
  transform-origin: 521px 220px;
  animation: aa-arm 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aa-fore {
  transform-origin: 597px 181px;
  animation: aa-fore 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aa-block {
  transform-origin: 0 0;
  animation: aa-block 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aa-stackglow {
  opacity: 0;
  transform-origin: 664px 300px;
  animation: aa-stackglow 8s ease-out infinite;
}
@keyframes aa-arm {
  0%,
  8% {
    transform: none;
  }
  28%,
  34% {
    transform: rotate(-20deg);
  }
  52%,
  60% {
    transform: rotate(10deg);
  }
  74% {
    transform: rotate(-6deg);
  }
  86%,
  100% {
    transform: none;
  }
}
@keyframes aa-fore {
  0%,
  8% {
    transform: none;
  }
  28%,
  34% {
    transform: rotate(20deg);
  }
  52%,
  60% {
    transform: rotate(-10deg);
  }
  74% {
    transform: rotate(6deg);
  }
  86%,
  100% {
    transform: none;
  }
}
@keyframes aa-block {
  0%,
  8% {
    opacity: 1;
    transform: translate(521px, 220px) rotate(0) translate(76px, -39px) rotate(0)
      translate(68px, 110px) scale(1, 1) translate(-665px, -291px);
  }
  28%,
  34% {
    transform: translate(521px, 220px) rotate(-20deg) translate(76px, -39px) rotate(20deg)
      translate(68px, 110px) scale(1, 1) translate(-665px, -291px);
  }
  52% {
    transform: translate(521px, 220px) rotate(10deg) translate(76px, -39px) rotate(-10deg)
      translate(68px, 110px) scale(1, 1) translate(-665px, -291px);
  }
  54% {
    transform: translate(521px, 220px) rotate(10deg) translate(76px, -39px) rotate(-10deg)
      translate(68px, 110px) scale(1.05, 0.92) translate(-665px, -291px);
  }
  57% {
    transform: translate(521px, 220px) rotate(10deg) translate(76px, -39px) rotate(-10deg)
      translate(68px, 110px) scale(0.99, 1.02) translate(-665px, -291px);
  }
  60%,
  80% {
    opacity: 1;
    transform: translate(521px, 220px) rotate(10deg) translate(76px, -39px) rotate(-10deg)
      translate(68px, 110px) scale(1, 1) translate(-665px, -291px);
  }
  87% {
    opacity: 0;
    transform: translate(521px, 220px) rotate(10deg) translate(76px, -39px) rotate(-10deg)
      translate(68px, 110px) scale(1, 1) translate(-665px, -291px);
  }
  87.5% {
    opacity: 0;
    transform: translate(521px, 220px) rotate(0) translate(76px, -39px) rotate(0)
      translate(68px, 110px) scale(0.6, 0.6) translate(-665px, -291px);
  }
  97%,
  100% {
    opacity: 1;
    transform: translate(521px, 220px) rotate(0) translate(76px, -39px) rotate(0)
      translate(68px, 110px) scale(1, 1) translate(-665px, -291px);
  }
}
@keyframes aa-stackglow {
  0%,
  51% {
    opacity: 0;
    transform: scale(0.6);
  }
  54% {
    opacity: 0.9;
    transform: scale(1);
  }
  68% {
    opacity: 0;
    transform: scale(1.5);
  }
  80% {
    opacity: 0;
    transform: scale(0.6);
  }
  84% {
    opacity: 0.55;
    transform: scale(1);
  }
  92%,
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Dashboard: the bars drop low, then grow back one after the other; the line chart redraws with them. */
.aa-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: aa-bar-1 6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.aa-bar-2 {
  animation-name: aa-bar-2;
}
.aa-bar-3 {
  animation-name: aa-bar-3;
}
.aa-wave {
  animation: aa-wave 6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes aa-bar-1 {
  0%,
  4% {
    transform: none;
  }
  16%,
  26% {
    transform: scaleY(0.3);
  }
  40% {
    transform: scaleY(1.12);
  }
  48%,
  100% {
    transform: none;
  }
}
@keyframes aa-bar-2 {
  0%,
  6% {
    transform: none;
  }
  18%,
  32% {
    transform: scaleY(0.3);
  }
  46% {
    transform: scaleY(1.12);
  }
  54%,
  100% {
    transform: none;
  }
}
@keyframes aa-bar-3 {
  0%,
  8% {
    transform: none;
  }
  20%,
  38% {
    transform: scaleY(0.3);
  }
  52% {
    transform: scaleY(1.1);
  }
  60%,
  100% {
    transform: none;
  }
}
@keyframes aa-wave {
  0%,
  4% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
  12% {
    clip-path: inset(0 0 0 0);
    opacity: 0;
  }
  13% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  50%,
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

.aa-fs {
  animation: aa-flag 2.2s ease-in-out infinite;
}
@keyframes aa-flag {
  0%,
  100% {
    transform: translateY(calc(var(--a) * -1));
  }
  50% {
    transform: translateY(var(--a));
  }
}

/* Path: two light dots per pink stripe. When a dot arrives, a pink halo pulses on the next platform
   (same loop and delay as its dot). Waypoints sit at their share of the stripe length, so the speed stays even. */
.aa-dot {
  opacity: 0;
  animation:
    aa-path-1 4.5s linear infinite,
    aa-fade 4.5s linear infinite;
}
.aa-dot-2 {
  animation-delay: -2.25s;
}
.aa-dot-3 {
  animation-name: aa-path-2, aa-fade;
  animation-delay: -1.1s;
}
.aa-dot-4 {
  animation-name: aa-path-2, aa-fade;
  animation-delay: -3.35s;
}
.aa-arrive {
  opacity: 0;
  animation: aa-arrive 4.5s ease-out infinite;
}
.aa-arrive-1,
.aa-arrive-2 {
  transform-origin: 543px 473px;
}
.aa-arrive-3,
.aa-arrive-4 {
  transform-origin: 892px 302px;
}
.aa-arrive-2 {
  animation-delay: -2.25s;
}
.aa-arrive-3 {
  animation-delay: -1.1s;
}
.aa-arrive-4 {
  animation-delay: -3.35s;
}
@keyframes aa-path-1 {
  0% {
    transform: translate(430px, 566px);
  }
  31.7% {
    transform: translate(477px, 550px);
  }
  55.4% {
    transform: translate(510px, 533px);
  }
  74% {
    transform: translate(523px, 507px);
  }
  86.5% {
    transform: translate(528px, 488px);
  }
  100% {
    transform: translate(543px, 473px);
  }
}
@keyframes aa-path-2 {
  0% {
    transform: translate(775px, 368px);
  }
  32.3% {
    transform: translate(820px, 360px);
  }
  58.6% {
    transform: translate(853px, 343px);
  }
  75.9% {
    transform: translate(867px, 323px);
  }
  88.6% {
    transform: translate(877px, 308px);
  }
  100% {
    transform: translate(892px, 302px);
  }
}
@keyframes aa-fade {
  0% {
    opacity: 0;
  }
  10%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes aa-arrive {
  0%,
  86% {
    opacity: 0;
    transform: scale(0.4);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

/* GENERATED flag strips by outputs/hero-animations-v2/aanpak-anim/stronger/src/03-write-markup.py */
.aa-fs:nth-child(1) {
  --a: 0px;
  animation-delay: -2.2s;
}
.aa-fs:nth-child(2) {
  --a: 0.31px;
  animation-delay: -2.11s;
}
.aa-fs:nth-child(3) {
  --a: 0.71px;
  animation-delay: -2.02s;
}
.aa-fs:nth-child(4) {
  --a: 1.16px;
  animation-delay: -1.93s;
}
.aa-fs:nth-child(5) {
  --a: 1.64px;
  animation-delay: -1.84s;
}
.aa-fs:nth-child(6) {
  --a: 2.14px;
  animation-delay: -1.75s;
}
.aa-fs:nth-child(7) {
  --a: 2.66px;
  animation-delay: -1.66s;
}
.aa-fs:nth-child(8) {
  --a: 3.21px;
  animation-delay: -1.57s;
}
.aa-fs:nth-child(9) {
  --a: 3.76px;
  animation-delay: -1.48s;
}
.aa-fs:nth-child(10) {
  --a: 4.33px;
  animation-delay: -1.39s;
}
.aa-fs:nth-child(11) {
  --a: 4.92px;
  animation-delay: -1.3s;
}
.aa-fs:nth-child(12) {
  --a: 5.51px;
  animation-delay: -1.21s;
}
.aa-fs:nth-child(13) {
  --a: 6.12px;
  animation-delay: -1.12s;
}
.aa-fs:nth-child(14) {
  --a: 6.74px;
  animation-delay: -1.03s;
}
.aa-fs:nth-child(15) {
  --a: 7.36px;
  animation-delay: -0.94s;
}
.aa-fs:nth-child(16) {
  --a: 8px;
  animation-delay: -0.85s;
}
/* END GENERATED */

.aanpak-anim.is-paused .aa-layers *,
.aanpak-anim.is-paused > img,
.aanpak-anim.is-paused > .aa-layers {
  animation-play-state: paused;
}

/* WCAG 2.2.2: the loop has no end, so the visitor gets a pause control (same control as the systeem hero). */
.aa-pause {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.aa-pause[hidden] {
  display: none;
}
.aa-pause:hover {
  border-color: var(--accent);
}
.aa-pause:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.aa-pause svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.aa-pause .i-play,
.aa-pause[aria-pressed="true"] .i-pause {
  display: none;
}
.aa-pause[aria-pressed="true"] .i-play {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .aa-layers *,
  .aanpak-anim > img,
  .aanpak-anim > .aa-layers {
    animation: none !important;
  }
  .aa-pause {
    display: none;
  }
}