:root{--pulse-color:#00CEA699;--pulse-width:32px;--duration-pulse:1.5s;--duration-rotate:10s;--animated-icon-infinite:infinite;}
.rkit-video-button-wrapper{display:flex;align-items:center;justify-content:start;}
.rkit-video-button-container{position:relative;width:150px;height:150px;display:flex;align-items:center;justify-content:center;}
.rkit-video-button-container .rkit-video-button{transform-origin:center;position:absolute;width:142px;height:142px;}
.rkit-animated-icon-container{width:84px;height:84px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:antiquewhite;z-index:1;cursor:pointer;}
.rkit-animated-icon-container .rkit-animated-icon{width:29px;height:29px;font-size:29px;}
.rkit-animation-shadowPulse{animation:shadowPulse var(--duration-pulse) linear infinite;}
@keyframes rotateText {
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@keyframes shadowPulse {
0%{box-shadow:0 0 0 0px var(--pulse-color);}
100%{box-shadow:0 0 7px var(--pulse-width) rgba(0, 0, 0, 0);}
}
@keyframes bounce-up-down {
0%,
100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}
.rotate-180{animation:rotate-180-animation 1s infinite alternate ease-in-out;}
@keyframes rotate-180-animation {
from{transform:rotate(0deg);}
to{transform:rotate(180deg);}
}  .rkit-video-button-container:hover.grow{transform:scale(1.1);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.shrink{transform:scale(0.9);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.pulse{animation:pulseAnimation 0.6s ease-in-out;}
@keyframes pulseAnimation {
0%{transform:scale(1);}
50%{transform:scale(1.1);}
100%{transform:scale(1);}
} .rkit-video-button-container:hover.wobble{animation:wobbleAnimation 0.8s ease-in-out;}
@keyframes wobbleAnimation {
0%{transform:rotate(0deg);}
25%{transform:rotate(5deg);}
50%{transform:rotate(-5deg);}
75%{transform:rotate(3deg);}
100%{transform:rotate(0deg);}
} .rkit-video-button-container:hover.skew{transform:skewX(10deg);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.rotate{transform:rotate(10deg);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.slide-up{transform:translateY(-10px);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.slide-down{transform:translateY(10px);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.slide-left{transform:translateX(-10px);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.slide-right{transform:translateX(10px);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.bounce{animation:bounceAnimation 0.6s ease;}
@keyframes bounceAnimation {
0%,
100%{transform:translateY(0);}
50%{transform:translateY(-15px);}
} .rkit-video-button-container:hover.flip{transform:rotateY(180deg);transition:transform 0.6s ease;}
.rkit-video-button-container:hover.flip-x{transform:rotateX(180deg);transition:transform 0.6s ease;}
.rkit-video-button-container:hover.flip-y{transform:rotateY(180deg);transition:transform 0.6s ease;}
.rkit-video-button-container:hover.zoom-in{transform:scale(1.2);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.zoom-out{transform:scale(0.8);transition:transform 0.3s ease;}
.rkit-video-button-container:hover.float{animation:floatAnimation 2s ease-in-out infinite;}
@keyframes floatAnimation {
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}
} .rkit-video-button-container:hover.tada{animation:tadaAnimation 0.8s ease;}
@keyframes tadaAnimation {
0%{transform:scale(1);}
10%,
20%{transform:scale(0.9) rotate(-3deg);}
30%,
50%,
70%,
90%{transform:scale(1.1) rotate(3deg);}
40%,
60%,
80%{transform:scale(1.1) rotate(-3deg);}
100%{transform:scale(1) rotate(0);}
} .rkit-video-button-container:hover.shake{animation:shakeAnimation 0.5s ease;}
@keyframes shakeAnimation {
0%{transform:translateX(0);}
25%{transform:translateX(-5px);}
50%{transform:translateX(5px);}
75%{transform:translateX(-5px);}
100%{transform:translateX(0);}
} .rkit-video-button-container:hover.rubber-band{animation:rubberBandAnimation 1s ease;}
@keyframes rubberBandAnimation {
0% {
transform: scale(1);
}
30% {
transform: scaleX(1.25) scaleY(0.75);
}
40% {
transform: scaleX(0.75) scaleY(1.25);
}
50% {
transform: scaleX(1.15) scaleY(0.85);
}
65% {
transform: scaleX(0.95) scaleY(1.05);
}
75% {
transform: scaleX(1.05) scaleY(0.95);
}
100% {
transform: scale(1);
}
}