<!--Мобильные анимации-->
<style>
    :root {
        /*Для fadeIn*/
        --fIn-duration: 1.2s;
        --fIn-delay: 0.4s;
        
        /*Для fadeInUp*/
        --fInUp-duration: 1.2s;
        --fInUp-delay: 0.4s;
        
        /*Для fadeInDown*/
        --fInD-duration: 1.2s;
        --fInD-delay: 0.4s;
        
        /*Для fadeInLeft*/
        --fInL-duration: 1.2s;
        --fInL-delay: 0.4s;
        
        /*Для fadeInRight*/
        --fInR-duration: 1.2s;
        --fInR-delay: 0.4s;
        
        /*Для zoomIn*/
        /*Origin - это точка, с которой начинается расширение. Можно указать left top*/
        --zIn-duration: 1.2s;
        --zIn-delay: 0.4s;
        --zIn-origin: center center;
        
        /*Для skewIn*/
        --sIn-duration: 1.2s;
        --sIn-delay: 0.4s;
        
        /*Для skewIn с перспективой*/
        --sInP-duration: 1.2s;
        --sInP-delay: 0.4s;
        
        /*Для reveal*/
        --r-duration: 1.2s;
        --r-delay: 0.4s;
        
        /*Для eraserDown*/
        --eD-duration: 1.2s;
        --eD-delay: 0.4s;
        
        /*Для eraserUp*/
        --eUp-duration: 1.2s;
        --eUp-delay: 0.4s;
        
        /*Для eraserLeft*/
        --eL-duration: 1.2s;
        --eL-delay: 0.4s;
        
        /*Для eraserRight*/
        --eR-duration: 1.2s;
        --eR-delay: 0.4s;
        
        /*Для imageMask*/
        --iM-duration: 1.2s;
        --iM-delay: 0.4s;
        --iM-bg: #a1a2ac;
    }
    @media screen and (max-width: 480px) {
        .fadeInElem{opacity:0;transition-property:opacity;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--fIn-duration);transition-delay:var(--fIn-delay);will-change:transform}.fadeInElem.anim--started{opacity:1}.fadeInUpElem{opacity:0;transform:translate(0,100px);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--fInUp-duration);transition-delay:var(--fInUp-delay);will-change:transform}.fadeInUpElem.anim--started{opacity:1;transform:none}.fadeInDownElem{opacity:0;transform:translate(0,-100px);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--fInD-duration);transition-delay:var(--fInD-delay);will-change:transform}.fadeInDownElem.anim--started{opacity:1;transform:none}.fadeInLeftElem{opacity:0;transform:translate(100px,0);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--fInL-duration);transition-delay:var(--fInL-delay);will-change:transform}.fadeInLeftElem.anim--started{opacity:1;transform:none}.fadeInRightElem{opacity:0;transform:translate(-100px,0);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--fInR-duration);transition-delay:var(--fInR-delay);will-change:transform}.fadeInRightElem.anim--started{opacity:1;transform:none}.zoomInElem{opacity:0;transform:scale(.9);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--zIn-duration);transition-delay:var(--zIn-delay);transform-origin:var(--zIn-origin);will-change:transform}.zoomInElem.anim--started{opacity:1;transform:scale(1)}.skewInElem{overflow:hidden}.skewInElem .tn-atom{opacity:0;transform:perspective(1000px) translate3d(0,100px,0) rotate3d(-100,0,50,45deg);transition-property:opacity,transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--sIn-duration);transition-delay:var(--sIn-delay);will-change:transform}.skewInElem.anim--started .tn-atom{opacity:1;transform:perspective(500px) translate3d(0,0,0)}.skewInPersElem{perspective:2000px;perspective-origin:50%;transform:rotateZ(6deg) translateZ(0);transition-property:transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--sInP-duration);transition-delay:var(--sInP-delay)}.skewInPersElem .tn-atom{opacity:0;transform:translateY(70%) rotateX(40deg) translateZ(0);transform-origin:left bottom;transition-property:opacity,transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--sInP-duration);transition-delay:var(--sInP-delay);will-change:transform}.skewInPersElem.anim--started{transform:rotateZ(0deg) translateZ(0)}.skewInPersElem.anim--started .tn-atom{opacity:1;transform:translateY(0%) rotateX(0deg) translateZ(0)}.revealElem{overflow:hidden}.revealElem *{transform:translate3d(0,100%,0);transition-property:transform;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--r-duration);transition-delay:var(--r-delay);will-change:transform}.revealElem.anim--started *{transform:translate3d(0,0,0)}.eraserDownElem *{clip-path:inset(100% 0 0 0);transition-property:all;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--eD-duration);transition-delay:var(--eD-delay);will-change:transform}.eraserDownElem.anim--started *{clip-path:inset(-10% 0 -20% 0)}.eraserUpElem *{clip-path:inset(0 0 100% 0);transition-property:all;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--eUp-duration);transition-delay:var(--eUp-delay);will-change:transform}.eraserUpElem.anim--started *{clip-path:inset(-10% 0 -20% 0)}.eraserLeftElem *{clip-path:inset(0 100% 0 0);transition-property:all;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--eL-duration);transition-delay:var(--eL-delay);will-change:transform}.eraserLeftElem.anim--started *{clip-path:inset(-10% 0 -20% 0)}.eraserRightElem *{clip-path:inset(0 0 0 100%);transition-property:all;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--eR-duration);transition-delay:var(--eR-delay);will-change:transform}.eraserRightElem.anim--started *{clip-path:inset(-10% 0 -20% 0)}.imageMask>*::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:var(--iM-bg);transition-property:all;transition-timing-function:cubic-bezier(.19,1,.22,1);transition-duration:var(--iM-duration);transition-delay:var(-iM-delay);will-change:transform;pointer-events:none;z-index:10}.imageMask.anim--started>*::after{height:0%}
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", () => {
        let check = 0;
        function obs () {
            let allAnimation = document.querySelectorAll('.fadeInElem, .fadeInDownElem, .fadeInUpElem, .fadeInRightElem, .fadeInLeftElem, .zoomInElem, .skewInElem, .skewInPersElem, .revealElem, .eraserDownElem, .eraserUpElem, .eraserLeftElem, .eraserRightElem, .imageMask');
    
            var observer = new IntersectionObserver(function(entries, observer) {
                entries.forEach(function(entry) {
                    if (entry.isIntersecting) entry.target.classList.add('anim--started');
                });
            }, {rootMargin: "0px 0px -200px 0px"});
    
            allAnimation.forEach(function(el) { observer.observe(el); });
        }
        if (window.matchMedia("(max-width: 480px)").matches) {
            obs();
            window.addEventListener('scroll',()=>{if(check<3){allAnimation=document.querySelectorAll('.fadeInElem, .fadeInDownElem, .fadeInUpElem, .fadeInRightElem, .fadeInLeftElem, .zoomInElem, .skewInElem, .skewInPersElem, .revealElem, .eraserDownElem, .eraserUpElem, .eraserLeftElem, .eraserRightElem, .imageMask');setTimeout(obs,100)}check+=1})
        }
    });
</script>

<script>window.addEventListener("load",function(){let all=document.querySelectorAll('.t396__elem');all.forEach(e=>{let elm=e.getAttribute('class').split('___');if(elm.length>1){e.setAttribute('class',elm[0]+elm[1].split('_').join(' ')+elm[2])}})})</script>