/* ==========================================================================
   Maatje – mascot motion & placement (owned by the Maatje system)
   Works with parts/maatje.php, parts/maatje-pose.php and assets/js/app.js.
   Motion rules (docs/brand/maatje-motion.md): idle almost still, anticipation →
   action → settle, squash & stretch only at emotional peaks, nothing keeps
   wiggling next to prices, everything off under prefers-reduced-motion.
   ========================================================================== */

:root {
	--m-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
	--m-ease-out: cubic-bezier(.22, 1, .36, 1);
	--m-ease-in: cubic-bezier(.55, 0, .75, .2);
	--m-ink: #13291f;
	--m-paper: #f5f7f0;
	--m-pond: #cfe8d8;
}

/* ---------- base rig (hooks inside the SVG) ---------- */
.maatje { display: block; overflow: visible; }
.maatje .m-body { transform-origin: 100px 190px; animation: m-idle 10.8s ease-in-out infinite; }
.maatje .m-lid { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); }
.maatje .m-pupils { transition: transform .25s var(--m-ease-out); }
.maatje .m-arm-r { transform-origin: 150px 150px; transform-box: view-box; }
.maatje .m-arm-l { transform-origin: 50px 150px; transform-box: view-box; }
.maatje .m-mouth-open, .maatje .m-mouth-o { opacity: 0; }
/* pose parts: a pose-specific mouth (.m-mouth-pose) hides while a state mouth takes over */
.maatje.is-happy .m-mouth-pose, .maatje.is-talk .m-mouth-pose, .maatje.is-think .m-mouth-pose { opacity: 0; }
.maatje .m-bit, .maatje .m-fx-pop, .maatje .m-think-dots circle, .maatje .m-zzz path { transform-box: fill-box; transform-origin: center; }

/* ---------- states toggled by JS (Maatje.pose) ---------- */
.maatje.is-blink .m-lid { animation: blink .18s ease-in-out; }

.maatje.is-wave .m-arm-r { animation: wave 1.1s ease-in-out 2; }
.maatje.is-wave .m-body { animation: m-sway 1.1s ease-in-out 2; }

.maatje.is-happy .m-mouth-smile { opacity: 0; }
.maatje.is-happy .m-mouth-open { opacity: 1; }
.maatje.is-happy .m-body { animation: jump .7s var(--m-ease-out); }

.maatje.is-think .m-pupils { transform: translate(-5px, -6px); }
.maatje.is-think .m-mouth-smile { opacity: 0; }
.maatje.is-think .m-mouth-o { opacity: 1; }
.maatje.is-think .m-body { animation: m-ponder 2.4s ease-in-out infinite; }

.maatje.is-talk .m-mouth-smile { animation: talk-a .32s steps(1) infinite; }
.maatje.is-talk .m-mouth-open { animation: talk-b .32s steps(1) infinite; }

/* new one-shot states (add with Maatje.pose(el, 'is-hop', 800) etc.) */
.maatje.is-hop .m-body { animation: m-hop .8s var(--m-ease-out); }
.maatje.is-celebrate .m-body { animation: jump .7s var(--m-ease-out); }
.maatje.is-celebrate .m-mouth-smile { opacity: 0; }
.maatje.is-celebrate .m-mouth-open { opacity: 1; }
.maatje.is-celebrate .m-arm-r { animation: m-cheer-r .7s var(--m-ease-out); }
.maatje.is-celebrate .m-arm-l { animation: m-cheer-l .7s var(--m-ease-out); }
.maatje.is-celebrate .m-bit { animation: m-burst 1s var(--m-ease-out) both; }
.maatje.is-surprised .m-body { animation: m-pop .45s var(--m-ease-spring); }
.maatje.is-surprised .m-mouth-smile { opacity: 0; }
.maatje.is-surprised .m-mouth-o { opacity: 1; }
.maatje.is-look .m-pupils { animation: m-look 2.8s ease-in-out; }
.maatje.is-nod .m-body { animation: m-nod .6s ease-in-out; }

/* sticker outline for dark backgrounds (TikTok cards, footer) */
.maatje.is-sticker { filter: drop-shadow(2px 0 0 var(--m-paper)) drop-shadow(-2px 0 0 var(--m-paper)) drop-shadow(0 2px 0 var(--m-paper)) drop-shadow(0 -2px 0 var(--m-paper)); }

/* touch devices have no cursor to follow: let Maatje glance around now and then */
@media (hover: none) {
	.maatje:not(.is-think) .m-pupils { animation: m-look 9s ease-in-out 3s infinite; }
}

/* ---------- pose parts (parts/maatje-pose.php adds .maatje--{pose}) ---------- */
.maatje .m-fx-pop { animation: m-pop-in .5s var(--m-ease-spring) .15s both; }
.maatje--point .m-arm-r { animation: m-nudge-r .8s ease-in-out .3s 3; }
.maatje--thumbs .m-arm-r { animation: m-thumb .6s var(--m-ease-spring) .1s both; }
.maatje--celebrate .m-bit { animation: m-burst 1s var(--m-ease-out) both; }
.maatje--celebrate .m-body { animation: jump .7s var(--m-ease-out), m-idle 10.8s ease-in-out .7s infinite; }
.maatje--think .m-think-dots circle { animation: m-dot 1.4s ease-in-out infinite; }
.maatje--think .m-think-dots circle:nth-child(2) { animation-delay: .2s; }
.maatje--search .m-arm-r { animation: m-scan 2.6s ease-in-out infinite; }
.maatje--phone .m-fx-pop { animation: m-pop-in .5s var(--m-ease-spring) .15s both, m-twinkle 2.4s ease-in-out .7s 3; }
.maatje--sleep .m-body { animation: m-sleep 4.2s ease-in-out infinite; }
.maatje--sleep .m-zzz path { animation: m-zzz 3s ease-in-out infinite; }
.maatje--sleep .m-zzz path + path { animation-delay: 1.5s; }
.maatje--surprised .m-body { animation: m-pop .45s var(--m-ease-spring), m-idle 10.8s ease-in-out .45s infinite; }
.maatje--wave .m-arm-r { animation: wave 1.1s ease-in-out .2s 2; }

/* ---------- activity poses (round 3): props + gentle intros ---------- */
.maatje .m-sound path, .maatje .m-note, .maatje .m-glow, .maatje .m-screen path,
.maatje .m-bub1, .maatje .m-bub2, .maatje .m-wifi path, .maatje .m-coin, .maatje .m-piggy, .maatje .m-letter,
.maatje .m-brows, .maatje .m-suitcase, .maatje .m-glint, .maatje .m-cal, .maatje .m-cal-ring,
.maatje .m-gift, .maatje .m-bow { transform-box: fill-box; transform-origin: center; }
.maatje .m-gift, .maatje .m-piggy { transform-origin: 50% 100%; }
/* note: never set transform-origin on elements that carry an SVG transform attribute (.m-callphone, .m-sim) */
.maatje .m-fx-late { animation-delay: .45s; }

/* call: chatting in three bursts, sound waves pulse */
.maatje--call .m-mouth-pose { animation: m-yap-b 2.6s steps(1) .3s 3; }
.maatje--call .m-mouth-smile { animation: m-yap-a 2.6s steps(1) .3s 3; }
.maatje--call .m-sound path { animation: m-wave-out 1.3s ease-out 6; }
.maatje--call .m-sound path + path { animation-delay: .25s; }
/* music: grooves for a while, notes keep floating gently */
.maatje--music .m-body { animation: m-groove 1.1s ease-in-out 8, m-idle 10.8s ease-in-out 8.8s infinite; }
.maatje--music .m-note { animation: m-note 3.6s ease-in-out infinite; }
.maatje--music .m-note:nth-child(2) { animation-delay: 1.2s; }
.maatje--music .m-note:nth-child(3) { animation-delay: 2.4s; }
/* stream: screen glow flickers, play button pulses */
.maatje--stream .m-glow { animation: m-glow 1.6s ease-in-out 4; }
.maatje--stream .m-screen path { animation: m-pulse 1.6s ease-in-out 4; }
/* text: thumbs tap, chat bubbles pop in turn (gentle loop) */
.maatje--text .m-arm-l { animation: m-tap .36s ease-in-out 10; }
.maatje--text .m-arm-r { animation: m-tap .36s ease-in-out .18s 10; }
.maatje--text .m-bub1, .maatje--text .m-bub2 { animation: m-bubble 4.8s var(--m-ease-spring) infinite; }
.maatje--text .m-bub2 { animation-delay: 1.2s; }
/* laptop: hotspot wifi ripples */
.maatje--laptop .m-wifi path { animation: m-wifi 1.5s ease-in-out 4; }
.maatje--laptop .m-wifi .m-w2 { animation-delay: .2s; }
.maatje--laptop .m-wifi .m-w3 { animation-delay: .4s; }
/* save: coin drops into the piggy bank, piggy bounces */
.maatje--save .m-coin { animation: m-coin 2.2s var(--m-ease-out) .3s 3 both; }
.maatje--save .m-piggy { animation: m-squish 2.2s ease-in-out .3s 3; }
/* letter: letter slides up, brows jump */
.maatje--letter .m-letter { animation: m-slide-up .6s var(--m-ease-spring) .15s both; }
.maatje--letter .m-brows { animation: m-brow .5s var(--m-ease-spring) .35s both; }
.maatje--letter .m-body { animation: m-pop .45s var(--m-ease-spring) .3s, m-idle 10.8s ease-in-out .75s infinite; }
/* travel: suitcase rolls in, shades glint, waves */
.maatje--travel .m-suitcase { animation: m-roll-in .7s var(--m-ease-spring) both; }
.maatje--travel .m-glint { animation: m-glint 1.8s ease-in-out .6s 2; }
.maatje--travel .m-arm-r { animation: wave 1.1s ease-in-out .5s 2; }
/* sim: raises the card */
.maatje--sim .m-arm-r { animation: m-raise .6s var(--m-ease-spring) .1s both; }
/* calendar: page drops in, date ring pulses, finger taps up */
.maatje--calendar .m-cal { animation: m-drop-in .6s var(--m-ease-spring) .1s both; }
.maatje--calendar .m-cal-ring { animation: m-pulse 1.2s ease-in-out .7s 3; }
.maatje--calendar .m-arm-r { animation: m-tap-up .7s ease-in-out .7s 3; }
/* gift: box wiggles, bow pops */
.maatje--gift .m-gift { animation: m-wiggle .9s ease-in-out .3s 2; }
.maatje--gift .m-bow { animation: m-pop-in .5s var(--m-ease-spring) .15s both; }

/* ---------- perched mascot (over a card edge) ---------- */
.maatje-perch svg { animation: perch-up .9s var(--m-ease-spring) .25s both; }

/* ---------- peek: pops up from the bottom-right edge (fixed) ---------- */
.peek { position: fixed; z-index: 60; right: max(12px, env(safe-area-inset-right, 0px)); bottom: 0; width: 132px; pointer-events: none; }
.peek-btn { pointer-events: auto; display: block; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; transform: translateY(62%); transition: transform .55s var(--m-ease-spring); }
.peek-btn:hover, .peek.is-up .peek-btn { transform: translateY(18%); }
.peek.is-entering .peek-btn { animation: m-peek-enter .7s var(--m-ease-out) both; }
.peek.is-leaving .peek-btn { animation: m-peek-exit .35s var(--m-ease-in) both; }
.peek-bubble { pointer-events: auto; position: absolute; right: 100%; bottom: 76px; width: max-content; max-width: min(270px, calc(100vw - 170px)); margin-right: -8px; padding: 12px 34px 12px 14px; background: var(--card, #fff); border: var(--line, 2px solid #13291f); border-radius: 16px 16px 4px 16px; box-shadow: var(--sticker, 3px 3px 0 #13291f); font-size: var(--t-sm, .875rem); font-weight: 600; opacity: 0; transform: translateY(10px) scale(.95); transform-origin: bottom right; transition: opacity .25s, transform .35s var(--m-ease-spring); }
.peek.is-up .peek-bubble { opacity: 1; transform: none; }
.peek-bubble button.x { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; cursor: pointer; border-radius: 6px; color: var(--ink-3, #6b7f72); }
.peek-bubble button.x:hover { background: var(--paper-2, #ebf0e4); color: var(--ink, #13291f); }
.peek-bubble .peek-cta { display: inline-block; margin-top: 6px; font-weight: 700; }
.peek.is-hidden { display: none; }
@media (max-width: 600px) { .peek { width: 96px; } .peek-bubble { bottom: 56px; } }

/* ---------- peek from any edge (inline, e.g. the top/bottom of a card) ----------
   <div class="maatje-peek"> <svg class="maatje">…</svg> </div>   → add .is-up to pop up, .is-out to hide.
   Variant: .maatje-peek--top (hangs upside-down below a top edge / under a card). */
.maatje-peek { position: relative; overflow: hidden; width: var(--peek-size, 120px); aspect-ratio: 1 / .62; }
.maatje-peek > .maatje { position: absolute; left: 0; bottom: 0; width: 100%; transform: translateY(68%); transition: transform .55s var(--m-ease-spring); }
.maatje-peek.is-up > .maatje, .maatje-peek:hover > .maatje { transform: translateY(38%); }
.maatje-peek.is-out > .maatje { transform: translateY(105%); transition-timing-function: var(--m-ease-in); transition-duration: .3s; }
.maatje-peek--top > .maatje { top: 0; bottom: auto; transform: rotate(180deg) translateY(68%); }
.maatje-peek--top.is-up > .maatje, .maatje-peek--top:hover > .maatje { transform: rotate(180deg) translateY(38%); }
.maatje-peek--top.is-out > .maatje { transform: rotate(180deg) translateY(105%); }

/* ---------- hop between lily pads (wizard progress) ---------- */
.pads .maatje-hop { position: absolute; bottom: 12px; width: 64px; left: 0; transition: left .6s var(--m-ease-out); }
.pads .maatje-hop svg { transform-origin: 50% 95%; }
.pads .maatje-hop.is-hopping svg { animation: hop .6s var(--m-ease-out); }
@media (max-width: 760px) { .pads .maatje-hop { width: 48px; } }

/* ---------- loader: Maatje hopping on a lily pad ----------
   <span class="maatje-loader" role="status" aria-label="Laden"> [parts/maatje] </span> */
.maatje-loader { --size: 72px; position: relative; display: inline-grid; justify-items: center; width: var(--size); padding-bottom: calc(var(--size) * .1); }
.maatje-loader::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 0; height: calc(var(--size) * .2); border-radius: 50%; background: var(--m-pond); border: 2px solid var(--m-ink); animation: m-pad-dip .9s var(--m-ease-out) infinite; }
.maatje-loader > svg, .maatje-loader > .maatje { position: relative; z-index: 1; width: 100%; transform-origin: 50% 95%; animation: m-loader-hop .9s var(--m-ease-out) infinite; }
.maatje-loader .m-body { animation: none; }

/* ---------- keyframes (names kept from main.css where JS/CSS already relied on them) ---------- */
@keyframes breathe { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.015, .985) } }
@keyframes m-idle {
	0%, 33.3%, 66.6%, 100% { transform: rotate(0) scale(1, 1) }
	16.6%, 50% { transform: rotate(0) scale(1.015, .985) }
	74% { transform: rotate(-3.5deg) scale(1, 1) }
	81% { transform: rotate(-3.5deg) scale(1.012, .988) }
	89% { transform: rotate(.6deg) scale(1, 1) }
	94% { transform: rotate(0) scale(1, 1) }
}
@keyframes blink { 0%, 100% { transform: scaleY(0) } 50% { transform: scaleY(1) } }
@keyframes wave { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-28deg) } 75% { transform: rotate(10deg) } }
@keyframes m-sway { 0%, 100% { transform: rotate(0) } 25% { transform: rotate(-2.5deg) } 75% { transform: rotate(1.5deg) } }
@keyframes jump { 0% { transform: translateY(0) } 30% { transform: translateY(-22px) scale(.96, 1.05) } 60% { transform: translateY(0) scale(1.06, .93) } 100% { transform: none } }
@keyframes m-hop {
	0% { transform: translateY(0) scale(1, 1) }
	18% { transform: translateY(0) scale(1.08, .9) }                 /* anticipation squash */
	48% { transform: translateY(-34px) scale(.94, 1.08) }             /* stretch in the air */
	72% { transform: translateY(0) scale(1.1, .88) }                  /* land squash */
	86% { transform: translateY(0) scale(.98, 1.03) }
	100% { transform: none }
}
@keyframes hop {
	0% { transform: translateY(0) scale(1, 1) }
	15% { transform: translateY(0) scale(1.08, .9) }
	45% { transform: translateY(-38px) rotate(-8deg) scale(.95, 1.06) }
	75% { transform: translateY(0) scale(1.1, .88) }
	88% { transform: scale(.98, 1.03) }
	100% { transform: none }
}
@keyframes m-ponder { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-2deg) } }
@keyframes m-pop { 0% { transform: scale(1, 1) } 35% { transform: translateY(-6px) scale(.94, 1.08) } 100% { transform: none } }
@keyframes m-nod { 0%, 100% { transform: rotate(0) } 35% { transform: rotate(3deg) scale(1.01, .98) } 70% { transform: rotate(-1deg) } }
@keyframes talk-a { 0% { opacity: 1 } 50% { opacity: 0 } }
@keyframes talk-b { 0% { opacity: 0 } 50% { opacity: 1 } }
@keyframes m-look {
	0%, 18%, 44%, 62%, 100% { transform: translate(0, 0) }
	24%, 38% { transform: translate(-4px, 1px) }
	68%, 84% { transform: translate(4px, -3px) }
}
@keyframes m-cheer-r { 0%, 100% { transform: rotate(0) } 40% { transform: rotate(-70deg) } }
@keyframes m-cheer-l { 0%, 100% { transform: rotate(0) } 40% { transform: rotate(70deg) } }
@keyframes m-burst {
	0% { opacity: 0; transform: translate(calc(var(--dx, 0px) * -3), calc(var(--dy, 0px) * -3)) scale(.2) rotate(-40deg) }
	65% { opacity: 1; transform: translate(calc(var(--dx, 0px) * .2), calc(var(--dy, 0px) * .2)) scale(1.1) rotate(8deg) }
	100% { opacity: 1; transform: none }
}
@keyframes m-pop-in { 0% { opacity: 0; transform: scale(0) } 100% { opacity: 1; transform: none } }
@keyframes m-nudge-r { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(3px) } }
@keyframes m-thumb { 0% { transform: rotate(24deg) } 100% { transform: none } }
@keyframes m-scan { 0%, 100% { transform: rotate(0) } 50% { transform: rotate(-7deg) } }
@keyframes m-twinkle { 0%, 100% { transform: scale(1) rotate(0) } 50% { transform: scale(1.35) rotate(20deg) } }
@keyframes m-dot { 0%, 100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(-3px); opacity: 1 } }
@keyframes m-sleep { 0%, 100% { transform: scale(1, 1) } 50% { transform: scale(1.03, .97) } }
@keyframes m-zzz { 0% { transform: translate(0, 4px); opacity: 0 } 25%, 70% { opacity: 1 } 100% { transform: translate(5px, -10px); opacity: 0 } }
@keyframes perch-up { from { transform: translateY(70%) } to { transform: none } }
@keyframes m-peek-enter { 0% { transform: translateY(105%) } 60% { transform: translateY(52%) } 80% { transform: translateY(66%) } 100% { transform: translateY(62%) } }
@keyframes m-peek-exit { 0% { transform: translateY(62%) } 25% { transform: translateY(56%) } 100% { transform: translateY(110%) } }
@keyframes m-loader-hop {
	0%, 100% { transform: translateY(0) scale(1.07, .91) }
	18% { transform: translateY(0) scale(1, 1) }
	48% { transform: translateY(-34%) scale(.95, 1.06) }
	76% { transform: translateY(0) scale(1.08, .9) }
}
@keyframes m-pad-dip { 0%, 60%, 100% { transform: none } 78% { transform: translateY(2px) scaleX(1.06) } }
@keyframes m-fade { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }
/* round 3 */
@keyframes m-yap-a { 0% { opacity: 0 } 10% { opacity: 1 } 20% { opacity: 0 } 30% { opacity: 1 } 40% { opacity: 0 } 50% { opacity: 1 } 60%, 100% { opacity: 0 } }
@keyframes m-yap-b { 0% { opacity: 1 } 10% { opacity: 0 } 20% { opacity: 1 } 30% { opacity: 0 } 40% { opacity: 1 } 50% { opacity: 0 } 60%, 100% { opacity: 1 } }
@keyframes m-wave-out { 0% { opacity: 0; transform: translateX(-3px) } 40% { opacity: 1 } 100% { opacity: 0; transform: translateX(4px) } }
@keyframes m-groove { 0%, 100% { transform: rotate(0) scale(1, 1) } 25% { transform: rotate(-3deg) scale(1.01, .99) } 50% { transform: rotate(0) scale(1.02, .97) } 75% { transform: rotate(3deg) scale(1.01, .99) } }
@keyframes m-note { 0% { opacity: 0; transform: translateY(8px) rotate(-8deg) } 20%, 70% { opacity: 1 } 100% { opacity: 0; transform: translateY(-12px) rotate(10deg) } }
@keyframes m-glow { 0%, 100% { opacity: .8 } 30% { opacity: .45 } 60% { opacity: .95 } }
@keyframes m-pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.18) } }
@keyframes m-tap { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(2px) } }
@keyframes m-bubble { 0%, 8% { opacity: 0; transform: scale(.3) translateY(6px) } 18%, 70% { opacity: 1; transform: none } 80%, 100% { opacity: 0; transform: translateY(-6px) } }
@keyframes m-wifi { 0%, 100% { opacity: .25 } 40%, 60% { opacity: 1 } }
@keyframes m-coin { 0% { opacity: 0; transform: translateY(-16px) } 25%, 50% { opacity: 1; transform: translateY(0) } 72% { opacity: 0; transform: translateY(12px) scale(.8, .6) } 73% { opacity: 0; transform: translateY(-16px) } 100% { opacity: 1; transform: translateY(0) } }
@keyframes m-squish { 0%, 60%, 100% { transform: none } 74% { transform: scale(1.05, .94) } 86% { transform: scale(.98, 1.03) } }
@keyframes m-slide-up { 0% { transform: translateY(14px) } 100% { transform: none } }
@keyframes m-brow { 0% { transform: translateY(6px) } 100% { transform: none } }
@keyframes m-roll-in { 0% { opacity: 0; transform: translateX(-24px) rotate(-8deg) } 100% { opacity: 1; transform: none } }
@keyframes m-glint { 0%, 100% { opacity: 0 } 40%, 60% { opacity: .9 } }
@keyframes m-raise { 0% { transform: rotate(24deg) translateY(8px) } 100% { transform: none } }
@keyframes m-drop-in { 0% { opacity: 0; transform: translateY(-14px) rotate(-10deg) } 100% { opacity: 1; transform: none } }
@keyframes m-tap-up { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@keyframes m-wiggle { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-5deg) } 40% { transform: rotate(4deg) } 60% { transform: rotate(-3deg) } 80% { transform: rotate(2deg) } }

/* ---------- reduced motion: static poses, instant state swaps ---------- */
@media (prefers-reduced-motion: reduce) {
	.maatje, .maatje *, .maatje-perch svg, .peek-btn, .peek-bubble, .maatje-peek > .maatje,
	.pads .maatje-hop, .pads .maatje-hop svg, .maatje-loader::after, .maatje-loader > svg {
		animation: none !important;
		transition: none !important;
	}
	.maatje-loader > svg, .maatje-loader > .maatje { animation: m-fade 1.6s ease-in-out infinite !important; }
}