.coin {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.coin div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 0.1s ease;
}

.coin img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.coin .blue {
    z-index: 100;
    transform: rotateY(0deg);
}

.coin .red {
    transform: rotateY(180deg);
}

/* Анимация для синей стороны (показываем синюю в конце) */
.coin.flipblue {
    -webkit-animation: flipToBlue 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    -moz-animation: flipToBlue 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    -o-animation: flipToBlue 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation: flipToBlue 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Анимация для красной стороны (показываем красную в конце) */
.coin.flipred {
    -webkit-animation: flipToRed 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    -moz-animation: flipToRed 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    -o-animation: flipToRed 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation: flipToRed 4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes flipToBlue {
    0% { 
        transform: rotateY(0deg); 
    }
    20% { 
        transform: rotateY(360deg); 
    }
    40% { 
        transform: rotateY(720deg); 
    }
    60% { 
        transform: rotateY(1080deg); 
    }
    80% { 
        transform: rotateY(1440deg); 
    }
    100% { 
        transform: rotateY(1800deg); 
    }
}

@keyframes flipToRed {
    0% { 
        transform: rotateY(0deg); 
    }
    20% { 
        transform: rotateY(360deg); 
    }
    40% { 
        transform: rotateY(720deg); 
    }
    60% { 
        transform: rotateY(1080deg); 
    }
    80% { 
        transform: rotateY(1440deg); 
    }
    100% { 
        transform: rotateY(1980deg); 
    }
}