.article-card {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.article-card.visible {
    opacity: 1;
    max-height: 550px;
    /* Adjust this value as needed */
}

.animate-flip {
    position: fixed;
    z-index: 9999;
    transition: all 0.6s ease;
    transform-origin: top left;
    overflow: hidden;
}

.transition-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Detail Page */
.fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
}

.fade-down-out {
    opacity: 0;
    transform: translate(0px, 100%);
    transition: all 2s ease;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}