:root{--klicek-idle-rotate:2.5deg;--klicek-idle-period:4s;--klicek-idle-leaf-left-y:4px;--klicek-idle-leaf-left-rot:2.5deg;--klicek-idle-leaf-left-period:5.2s;--klicek-idle-leaf-right-y:5px;--klicek-idle-leaf-right-rot:-3deg;--klicek-idle-leaf-right-period:4.7s;--klicek-think-look-period:3.2s;--klicek-think-look-x:4px;--klicek-think-look-y:-2px;--klicek-think-tap-period:.8s;--klicek-think-tap-rot:12deg;--klicek-think-sparkle-spin:2s;--klicek-think-sparkle-pulse:1s;--klicek-grow-pulse-period:2.4s;--klicek-grow-pulse-scale:1.025;--klicek-happy-duration:1s;--klicek-happy-squish-y:.82;--klicek-happy-overshoot-y:1.18;--klicek-happy-jump-y:-22px;--klicek-greet-duration:1.6s;--klicek-greet-wave-rot:28deg;--klicek-proud-period:4.5s;--klicek-proud-rotate:1.5deg;--klicek-proud-scale:1.04;--klicek-proud-look-period:7s;--klicek-proud-look-x:4px;--klicek-proud-leaf-left-period:5s;--klicek-proud-leaf-right-period:5.6s;--klicek-proud-twinkle-period:2.2s;--klicek-proud-twinkle-scale:1.55;--klicek-concerned-tilt:-3deg;--klicek-concerned-y:2px;--klicek-concerned-period:8s;--klicek-concerned-leaf-left-rot:8deg;--klicek-concerned-leaf-left-y:8px;--klicek-concerned-leaf-left-period:7s;--klicek-concerned-leaf-right-rot:-8deg;--klicek-concerned-leaf-right-y:8px;--klicek-concerned-leaf-right-period:5s;--klicek-concerned-eye-scale:.55;--klicek-encourage-period:1.2s;--klicek-encourage-y:-8px;--klicek-encourage-scale:1.06;--klicek-encourage-leaf-rot:28deg;--klicek-encourage-leaf-y:-10px;--klicek-celebrating-eye-scale:1.18}.klicek-svg{display:block}.klicek-wrapper,.klicek-plant-scaler,.klicek-plant-pulser,.klicek-body,.klicek-stem{transform-box:fill-box;transform-origin:bottom}.klicek-leaf-left{transform-box:fill-box;transform-origin:100% 100%}.klicek-leaf-right{transform-box:fill-box;transform-origin:0 100%}.klicek-eyes,.klicek-eye-left,.klicek-eye-right,.klicek-highlight-left,.klicek-highlight-right{transform-box:fill-box;transform-origin:50%}.klicek-smile,.klicek-happy-stars,.klicek-think-sparkle{opacity:0;pointer-events:none}.state-idle .klicek-wrapper{animation:klicek-idle-breathe var(--klicek-idle-period) ease-in-out infinite}@keyframes klicek-idle-breathe{0%,to{transform:rotate(calc(-1 * var(--klicek-idle-rotate)))}50%{transform:rotate(var(--klicek-idle-rotate))}}.state-idle .klicek-leaf-left{animation:klicek-idle-leaf-left var(--klicek-idle-leaf-left-period) ease-in-out infinite}@keyframes klicek-idle-leaf-left{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(calc(-1 * var(--klicek-idle-leaf-left-y))) rotate(calc(-1 * var(--klicek-idle-leaf-left-rot)))}}.state-idle .klicek-leaf-right{animation:klicek-idle-leaf-right var(--klicek-idle-leaf-right-period) ease-in-out .4s infinite}@keyframes klicek-idle-leaf-right{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(calc(-1 * var(--klicek-idle-leaf-right-y))) rotate(calc(-1 * var(--klicek-idle-leaf-right-rot)))}}.state-thinking .klicek-eyes{animation:klicek-think-look var(--klicek-think-look-period) ease-in-out infinite}@keyframes klicek-think-look{0%,to{transform:translate(0)}25%{transform:translate(var(--klicek-think-look-x), var(--klicek-think-look-y))}50%{transform:translate(0, var(--klicek-think-look-y))}75%{transform:translate(calc(-1 * var(--klicek-think-look-x)), var(--klicek-think-look-y))}}.state-thinking .klicek-leaf-left{animation:klicek-think-tap var(--klicek-think-tap-period) ease-in-out infinite}@keyframes klicek-think-tap{0%,to{transform:rotate(0)}50%{transform:rotate(calc(-1 * var(--klicek-think-tap-rot)))}}.state-thinking .klicek-think-sparkle{opacity:1;transition:opacity .3s}.state-thinking .think-sparkle-pulser,.state-growing .think-sparkle-pulser{animation:klicek-think-pulse var(--klicek-think-sparkle-pulse) ease-in-out infinite;transform-box:fill-box;transform-origin:50%}@keyframes klicek-think-pulse{0%,to{transform:scale(.85)}50%{transform:scale(1.25)}}.state-thinking .think-sparkle-rotor,.state-growing .think-sparkle-rotor{animation:klicek-think-spin var(--klicek-think-sparkle-spin) linear infinite;transform-box:fill-box;transform-origin:50%}@keyframes klicek-think-spin{to{transform:rotate(360deg)}}.state-growing .klicek-plant-scaler{transform:scale(calc(.42 + var(--progress,0) * .58))}.state-growing .klicek-plant-pulser{animation:klicek-grow-pulse var(--klicek-grow-pulse-period) ease-in-out infinite}@keyframes klicek-grow-pulse{0%,to{transform:scale(1)}50%{transform:scale(var(--klicek-grow-pulse-scale))}}.state-growing .klicek-stem{transform:scaleY(clamp(0, calc((var(--progress,0) - .2) / .3), 1))}.state-growing .klicek-leaf-left,.state-growing .klicek-leaf-right{opacity:clamp(0, calc((var(--progress,0) - .4) / .3), 1);transform:scale(calc(.3 + clamp(0, calc((var(--progress,0) - .4) / .3), 1) * .7))}.state-growing .klicek-think-sparkle{opacity:clamp(0, calc((var(--progress,0) - .6) / .4), 1)}.state-happy .klicek-wrapper{animation:klicek-happy-bounce var(--klicek-happy-duration) cubic-bezier(.34, 1.4, .5, 1) forwards}@keyframes klicek-happy-bounce{0%{transform:scale(1)translateY(0)}15%{transform:scale(1.08, var(--klicek-happy-squish-y)) translateY(0)}35%{transform:scale(.96, var(--klicek-happy-overshoot-y)) translateY(var(--klicek-happy-jump-y))}60%{transform:scale(1.04,.98)translateY(0)}78%{transform:scale(.99,1.02)translateY(-3px)}to{transform:scale(1)translateY(0)}}.state-happy .klicek-eyes{animation:.3s ease-out .1s forwards klicek-happy-eyes-fade}@keyframes klicek-happy-eyes-fade{to{opacity:0}}.state-happy .klicek-smile{opacity:1}.state-happy .smile-left,.state-happy .smile-right{animation:.42s ease-out .18s forwards klicek-smile-draw}@keyframes klicek-smile-draw{to{stroke-dashoffset:0}}.state-happy .klicek-happy-stars{opacity:1}.state-happy .happy-star{animation-duration:.85s;animation-timing-function:cubic-bezier(.32,.72,.45,1);animation-fill-mode:forwards}.state-happy .happy-star-1{animation-name:klicek-star-fly-1;animation-delay:.3s}.state-happy .happy-star-2{animation-name:klicek-star-fly-2;animation-delay:.34s}.state-happy .happy-star-3{animation-name:klicek-star-fly-3;animation-delay:.32s}.state-happy .happy-star-4{animation-name:klicek-star-fly-4;animation-delay:.36s}.state-happy .happy-star-5{animation-name:klicek-star-fly-5;animation-delay:.38s}@keyframes klicek-star-fly-1{0%{opacity:0;transform:translate(0)rotate(0)scale(.4)}20%{opacity:1;transform:translate(-15px,-22px)rotate(120deg)scale(1)}to{opacity:0;transform:translate(-58px,-82px)rotate(540deg)scale(.5)}}@keyframes klicek-star-fly-2{0%{opacity:0;transform:translate(0)rotate(0)scale(.4)}20%{opacity:1;transform:translateY(-28px)rotate(-90deg)scale(1.05)}to{opacity:0;transform:translate(8px,-110px)rotate(-460deg)scale(.5)}}@keyframes klicek-star-fly-3{0%{opacity:0;transform:translate(0)rotate(0)scale(.4)}20%{opacity:1;transform:translate(18px,-22px)rotate(90deg)scale(1)}to{opacity:0;transform:translate(64px,-76px)rotate(500deg)scale(.5)}}@keyframes klicek-star-fly-4{0%{opacity:0;transform:translate(0)rotate(0)scale(.3)}20%{opacity:1;transform:translate(-26px,-8px)rotate(-100deg)scale(.9)}to{opacity:0;transform:translate(-78px,-28px)rotate(-440deg)scale(.4)}}@keyframes klicek-star-fly-5{0%{opacity:0;transform:translate(0)rotate(0)scale(.3)}20%{opacity:1;transform:translate(28px,-8px)rotate(140deg)scale(.9)}to{opacity:0;transform:translate(80px,-28px)rotate(540deg)scale(.4)}}.state-greeting .klicek-wrapper{animation:klicek-greet-enter var(--klicek-greet-duration) cubic-bezier(.34, 1.3, .5, 1) forwards}@keyframes klicek-greet-enter{0%{opacity:0;transform:scale(.92)rotate(-4deg)}20%{opacity:1;transform:scale(1.03)rotate(3deg)}45%{transform:scale(.99)rotate(-1deg)}to{opacity:1;transform:scale(1)rotate(0)}}.state-greeting .klicek-leaf-right{animation:.45s ease-in-out .4s 3 klicek-greet-wave}@keyframes klicek-greet-wave{0%{transform:rotate(0)}50%{transform:rotate(calc(-1 * var(--klicek-greet-wave-rot)))}to{transform:rotate(0)}}.state-greeting .klicek-eyes{animation:1.6s ease-out forwards klicek-greet-eyes}@keyframes klicek-greet-eyes{0%{transform:scale(1)}20%{transform:scale(1.22)}60%{transform:scale(1.22)}to{transform:scale(1)}}.state-proud .klicek-wrapper{animation:klicek-proud-breathe var(--klicek-proud-period) ease-in-out infinite}@keyframes klicek-proud-breathe{0%,to{transform:scale(1) rotate(calc(-1 * var(--klicek-proud-rotate)))}50%{transform:scale(var(--klicek-proud-scale)) rotate(var(--klicek-proud-rotate))}}.state-proud .klicek-eyes{animation:klicek-proud-look var(--klicek-proud-look-period) ease-in-out infinite}@keyframes klicek-proud-look{0%,to{transform:translate(0)}25%{transform:translate(var(--klicek-proud-look-x), 0)}50%{transform:translate(0)}75%{transform:translate(calc(-1 * var(--klicek-proud-look-x)), 0)}}.state-proud .klicek-leaf-left{animation:klicek-proud-leaf-left var(--klicek-proud-leaf-left-period) ease-in-out infinite}@keyframes klicek-proud-leaf-left{0%,to{transform:translateY(-5px)rotate(-4deg)}50%{transform:translateY(-9px)rotate(-7deg)}}.state-proud .klicek-leaf-right{animation:klicek-proud-leaf-right var(--klicek-proud-leaf-right-period) ease-in-out .3s infinite}@keyframes klicek-proud-leaf-right{0%,to{transform:translateY(-5px)rotate(4deg)}50%{transform:translateY(-9px)rotate(7deg)}}.state-proud .klicek-highlight-left,.state-proud .klicek-highlight-right{animation:klicek-proud-twinkle var(--klicek-proud-twinkle-period) ease-in-out infinite}.state-proud .klicek-highlight-right{animation-delay:.4s}@keyframes klicek-proud-twinkle{0%,to{transform:scale(1)}50%{transform:scale(var(--klicek-proud-twinkle-scale))}}.state-concerned .klicek-wrapper{animation:klicek-concerned-sigh var(--klicek-concerned-period) ease-in-out infinite}@keyframes klicek-concerned-sigh{0%,to{transform:rotate(var(--klicek-concerned-tilt)) translateY(0)}50%{transform:rotate(var(--klicek-concerned-tilt)) translateY(var(--klicek-concerned-y))}}.state-concerned .klicek-leaf-left{animation:klicek-concerned-leaf-left var(--klicek-concerned-leaf-left-period) ease-in-out infinite}@keyframes klicek-concerned-leaf-left{0%,to{transform:rotate(var(--klicek-concerned-leaf-left-rot)) translateY(var(--klicek-concerned-leaf-left-y))}50%{transform:rotate(calc(var(--klicek-concerned-leaf-left-rot) + 3deg)) translateY(calc(var(--klicek-concerned-leaf-left-y) + 3px))}}.state-concerned .klicek-leaf-right{animation:klicek-concerned-leaf-right var(--klicek-concerned-leaf-right-period) ease-in-out 1.3s infinite}@keyframes klicek-concerned-leaf-right{0%,to{transform:rotate(var(--klicek-concerned-leaf-right-rot)) translateY(var(--klicek-concerned-leaf-right-y))}50%{transform:rotate(calc(var(--klicek-concerned-leaf-right-rot) - 3deg)) translateY(calc(var(--klicek-concerned-leaf-right-y) + 3px))}}.state-concerned .klicek-eye-left,.state-concerned .klicek-eye-right{transform:scaleY(var(--klicek-concerned-eye-scale))}.state-encouraging .klicek-wrapper{animation:klicek-encourage-bounce var(--klicek-encourage-period) ease-in-out infinite}@keyframes klicek-encourage-bounce{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(var(--klicek-encourage-y)) scale(var(--klicek-encourage-scale))}}.state-encouraging .klicek-leaf-left{animation:klicek-encourage-arms-left var(--klicek-encourage-period) ease-in-out infinite}@keyframes klicek-encourage-arms-left{0%,to{transform:rotate(0)translateY(0)}50%{transform:rotate(calc(-1 * var(--klicek-encourage-leaf-rot))) translateY(var(--klicek-encourage-leaf-y))}}.state-encouraging .klicek-leaf-right{animation:klicek-encourage-arms-right var(--klicek-encourage-period) ease-in-out infinite}@keyframes klicek-encourage-arms-right{0%,to{transform:rotate(0)translateY(0)}50%{transform:rotate(var(--klicek-encourage-leaf-rot)) translateY(var(--klicek-encourage-leaf-y))}}.state-celebrating .klicek-wrapper{animation:klicek-idle-breathe var(--klicek-idle-period) ease-in-out infinite}.state-celebrating .klicek-leaf-left{animation:klicek-idle-leaf-left var(--klicek-idle-leaf-left-period) ease-in-out infinite}.state-celebrating .klicek-leaf-right{animation:klicek-idle-leaf-right var(--klicek-idle-leaf-right-period) ease-in-out .4s infinite}.state-celebrating .klicek-eye-left,.state-celebrating .klicek-eye-right{transform:scale(var(--klicek-celebrating-eye-scale))}.klicek-svg.blinking .klicek-eye-left,.klicek-svg.blinking .klicek-eye-right{transition:transform 80ms ease-in;transform:scaleY(.05)!important}.state-happy.blinking .klicek-eye-left,.state-happy.blinking .klicek-eye-right{transform:none!important}@media (prefers-reduced-motion:reduce){.klicek-svg *,.klicek-svg :before,.klicek-svg :after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.state-growing .klicek-plant-scaler{transform:scale(calc(.42 + var(--progress,0) * .58))}.state-growing .klicek-stem{transform:scaleY(clamp(0, calc((var(--progress,0) - .2) / .3), 1))}.state-growing .klicek-leaf-left,.state-growing .klicek-leaf-right{opacity:clamp(0, calc((var(--progress,0) - .4) / .3), 1);transform:scale(calc(.3 + clamp(0, calc((var(--progress,0) - .4) / .3), 1) * .7))}}
