/* Pet + device motion. Shared by the app and tools/gallery.html. */
.device { display: block; width: 100%; height: auto; overflow: visible; }
.device .screen { overflow: hidden; }

.pet .breathe { transform-box: view-box; transform-origin: 200px 376px; animation: mp-breathe 3.6s ease-in-out infinite; }
.pet .arm { transform-box: view-box; transform-origin: 0 0; transform: rotate(var(--rest)); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.pet.waving .arm-R { animation: mp-wave 4.2s ease-in-out infinite; }
.pet .eye { transform-box: fill-box; transform-origin: center; animation: mp-blink 5.2s infinite; }
.pet .eye:nth-child(2) { animation-delay: .04s; }
.pet .chew { transform-box: fill-box; transform-origin: center; animation: mp-chew .32s ease-in-out infinite alternate; }
.pet .tear { animation: mp-tear 1.7s ease-in infinite; }
.pet .tear.t2 { animation-delay: .8s; }
.pet .stink path { animation: mp-stink 2.2s ease-in-out infinite; }
.pet .stink path + path { animation-delay: 1.1s; }
.tw { transform-box: fill-box; transform-origin: center; animation: mp-tw 2.4s ease-in-out infinite; }
.zz { animation: mp-zz 2.6s ease-in-out infinite; }
.bubble { animation: mp-bob 3s ease-in-out infinite; }
.fx-fall { animation: mp-fall var(--d, 6s) linear infinite; animation-delay: var(--delay, 0s); }
.fx-rise { animation: mp-rise var(--d, 5s) ease-in infinite; animation-delay: var(--delay, 0s); }
.fx-drift { animation: mp-drift var(--d, 7s) ease-in-out infinite alternate; animation-delay: var(--delay, 0s); }
.fx-pulse { transform-box: fill-box; transform-origin: center; animation: mp-pulse var(--d, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.fx-spin { transform-box: fill-box; transform-origin: center; animation: mp-spin var(--d, 12s) linear infinite; }
.fx-flicker { animation: mp-flicker var(--d, 1.4s) ease-in-out infinite alternate; }

/* One-shot reactions, toggled by the app on the .pet group */
.pet.hop .breathe { animation: mp-hop .6s cubic-bezier(.3, 1.6, .5, 1); }
.pet.shake .breathe { animation: mp-shake .5s ease-in-out 2; }

@keyframes mp-breathe { 50% { transform: scale(1.006, 1.016); } }
@keyframes mp-wave {
  0%, 55%, 100% { transform: rotate(var(--rest)); }
  64% { transform: rotate(calc(var(--rest) - 16deg)); }
  73% { transform: rotate(calc(var(--rest) + 5deg)); }
  82% { transform: rotate(calc(var(--rest) - 14deg)); }
  91% { transform: rotate(calc(var(--rest) + 3deg)); }
}
@keyframes mp-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@keyframes mp-chew { to { transform: scaleY(.45); } }
@keyframes mp-tear { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes mp-stink { 0% { transform: translateY(6px); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-16px); opacity: 0; } }
@keyframes mp-tw { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } }
@keyframes mp-zz { 0% { opacity: 0; transform: translate(0, 8px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(10px, -16px); } }
@keyframes mp-bob { 50% { transform: translateY(-4px); } }
@keyframes mp-fall { from { transform: translate(0, -420px); } to { transform: translate(var(--dx, 0px), 20px); } }
@keyframes mp-rise { 0% { transform: translate(0, 40px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx, 0px), -380px); opacity: 0; } }
@keyframes mp-drift { from { transform: translate(-8px, 6px); } to { transform: translate(8px, -6px); } }
@keyframes mp-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes mp-spin { to { transform: rotate(360deg); } }
@keyframes mp-flicker { from { opacity: .75; } to { opacity: 1; } }
@keyframes mp-hop { 40% { transform: translateY(-26px) scale(.98, 1.03); } 70% { transform: translateY(0) scale(1.04, .96); } }
@keyframes mp-shake { 25% { transform: translateX(-6px) rotate(-2deg); } 75% { transform: translateX(6px) rotate(2deg); } }

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

.egg { transform-box: view-box; transform-origin: 200px 352px; animation: mp-egg 3s ease-in-out infinite; }
.egg.cracking { animation: mp-egg .5s ease-in-out infinite; }
.pet.cheering .arm:not(.holding) { animation: mp-cheer 1.2s ease-in-out infinite; }
.pet.cheering .arm-R { animation-delay: .6s; }
@keyframes mp-egg { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-5deg); } 84% { transform: rotate(5deg); } 92% { transform: rotate(-3deg); } }
@keyframes mp-cheer { 0%, 100% { transform: rotate(var(--rest)); } 50% { transform: rotate(calc(var(--rest) * .9)); } }