<!--Анимация слева вверх из под рамки-->

<style>
.header_hidden_left {
    overflow: hidden;
    opacity: 1;
    transition: all 1.4s ease-in-out;
}
.header_hidden_left .tn-atom {
    overflow: hidden;
    opacity: 0;
}
.header_hidden_leftVisible .tn-atom {
  animation: an_7 1s 1 both;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
  animation-delay:0.5s;
}

@keyframes an_7 {
    from{
        opacity: 0;
        transform: perspective(1000px) translate3d(0px, 300px, 0px) rotate3d(-100, 0, 50, 45deg);
    }
    to{
        opacity: 1;
        transform: perspective(500px) translate3d(0, 0, 0);
    }
}
</style>

<script>
function obs () {
    let allAnimation = document.querySelectorAll('.header_hidden_left');
    var observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) entry.target.classList.add('header_hidden_leftVisible');
            // else entry.target.classList.remove('header_hidden_leftVisible');
        });
    });
   allAnimation.forEach(function(el) { observer.observe(el); });
}


obs();
window.addEventListener('scroll', function() {
    obs();
})
</script>

<!--Анимация с увеличением и сдвигом вверх (content-scale-up)-->

<style>

/*____________________________________________________*/

:root {
     /*Настройки анимации*/
    --TransitionDelay_up: 0s; /*задержка перед анимацией*/
    --TransitionDuration_up: 1.3s; /*продолжительность анимации*/
    --ScaleContent_up: 1.8; /*увеличение изображения (работает по принципу scale (зума))*/
    --BackgroundColorShape_up: #1f28bf; /*цвет подложки во время анимации*/
}
    /*Видимое разрешение (заменить 768px на 300px, если нужна мобила)*/
    @media screen and (min-width: 768px) {


/*____________________________________________________*/



/*Ниже не трогать*/
.content-scale-up {
    overflow: hidden;
}
.content-scale-up .tn-atom {
    width: 100%;
    display: block !important;
    transform: translate(-50%, 0px) scale(1.05);
    margin-left: 50%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    height: 100%;
}

.content-scale-up .tn-atom:before {
    transition-delay: var(--TransitionDelay_up);
    content:'';
    width: 105%;
    height: 105%;
    background-color: var(--BackgroundColorShape_up);
    display: block;
    transform: translate(0%, 0%);
}
.content-scale-up-animation .tn-atom:before {
    transition-delay: var(--TransitionDelay_up);
    transform: translate(0%, -100%);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transition-duration: var(--TransitionDuration_up);
}

.content-scale-up-animation .tn-atom {
    transition-delay: var(--TransitionDelay_up);
    transition-duration: var(--TransitionDuration_up);
    animation-timing-function: cubic-bezier(.99,0,.01,1);
    transform: translate(-50%, 0px) scale(var(--ScaleContent_up));
   }
}
@-moz-document url-prefix() {
    .content-scale-up {overflow: visible;}
    .content-scale-up>div {overflow: hidden;}
}
</style>

<script>

function obsImage () {
    let allImages = document.querySelectorAll('.content-scale-up');
    var observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) entry.target.classList.add('content-scale-up-animation');
            // else entry.target.classList.remove('content-scale-up-animation');
        });
    });
   allImages.forEach(function(el) { observer.observe(el); });
}


obsImage();
window.addEventListener('scroll', function() {
    obsImage();
})
</script>