/*======================================
  Animation: Tilt Shaking Effect
  Creates a side-to-side shaking motion
=======================================*/
@keyframes tilt-shaking {
    0% {
        transform: rotate(0deg);  /* Start at original position */
    }
    25% {
        transform: rotate(5deg);  /* Rotate 5 degrees clockwise */
    }
    50% {
        transform: rotate(0deg);  /* Return to original position */
    }
    75% {
        transform: rotate(-5deg); /* Rotate 5 degrees counter-clockwise */
    }
    100% {
        transform: rotate(0deg);  /* Return to original position */
    }
}

/*======================================
  Animation: Flip Effect
  Creates a continuous 360-degree flip
=======================================*/
@keyframes flip {
    0% {
        transform: rotateY(0deg);  /* Start facing front */
    }
    100% {
        transform: rotateY(360deg);  /* Full horizontal flip */
    }
}

/*======================================
  Animation: toTopFromBottom
  Moves an element from bottom to top with opacity change
=======================================*/
@keyframes toTopFromBottom {
    0% {
        transform: translateY(100%);  /* Start from below the viewport */
        opacity: 0;                  /* Invisible initially */
    }

    49% {
        transform: translateY(-130%); /* Moves past the top */
        opacity: 1;                   /* Fully visible */
    }

    50% {
        transform: translateY(130%);  /* Goes below the viewport */
        opacity: 0;                   /* Becomes invisible again */
    }

    100% {
        transform: translateY(0);     /* Returns to original position */
        opacity: 1;                   /* Fully visible */
    }
}

/*======================================
  Animation: Zoom In and Out
  Zooms an element in and out
=======================================*/
@keyframes zoomInOut {
    0% {
        transform: scale(0.98); /* Start slightly smaller */
        opacity: 1;             /* Fully visible */
    }
    50% {
        transform: scale(1);    /* Return to original size */
        opacity: 1;             /* Fully visible */
    }
    100% {
        transform: scale(0.98); /* Scale back down slightly */
        opacity: 1;             /* Fully visible */
    }
}

/*======================================
  Animation: UptoDown
  Moves an element up and down slightly
=======================================*/
@keyframes UptoDown {
    0%, 100% {
        transform: translateY(0); /* Start and end at the original position */
    }

    50% {
        transform: translateY(-10px); /* Move up slightly */
    }
}