/* Hush's idle animations, from the design mockup (redesign/index.html). */
.hush { width: 100%; height: 100%; display: block; overflow: visible; }
.hush * { transform-box: view-box; }
.hush .h-all    { transform-origin: 100px 186px; }
.hush .h-shadow { transform-origin: 100px 196px; }
.hush .h-eyes   { transform-origin: 100px 108px; animation: hush-blink 4.6s infinite; }
.hush .h-pupils { animation: hush-look 8s ease-in-out infinite; }
.hush .h-sprout { transform-origin: 100px 52px; animation: hush-sway 3.4s ease-in-out infinite; }

.hush.p-idle .h-all, .hush.p-wave .h-all, .hush.p-ready .h-all, .hush.p-pro .h-all
  { animation: hush-bob 3.2s ease-in-out infinite; }
.hush.p-idle .h-shadow, .hush.p-wave .h-shadow, .hush.p-ready .h-shadow, .hush.p-pro .h-shadow
  { animation: hush-shade 3.2s ease-in-out infinite; }
.hush.p-focus .h-all { animation: hush-breathe 5s ease-in-out infinite; }
.hush.p-focus .h-sprout { animation-duration: 6s; }
.hush.p-guard .h-all { animation: hush-nope 2.8s ease-in-out infinite; }
.hush .h-stop  { transform-origin: 162px 128px; animation: hush-palm 1.4s ease-in-out infinite; }
.hush .h-wave  { transform-origin: 160px 128px; animation: hush-wave 2.6s ease-in-out infinite; }
.hush.p-cheer .h-all { animation: hush-jump 1.6s cubic-bezier(.4,0,.3,1) infinite; }
.hush.p-cheer .h-shadow { animation: hush-jumpshade 1.6s cubic-bezier(.4,0,.3,1) infinite; }
.hush .h-cheer { transform-origin: 100px 130px; animation: hush-wiggle .4s ease-in-out infinite alternate; }

@keyframes hush-bob    { 0%,100% { transform: translateY(0) scale(1.02,.98) } 50% { transform: translateY(-7px) scale(.99,1.01) } }
@keyframes hush-shade  { 0%,100% { transform: scale(1) } 50% { transform: scale(.86) } }
@keyframes hush-breathe{ 0%,100% { transform: scale(1) } 50% { transform: translateY(-2px) scale(1.035,1.02) } }
@keyframes hush-blink  { 0%,93%,100% { transform: scaleY(1) } 96% { transform: scaleY(.08) } }
@keyframes hush-look   { 0%,35%,100% { transform: translateX(0) } 42%,58% { transform: translateX(-4px) } 65%,82% { transform: translateX(4px) } }
@keyframes hush-sway   { 0%,100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
@keyframes hush-nope   { 0%,45%,100% { transform: rotate(0) } 8% { transform: rotate(-4deg) } 18% { transform: rotate(4deg) } 28% { transform: rotate(-3deg) } 36% { transform: rotate(2deg) } }
@keyframes hush-palm   { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
@keyframes hush-wave   { 0%,60%,100% { transform: rotate(0) } 12%,36% { transform: rotate(-24deg) } 24%,48% { transform: rotate(6deg) } }
@keyframes hush-jump   { 0% { transform: translateY(0) scale(1.08,.9) } 16% { transform: translateY(0) scale(.94,1.08) }
                         42% { transform: translateY(-34px) scale(.97,1.03) } 64% { transform: translateY(0) scale(1.1,.88) }
                         74% { transform: translateY(0) scale(.98,1.02) } 84%,100% { transform: translateY(0) scale(1) } }
@keyframes hush-jumpshade { 0%,16%,64%,100% { transform: scale(1) } 42% { transform: scale(.6); opacity: .5 } }
@keyframes hush-wiggle { from { transform: rotate(-4deg) } to { transform: rotate(4deg) } }

/* Static renders (store graphics) and people who prefer less motion. */
.hush-still .hush *, .hush-still .hush { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hush, .hush * { animation: none !important; } }