.card-container {
    // Container styles if needed
}

.perspective {
    perspective: 1000px;
}

.preserve-3d {
    transform-style: preserve-3d;
}

.rotate-y-180 {
    transform: rotateX(180deg);
}

.backface-hidden {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari */
}

// Ensure the back is initially hidden and rotated
.card-back {
    transform: rotateX(180deg);
}

// Flip on hover/focus-within the group
.group:hover .card-flip-inner,
.group:focus-within .card-flip-inner {
    transform: rotateX(180deg);
}

// Style the front overlay and title
.card-front {
    .absolute { // The overlay div
        transition: background-color 0.3s ease;
    }
    h3 {
        transition: opacity 0.3s ease;
    }
}

// Fade out overlay slightly on hover to reveal image more
.group:hover .card-front .absolute {
    background-color: rgba(0, 0, 0, 0.2);
}

// Optional: Hide front title on hover if desired
// .group:hover .card-front h3 {
//     opacity: 0;
// }