/* Zählwiese V97 – restrained, handpainted motion language for all nine games. */
#zw97MotionLayer{position:fixed;inset:0;width:100vw;height:100dvh;z-index:450;pointer-events:none;overflow:hidden;contain:layout style paint}
#zw97MotionLayer .zw97-tap-ring{
 position:absolute;width:44px;height:44px;border:3px solid rgba(254,241,201,.93);border-radius:53% 47% 48% 52%;
 box-shadow:0 0 0 2px rgba(169,130,91,.40),inset 0 0 0 2px rgba(244,202,152,.40);
 transform:translate(-50%,-50%) scale(.32);opacity:0;pointer-events:none;
 animation:zw97-press-paint 700ms cubic-bezier(.12,.47,.27,1) both
}
@keyframes zw97-press-paint{
 0%{transform:translate(-50%,-50%) scale(.32) rotate(-8deg);opacity:0}
 20%{opacity:.83}
 100%{transform:translate(-50%,-50%) scale(1.22) rotate(9deg);opacity:0}
}
#zw97MotionLayer .zw97-mini-spark{
 position:absolute;width:clamp(13px,3.5vw,23px);height:clamp(13px,3.5vw,23px);
 pointer-events:none;opacity:0;object-fit:contain;will-change:transform;
 animation:zw97-mini-flight 1220ms cubic-bezier(.18,.59,.38,1) var(--delay,0ms) both
}
@keyframes zw97-mini-flight{
 0%{opacity:0;transform:translate(-50%,-50%) scale(.28) rotate(0deg)}
 18%{opacity:1}
 74%{opacity:1}
 100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--rot)) scale(.74)}
}
.main-content.zw97-enter .zw91-title,
.main-content.zw97-enter .zw94-title,
.main-content.zw97-enter .zw95-title,
.main-content.zw97-enter .zw93-title,
.main-content.zw97-enter .zw85-head,
.main-content.zw97-enter .zw-book-art{
 animation:zw97-gentle-entrance 680ms cubic-bezier(.16,.85,.31,1) both;
}
@keyframes zw97-gentle-entrance{
 from{opacity:.36;filter:brightness(1.05)}
 to{opacity:1;filter:brightness(1)}
}
/* The previously validated finger poses must remain motion-correct.
   They have an intentional !important entrance animation; softly animate their
   surrounding illustrated paper cards instead of changing finger anatomy. */
.main-content.zw-finger-book-v53:not(.zw-animal-book-v63) .zw-book-hand-card{
 animation:zw97-hand-card-ready 5.8s ease-in-out infinite;
}
@keyframes zw97-hand-card-ready{
 0%,100%{filter:brightness(1)}
 50%{filter:brightness(1.045)}
}
/* Fingers: tiny real-pencil hand bob, rather than a frozen illustration */
.main-content.zw-finger-book-v53:not(.zw-animal-book-v63) .zw-book-hand-card img.zw-fixed-hand{
 transform-origin:50% 87%;animation:zw97-hand-patient 6.1s ease-in-out infinite;
}
@keyframes zw97-hand-patient{
 0%,100%{transform:translate3d(0,0,0) rotate(-.45deg)}
 47%{transform:translate3d(0,-3px,0) rotate(1.1deg)}
}
/* Animal count: independently animated illustrated cards, with staggered rests. */
.main-content.zw-animal-book-v63 .zw-animal-panel{animation:zw97-animal-card-life 5.8s ease-in-out infinite}
.main-content.zw-animal-book-v63 .zw-animal-panel:nth-of-type(2){animation-delay:-2.4s}
@keyframes zw97-animal-card-life{
 0%,100%{filter:brightness(1)}
 48%{filter:brightness(1.055)}
}
/* The picnic's requests gently "ask" for food; food choices answer on touch. */
.main-content.zw85 .zw85-request-item img{animation:zw97-wish 5.7s ease-in-out infinite}
.main-content.zw85 .zw85-request-item:nth-child(2n) img{animation-delay:-2.1s}
@keyframes zw97-wish{0%,100%{transform:translate3d(0,0,0) rotate(-2deg)}52%{transform:translate3d(0,-3px,0) rotate(2deg)}}
.main-content.zw85 .zw85-option:active img{animation:zw97-nudge 460ms ease-out both}
@keyframes zw97-nudge{0%,100%{transform:scale(1)}45%{transform:scale(1.12) rotate(-6deg)}}
/* Feeding and baking: the requested objects react as the child works. */
.main-content.zw91-feeding .zw91-wish-unit:not(.is-given) img,
.main-content.zw91-cooking .zw91-wish-unit:not(.is-given) img{
 animation:zw97-wish 5.7s ease-in-out infinite
}
.main-content.zw91 .zw91-wish-unit:nth-child(2n) img{animation-delay:-1.8s}
.main-content.zw91 .zw91-wish-unit.is-given img{animation:zw97-earned 850ms ease-in-out both}
@keyframes zw97-earned{
 0%{transform:scale(.8) rotate(-6deg);opacity:.65}
 42%{transform:scale(1.12) rotate(5deg);opacity:1}
 100%{transform:scale(1) rotate(0)}
}
.main-content.zw91-feeding .zw91-ground-bowl{animation:zw97-bowl-idle 6.3s ease-in-out infinite}
@keyframes zw97-bowl-idle{
 0%,100%{filter:drop-shadow(0 2px 1px rgba(94,71,50,.3))}
 50%{filter:drop-shadow(0 5px 2px rgba(94,71,50,.20))}
}
.main-content.zw91-cooking .zw91-main-illustration:not(.is-working):not(.zw91-mixing){
 animation:zw97-cooking-idle 5.5s ease-in-out infinite;
}
.main-content.zw91-cooking .zw91-main-illustration.is-working,
.main-content.zw91-cooking .zw91-main-illustration.zw91-mixing{
 animation:zw97-cooking-work 1250ms ease-in-out infinite
}
@keyframes zw97-cooking-idle{
 0%,100%{transform:translateY(0) rotate(-1.2deg)}
 50%{transform:translateY(-4px) rotate(1.3deg)}
}
@keyframes zw97-cooking-work{
 0%,100%{transform:translateY(0) rotate(-5deg)}
 38%{transform:translateY(-5px) rotate(6deg)}
 72%{transform:translateY(1px) rotate(-3deg)}
}
/* Finger-painting: pots and finished number beads look alive but never move off the target. */
.main-content.zw94-connect .zw94-pot.active img{animation:zw97-paintpot-ready 4.2s ease-in-out infinite}
@keyframes zw97-paintpot-ready{
 0%,100%{transform:translate3d(0,0,0) rotate(-1.7deg)}
 50%{transform:translate3d(0,-3px,0) rotate(2deg)}
}
.main-content.zw94-connect .zw94-number.matched{filter:drop-shadow(0 0 7px rgba(255,246,190,.65))}
.main-content.zw94-connect .zw94-step.filled{animation:zw97-progress-cheer 920ms ease-out both}
@keyframes zw97-progress-cheer{
 0%{transform:scale(.72)}
 47%{transform:scale(1.34)}
 100%{transform:scale(1.13)}
}
/* Autoteppich: keep the car centered on the road with fluid movement. */
.main-content.zw95-road .zw95-car{transition:left 135ms linear,top 135ms linear;will-change:left,top}
.main-content.zw95-road .zw95-progress-fill{transition:width 490ms cubic-bezier(.23,.5,.24,1)}
.main-content.zw95-road.is-won .zw95-success,
.main-content.zw95-road .zw95-map.is-won .zw95-success{filter:drop-shadow(0 4px 5px rgba(97,70,44,.34))}
/* Numbers float independently. Correct answers burst; incorrect ones remain kind. */
.main-content.zw95-hunt .zw95-hunt-bubble>img:first-child{animation-duration:6.1s}
.main-content.zw95-hunt .zw95-hunt-bubble:nth-child(3n)>img:first-child{animation-delay:-2.8s}
.main-content.zw95-hunt .zw95-hunt-bubble:nth-child(4n)>img:first-child{animation-delay:-1.1s}
.main-content.zw95-hunt .zw95-hunt-goal{animation:zw97-number-focus 3.8s ease-in-out infinite}
@keyframes zw97-number-focus{0%,100%{transform:scale(1)}53%{transform:scale(1.045)}}
/* Moritz & Igor walk along the hedge, then cuddle for longer, softly. */
.main-content.zw93 .zw93-friend.zw97-stepping .zw93-friend-img{animation:zw97-little-step 450ms ease-in-out both!important}
@keyframes zw97-little-step{
 0%,100%{transform:translateY(0) rotate(-1deg)}
 35%{transform:translateY(-5px) rotate(5deg) scale(.96,1.03)}
 68%{transform:translateY(2px) rotate(-4deg) scale(1.035,.97)}
}
.main-content.zw93 .zw93-hug.is-visible img{animation:zw97-heart-hug 2600ms ease-in-out 1600ms infinite}
@keyframes zw97-heart-hug{0%,100%{transform:scale(1) rotate(-1deg)}48%{transform:scale(1.04) rotate(2deg)}}
.main-content.zw93 .zw93-progress-petal.is-filled{animation:zw97-progress-cheer 860ms ease-out both}
@media (orientation:landscape) and (max-height:650px){
 .main-content.zw95-road .zw95-car{transition-duration:110ms}
}
@media (prefers-reduced-motion:reduce){
 .main-content.zw-finger-book-v53 .zw-book-hand-card img.zw-fixed-hand,
 .main-content.zw85 .zw85-request-item img,
 .main-content.zw91 .zw91-wish-unit img,
 .main-content.zw91 .zw91-main-illustration,
 .main-content.zw91 .zw91-ground-bowl,
 .main-content.zw94-connect .zw94-pot.active img,
 .main-content.zw95-hunt .zw95-hunt-goal,
 .main-content.zw93 .zw93-hug.is-visible img{animation:none!important}
 #zw97MotionLayer .zw97-mini-spark,#zw97MotionLayer .zw97-tap-ring{animation-duration:1250ms}
 .main-content.zw97-enter *{animation-duration:500ms!important}
}