:root {
	--els-journal-pattern-image: url("/plugins/themes/elkuatorscholar/assets/patterns/hscs-pattern.png");
	--els-journal-pattern-opacity-xl: 0.15;
	--els-journal-pattern-opacity-lg: 0.12;
	--els-journal-pattern-opacity-sm: 0.08;
}

body .els_hero {
	position: relative !important;
	overflow: hidden !important;
	isolation: isolate;
}

body .els_hero .els_pattern {
	position: absolute !important;
	inset: 0 !important;
	z-index: 1 !important;
	display: block !important;
	overflow: hidden !important;
	pointer-events: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	opacity: 1 !important;
	animation: elsHscsLayerSoftMove 24s ease-in-out infinite alternate !important;
}

body .els_hero::before,
body .els_hero::after,
body .els_hero .els_pattern::before {
	content: "" !important;
	position: absolute !important;
	display: block !important;
	background-image: var(--els-journal-pattern-image) !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: contain !important;
	border: 0 !important;
	box-shadow: none !important;
	pointer-events: none !important;
	will-change: transform, opacity, filter;
	mix-blend-mode: screen;
}

body .els_hero .els_pattern::after {
	display: none !important;
	content: none !important;
}

body .els_hero::before {
	z-index: 1;
	top: 26px;
	left: 7%;
	width: 185px;
	height: 185px;
	opacity: var(--els-journal-pattern-opacity-xl);
	animation:
		elsHscsFloatLeft 30s ease-in-out infinite alternate,
		elsHscsSoftPulse 12s ease-in-out infinite alternate !important;
}

body .els_hero::after {
	z-index: 1;
	right: 5%;
	bottom: -52px;
	width: 235px;
	height: 235px;
	opacity: var(--els-journal-pattern-opacity-lg);
	animation:
		elsHscsFloatRight 36s ease-in-out infinite alternate,
		elsHscsSoftPulse 14s ease-in-out infinite alternate-reverse !important;
}

body .els_hero .els_pattern::before {
	z-index: 1;
	left: 21%;
	bottom: 40px;
	width: 74px;
	height: 74px;
	opacity: var(--els-journal-pattern-opacity-sm);
	animation:
		elsHscsFloatSmall 24s ease-in-out infinite alternate,
		elsHscsSoftPulse 10s ease-in-out infinite alternate !important;
}

body .els_hero .els_hero_inner {
	position: relative !important;
	z-index: 3 !important;
}

@keyframes elsHscsLayerSoftMove {
	0% {
		transform: translate3d(0, 0, 0) scale(1);
	}

	100% {
		transform: translate3d(0, 6px, 0) scale(1.006);
	}
}

@keyframes elsHscsSoftPulse {
	0% {
		filter: drop-shadow(0 6px 12px rgba(255, 255, 255, .03));
	}

	50% {
		filter: drop-shadow(0 12px 22px rgba(255, 255, 255, .08));
	}

	100% {
		filter: drop-shadow(0 8px 16px rgba(255, 255, 255, .05));
	}
}

@keyframes elsHscsFloatLeft {
	0% {
		transform: translate3d(0, -6px, 0) rotate(0deg) scale(1);
	}

	45% {
		transform: translate3d(18px, 12px, 0) rotate(3deg) scale(1.035);
	}

	100% {
		transform: translate3d(30px, 24px, 0) rotate(7deg) scale(1.06);
	}
}

@keyframes elsHscsFloatRight {
	0% {
		transform: translate3d(0, 6px, 0) rotate(0deg) scale(1);
	}

	45% {
		transform: translate3d(-22px, -10px, 0) rotate(-4deg) scale(1.035);
	}

	100% {
		transform: translate3d(-36px, -24px, 0) rotate(-8deg) scale(1.07);
	}
}

@keyframes elsHscsFloatSmall {
	0% {
		transform: translate3d(0, 4px, 0) rotate(0deg) scale(1);
	}

	100% {
		transform: translate3d(18px, -14px, 0) rotate(10deg) scale(1.08);
	}
}

@media (max-width: 768px) {
	body .els_hero::before {
		top: 34px;
		left: -7%;
		width: 130px;
		height: 130px;
		opacity: 0.12;
	}

	body .els_hero::after {
		right: -12%;
		bottom: -32px;
		width: 165px;
		height: 165px;
		opacity: 0.10;
	}

	body .els_hero .els_pattern::before {
		left: 14%;
		bottom: 34px;
		width: 56px;
		height: 56px;
		opacity: 0.07;
	}
}

@media (max-width: 520px) {
	body .els_hero::before {
		left: -14%;
		width: 110px;
		height: 110px;
		opacity: 0.08;
	}

	body .els_hero::after {
		right: -18%;
		width: 135px;
		height: 135px;
		opacity: 0.08;
	}

	body .els_hero .els_pattern::before {
		display: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	body .els_hero,
	body .els_hero::before,
	body .els_hero::after,
	body .els_hero .els_pattern,
	body .els_hero .els_pattern::before,
	body .els_hero .els_pattern::after {
		animation: none !important;
	}
}