/* Zählwiese 215 | Pictured-memory: three modes, soothing touch response, joyful crayon rewards. */

/* The hand-drawn animals lean their heads together, then visibly sway and nuzzle
   three times, with a tiny breathing bounce. No drawn-in-CSS replacement art. */
#app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-left {
  left:0%!important;
  animation:zw215-hug-left 2.6s linear both!important;
  transform-origin:50% 88%!important;
  will-change:transform!important;
}
#app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-right {
  right:0%!important;
  animation:zw215-hug-right 2.6s linear both!important;
  transform-origin:50% 88%!important;
  will-change:transform!important;
}
@keyframes zw215-hug-left{
  0%{transform:translate3d(-38%,5px,0) rotate(-9deg) scale(.96)}
  23%{transform:translate3d(2%,0,0) rotate(-2deg) scale(1)}
  34%{transform:translate3d(31%,0,0) rotate(11deg) scale(1.035)}
  42%{transform:translate3d(29%,-5px,0) rotate(5deg) scale(1.035)}
  49%{transform:translate3d(34%,2px,0) rotate(14deg) scale(1.025)}
  56%{transform:translate3d(29%,-4px,0) rotate(6deg) scale(1.035)}
  64%{transform:translate3d(33%,2px,0) rotate(13deg) scale(1.03)}
  72%{transform:translate3d(29%,-3px,0) rotate(6deg) scale(1.04)}
  81%{transform:translate3d(32%,0,0) rotate(11deg) scale(1.025)}
  91%,100%{transform:translate3d(31%,0,0) rotate(9deg) scale(1.025)}
}
@keyframes zw215-hug-right{
  0%{transform:translate3d(38%,5px,0) scaleX(-1) rotate(-9deg) scale(.96)}
  23%{transform:translate3d(-2%,0,0) scaleX(-1) rotate(-2deg) scale(1)}
  34%{transform:translate3d(-31%,0,0) scaleX(-1) rotate(11deg) scale(1.035)}
  42%{transform:translate3d(-29%,5px,0) scaleX(-1) rotate(5deg) scale(1.035)}
  49%{transform:translate3d(-34%,-2px,0) scaleX(-1) rotate(14deg) scale(1.025)}
  56%{transform:translate3d(-29%,4px,0) scaleX(-1) rotate(6deg) scale(1.035)}
  64%{transform:translate3d(-33%,-2px,0) scaleX(-1) rotate(13deg) scale(1.03)}
  72%{transform:translate3d(-29%,3px,0) scaleX(-1) rotate(6deg) scale(1.04)}
  81%{transform:translate3d(-32%,0,0) scaleX(-1) rotate(11deg) scale(1.025)}
  91%,100%{transform:translate3d(-31%,0,0) scaleX(-1) rotate(9deg) scale(1.025)}
}
/* A soft illustrated glow and floating heart around each nuzzle. */
#app .memory127-page .zw212-cuddle.zw215-hug {
  background:radial-gradient(ellipse at 50% 71%,#fff9caeb 0%,#fff6d59a 35%,transparent 74%)!important;
  filter:drop-shadow(0 3px 2px #705a3438)!important;
}
#app .memory127-page .zw215-hug .zw195-cuddle-heart {
  animation:zw215-hug-heart 2.6s ease-out both!important;
  animation-delay:calc(var(--i)*70ms)!important;
}
@keyframes zw215-hug-heart{
  0%,28%{opacity:0;transform:translate3d(0,12px,0) scale(.2)}
  39%{opacity:1;transform:translate3d(var(--hx),-6px,0) scale(.9) rotate(-8deg)}
  64%{opacity:.96;transform:translate3d(var(--hx),var(--hy),0) scale(1.1) rotate(6deg)}
  82%{opacity:.95;transform:translate3d(var(--hx),calc(var(--hy) - 16px),0) scale(.9) rotate(-5deg)}
  100%{opacity:0;transform:translate3d(var(--hx),-78px,0) scale(.6) rotate(12deg)}
}

/* Extra handpainted hearts, flowers and stars fly up with confetti and balloons.
   All images come from existing illustrated asset files. */
.zw213-pair-fx .zw215-reward {
  opacity:0!important;
  width:clamp(21px,6.5vw,35px)!important;
  height:clamp(21px,6.5vw,35px)!important;
  filter:drop-shadow(0 2px 2px #5b4b3948)!important;
  animation:zw215-reward-float var(--float-time,2300ms) cubic-bezier(.17,.7,.31,1) var(--delay,0ms) both!important;
  transform-origin:50% 70%!important;
  will-change:transform,opacity!important;
}
@keyframes zw215-reward-float{
  0%{opacity:0;transform:translate3d(0,14px,0) scale(.25) rotate(-18deg)}
  16%{opacity:.98;transform:translate3d(var(--drift-x),-16px,0) scale(1.15) rotate(7deg)}
  48%{opacity:1;transform:translate3d(var(--drift-mid),-63px,0) scale(.95) rotate(-8deg)}
  81%{opacity:.9;transform:translate3d(var(--drift-x),-110px,0) scale(.9) rotate(11deg)}
  100%{opacity:0;transform:translate3d(var(--drift-end),-150px,0) scale(.62) rotate(-14deg)}
}
/* Clear pictorial match feedback: heart for animals, stars for counting. */
#app .memory127-numbers .memory127-card.is-matched::after,
#app .memory127-fingers .memory127-card.is-matched::after{
  background-image:url('/bakery-v140/star-gold.webp')!important;
  width:clamp(18px,4vw,26px)!important;height:clamp(18px,4vw,26px)!important;
}
#app .memory127-animals .memory127-card.is-matched::after{
  background-image:url('/animal-feeding-v85/heart.webp')!important;
}
#app .memory127-page .memory127-card.zw215-wrong{
  animation:zw215-gentle-no .28s ease-in-out 1!important;
}
@keyframes zw215-gentle-no{
  0%,100%{transform:translateX(0) rotate(0)}
  24%{transform:translateX(-3px) rotate(-1.2deg)}
  53%{transform:translateX(3px) rotate(1.1deg)}
  77%{transform:translateX(-1.5px) rotate(-.6deg)}
}
#app .memory127-page .memory127-card.zw215-wrong .memory127-front{
  filter:saturate(.93) brightness(1.03)!important;
}
/* Restrain the smallest round's celebration: cards stay clearly visible. */
.zw213-pair-fx[data-mode="numbers"] .zw213-balloon,
.zw213-pair-fx[data-mode="fingers"] .zw213-balloon{
  width:clamp(29px,8vw,45px)!important;
  height:clamp(50px,14vw,78px)!important;
}
@media(prefers-reduced-motion:reduce){
 #app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-left{
  animation:none!important;transform:translateX(31%) rotate(8deg) scale(1.025)!important;
 }
 #app .memory127-page .zw212-cuddle.zw215-hug .zw195-cuddle-right{
  animation:none!important;transform:translateX(-31%) scaleX(-1) rotate(8deg) scale(1.025)!important;
 }
 #app .memory127-page .memory127-card.zw215-wrong{animation:none!important}
 .zw213-pair-fx .zw215-reward{animation-duration:.65s!important}
}