/* ===================================================
   SAFE TRANSITIONS
=================================================== */

html{
	scroll-behavior:smooth;
}

body{
	overflow-x:hidden;
}

a,
button,
input,
textarea,
select{
	transition:
	color .25s ease,
	background-color .25s ease,
	border-color .25s ease,
	transform .25s ease,
	box-shadow .25s ease,
	opacity .25s ease;
}

/* ===================================================
   SCROLL REVEAL
=================================================== */

.ulg-reveal{
	opacity:0;

	transform:
	translate3d(
		0,
		50px,
		0
	);

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

	will-change:
	transform,
	opacity;
}

.ulg-reveal.active{
	opacity:1;

	transform:
	translate3d(
		0,
		0,
		0
	);
}

/* ===================================================
   FADE LEFT
=================================================== */

.ulg-reveal-left{
	opacity:0;

	transform:
	translate3d(
		-50px,
		0,
		0
	);

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

	will-change:
	transform,
	opacity;
}

.ulg-reveal-left.active{
	opacity:1;

	transform:
	translate3d(
		0,
		0,
		0
	);
}

/* ===================================================
   FADE RIGHT
=================================================== */

.ulg-reveal-right{
	opacity:0;

	transform:
	translate3d(
		50px,
		0,
		0
	);

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

	will-change:
	transform,
	opacity;
}

.ulg-reveal-right.active{
	opacity:1;

	transform:
	translate3d(
		0,
		0,
		0
	);
}

/* ===================================================
   SCALE IN
=================================================== */

.ulg-scale{
	opacity:0;

	transform:
	scale(.94);

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

	will-change:
	transform,
	opacity;
}

.ulg-scale.active{
	opacity:1;

	transform:
	scale(1);
}

/* ===================================================
   FLOAT EFFECT
=================================================== */

.ulg-float{
	animation:
	ulgFloatY
	5s ease-in-out
	infinite;

	will-change:
	transform;
}

@keyframes ulgFloatY{

	0%{
		transform:
		translateY(0);
	}

	50%{
		transform:
		translateY(-14px);
	}

	100%{
		transform:
		translateY(0);
	}
}

/* ===================================================
   PULSE GLOW
=================================================== */

.ulg-glow{
	animation:
	ulgGlow
	2.8s infinite;
}

@keyframes ulgGlow{

	0%{
		box-shadow:
		0 0 0 0
		rgba(
			0,
			209,
			255,
			.35
		);
	}

	70%{
		box-shadow:
		0 0 0 18px
		rgba(
			0,
			209,
			255,
			0
		);
	}

	100%{
		box-shadow:
		0 0 0 0
		rgba(
			0,
			209,
			255,
			0
		);
	}
}

/* ===================================================
   CARD HOVER
=================================================== */

.ulg-hover-lift{
	transition:
	transform .35s ease,
	box-shadow .35s ease;

	will-change:
	transform;
}

.ulg-hover-lift:hover{
	transform:
	translateY(-10px);

	box-shadow:
	0 28px 60px
	rgba(
		0,
		0,
		0,
		.24
	);
}

/* ===================================================
   BUTTON SHINE
=================================================== */

.ulg-btn{
	position:relative;
	overflow:hidden;
}

.ulg-btn::before{
	content:"";

	position:absolute;
	top:0;
	left:-120%;

	width:60%;
	height:100%;

	background:
	linear-gradient(
		90deg,
		transparent,
		rgba(
			255,
			255,
			255,
			.18
		),
		transparent
	);

	transform:
	skewX(-20deg);

	transition:
	left .7s ease;

	pointer-events:none;
}

.ulg-btn:hover::before{
	left:140%;
}

/* ===================================================
   FAQ OPEN ANIMATION
=================================================== */

.ulg-faq-item.active
.ulg-faq-answer{
	display:block;
	animation:
	ulgFadeIn .28s ease;
}

@keyframes ulgFadeIn{

	from{
		opacity:0;
		transform:
		translateY(6px);
	}

	to{
		opacity:1;
		transform:
		translateY(0);
	}
}

/* ===================================================
   STICKY HEADER EFFECT
=================================================== */

.ulg-header.scrolled{
	box-shadow:
	0 12px 35px
	rgba(
		0,
		0,
		0,
		.18
	);

	backdrop-filter:
	blur(20px);

	-webkit-backdrop-filter:
	blur(20px);
}

/* ===================================================
   GENIE FLOAT
=================================================== */

.ulg-floating-genie{
	animation:
	genieBounce
	4s ease-in-out
	infinite;

	will-change:
	transform;
}

@keyframes genieBounce{

	0%{
		transform:
		translateY(0);
	}

	50%{
		transform:
		translateY(-8px);
	}

	100%{
		transform:
		translateY(0);
	}
}

/* ===================================================
   HERO / CTA GLOW
=================================================== */

.ulg-hero-glow,
.ulg-final-glow{
	animation:
	glowMove
	8s ease-in-out
	infinite;

	will-change:
	transform;
}

@keyframes glowMove{

	0%{
		transform:
		translate3d(
			0,
			0,
			0
		);
	}

	50%{
		transform:
		translate3d(
			-20px,
			20px,
			0
		);
	}

	100%{
		transform:
		translate3d(
			0,
			0,
			0
		);
	}
}

/* ===================================================
   MOUSE GLOW
=================================================== */

.ulg-mouse-glow{
	position:fixed;

	width:260px;
	height:260px;

	border-radius:50%;

	background:
	radial-gradient(
		circle,
		rgba(
			0,
			209,
			255,
			.08
		),
		transparent 70%
	);

	pointer-events:none;

	transform:
	translate(
		-50%,
		-50%
	);

	z-index:-1;

	filter:
	blur(50px);

	opacity:.8;
}

/* ===================================================
   RIPPLE EFFECT
=================================================== */

.ulg-ripple{
	position:absolute;

	border-radius:50%;

	background:
	rgba(
		255,
		255,
		255,
		.35
	);

	transform:
	scale(0);

	animation:
	ulgRipple
	.7s linear;

	pointer-events:none;
}

@keyframes ulgRipple{

	to{
		transform:
		scale(4);

		opacity:0;
	}
}

/* ===================================================
   INPUT FOCUS
=================================================== */

.ulg-focus{
	transform:
	translateY(-2px);

	transition:
	transform .25s ease;
}

/* ===================================================
   SCROLL PROGRESS
=================================================== */

.ulg-scroll-progress{
	position:fixed;

	top:0;
	left:0;

	height:4px;
	width:0;

	z-index:99999;

	background:
	linear-gradient(
		90deg,
		var(--ulg-primary),
		var(--ulg-secondary)
	);

	box-shadow:
	0 0 18px
	rgba(
		0,
		209,
		255,
		.4
	);
}

/* ===================================================
   IMAGE SAFE HOVER
=================================================== */

.ulg-hover-image img,
.ulg-card-image img{
	transition:
	transform .4s ease;
}

.ulg-hover-image:hover img,
.ulg-card:hover
.ulg-card-image img{
	transform:
	scale(1.02);
}

/* ===================================================
   REDUCE MOTION
=================================================== */

@media
(prefers-reduced-motion:reduce){

	*{
		animation:none !important;
		transition:none !important;
		scroll-behavior:auto !important;
	}

	.ulg-reveal,
	.ulg-reveal-left,
	.ulg-reveal-right,
	.ulg-scale{
		opacity:1 !important;
		transform:none !important;
	}
}