$(document).ready(function(){

    function Function1(currentImage, newImage) {
        currentImage.css({ 
            'transform-origin': 'center' 
        });
        currentImage.css({ 
            'transition': 'transform 0.3s ease-in-out', 
            'transform': 'scaleX(0)'
        });
    
        setTimeout(function() {
            currentImage.hide();
            newImage.show().css({ 
                'transform-origin': 'center',
                'transform': 'scaleX(0)', 
                'transition': 'transform 0.3s ease-in-out'
            });
    
            setTimeout(() => newImage.css('transform', 'scaleX(1)'), 10);
        }, 300); 
    }

    $('.imgtips').each(function(index) {
        $(this).click(function() {
            Function1($(this), $('.imgtips1').eq(index));
        });
        $('.imgtips1').eq(index).click(function() {
            Function1($('.imgtips1').eq(index), $('.imgtips').eq(index));
        });
    });


    $("#tips").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#tips").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#impacts").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#impacts").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});    
    $("#campagnes").mouseover(function(){$(this).css('color', 'rgb(244, 90, 74)');});  
    $("#campagnes").mouseleave(function(){$(this).css('color', 'rgb(41, 44, 35)');});   

    $("h1").html(function(_, html) {
        return html.split("").map(function(letter) {
          return `<span>${letter}</span>`;
        }).join('');
    });

    $("span").mouseover(function() {
        $(this).css({
            'opacity': '0',
            'transition': 'opacity 0.1s ease-in-out',
        });    
    });
    $("span").mouseleave(function() {
        $(this).css({
            'opacity': '1',
            'transition': 'opacity 0.1s ease-in-out',
        });
    });  
    
});
