/* Card stack container - Higher specificity */
body .card-animation-container,
html body .card-animation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    z-index: 2 !important;
    perspective: 1000px; /* Add perspective for 3D effects */
}

/* Card stack styles - Higher specificity */
body .card-stack,
html body .card-stack {
    position: relative;
    width: 350px; /* Portrait card width */
    height: 525px; /* Portrait card height */
    transform-style: preserve-3d; /* Enable 3D transforms */
}

/* Card styles - Higher specificity */
body .card-stack .card,
html body .card-stack .card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Match card-stack width */
    height: 100%; /* Match card-stack height */
    border-radius: 10px;
    overflow: hidden; /* Prevent content overflow */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
    transform-origin: center center;
    transition: transform 1.5s ease-in-out, opacity 1.5s ease-in-out;
    will-change: transform, opacity; /* Optimize for animations */
    backface-visibility: hidden; /* Prevent flickering */
    -webkit-backface-visibility: hidden; /* Safari support */
    opacity: 1; /* Start visible */
    transform: rotate(0deg); /* Initial transform to prevent layout shifts */
}

/* Speed Test Mode - Disable animations and show static fanned position */
body .speed-test-mode .card-stack .card,
html body .speed-test-mode .card-stack .card {
    transition: none !important; /* Disable all transitions */
    animation: none !important; /* Disable all animations */
}

/* YouTube iframe styling - Higher specificity */
body .card-stack .card iframe,
html body .card-stack .card iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none; /* Prevent user interaction */
    transform: scale(1.5); /* Scale to cover the card */
    clip-path: inset(0 0 0 0); /* Try to reduce flicker by forcing a strict visible area */
}

/* Media queries - adjust breakpoints and sizes as needed */
@media (max-width: 768px) {
    body .card-stack,
    html body .card-stack {
        width: 280px; /* Smaller card width for tablets */
        height: 420px; /* Maintain aspect ratio */
    }
}

@media (max-width: 480px) {
    body .card-stack,
    html body .card-stack {
        width: 250px; /* Even smaller for mobile */
        height: 375px; /* Maintain aspect ratio */
    }
}

@media (max-width: 320px) {
    body .card-stack,
    html body .card-stack {
        width: 150px; /* Smallest screens */
        height: 225px; /* Maintain aspect ratio */
    }
}