/**
 * Direct Animation Fixes CSS
 * Ensures animations are placed directly in product cards
 */

/* Remove any background containers that might be interfering with animation visibility */
.animated-placeholder[data-product] {
    background: transparent !important;
    box-shadow: none !important;
    min-height: 300px !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    border-radius: 12px !important;
}

/* Ensure animations are fully visible */
.animated-placeholder[data-product] .animation-element {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    transition: transform 0.3s ease !important;
}

/* Hide the lazy-load images since we're using animations instead */
.product-image.animated-image-container img.lazy-load {
    display: none !important;
}

/* Remove any loading text or placeholders */
.animated-placeholder .placeholder-text,
.animated-placeholder .loading-text,
.animated-placeholder svg {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Fix animation placement in product cards */
.product-image.animated-image-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: visible !important;
    height: 300px !important;
    min-height: 300px !important;
    background: transparent !important;
    margin-bottom: 20px !important;
}

/* Make animations more vibrant */
.operator-interface,
.chat-interface,
.code-editor,
.agent-interface,
.navigator-interface,
.board-interface,
.studio-interface,
.app-interface {
    box-shadow: 0 5px 20px rgba(108, 99, 255, 0.3) !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

/* Ensure animations are shown at full scale */
.animation-element {
    transform: scale(1) !important;
    opacity: 1 !important;
}

/* Add a subtle pulse effect to make animations more engaging */
@keyframes subtle-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 5px 20px rgba(108, 99, 255, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 25px rgba(108, 99, 255, 0.4);
    }
}

.operator-interface,
.chat-interface,
.code-editor,
.agent-interface,
.navigator-interface,
.board-interface,
.studio-interface,
.app-interface {
    animation: subtle-pulse 4s infinite ease-in-out !important;
}

/* Add hover effect to make animations interactive */
.product-card:hover .animated-placeholder[data-product] .animation-element {
    transform: scale(1.03) !important;
}

.product-card:hover .operator-interface,
.product-card:hover .chat-interface,
.product-card:hover .code-editor,
.product-card:hover .agent-interface,
.product-card:hover .navigator-interface,
.product-card:hover .board-interface,
.product-card:hover .studio-interface,
.product-card:hover .app-interface {
    box-shadow: 0 15px 30px rgba(108, 99, 255, 0.4) !important;
    animation: none !important;
}

/* Mobile responsiveness improvements */
@media (max-width: 768px) {
    .product-image.animated-image-container {
        height: 250px !important;
        min-height: 250px !important;
    }
    
    .animated-placeholder[data-product] {
        min-height: 250px !important;
    }
}