.flip-clock-card{position:relative;width:100%;height:100%;text-align:center;perspective:200px;transform-style:preserve-3d}.flip-clock-lower-static,.flip-clock-upper-static{position:absolute;width:100%;height:50%;overflow:hidden;background:linear-gradient(180deg,#2c3e50,#34495e);border:1px solid hsla(0,0%,100%,.1);z-index:1}.flip-clock-upper-static{top:0;border-radius:8px 8px 0 0;border-bottom:1px solid rgba(0,0,0,.3);display:flex;align-items:flex-end;justify-content:center}.flip-clock-lower-static{bottom:0;border-radius:0 0 8px 8px;display:flex;align-items:flex-start;justify-content:center}.flip-clock-lower-flip,.flip-clock-upper-flip{position:absolute;width:100%;height:50%;overflow:hidden;background:linear-gradient(180deg,#2c3e50,#34495e);border:1px solid hsla(0,0%,100%,.1);z-index:2;backface-visibility:visible;transform-style:preserve-3d}.flip-clock-upper-flip{top:0;border-radius:8px 8px 0 0;border-bottom:2px solid rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;transform-origin:bottom;transform:rotateX(0deg);box-shadow:0 2px 5px rgba(0,0,0,.4)}.flip-clock-lower-flip{bottom:0;border-radius:0 0 8px 8px;border-top:1px solid hsla(0,0%,100%,.1);display:flex;align-items:flex-start;justify-content:center;transform-origin:top;transform:rotateX(90deg);box-shadow:0 -2px 5px rgba(0,0,0,.4)}.flip-clock-lower-flip span,.flip-clock-lower-static span,.flip-clock-upper-flip span,.flip-clock-upper-static span{display:flex;align-items:center;justify-content:center;width:100%;height:90px;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);font-size:2.5rem;font-weight:700}.flip-clock-upper-flip span,.flip-clock-upper-static span{transform:translateY(50%)}.flip-clock-lower-flip span,.flip-clock-lower-static span{transform:translateY(-50%)}.flip-animation-top{animation:flip-top .15s cubic-bezier(.4,0,.6,1) forwards;z-index:3}.flip-animation-bottom{animation:flip-bottom .15s cubic-bezier(.4,0,.6,1) forwards;z-index:3}@keyframes flip-top{0%{transform:rotateX(0deg);box-shadow:0 2px 5px rgba(0,0,0,.4)}to{transform:rotateX(-90deg);box-shadow:0 5px 10px rgba(0,0,0,.6)}}@keyframes flip-bottom{0%{transform:rotateX(90deg);box-shadow:0 -5px 10px rgba(0,0,0,.6)}to{transform:rotateX(0deg);box-shadow:0 -2px 5px rgba(0,0,0,.4)}}.dark .flip-clock-lower-flip,.dark .flip-clock-lower-static,.dark .flip-clock-upper-flip,.dark .flip-clock-upper-static{background:linear-gradient(180deg,#1a1a2e,#16213e)}.flip-clock-card:before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(0,0,0,.4);z-index:10}@keyframes float{0%,to{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}@keyframes sparkle{0%,to{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(180deg)}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.balloon{position:absolute;font-size:3rem;animation:float 3s ease-in-out infinite}.balloon-1{top:20%;left:10%;animation-delay:0s}.balloon-2{top:60%;right:10%;animation-delay:1s}.balloon-3{bottom:20%;left:15%;animation-delay:2s}.sparkle{position:absolute;font-size:2rem;animation:sparkle 2s ease-in-out infinite}.sparkle-1{top:30%;right:20%;animation-delay:.5s}.sparkle-2{top:70%;left:25%;animation-delay:1.5s}.sparkle-3{bottom:30%;right:30%;animation-delay:2.5s}.animate-gradient{background-size:200% 200%;animation:gradient 3s ease infinite}@keyframes spin-slow{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}