/* ==========================================================================
   Animation System
   ========================================================================== */


/* ==========================================================================
   Fade Animations
   ========================================================================== */


.fade-up {

	opacity:0;

	transform:translateY(40px);

	transition:
		opacity .8s ease,
		transform .8s ease;

}


.fade-up.is-visible {

	opacity:1;

	transform:translateY(0);

}



.fade-down {

	opacity:0;

	transform:translateY(-40px);

	transition:
		opacity .8s ease,
		transform .8s ease;

}


.fade-down.is-visible {

	opacity:1;

	transform:translateY(0);

}



/* ==========================================================================
   Slide Animations
   ========================================================================== */


.slide-left {

	opacity:0;

	transform:translateX(60px);

	transition:
		opacity .8s ease,
		transform .8s ease;

}


.slide-left.is-visible {

	opacity:1;

	transform:translateX(0);

}



.slide-right {

	opacity:0;

	transform:translateX(-60px);

	transition:
		opacity .8s ease,
		transform .8s ease;

}


.slide-right.is-visible {

	opacity:1;

	transform:translateX(0);

}


/* ==========================================================================
   Scale Animation
   ========================================================================== */


.scale-in {

	opacity:0;

	transform:scale(.9);

	transition:
		opacity .8s ease,
		transform .8s ease;

}


.scale-in.is-visible {

	opacity:1;

	transform:scale(1);

}


/* ==========================================================================
   Image Reveal
   ========================================================================== */


.image-reveal {

	overflow:hidden;

}


.image-reveal img {

	transform:scale(1.2);

	transition:
		transform 1.2s cubic-bezier(.22,1,.36,1);

}


.image-reveal.is-visible img {

	transform:scale(1);

}


/* ==========================================================================
   Hover Animations
   ========================================================================== */


.hover-lift {

	transition:transform .4s ease;

}


.hover-lift:hover {

	transform:translateY(-10px);

}



/* ==========================================================================
   Floating Animation
   ========================================================================== */


.float {

	animation:
		float 6s ease-in-out infinite;

}


@keyframes float {


	0%,
	100% {

		transform:translateY(0);

	}


	50% {

		transform:translateY(-20px);

	}

}



/* ==========================================================================
   Marquee Animation
   ========================================================================== */


@keyframes marquee {


	from {

		transform:translateX(0);

	}


	to {

		transform:translateX(-50%);

	}

}



/* ==========================================================================
   Pulse
   ========================================================================== */


.pulse {

	animation:pulse 2s infinite;

}



@keyframes pulse {


	0% {

		transform:scale(1);

	}


	50% {

		transform:scale(1.05);

	}


	100% {

		transform:scale(1);

	}

}



/* ==========================================================================
   Page Transition
   ========================================================================== */


.page-transition {

	position: fixed;

	inset: 0;

	background: var(--color-primary);

	z-index: 99999;

	/* transform:translateY(100%); */

	pointer-events: none;

}



/* ==========================================================================
   Button Magnetic Helper
   ========================================================================== */


.magnetic {

	transition:
		transform .3s cubic-bezier(.22,1,.36,1);

}

/*=========================================================
    PRELOADER
=========================================================*/

.preloader {
    opacity: 1;
    visibility: visible;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}

.preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.page-loaded {
    overflow-x: hidden;
}

/*=========================================================
    HERO FLOATING
=========================================================*/

@keyframes heroFloating {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}