PT top message animation

{% if attribute(theme.settings.header, 'show_top_message_'~locale) == 'yes' %}
    {% set move = 15 %}
    {% set delay = 0 %}
	<section id="top_message">
		<a href="{{attribute(theme.settings.header, 'top_message_link_'~locale)}}" 
		   rel="{{theme.settings.header.top_message_link_REL}}"
		   target="{{theme.settings.header.top_message_link_TARGET}}"
		   title="{{attribute(theme.settings.header, 'top_message_link_TITLE_'~locale)}}"
		   >
		    {% if attribute(theme.settings.header, 'animation_type') == 'fisso' %}
    			<div class="container text-center">
    				<span id="settings_header_top_message_text_{{locale}}" 
    					  data-editor="settings_header_top_message_text_{{locale}}">
    					{{attribute(theme.settings.header, 'top_message_text_'~locale)}}
    				</span>
				</div>
			{% elseif attribute(theme.settings.header, 'animation_type') == 'scorrimento' %}
		        {% if '##' in attribute(theme.settings.header, 'top_message_text_'~locale) %}
		            {% set topMessages = attribute(theme.settings.header, 'top_message_text_'~locale) | split('##') %}
		            <div class="d-flex">
    		            {% for i,message in topMessages  %}
    		                {% if i > 0 %}
    		                    {% set delay = (move + 1) * (i * 5) %}
    		                {% endif %}
    		                <div class="container text-center"
    		                    {% if i > 0 %}
    		                        style="animation-delay: {{delay}}s;"
    		                    {% endif %}
    		                >
    			                <span>
    			                    {{message | trim}}
    		                    </span>
    	                    </div>
    		            {% endfor %}
    		            <style>
    		                #top_message .container {
    		                    width: 500px;
    		                }
    		            </style>
		            </div>
		        {% else %}
		            <div class="container text-center">
        				<span id="settings_header_top_message_text_{{locale}}" 
        					  data-editor="settings_header_top_message_text_{{locale}}">
        					{{attribute(theme.settings.header, 'top_message_text_'~locale)}}
        				</span>
    				</div>
				{% endif %}
			{% else %}
                {% set topMessages = attribute(theme.settings.header, 'top_message_text_'~locale) | split('##') %} 
			    <div class="my-container text-center">
			        {% set duration = 6 %}
				    {% for i,message in topMessages %}
				        <span class="slide_message slide_message-{{i}} {{i == 0 and topMessages | length > 0 ? 'initial-anim' : ''}}">
				            {{message | trim}}
			            </span>
				    {% endfor %}
				    {% if topMessages | length == 1 %}
				        {% set duration = 8 %}
			        {% elseif topMessages | length == 2 %}
			            {% set duration = 12 %}
				    {% elseif topMessages | length > 2 %}
				        {% set duration = duration * topMessages | length %}
				    {% endif %}
			    </div>
			{% endif %}
		</a>
		{#
		<div class="close">
		    <i class="fa-solid fa-xmark"></i>
		</div>
		#}
	</section>
{% endif %}

{% if attribute(theme.settings.header, 'show_top_message_'~locale) == 'yes' %}
    {% if attribute(theme.settings.header, 'animation_type') == 'scorrimento' %}
        <style scoped>
            @keyframes move {
                to { transform: translateX(-100%); }
            }
            
            #top_message > a > div {
                transform: translateX(100%);
                animation: move {{move}}s linear infinite;
            }
            
            #top_message, #top_message * {
                overflow: hidden;
            }
        </style>
    {% endif %}
{% endif %}

{% if attribute(theme.settings.header, 'show_top_message_'~locale) == 'yes' %}
    {% if attribute(theme.settings.header, 'animation_type') == 'slide' %}
        {% if topMessages | length > 0 %}
            <script>
                $(document).ready(function() {
                    $(".initial-anim").on("animationiteration", function() {
                        $(this).removeClass("initial-anim");
                    });
                });
            </script>
            
            <style scoped>
        
                #top_message .my-container {
                    overflow: hidden;
                    position: relative;
                    height: 20px;
                    margin: 0 auto;
                }
                
                #top_message .my-container > div {
                    overflow: hidden;
                    width: 70%;
                    height: 100%;
                    position: relative;
                    margin: 0 auto;
                }
                
                #top_message .slide_message {
                    display: block;
                    width: 100%;
                    text-align: center;
                    position: absolute;
                    top: 0;
                    bottom: auto;
                    animation-duration: {{duration}}s;
                    animation-timing-function: linear;
	                animation-iteration-count: infinite;
                }
                
                .slide_message-0.initial-anim {
                	animation-name: initial-anim;
                }
                
                .slide_message-0:not(.initial-anim) {
                	animation-name: anim-0;
                }
                
                .slide_message-1 {
                	animation-name: anim-1;
                }
                
                .slide_message-2 {
                	animation-name: anim-2;
                }
                
                @keyframes initial-anim {
                	0%, 8.3% { left: 0; opacity: 1; }
                    8.3%,25% { left: 0; opacity: 1; }
                    33.33%, 100% { left: 110%; opacity: 0; }
                }
                
                
                @keyframes anim-0 {
                	0%, 8.3% { left: -100%; opacity: 0.5; }
                    8.3%,25% { left: 0; opacity: 1; }
                    33.33%, 100% { left: 110%; opacity: 0; }
                }
                
                @keyframes anim-1 {
                	0%, 33.33% { left: -100%; opacity: 0.5; }
                    41.63%, 58.29% { left: 0; opacity: 1; }
                    66.66%, 100% { left: 110%; opacity: 0; }
                }
                
                @keyframes anim-2 {
                	0%, 66.66% { left: -100%; opacity: 0.5; }
                    74.96%, 91.62% { left: 0; opacity: 1; }
                    100% { left: 110%; opacity: 0; }
                }
                
                #top_message .my-container:hover .slide_message-0,
                #top_message .my-container:hover .slide_message-1,
                #top_message .my-container:hover .slide_message-2
                {
                	animation-play-state: paused;
                }
                
                @media all and (min-width: 769px){
                    #top_message .my-container {
                        max-width: 92%;
                    }
                }
                
                @media all and (max-width: 768px){
                    #top_message .my-container {
                        max-width: 96%;
                    }
                }
                
            </style>
        
        {% endif %}
    {% endif %}
{% endif %}