/*
==========================================================
DIGITAL NATION INN
CORE ANIMATION SYSTEM
Version : 2.0.0
Architecture : SaaS / Modular
==========================================================
*/


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

html{

	scroll-behavior:smooth;

}


*{

	-webkit-tap-highlight-color:transparent;

}


/* ==========================================================
   FADE IN
========================================================== */

@keyframes dniFadeIn{

	from{

		opacity:0;

	}

	to{

		opacity:1;

	}

}


@keyframes dniFadeUp{

	from{

		opacity:0;

		transform:translateY(30px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}


@keyframes dniFadeDown{

	from{

		opacity:0;

		transform:translateY(-25px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}


@keyframes dniFadeLeft{

	from{

		opacity:0;

		transform:translateX(-30px);

	}

	to{

		opacity:1;

		transform:translateX(0);

	}

}


@keyframes dniFadeRight{

	from{

		opacity:0;

		transform:translateX(30px);

	}

	to{

		opacity:1;

		transform:translateX(0);

	}

}


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

@keyframes dniScaleIn{

	from{

		opacity:0;

		transform:scale(.92);

	}

	to{

		opacity:1;

		transform:scale(1);

	}

}


@keyframes dniScalePulse{

	0%{

		transform:scale(1);

	}

	50%{

		transform:scale(1.04);

	}

	100%{

		transform:scale(1);

	}

}


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

@keyframes dniFloat{

	0%{

		transform:translateY(0);

	}

	50%{

		transform:translateY(-8px);

	}

	100%{

		transform:translateY(0);

	}

}


@keyframes dniFloatSlow{

	0%{

		transform:translate3d(0,0,0);

	}

	50%{

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

	}

	100%{

		transform:translate3d(0,0,0);

	}

}


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

@keyframes dniGlow{

	0%{

		box-shadow:

			0 0 12px rgba(0,191,255,.18);

	}

	50%{

		box-shadow:

			0 0 30px rgba(0,191,255,.42);

	}

	100%{

		box-shadow:

			0 0 12px rgba(0,191,255,.18);

	}

}


/* ==========================================================
   NEON LINE
========================================================== */

@keyframes dniNeon{

	0%{

		opacity:.35;

		transform:scaleX(.85);

	}

	50%{

		opacity:1;

		transform:scaleX(1);

	}

	100%{

		opacity:.35;

		transform:scaleX(.85);

	}

}


/* ==========================================================
   SHIMMER
========================================================== */

@keyframes dniShimmer{

	0%{

		background-position:

			-200% 0;

	}

	100%{

		background-position:

			200% 0;

	}

}


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

@keyframes dniRotate{

	from{

		transform:rotate(0deg);

	}

	to{

		transform:rotate(360deg);

	}

}


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

@keyframes dniPulse{

	0%{

		transform:scale(1);

		opacity:1;

	}

	50%{

		transform:scale(1.18);

		opacity:.72;

	}

	100%{

		transform:scale(1);

		opacity:1;

	}

}


/* ==========================================================
   STATUS DOT
========================================================== */

@keyframes dniStatusPulse{

	0%{

		box-shadow:

			0 0 0 0 rgba(0,255,140,.45);

	}

	70%{

		box-shadow:

			0 0 0 8px rgba(0,255,140,0);

	}

	100%{

		box-shadow:

			0 0 0 0 rgba(0,255,140,0);

	}

}


/* ==========================================================
   SLIDE MENU
========================================================== */

@keyframes dniMenuOpen{

	from{

		opacity:0;

		transform:

			translateY(-8px)

			scale(.98);

	}

	to{

		opacity:1;

		transform:

			translateY(0)

			scale(1);

	}

}


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

@keyframes dniHeroGlow{

	0%{

		transform:

			translate3d(0,0,0)

			scale(1);

	}

	50%{

		transform:

			translate3d(25px,-20px,0)

			scale(1.08);

	}

	100%{

		transform:

			translate3d(0,0,0)

			scale(1);

	}

}


/* ==========================================================
   BACKGROUND GRADIENT
========================================================== */

@keyframes dniGradientMove{

	0%{

		background-position:

			0% 50%;

	}

	50%{

		background-position:

			100% 50%;

	}

	100%{

		background-position:

			0% 50%;

	}

}


/* ==========================================================
   ANIMATION UTILITY CLASSES
========================================================== */

.dni-animate-fade{

	animation:

		dniFadeIn

		.7s

		ease

		both;

}


.dni-animate-up{

	animation:

		dniFadeUp

		.7s

		ease

		both;

}


.dni-animate-down{

	animation:

		dniFadeDown

		.7s

		ease

		both;

}


.dni-animate-left{

	animation:

		dniFadeLeft

		.7s

		ease

		both;

}


.dni-animate-right{

	animation:

		dniFadeRight

		.7s

		ease

		both;

}


.dni-animate-scale{

	animation:

		dniScaleIn

		.7s

		ease

		both;

}


.dni-animate-float{

	animation:

		dniFloat

		3s

		ease-in-out

		infinite;

}


.dni-animate-float-slow{

	animation:

		dniFloatSlow

		5s

		ease-in-out

		infinite;

}


.dni-animate-pulse{

	animation:

		dniPulse

		2s

		ease-in-out

		infinite;

}


.dni-animate-glow{

	animation:

		dniGlow

		2.5s

		ease-in-out

		infinite;

}


/* ==========================================================
   DELAYS
========================================================== */

.dni-delay-1{

	animation-delay:.10s;

}


.dni-delay-2{

	animation-delay:.20s;

}


.dni-delay-3{

	animation-delay:.30s;

}


.dni-delay-4{

	animation-delay:.40s;

}


.dni-delay-5{

	animation-delay:.50s;

}


/* ==========================================================
   HOVER LIFT
========================================================== */

.dni-hover-lift{

	transition:

		transform .35s ease,

		box-shadow .35s ease;

}


.dni-hover-lift:hover{

	transform:translateY(-7px);

}


/* ==========================================================
   HOVER GLOW
========================================================== */

.dni-hover-glow{

	transition:

		box-shadow .35s ease,

		border-color .35s ease;

}


.dni-hover-glow:hover{

	border-color:

		rgba(0,191,255,.35);

	box-shadow:

		0 0 35px

		rgba(0,191,255,.12);

}


/* ==========================================================
   IMAGE ZOOM
========================================================== */

.dni-image-zoom{

	overflow:hidden;

}


.dni-image-zoom img{

	transition:

		transform .6s

		cubic-bezier(.2,.8,.2,1);

}


.dni-image-zoom:hover img{

	transform:scale(1.06);

}


/* ==========================================================
   SHIMMER UTILITY
========================================================== */

.dni-shimmer{

	background:

		linear-gradient(

			90deg,

			transparent 0%,

			rgba(255,255,255,.10) 50%,

			transparent 100%

		);

	background-size:

		200% 100%;

	animation:

		dniShimmer

		2.2s

		linear

		infinite;

}


/* ==========================================================
   GPU OPTIMIZATION
========================================================== */

.dni-animate-float,
.dni-animate-float-slow,
.dni-animate-pulse,
.dni-animate-glow,
.dni-hover-lift,
.dni-image-zoom img{

	will-change:transform;

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

	html{

		scroll-behavior:auto;

	}

	*,
	*::before,
	*::after{

		animation-duration:.01ms !important;

		animation-iteration-count:1 !important;

		transition-duration:.01ms !important;

	}

}