/*****************
    ANIMATIONS
 ****************/
.animation {
    opacity: 0;
    filter: blur(0);
    transform: translateX(-50%);
    transition: all .7s ease-in-out;
}

.animation[animation="true"] {
    opacity: 1;
    transform: translateX(0);
}

.animation-2 {
    opacity: 0;
    filter: blur(0);
    transform: translateX(50%);
    transition: all .7s ease-in-out;
}

.animation-2[animation="true"] {
    opacity: 1;
    transform: translateX(0);
}
/*****************
  IMAGE SCROLL ANIMATION
 ****************/
.scroll-img {
    will-change: transform;
    transition: transform .3s ease-out;
}

/* scroll down → image moves UP */
.scroll-img-1 {
	will-change: transform;
	transition: transform 0.3s ease-in-out;
}

/*****************
  ARROWS XY ANIMATION
 ****************/
.animation-xy {
	transform: translate(-30%, -30%);
	opacity: 0;
	transform-origin: top left;
	transition: all 1.5s ease-in-out;

}
.animation-xy[animation="true"] {
	transform: translate(0%, 0%);
	opacity: 1;
}