/* 50 Custom Bounce & Animation Effects for CANAL K */

/* Group 1: Vertical Bounces (1-10) */
@keyframes cb-1 { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} }
.custom-effect-1 { animation: cb-1 2s infinite; }

@keyframes cb-2 { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-10px);} }
.custom-effect-2 { animation: cb-2 0.5s infinite; }

@keyframes cb-3 { 0% {transform: translateY(0);} 25% {transform: translateY(-5px);} 75% {transform: translateY(5px);} 100% {transform: translateY(0);} }
.custom-effect-3 { animation: cb-3 3s infinite ease-in-out; }

@keyframes cb-4 { 0%, 100% {transform: translateY(0);} 10%, 30%, 50%, 70%, 90% {transform: translateY(-2px);} 20%, 40%, 60%, 80% {transform: translateY(2px);} }
.custom-effect-4 { animation: cb-4 2s infinite; }

@keyframes cb-5 { 0% {transform: scaleY(1);} 50% {transform: scaleY(1.2) translateY(-10px);} 100% {transform: scaleY(1);} }
.custom-effect-5 { animation: cb-5 1s infinite; }

@keyframes cb-6 { 0% {transform: translateY(-100px); opacity:0;} 100% {transform: translateY(0); opacity:1;} }
.custom-effect-6 { animation: cb-6 1s ease-out backwards; }

@keyframes cb-7 { 0% {transform: translateY(0);} 50% {transform: translateY(20px) scale(0.9);} 100% {transform: translateY(0);} }
.custom-effect-7 { animation: cb-7 1.5s infinite; }

@keyframes cb-8 { 0% {transform: translateY(0) rotate(0deg);} 50% {transform: translateY(-20px) rotate(10deg);} 100% {transform: translateY(0) rotate(0deg);} }
.custom-effect-8 { animation: cb-8 1.2s infinite; }

@keyframes cb-9 { 0% {transform: translateY(0);} 40% {transform: translateY(-40px);} 100% {transform: translateY(0);} }
.custom-effect-9 { animation: cb-9 0.8s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); }

@keyframes cb-10 { 0%, 100% {transform: translateY(0);} 50% {transform: translateY(-5px) translateX(5px);} }
.custom-effect-10 { animation: cb-10 2s infinite; }

/* Group 2: Pulses & Scales (11-20) */
@keyframes cb-11 { 0% {transform: scale(1);} 50% {transform: scale(1.1);} 100% {transform: scale(1);} }
.custom-effect-11 { animation: cb-11 1s infinite; }

@keyframes cb-12 { 0% {transform: scale(1);} 10% {transform: scale(1.2);} 20% {transform: scale(1);} 100% {transform: scale(1);} }
.custom-effect-12 { animation: cb-12 2s infinite; }

@keyframes cb-13 { 0% {transform: scale(0.9); opacity:0.7;} 100% {transform: scale(1.1); opacity:1;} }
.custom-effect-13 { animation: cb-13 0.8s infinite alternate; }

@keyframes cb-14 { 0% {transform: scale(1);} 50% {transform: scale(0.8) rotate(5deg);} 100% {transform: scale(1);} }
.custom-effect-14 { animation: cb-14 1.5s infinite; }

@keyframes cb-15 { 0% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);} 70% {box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);} 100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);} }
.custom-effect-15 { animation: cb-15 2s infinite; }

@keyframes cb-16 { 0% {transform: scaleX(1);} 50% {transform: scaleX(1.2);} 100% {transform: scaleX(1);} }
.custom-effect-16 { animation: cb-16 1s infinite; }

@keyframes cb-17 { 0% {transform: scaleY(1);} 50% {transform: scaleY(1.2);} 100% {transform: scaleY(1);} }
.custom-effect-17 { animation: cb-17 1s infinite; }

@keyframes cb-18 { 0% {transform: scale(1);} 25% {transform: scale(1.1);} 50% {transform: scale(0.9);} 75% {transform: scale(1.05);} 100% {transform: scale(1);} }
.custom-effect-18 { animation: cb-18 3s infinite; }

@keyframes cb-19 { 0% {transform: perspective(500px) rotateX(0deg);} 50% {transform: perspective(500px) rotateX(30deg);} 100% {transform: perspective(500px) rotateX(0deg);} }
.custom-effect-19 { animation: cb-19 2s infinite; }

@keyframes cb-20 { 0% {transform: skewX(0deg);} 50% {transform: skewX(20deg);} 100% {transform: skewX(0deg);} }
.custom-effect-20 { animation: cb-20 1s infinite; }

/* Group 3: Horizontal & Shakes (21-30) */
@keyframes cb-21 { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} }
.custom-effect-21 { animation: cb-21 1s infinite; }

@keyframes cb-22 { 0% {transform: translateX(0);} 25% {transform: translateX(-5px) rotate(-5deg);} 75% {transform: translateX(5px) rotate(5deg);} 100% {transform: translateX(0);} }
.custom-effect-22 { animation: cb-22 0.5s infinite; }

@keyframes cb-23 { 0% {transform: translateX(-100%); opacity:0;} 100% {transform: translateX(0); opacity:1;} }
.custom-effect-23 { animation: cb-23 1s ease-out backwards; }

@keyframes cb-24 { 0% {transform: translateX(100%); opacity:0;} 100% {transform: translateX(0); opacity:1;} }
.custom-effect-24 { animation: cb-24 1s ease-out backwards; }

@keyframes cb-25 { 0% {transform: translate(0,0);} 20% {transform: translate(-2px, 2px);} 40% {transform: translate(-2px, -2px);} 60% {transform: translate(2px, 2px);} 80% {transform: translate(2px, -2px);} 100% {transform: translate(0,0);} }
.custom-effect-25 { animation: cb-25 0.5s infinite; }

@keyframes cb-26 { 0% {margin-left: 0;} 50% {margin-left: 20px;} 100% {margin-left: 0;} }
.custom-effect-26 { animation: cb-26 1s infinite; }

@keyframes cb-27 { 0% {transform: rotate(0deg) translateX(5px) rotate(0deg);} 100% {transform: rotate(360deg) translateX(5px) rotate(-360deg);} }
.custom-effect-27 { animation: cb-27 2s infinite linear; }

@keyframes cb-28 { 0% {transform: translateX(0) scale(1);} 50% {transform: translateX(10px) scale(1.1);} 100% {transform: translateX(0) scale(1);} }
.custom-effect-28 { animation: cb-28 1.5s infinite; }

@keyframes cb-29 { 0% {filter: blur(0px);} 50% {filter: blur(2px) translateX(5px);} 100% {filter: blur(0px);} }
.custom-effect-29 { animation: cb-29 0.2s infinite; }

@keyframes cb-30 { 0% {transform: translateX(0);} 50% {transform: translateX(50px);} 51% {transform: translateX(-50px);} 100% {transform: translateX(0);} }
.custom-effect-30 { animation: cb-30 2s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); }

/* Group 4: Rotations (31-40) */
@keyframes cb-31 { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
.custom-effect-31 { animation: cb-31 2s infinite linear; }

@keyframes cb-32 { 0% {transform: rotate(0deg);} 100% {transform: rotate(-360deg);} }
.custom-effect-32 { animation: cb-32 3s infinite linear; }

@keyframes cb-33 { 0% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 75% {transform: rotate(-10deg);} 100% {transform: rotate(0deg);} }
.custom-effect-33 { animation: cb-33 1s infinite; }

@keyframes cb-34 { 0% {transform: rotateY(0deg);} 100% {transform: rotateY(360deg);} }
.custom-effect-34 { animation: cb-34 3s infinite linear; }

@keyframes cb-35 { 0% {transform: rotateX(0deg);} 100% {transform: rotateX(360deg);} }
.custom-effect-35 { animation: cb-35 3s infinite linear; }

@keyframes cb-36 { 0% {transform: rotate(0deg) scale(1);} 50% {transform: rotate(180deg) scale(0.5);} 100% {transform: rotate(360deg) scale(1);} }
.custom-effect-36 { animation: cb-36 2s infinite; }

@keyframes cb-37 { 0% {transform: rotate(0deg);} 80% {transform: rotate(0deg);} 90% {transform: rotate(10deg);} 95% {transform: rotate(-10deg);} 100% {transform: rotate(0deg);} }
.custom-effect-37 { animation: cb-37 2s infinite; }

@keyframes cb-38 { 0% {transform: perspective(400px) rotateY(0deg);} 50% {transform: perspective(400px) rotateY(180deg);} 100% {transform: perspective(400px) rotateY(360deg);} }
.custom-effect-38 { animation: cb-38 3s infinite; }

@keyframes cb-39 { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }
.custom-effect-39 { animation: cb-39 0.5s infinite linear; }

@keyframes cb-40 { 0% {transform-origin: top left; transform: rotate(0deg);} 50% {transform: rotate(10deg);} 100% {transform: rotate(0deg);} }
.custom-effect-40 { animation: cb-40 2s infinite ease-in-out; }

/* Group 5: Special/Wild (41-50) */
@keyframes cb-41 { 0% {background-color: transparent;} 50% {background-color: rgba(255,255,255,0.2);} 100% {background-color: transparent;} }
.custom-effect-41 { animation: cb-41 1s infinite; }

@keyframes cb-42 { 0% {opacity: 1;} 50% {opacity: 0;} 100% {opacity: 1;} }
.custom-effect-42 { animation: cb-42 0.5s infinite; }

@keyframes cb-43 { 0% {filter: hue-rotate(0deg);} 100% {filter: hue-rotate(360deg);} }
.custom-effect-43 { animation: cb-43 3s infinite linear; }

@keyframes cb-44 { 0% {clip-path: inset(0 0 0 0);} 50% {clip-path: inset(10% 0 20% 0);} 100% {clip-path: inset(0 0 0 0);} }
.custom-effect-44 { animation: cb-44 1s infinite; }

@keyframes cb-45 { 0% {border-radius: 0;} 50% {border-radius: 50%;} 100% {border-radius: 0;} }
.custom-effect-45 { animation: cb-45 2s infinite; }

@keyframes cb-46 { 0% {transform: scale(1) rotate(0);} 20% {transform: scale(1.2) rotate(-5deg);} 40% {transform: scale(1.2) rotate(5deg);} 60% {transform: scale(1.2) rotate(-5deg);} 80% {transform: scale(1.2) rotate(5deg);} 100% {transform: scale(1) rotate(0);} }
.custom-effect-46 { animation: cb-46 1s infinite; }

@keyframes cb-47 { 0% {box-shadow: 0 0 10px #fff;} 50% {box-shadow: 0 0 30px #ff00de;} 100% {box-shadow: 0 0 10px #fff;} }
.custom-effect-47 { animation: cb-47 1.5s infinite; }

@keyframes cb-48 { 0% {letter-spacing: 0px;} 50% {letter-spacing: 5px;} 100% {letter-spacing: 0px;} }
.custom-effect-48 { animation: cb-48 2s infinite; }

@keyframes cb-49 { 0% {transform: translate(0,0) skew(0deg);} 20% {transform: translate(-5px,0) skew(20deg);} 40% {transform: translate(5px,0) skew(-20deg);} 60% {transform: translate(-5px,0) skew(20deg);} 80% {transform: translate(5px,0) skew(-20deg);} 100% {transform: translate(0,0) skew(0deg);} }
.custom-effect-49 { animation: cb-49 0.8s infinite; }

@keyframes cb-50 { 0% {transform: translateY(0) scale(1);} 10% {transform: translateY(0) scale(1.1);} 20% {transform: translateY(-30px) scale(0.9);} 30% {transform: translateY(0) scale(1.1);} 40% {transform: translateY(0) scale(1);} 100% {transform: translateY(0) scale(1);} }
.custom-effect-50 { animation: cb-50 3s infinite; }




