/**
 * Course Card Animation Styles
 * CSS to support ScrollReveal and Anime.js animations 
 */

/* Make sure all cards maintain 3D capabilities */
.course-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    backface-visibility: hidden;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    transform: translate3d(0, 0, 0);
}

/* Ensure cards are visible only when active */
.course-card.active {
    display: block;
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* Fix stacking context for ScrollReveal */
.single-course-showcase {
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
    z-index: 1;
}

/* Disable browser prefetch for more reliable animations */
.course-card:not(.active) {
    pointer-events: none;
}

/* Enhance button hover effect on active card */
.course-card.active .course-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Fix for ScrollReveal reimplementation conflicts */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Fix for flickering animations */
.course-card.is-animating {
    animation-fill-mode: both;
}

/* Ensure clean animation state */
.course-card.is-revealed {
    visibility: visible;
}

/* Fix Firefox animation issues */
@-moz-document url-prefix() {
    .course-card {
        will-change: opacity, transform;
    }
}

/* Fix Safari animation issues */
@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .course-card {
            transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }
    }
}