/*
 * Sintlijstje: hoe de Sint- en Piet-figuren bewegen (plan-v5 §16).
 * Gebruikt door de publieke site én het plakboek. De tekeningen staan in figuren.js.
 */
/* ---------- Figuren: beweging (alleen klassen, de tekening staat in figuren.js) ---------- */
.fig g { transform-box: fill-box; }
.sint__arm { transform-origin: 8% 88%; animation: sint-zwaai 1.8s ease-in-out infinite; }
.sint__hoofd { transform-origin: 50% 95%; animation: sint-knik 5s ease-in-out infinite; }
.sint__mijter { transform-origin: 50% 100%; animation: mijter-scheef 5s ease-in-out infinite; }
.piet__arm { transform-origin: 8% 90%; animation: piet-zwaai .9s ease-in-out infinite; }
.piet__veer { transform-origin: 0% 100%; animation: veer 1.4s ease-in-out infinite; }
.paard__been { transform-origin: 50% 0; }
.paard__been--av, .paard__been--vd { animation: been-a .9s ease-in-out infinite; }
.paard__been--vv, .paard__been--ad { animation: been-b .9s ease-in-out infinite; }
.paard__lijf { animation: paard-wieg .45s ease-in-out infinite alternate; }
.paard__staart { transform-origin: 100% 10%; animation: staart 1.3s ease-in-out infinite; }
.boot__dobber { animation: dobber 2.6s ease-in-out infinite; }
.boot__vlag { transform-origin: 0% 50%; animation: vlag 1.1s ease-in-out infinite; }
.boot__rook .rook { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; animation: rook 3s ease-out infinite; }
.boot__rook .rook--2 { animation-delay: 1s; }
.boot__rook .rook--3 { animation-delay: 2s; }
.stil .fig *, .stil.fig * { animation: none !important; }

@keyframes sint-zwaai { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-16deg); } }
@keyframes sint-knik { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-4deg); } 86% { transform: rotate(2deg); } }
@keyframes mijter-scheef { 0%, 74%, 100% { transform: rotate(0); } 82% { transform: rotate(-9deg) translateX(-1px); } 92% { transform: rotate(-6deg); } }
@keyframes piet-zwaai { 0%, 100% { transform: rotate(6deg); } 50% { transform: rotate(-22deg); } }
@keyframes veer { 50% { transform: rotate(-10deg); } }
@keyframes been-a { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-14deg); } }
@keyframes been-b { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes paard-wieg { to { transform: translateY(-1.6px); } }
@keyframes staart { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg); } }
@keyframes dobber { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(2.5px) rotate(-1deg); } }
@keyframes vlag { 50% { transform: scaleX(.8) skewY(4deg); } }
@keyframes rook { 0% { opacity: .95; transform: translate(0, 10px) scale(.5); } 100% { opacity: 0; transform: translate(-18px, -18px) scale(1.3); } }
@keyframes twinkel { 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .fig, .fig * { animation: none !important; }
}