/**
 * Enhanced Animation Placement CSS
 * Makes product animations more advanced and properly positioned
 */

/* Ensure animations are fully expanded in their containers */
.animated-placeholder[data-product] {
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    position: relative !important;
    background: transparent !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 10 !important;
}

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

/* Enhance all animation elements to ensure they appear properly */
.operator-animation-container,
.coder-animation-container,
.llmchat-animation-container,
.app-animation-container,
.agent-animation-container,
.navigator-animation-container,
.board-animation-container,
.studio-animation-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 10px !important;
    z-index: 15 !important;
}

/* Enhance interface elements */
.operator-interface,
.chat-interface,
.code-editor,
.agent-interface,
.navigator-interface,
.board-interface,
.studio-interface,
.app-interface {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important;
    z-index: 20 !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;
}

/* Make sure product image container is high enough */
.product-image.animated-image-container {
    height: 300px !important;
    min-height: 300px !important;
    position: relative !important;
    overflow: visible !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

/* Enhanced styling for specific animation components */
.chat-messages {
    background-color: rgba(30, 41, 59, 0.9) !important;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2) !important;
}

.code-editor .code-content {
    background-color: rgba(22, 27, 34, 0.95) !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3) !important;
}

.operator-interface .interface-body {
    background-color: rgba(30, 41, 59, 0.9) !important;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2) !important;
}

/* Improve animation visibility in light mode */
[data-theme="light"] .operator-interface,
[data-theme="light"] .chat-interface,
[data-theme="light"] .code-editor,
[data-theme="light"] .agent-interface,
[data-theme="light"] .navigator-interface,
[data-theme="light"] .board-interface,
[data-theme="light"] .studio-interface,
[data-theme="light"] .app-interface {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !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;
    }
}

/* Ensure animations are visible when scrolled into view */
.animation-element {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
}