/**
 * Text Flow Fix - Industry Standard Solution
 * 
 * This CSS file addresses the GSAP SplitText animation side effects
 * that cause text to break unnaturally into separate lines.
 * 
 * Problem: SplitText wraps each line in a div with display:block
 * Solution: Reset text flow after animations complete
 */

/* Reset split text wrapper divs to allow natural text flow */
.move-anim > div,
.gsap-pop > div {
    display: inline !important;
    transform: none !important;
}

/* Ensure paragraphs maintain proper text flow */
p.move-anim,
.move-anim p {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix for animated headings */
h1.move-anim,
h2.move-anim,
h3.move-anim,
h4.move-anim,
h5.move-anim,
h6.move-anim,
.post-title.move-anim {
    white-space: normal;
}

/* Ensure inline elements stay inline */
.move-anim strong,
.move-anim em,
.move-anim span {
    display: inline;
}

/* Remove forced block display from GSAP-generated wrappers */
[data-component-name] {
    display: inline !important;
}

/* Blockquote text flow fix */
blockquote.gsap-pop p,
.blockquote.gsap-pop p {
    white-space: normal;
    line-height: 1.8;
}

/* General animation wrapper fixes */
.animate-wrapper > div {
    display: inline !important;
}

/* Ensure list items flow properly */
li.move-anim,
.move-anim li {
    display: list-item !important;
}

/* Preserve natural spacing */
.move-anim {
    white-space: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/**
 * Alternative approach: Disable animations on small screens
 * where text wrapping issues are more noticeable
 */
@media (max-width: 768px) {
    .move-anim,
    .gsap-pop {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .move-anim > div {
        display: inline !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/**
 * Cleanup for after animation completes
 * This targets elements that have finished animating
 */
.animation-complete .move-anim > div,
.animation-complete .gsap-pop > div {
    display: inline !important;
    position: static !important;
    transform: none !important;
}

/* Fix for highlight boxes and panels */
.highlight-box .move-anim > div,
.panel-section .move-anim > div {
    display: inline !important;
}

/* Ensure proper text alignment */
.move-anim {
    text-align: inherit;
}

/* Fix for nested animated elements */
.move-anim .move-anim {
    display: inline;
}

/**
 * Performance optimization
 * Reduce reflows by using transform instead of position changes
 */
.move-anim {
    will-change: auto;
}

.move-anim.animating {
    will-change: transform, opacity;
}

/* Reset will-change after animation */
.move-anim:not(.animating) {
    will-change: auto;
}