/* public/css/card-flip.css */
.daily-draw-scene {
    width: 250px; 
    height: 350px; 
    perspective: 600px;
}

.daily-draw-card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.daily-draw-scene.is-flipped .daily-draw-card {
    transform: rotateY(180deg);
}

.daily-draw-card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.daily-draw-card-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.daily-draw-card-front {
    transform: rotateY(180deg);
}

.daily-draw-description-wrapper {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    max-height: 0;
    overflow: hidden;
}

.daily-draw-description-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
    max-height: 1000px; 
}