/**
 * Animation Persistence Styles - Enhanced Version
 * Ensures animations remain visible and don't disappear after initialization
 * Applies stronger persistence rules to prevent flicker on page interactions
 */

/* Make sure animated placeholders stay visible */
.animated-placeholder[data-animation-persistent="true"] {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    animation: none !important; /* Prevent any animations from resetting */
    transition: none !important; /* Disable transitions that might cause flicker */
}

/* Ensure animation content remains visible */
.animated-placeholder[data-animation-persistent="true"] .animation-content {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Ensure active class is maintained */
.animated-placeholder.active {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure all animation elements within placeholders remain visible */
.animated-placeholder .animation-element {
    transition: opacity 0.3s ease-in-out;
}

.animated-placeholder[data-animation-persistent="true"] .animation-element {
    opacity: 1 !important;
}

/* Handle special animation containers */
.sophisticated-background-effect,
.sophisticated-particles {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make sure code animation elements stay visible */
.animated-placeholder[data-product="coder"] .code-line,
.animated-placeholder[data-product="coder"] .cursor {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Keep LLM chat bubbles visible */
.animated-placeholder[data-product="llm"] .message,
.animated-placeholder[data-product="llm"] .message-text {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Keep operator animations visible */
.animated-placeholder[data-product="operator"] .operator-item,
.animated-placeholder[data-product="operator"] .status-indicator {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure model visualizations remain visible */
.animated-placeholder[data-product="model-studio"] .neuron,
.animated-placeholder[data-product="model-studio"] .connection {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Handle any animation fallbacks */
.animation-fallback {
    display: none !important; /* Hide fallbacks when we have real animations */
}

.animated-placeholder[data-animation-persistent="true"] .animation-fallback {
    display: none !important;
}

/* Prevent loading animations from showing when real animations are loaded */
.animated-placeholder .loading-animation,
.animated-placeholder .placeholder-loader,
.animated-placeholder .loading-indicator,
.animated-placeholder .loader,
.animated-placeholder .spinner,
.animated-placeholder [class*="loading"],
.animated-placeholder [class*="loader"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* Ensure the revealed class sticks */
.reveal-animation.revealed {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    transition: none !important;
}

/* Ensure each product type specific animation persists */
[data-product] .animated-content,
[data-product] .animation-content,
.animated-placeholder .animation-element,
.animation-container .animation-element {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    animation-play-state: running !important;
    pointer-events: auto !important;
}

/* Global reset for any animation resets */
body .animated-placeholder,
body .animation-container,
body [data-product] {
    animation: none !important;
    transition: none !important;
}

/* Important override for all animation states */
.animated-placeholder * {
    animation-fill-mode: forwards !important;
}