/* Jiggle animation */
@keyframes jiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-3deg);
    }
    75% {
        transform: rotate(3deg);
    }
}

/* Partial flip animation */
@keyframes partial-flip {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(66deg);
    }
}

/* Full flip animation */
@keyframes full-flip {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@keyframes scale-up-down {
    0%, 100% {
        transform: scale(1); /* Normal size */
    }
    50% {
        transform: scale(1.2); /* Slightly larger */
    }
}

.flip-button-hint-small-flip {
    animation: scale-up-down 1s ease-in-out infinite; /* Continuous scaling animation */
}

.flip-button-hint-medium-flip {
    animation: scale-up-down 1.2s ease-in-out infinite; /* Continuous scaling animation */
}

.flip-button-hint-big-flip {
    animation: scale-up-down 1.4s ease-in-out infinite; /* Continuous scaling animation */
}

@keyframes bouncy-flip-loop {
    0%, 100% {
        transform: rotateY(180deg);
        animation-timing-function: ease-in; /* Faster to 180deg */
    }
    50% {
        transform: rotateY(var(--overshoot, 168deg));  /* Slight overshoot for a softer bounce */
        animation-timing-function: ease-out; /* Slower near 168deg */
    }
}

.jiggle {
    animation: jiggle 0.6s ease-in-out infinite;
}

.small-flip {
    --overshoot: 168deg;
    animation: bouncy-flip-loop 1s infinite; /* Smoother easing */
}

.medium-flip {
    --overshoot: 148deg;
    animation: bouncy-flip-loop 1.2s infinite; /* Smoother easing */
}

.big-flip {
    --overshoot: 110deg;
    animation: bouncy-flip-loop 1.4s infinite; /* Smoother easing */
}

.full-flip {
    animation: full-flip 1s ease-in-out forwards;
}



@keyframes scale-down-up {
    0%, 100% {
        animation-timing-function: ease-in; /* Faster to 180deg */
        transform: scale(1); /* Normal size */
    }
    50% {
        animation-timing-function: ease-out; /* Faster to 180deg */
        transform: scale(0.8); /* Slightly larger */
    }
}

.flip-tooltip {
    z-index: 999;
    position: absolute;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
}

.flip-tooltip .text {
    background-color: #00C3E3;
    color: #fff;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 8px;
    white-space: nowrap;
}

.flip-tooltip .icon {
    color: white;
    display: block;
    text-align: center;
    font-size: 40px;
    animation: scale-down-up 1s ease-in infinite; /
}


@keyframes swipe-right {
    0%, 100% {

        transform:translateX(0) rotateY(180deg); /* Normal size */
    }
    40% {
        transform:translateX(40px) rotateY(180deg); /* Normal size */
    }
}

.swipe-tooltip .show {
    opacity: 1;
}

.swipe-tooltip {
    z-index: 999;
    position: absolute;
    bottom: -32px;
    left: 60%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease;
}

.swipe-tooltip .icon  {
    color: #00C3E3;
    display: block;
    text-align: center;
    font-size: 40px;
    animation: scale-down-up 1.2s ease-in-out infinite; 
}


.swipe-right-card-hint {
    animation: swipe-right 1.2s ease-in-out 0.48s infinite;
}

.flip-button:hover .tooltip {
    opacity: 1;
}