/**
 * Animation Visibility Fixes
 * Ensures all animations are fully visible in both loading screens and main display
 */

/* Ensure loading overlay animations are fully visible */
.loading-overlay .preview-product {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 90% !important;
    height: auto !important;
    max-width: 500px !important;
    max-height: 90% !important;
    overflow: visible !important;
}

/* Fix for loading progress animation */
@keyframes loading-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.8;
    }
    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

/* Ensure main product animations are fully contained */
.animated-placeholder {
    position: relative !important;
    transform-style: preserve-3d !important;
    perspective: 1000px !important;
}

/* Add a decorative background to animation containers for better visibility */
.animated-placeholder::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: 
        radial-gradient(circle at 20% 20%, rgba(108, 99, 255, 0.05), transparent 70%),
        radial-gradient(circle at 80% 80%, rgba(0, 191, 166, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure interface elements inside animation containers are visible */
.animated-placeholder .operator-interface,
.animated-placeholder .chat-interface,
.animated-placeholder .agent-interface,
.animated-placeholder .navigator-interface,
.animated-placeholder .board-interface,
.animated-placeholder .studio-interface,
.animated-placeholder .app-interface {
    z-index: 5 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force GPU acceleration for smoother animations */
.animation-container,
.operator-interface,
.chat-interface,
.agent-interface,
.navigator-interface,
.board-interface,
.studio-interface,
.app-interface {
    will-change: transform, opacity !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
}

/* Fix for specific elements that might overflow */
.operator-header,
.chat-header,
.agent-header,
.navigator-header,
.board-header,
.studio-header,
.app-header {
    overflow: visible !important;
    z-index: 2 !important;
}

/* Ensure controls and buttons are fully visible */
.control-panel,
.button-group,
.action-controls,
.toolbar,
.menu-container {
    overflow: visible !important;
    z-index: 3 !important;
}

/* Specific fixes for decorative elements */
.glow-effect,
.particle-effect,
.animation-decorative-element {
    overflow: visible !important;
    pointer-events: none !important;
}

/* Responsive adjustments to ensure visibility on different screen sizes */
@media (max-width: 768px) {
    .animated-placeholder {
        min-height: 220px !important;
    }
    
    .operator-interface,
    .chat-interface,
    .agent-interface,
    .navigator-interface,
    .board-interface,
    .studio-interface,
    .app-interface {
        max-width: 90% !important;
        max-height: 90% !important;
        transform: translate(-50%, -50%) scale(0.9) !important;
    }
}

@media (max-width: 480px) {
    .animated-placeholder {
        min-height: 200px !important;
    }
    
    .operator-interface,
    .chat-interface,
    .agent-interface,
    .navigator-interface,
    .board-interface,
    .studio-interface,
    .app-interface {
        max-width: 95% !important;
        max-height: 95% !important;
        transform: translate(-50%, -50%) scale(0.85) !important;
    }
}