/* Firefox-specific fixes for feature card flip animation */

/* Fix 1: Reset and properly configure the 3D context */
@-moz-document url-prefix() {
    /* Reset the card container - maintain original styles */
    .feature-card.has-back {
        transform-style: flat !important;
        perspective: 1000px !important;
        /* Preserve original card dimensions */
        min-height: 320px !important;
    }
    
    /* Ensure inner container has proper 3D context and inherits height */
    .feature-card.has-back .feature-card-inner {
        transform-style: preserve-3d !important;
        -moz-transform-style: preserve-3d !important;
        position: relative !important;
        width: 100% !important;
        /* Don't override height - let inline styles work */
        min-height: inherit !important;
    }
    
    /* Critical: Fix the face positioning and visibility */
    .feature-card.has-back .feature-card-front,
    .feature-card.has-back .feature-card-back {
        position: absolute !important;
        width: 100% !important;
        /* Use full height of container */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        backface-visibility: hidden !important;
        -moz-backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transform-style: flat !important;
        -moz-transform-style: flat !important;
    }
    
    /* Ensure front face is visible initially */
    .feature-card.has-back .feature-card-front {
        transform: rotateY(0deg) translateZ(1px) !important;
        -moz-transform: rotateY(0deg) translateZ(1px) !important;
        z-index: 2;
    }
    
    /* Ensure back face is hidden initially */
    .feature-card.has-back .feature-card-back {
        transform: rotateY(-180deg) translateZ(1px) !important;
        -moz-transform: rotateY(-180deg) translateZ(1px) !important;
        z-index: 1;
    }
    
    /* Fix hover state */
    .feature-card.has-back:hover .feature-card-inner {
        transform: rotateY(180deg) !important;
        -moz-transform: rotateY(180deg) !important;
    }
    
    /* During hover, swap visibility */
    .feature-card.has-back:hover .feature-card-front {
        z-index: 1;
    }
    
    .feature-card.has-back:hover .feature-card-back {
        z-index: 2;
    }
}

/* Additional Firefox fix using feature detection */
@supports (-moz-appearance: none) {
    /* Hide faces during transition to prevent bleed-through */
    .feature-card.has-back .feature-card-inner {
        transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    
    /* Use opacity as a fallback for Firefox */
    .feature-card.has-back .feature-card-front {
        transition: opacity 0.3s ease-in-out 0.35s, transform 0.7s;
    }
    
    .feature-card.has-back .feature-card-back {
        transition: opacity 0.3s ease-in-out 0.35s, transform 0.7s;
    }
    
    /* Hide opposite face during flip */
    .feature-card.has-back:hover .feature-card-front {
        opacity: 0;
    }
    
    .feature-card.has-back:not(:hover) .feature-card-back {
        opacity: 0;
    }
}