/* Explicit animation definitions win over inherited legacy reduced-motion rules.
   The controller still defaults to the visitor's OS preference unless they opt in. */
html[data-beweging="aan"] .piece{animation:piece-fit 7s cubic-bezier(.45,0,.2,1) infinite!important}
html[data-beweging="aan"] .join-dot{animation:join-glow 7s ease-in-out infinite!important}
html[data-beweging="aan"] .satellite,html[data-beweging="aan"] .idea-tile{animation:editorial-float 5.5s ease-in-out infinite!important}
html[data-beweging="aan"] .delay{animation-delay:-2.7s!important}
html[data-beweging="aan"] .tile-two{animation-delay:-1.5s!important}
html[data-beweging="aan"] .tile-three{animation-delay:-3s!important}
html[data-beweging="aan"] .tile-four{animation-delay:-4.2s!important}
html[data-beweging="aan"] .art-particle{animation:editorial-travel 4.8s linear infinite!important}
html[data-beweging="aan"] .art-particle:nth-of-type(2){animation-delay:-1.6s!important}
html[data-beweging="aan"] .art-particle:nth-of-type(3){animation-delay:-3.2s!important}
html[data-beweging="aan"] .core,html[data-beweging="aan"] .idea-center{animation:editorial-core 4.8s ease-in-out infinite!important}
html[data-beweging="aan"] .talk-left,html[data-beweging="aan"] .talk-right{animation:conversation-sway 5s ease-in-out infinite!important}
html[data-beweging="aan"] .talk-right{animation-delay:-2.5s!important}
html[data-beweging="aan"] .talk-dot{animation:conversation-dot 2.4s ease-in-out infinite!important}
html[data-beweging="aan"] .talk-dot:nth-of-type(2){animation-delay:-.8s!important}
html[data-beweging="aan"] .talk-dot:nth-of-type(3){animation-delay:-1.6s!important}
html[data-beweging="aan"] .team-person{animation:team-together 5.8s ease-in-out infinite!important}
html[data-beweging="aan"] .team-person:nth-of-type(2){animation-delay:-1.8s!important}
html[data-beweging="aan"] .team-person:nth-of-type(3){animation-delay:-3.6s!important}
html[data-beweging="aan"] .focus-lens{animation:focus-look 6.5s ease-in-out infinite!important}
html[data-beweging="aan"] .focus-marks{animation:editorial-core 6.5s ease-in-out infinite!important}
/* Keep each original illustration intact. No separate neck, shoulder or arm. */
.hero--oprichters .portretten{max-width:800px;gap:32px;padding-inline:20px;padding-bottom:55px;align-items:start}
.hero--oprichters .portret{width:min(46%,320px)}
.hero--oprichters .portret .beeld{background:#ecd4bf;border:1px solid #ddbda4;isolation:isolate}
.hero--oprichters .portret:nth-child(2) .beeld{background:#dce4d1;border-color:#bfcdb1}
.founder-character{position:relative;width:94%;transform-origin:50% 95%;will-change:transform}
.portret .founder-character>img{width:100%;height:auto;animation:none!important;transform:none!important}
.portret .founder-character>.founder-eyes{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;clip-path:inset(27% 23% 62% 29% round 12px);pointer-events:none}
html[data-beweging="aan"] .founder-character{animation:founder-presence 7s ease-in-out infinite!important}
html[data-beweging="aan"] .founder-atakan{animation:founder-presence-other 8s ease-in-out infinite!important;animation-delay:-2.5s!important}
html[data-beweging="aan"] .portret .founder-character>.founder-eyes{animation:founder-blink 5.7s linear infinite!important}
html[data-beweging="aan"] .portret .founder-atakan>.founder-eyes{animation-delay:-2.1s!important;animation-duration:6.3s!important}
html[data-beweging="aan"] .portret:not(:has(.founder-character)) img{animation:founder-presence 7s ease-in-out infinite!important}
@keyframes founder-presence{0%,100%{transform:translate(0,2px) rotate(-.9deg)}30%{transform:translate(2px,-5px) rotate(.8deg)}65%{transform:translate(-1px,-1px) rotate(.2deg)}}
@keyframes founder-presence-other{0%,100%{transform:translate(0,-3px) rotate(.8deg)}35%{transform:translate(-2px,2px) rotate(-.7deg)}70%{transform:translate(1px,-5px) rotate(.2deg)}}
@keyframes founder-blink{0%,36%,41%,76%,81%,100%{opacity:0}38%,39%,78%,79%{opacity:1}}
.motion-access{position:fixed;left:14px;bottom:14px;z-index:150;background:#faf7f1;color:#36332e;border:1px solid #b4a797;box-shadow:0 3px 15px #36332e15;opacity:0;pointer-events:none;transform:translateY(8px);font-size:12px;padding:10px 14px}
.motion-access:focus-visible,.motion-access.motion-is-off{opacity:1;pointer-events:auto;transform:none}
/* Final pause rules apply equally to CSS loops, portraits and legacy artwork. */
html[data-beweging="uit"] .founder-character,html[data-beweging="uit"] .portret img{animation:none!important;transform:none!important}
html[data-beweging="uit"] .founder-eyes{opacity:0!important}
html[data-beweging="uit"] *,html[data-page-hidden] *{animation-play-state:paused!important}
@media(max-width:600px){.hero--oprichters .portretten{gap:14px;padding-inline:12px}.hero--oprichters .portret b{font-size:14px}.hero--oprichters .portret small{font-size:12px}}
/* The arrival of all three inputs precedes the receiver and confirmation.
   Shared eight-second cycle; staggered packets arrive by 5.2 seconds. */
html[data-beweging="aan"] .meaning-software .software-packet{animation:software-delivery 8s linear infinite!important}
html[data-beweging="aan"] .meaning-software .packet-0{animation-delay:0s!important}
html[data-beweging="aan"] .meaning-software .packet-1{animation-delay:.4s!important}
html[data-beweging="aan"] .meaning-software .packet-2{animation-delay:.8s!important}
html[data-beweging="aan"] .meaning-software .meaning-core{animation:software-all-received 8s ease-in-out infinite!important}
html[data-beweging="aan"] .meaning-software .meaning-result svg{animation:software-all-confirmed 8s ease-in-out infinite!important}
@keyframes software-delivery{0%{offset-distance:0%;opacity:0}5%{opacity:1}52%{opacity:1}55%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
@keyframes software-all-received{0%,66%,100%{border-color:#dac7b2;box-shadow:0 0 0 0 #97533400}70%,88%{border-color:#aa6749;box-shadow:0 0 0 3px #9753340d}}
@keyframes software-all-confirmed{0%,67%,100%{opacity:.45;transform:scale(1)}75%,90%{opacity:1;transform:scale(1.08)}}
/* Conversation: composing first, confirmation afterwards, no competing loop. */
html[data-beweging="aan"] .talk-left,html[data-beweging="aan"] .talk-right{animation:conversation-sway 8s ease-in-out infinite!important;animation-delay:0s!important}
html[data-beweging="aan"] .talk-dot{animation:conversation-compose 8s ease-in-out infinite!important}
html[data-beweging="aan"] .talk-dot:nth-of-type(2){animation-delay:.2s!important}
html[data-beweging="aan"] .talk-dot:nth-of-type(3){animation-delay:.4s!important}
html[data-beweging="aan"] .talk-right .art-line{animation:conversation-answer 8s ease-in-out infinite!important;transform-box:fill-box;transform-origin:center}
@keyframes conversation-compose{0%,100%{opacity:.35;transform:translateY(0)}15%,35%{opacity:1;transform:translateY(-5px)}25%,45%,55%,95%{opacity:.35;transform:translateY(0)}}
@keyframes conversation-answer{0%,61%,100%{opacity:.2;transform:scale(.92)}69%,90%{opacity:1;transform:scale(1)}}
/* Short connectors keep particles inside the line on tablet and mobile. */
.general-build-line{--flow-distance:39px}
@keyframes meaning-forward{0%{transform:translateX(0);opacity:0}15%,85%{opacity:1}100%{transform:translateX(var(--flow-distance,39px));opacity:0}}
@keyframes meaning-data{0%{transform:translateY(0);opacity:0}15%,85%{opacity:1}100%{transform:translateY(var(--flow-distance,40px));opacity:0}}
@media(max-width:900px){.general-build-line{--flow-distance:24px}}
@media(max-width:700px){.general-build-line{--flow-distance:29px}}
/* The whole group pauses, so paths and confirmations keep their relationship. */
html[data-beweging="aan"] :is(#motion-viewport-scope,[data-motion-away]),html[data-beweging="aan"] :is(#motion-viewport-scope,[data-motion-away]) *{animation-play-state:paused!important}

html[data-page-hidden] :is(#motion-page-scope,*){animation-play-state:paused!important}