.card-container{display:flex;flex-direction:column;height:400px;overflow:hidden;position:relative}.card-header{height:10%;display:flex;align-items:center;justify-content:center;padding:1rem}.card-animation{height:50%;position:relative;overflow:hidden}.card-animation-once .ball,.card-animation-once .ball-first{animation-iteration-count:1;animation-fill-mode:forwards}.card-content{height:40%;padding:1rem;justify-content:center;position:relative;z-index:3}.ball,.ball-first,.heart-rate{left:0;z-index:1}.ball,.ball-first,.fade-in,.fade-out,.heart-rate{position:absolute;width:100%;height:100%;top:0}.fade-in{right:0;animation:heartRateIn 2.5s linear infinite;background-color:var(--white)}.fade-out{right:-120%;width:120%;animation:heartRateOut 2.5s linear infinite;background:linear-gradient(to right,var(--white) 0,var(--white) 80%,transparent 100%)}@keyframes heartRateIn{0%{width:100%}50%{width:0}to{width:0}}@keyframes heartRateOut{0%{left:-120%}30%{left:-120%}to{left:0}}.ball-first{width:1.2rem;height:1.2rem;border-radius:50%;background-color:var(--darkOrange);animation:move-horizontal-first var(--animation-duration) infinite linear}.ball1-first{--animation-duration:14s;--y-offset:26%}.ball2-first{--animation-duration:9s;--y-offset:42%}.ball3-first{--animation-duration:17s;--y-offset:58%}.ball4-first{--animation-duration:12s;--y-offset:72%}.ball5-first{--animation-duration:11.5s;--y-offset:84%}@keyframes move-horizontal-first{0%{left:0;top:var(--y-offset);opacity:0}10%{opacity:1}90%{opacity:1}to{left:100%;top:var(--y-offset);opacity:0;background-color:var(--orange)}}.ball{width:1.2rem;height:1.2rem;border-radius:50%;animation:meet-and-move var(--animation-duration) infinite ease-in-out}.ball1{--animation-duration:14s;--initial-top:26%;--final-top:50%}.ball2{--animation-duration:9s;--initial-top:42%;--final-top:50%}.ball3{--animation-duration:17s;--initial-top:58%;--final-top:50%}.ball4{--animation-duration:12s;--initial-top:72%;--final-top:50%}.ball5{--animation-duration:11.5s;--initial-top:84%;--final-top:50%}@keyframes meet-and-move{0%{background-color:var(--orange);left:0;top:var(--initial-top);opacity:0}10%{opacity:100%}45%,55%{left:50%;top:50%}90%{opacity:100%}to{background-color:var(--lightOrange);left:90%;top:var(--final-top);opacity:0}}.keyboard{display:grid;grid-template-columns:repeat(10,20px);gap:6px;justify-content:center;margin-top:16px}.key{width:20px;height:20px;background-color:#333;border-radius:4px;animation:keyPress 1.5s ease-in-out infinite;opacity:.3}@keyframes keyPress{0%,to{opacity:.3;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.key:first-child{animation-delay:.1s}.key:nth-child(2){animation-delay:.2s}.key:nth-child(20){animation-delay:2s}