/* Zählwiese Memory v224: visible THREE CONTACT claps, not two hands waving side by side. */
#app .memory127-page .zw222-clap.zw224-real-clap{
  animation:zw224-clap-stage 1.95s ease-in-out both!important;
  isolation:isolate!important;
}
#app .memory127-page .zw222-clap.zw224-real-clap img.zw222-clap-hand{
  width:48%!important;
  height:97%!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
  transform-style:preserve-3d!important;
  transform-origin:50% 86%!important;
  will-change:transform!important;
}
#app .memory127-page .zw222-clap.zw224-real-clap img.zw222-clap-left{
  left:0!important;
  right:auto!important;
  z-index:3!important;
  animation:zw224-three-claps-left 1.95s cubic-bezier(.27,.73,.3,1) both!important;
}
#app .memory127-page .zw222-clap.zw224-real-clap img.zw222-clap-right{
  right:0!important;
  left:auto!important;
  z-index:2!important;
  animation:zw224-three-claps-right 1.95s cubic-bezier(.27,.73,.3,1) both!important;
}
/* Three clearly separated cycles:
  contact at 28%, 48%, 67% (0.55s, 0.94s, 1.31s);
  palms meet and turn inward, then open visibly before next clap. */
@keyframes zw224-three-claps-left{
  0%{transform:perspective(660px) translate3d(-42%,12px,0) rotate(-17deg) rotateY(-8deg) scale(.92)}
  17%{transform:perspective(660px) translate3d(4%,2px,0) rotate(-6deg) rotateY(-20deg) scale(.98)}
  28%{transform:perspective(660px) translate3d(51%,0,0) rotate(4deg) rotateY(-66deg) scale(1.1)}
  37%{transform:perspective(660px) translate3d(-3%,7px,0) rotate(-10deg) rotateY(-12deg) scale(.97)}
  48%{transform:perspective(660px) translate3d(53%,0,0) rotate(4deg) rotateY(-68deg) scale(1.11)}
  57%{transform:perspective(660px) translate3d(-3%,7px,0) rotate(-9deg) rotateY(-13deg) scale(.98)}
  67%{transform:perspective(660px) translate3d(52%,0,0) rotate(5deg) rotateY(-68deg) scale(1.12)}
  77%{transform:perspective(660px) translate3d(-3%,3px,0) rotate(-7deg) rotateY(-16deg) scale(1.01)}
  89%,100%{transform:perspective(660px) translate3d(25%,0,0) rotate(-2deg) rotateY(-22deg) scale(1.02)}
}
@keyframes zw224-three-claps-right{
  0%{transform:perspective(660px) translate3d(42%,12px,0) rotate(17deg) rotateY(8deg) scale(.92)}
  17%{transform:perspective(660px) translate3d(-4%,2px,0) rotate(6deg) rotateY(20deg) scale(.98)}
  28%{transform:perspective(660px) translate3d(-51%,0,0) rotate(-4deg) rotateY(66deg) scale(1.1)}
  37%{transform:perspective(660px) translate3d(3%,7px,0) rotate(10deg) rotateY(12deg) scale(.97)}
  48%{transform:perspective(660px) translate3d(-53%,0,0) rotate(-4deg) rotateY(68deg) scale(1.11)}
  57%{transform:perspective(660px) translate3d(3%,7px,0) rotate(9deg) rotateY(13deg) scale(.98)}
  67%{transform:perspective(660px) translate3d(-52%,0,0) rotate(-5deg) rotateY(68deg) scale(1.12)}
  77%{transform:perspective(660px) translate3d(3%,3px,0) rotate(7deg) rotateY(16deg) scale(1.01)}
  89%,100%{transform:perspective(660px) translate3d(-25%,0,0) rotate(2deg) rotateY(22deg) scale(1.02)}
}
@keyframes zw224-clap-stage{
  0%{opacity:0}9%{opacity:1}89%{opacity:1}100%{opacity:0}
}
/* Actual hand-to-hand contact has three distinct hand-painted impact glints. */
#app .memory127-page .zw222-clap.zw224-real-clap .zw224-impact{
  position:absolute!important;
  z-index:6!important;
  width:clamp(32px,8vw,48px)!important;
  height:clamp(32px,8vw,48px)!important;
  left:50%!important;top:37%!important;
  margin-left:-20px!important;margin-top:-20px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 1px 2px #81501d60)!important;
  pointer-events:none!important;
  opacity:0;
  animation:zw224-impact-flash .3s ease-out var(--clap-delay,0ms) both!important;
}
@keyframes zw224-impact-flash{
  0%{opacity:0;transform:scale(.15) rotate(-18deg)}
  23%{opacity:1;transform:scale(1.18) rotate(8deg)}
  60%{opacity:.95;transform:scale(1) rotate(-4deg)}
  100%{opacity:0;transform:scale(.55) rotate(22deg)}
}
@media(prefers-reduced-motion:reduce){
  #app .memory127-page .zw222-clap.zw224-real-clap img.zw222-clap-left{
    animation:none!important;transform:translateX(49%) rotate(-5deg)!important;
  }
  #app .memory127-page .zw222-clap.zw224-real-clap img.zw222-clap-right{
    animation:none!important;transform:translateX(-49%) rotate(5deg)!important;
  }
  #app .memory127-page .zw222-clap.zw224-real-clap .zw224-impact{
    animation:none!important;opacity:.7!important;
  }
}
/* Finger reward foreground: keep illustrated hand contact above the celebration particles. */
body .zw222-celebration .zw222-clap.zw224-real-clap{
  position:absolute!important;
  z-index:100!important;
  width:min(78%,340px)!important;
  height:clamp(148px,24vh,230px)!important;
  left:50%!important;top:49%!important;
  transform:translate(-50%,-50%)!important;
  overflow:visible!important;
  pointer-events:none!important;
  isolation:isolate!important;
  animation:zw224-clap-stage 1.95s ease both!important;
}
body .zw222-celebration .zw224-real-clap::before{
  content:''!important;
  position:absolute!important;
  z-index:-1!important;inset:0!important;border-radius:50%!important;
  background:radial-gradient(ellipse at 50% 60%,#fff5c1ca 0%,#ffefc26b 42%,transparent 73%)!important;
}
body .zw222-celebration .zw224-real-clap img.zw222-clap-hand{
  position:absolute!important;
  width:48%!important;height:97%!important;
  top:0!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform-origin:50% 86%!important;
  will-change:transform!important;
  filter:drop-shadow(0 3px 2px #74503952)!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}
body .zw222-celebration .zw224-real-clap img.zw222-clap-left{
  left:0!important;right:auto!important;z-index:3!important;
  animation:zw224-three-claps-left 1.95s cubic-bezier(.27,.73,.3,1) both!important;
}
body .zw222-celebration .zw224-real-clap img.zw222-clap-right{
  right:0!important;left:auto!important;z-index:2!important;
  animation:zw224-three-claps-right 1.95s cubic-bezier(.27,.73,.3,1) both!important;
}
body .zw222-celebration .zw224-real-clap .zw224-impact{
  position:absolute!important;z-index:6!important;
  width:clamp(32px,8vw,48px)!important;
  height:clamp(32px,8vw,48px)!important;
  left:50%!important;top:37%!important;
  margin-left:-20px!important;margin-top:-20px!important;
  object-fit:contain!important;pointer-events:none!important;
  filter:drop-shadow(0 1px 2px #81501d60)!important;
  opacity:0;
  animation:zw224-impact-flash .3s ease-out var(--clap-delay,0ms) both!important;
}
@media (orientation:landscape) and (max-height:539px){
 body .zw222-celebration .zw224-real-clap{
  left:67%!important;top:48%!important;
  width:min(50%,300px)!important;height:clamp(126px,49vh,187px)!important;
 }
}
@media(prefers-reduced-motion:reduce){
 body .zw222-celebration .zw224-real-clap img.zw222-clap-left{
  animation:none!important;transform:translateX(49%) rotate(-5deg)!important;
 }
 body .zw222-celebration .zw224-real-clap img.zw222-clap-right{
  animation:none!important;transform:translateX(-49%) rotate(5deg)!important;
 }
 body .zw222-celebration .zw224-real-clap .zw224-impact{
  animation:none!important;opacity:.75!important;
 }
}

/* Keep inherited pencil-drawn heart/flower particles correctly sized in the top layer. */
body .zw222-celebration .zw224-real-clap .zw222-clap-spark{
 position:absolute!important;
 z-index:5!important;
 left:50%!important;top:22%!important;
 width:clamp(21px,5.5vw,33px)!important;
 height:clamp(21px,5.5vw,33px)!important;
 object-fit:contain!important;
 pointer-events:none!important;
 filter:drop-shadow(0 1px 1px #85523342)!important;
 opacity:0;
 animation:zw222-clap-spark 1.95s ease both!important;
 animation-delay:calc(var(--spark-index)*90ms)!important;
}
@media(prefers-reduced-motion:reduce){
 body .zw222-celebration .zw224-real-clap .zw222-clap-spark{
  animation:none!important;opacity:.75!important;
 }
}