:root {

	--eagle-element-right: url('../../elements/bms/eagle-right.svg');
	--eagle-element-left: url('../../elements/bms/eagle-left.svg');

	--eagle-transparant-left: url('../../elements/bms/eagle-transparent-left.svg');
	--eagle-transparant-right: url('../../elements/bms/eagle-transparent-right.svg');

	--button-ornament: url('../../elements/bms/button-ornament.svg');

}

/* Header & Mobile nav */

header.nav-header .navbar-overlay .navbar-overlay-content::before {
	background-image: var(--eagle-element-right);
	opacity: 0.1;
}

header.nav-header .navbar-overlay.show .navbar-overlay-content::before {
	opacity: 0;

	animation-timing-function: ease-out;
	animation-duration: var(--transition-duration);
	animation-name: show-eagle;
	animation-delay: calc(var(--transition-duration) * 2);
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

@keyframes show-eagle {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 0.1;
	}
}

/* Buttons */

.btn.btn-link:not(.btn-admin, .btn-back, .focus-only)::after {
	content: var(--button-ornament);
	margin-left: 1rem;
}

/* Content */

@media (min-width:768px) {
	.eagle-element-left::after {
		content: "";
		background-image: var(--eagle-element-left);
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		width: 355px;
		height: 100%;
		z-index: -1;
		pointer-events: none;
	}

	 :is(.nav-footer .top,.eagle-element-right)::after {
		content: "";
		background-image: var(--eagle-element-right);
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 229px;
		z-index: -1;
		pointer-events: none;
	}

	.content-subtemplate-home :is(.eagle-element-left, .eagle-element-right:not(.header .eagle-element-right))::after {
		opacity: 0;

		view-timeline-name: --item-visible;
		view-timeline-axis: block;

		animation: fade-in;
		animation-duration: 2s;
		animation-fill-mode: forwards;
		animation-timeline: --item-visible;
		animation-range: entry 10% exit 100%;
	}

	.eagle-trans-element-right::after {
		content: "";
		background-image: var(--eagle-transparant-right);
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		right: 0;
		height: 100%;
		width: 318px;
		z-index: -1;
		pointer-events: none;
	}
}

@media (min-width: 992px) {
	.eagle-element-right::after {
		width: 283px;
	}
}

@keyframes fade-in {
	to {
		opacity: 0.3;
	}
}