/*
==========================================================
DIGITAL NATION INN
ANIMATION SYSTEM
Version : 1.0.0
==========================================================
*/


/* ==========================================================
   GLOBAL TRANSITIONS
========================================================== */

*{

	transition:
		background-color .30s ease,
		color .30s ease,
		border-color .30s ease,
		box-shadow .30s ease,
		transform .30s ease;

}


/* ==========================================================
   FADE UP
========================================================== */

@keyframes dniFadeUp{

	from{

		opacity:0;
		transform:translateY(40px);

	}

	to{

		opacity:1;
		transform:translateY(0);

	}

}

.fade-up{

	animation:dniFadeUp .8s ease both;

}


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

@keyframes dniFadeLeft{

	from{

		opacity:0;
		transform:translateX(-50px);

	}

	to{

		opacity:1;
		transform:translateX(0);

	}

}

.fade-left{

	animation:dniFadeLeft .8s ease both;

}


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

@keyframes dniFadeRight{

	from{

		opacity:0;
		transform:translateX(50px);

	}

	to{

		opacity:1;
		transform:translateX(0);

	}

}

.fade-right{

	animation:dniFadeRight .8s ease both;

}


/* ==========================================================
   ZOOM IN
========================================================== */

@keyframes dniZoomIn{

	from{

		opacity:0;
		transform:scale(.90);

	}

	to{

		opacity:1;
		transform:scale(1);

	}

}

.zoom-in{

	animation:dniZoomIn .7s ease both;

}


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

@keyframes dniFloat{

	0%{

		transform:translateY(0);

	}

	50%{

		transform:translateY(-10px);

	}

	100%{

		transform:translateY(0);

	}

}

.float{

	animation:dniFloat 5s ease-in-out infinite;

}


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

@keyframes dniPulse{

	0%{

		transform:scale(1);

	}

	50%{

		transform:scale(1.04);

	}

	100%{

		transform:scale(1);

	}

}

.pulse{

	animation:dniPulse 2.5s infinite;

}


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

.card{

	position:relative;

	overflow:hidden;

}

.card::before{

	content:"";

	position:absolute;

	top:0;

	left:-120%;

	width:60%;

	height:100%;

	background:

	linear-gradient(

	90deg,

	transparent,

	rgba(255,255,255,.08),

	transparent

	);

	transition:1s;

}

.card:hover::before{

	left:150%;

}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.btn{

	position:relative;

	overflow:hidden;

}

.btn::after{

	content:"";

	position:absolute;

	top:0;

	left:-100%;

	width:100%;

	height:100%;

	background:

	linear-gradient(

	90deg,

	transparent,

	rgba(255,255,255,.25),

	transparent

	);

	transition:.8s;

}

.btn:hover::after{

	left:120%;

}


/* ==========================================================
   ICON ROTATE
========================================================== */

.dni-icon{

	transition:.35s;

}

.card:hover .dni-icon{

	transform:rotate(8deg) scale(1.08);

}


/* ==========================================================
   LINK ANIMATION
========================================================== */

a{

	position:relative;

}

a:not(.btn)::after{

	content:"";

	position:absolute;

	left:0;

	bottom:-2px;

	width:0;

	height:2px;

	background:#0B5FFF;

	transition:.30s;

}

a:not(.btn):hover::after{

	width:100%;

}


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

.hero-glow{

	position:absolute;

	width:420px;

	height:420px;

	border-radius:50%;

	background:rgba(11,95,255,.18);

	filter:blur(90px);

	animation:dniFloat 8s ease-in-out infinite;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

	width:10px;

}

::-webkit-scrollbar-track{

	background:#07152D;

}

::-webkit-scrollbar-thumb{

	background:#1F4FFF;

	border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

	background:#3C74FF;

}


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

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

	*{

		animation:none !important;

		transition:none !important;

		scroll-behavior:auto !important;

	}

}