/* Card Flip Animation Styles */

/* Enhanced 3D effects */
.card-container {
    transform-style: preserve-3d;
}

/* Animation keyframes for card flip */
@keyframes flipIn {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(180deg);
    }
}

@keyframes flipOut {
    from {
        transform: rotateY(180deg);
    }

    to {
        transform: rotateY(0deg);
    }
}

/* Animation classes - Separated for each direction */
.card-inner.flip-in-animation {
    animation: flipIn 0.6s ease-out forwards;
    transition: none !important;
    /* Disable transition during animation */
}

.card-inner.flip-out-animation {
    animation: flipOut 0.6s ease-out forwards;
    transition: none !important;
    /* Disable transition during animation */
}

/* Enhanced shadow effects during animation */
.card-inner.animating .card-front,
.card-inner.animating .card-back {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Subtle scale effect on hover */
.card-container:hover .card-inner:not(.flipped):not(.animating) {
    transform: scale(1.02);
}

/* Improved perspective for better 3D effect */
.business-cards-container {
    perspective: 2000px;
}

/* Card shine effect */
.card-front::before,
.card-back::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.card-container:hover .card-front::before,
.card-container:hover .card-back::before {
    opacity: 1;
}

/* Click indicator */
.card-click-hint {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: rgba(52, 152, 219, 0.8);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.card-container:hover .card-click-hint {
    opacity: 1;
}

/* Static flipped state - Applied after animation completes */
.card-inner.flipped {
    transform: rotateY(180deg);
    transition: none;
    /* No transition for the static state */
}