/* Book loader — adapted from Uiverse.io by anand_4957 (ausbia search modal) */

.ausbia-book-loader {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.ausbia-book-loader--panel {
	font-size: 9px;
	padding-bottom: 4px;
}

.ausbia-book-loader--overlay {
	font-size: 8px;
}

.ausbia-book-loader__label {
	margin: 10px 0 0;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: hsl(41, 58%, 38%);
}

.ausbia-book-loader__book,
.ausbia-book-loader__pg-shadow,
.ausbia-book-loader__pg {
	animation: ausbia-book-cover 5s ease-in-out infinite;
}

.ausbia-book-loader__book {
	background-color: hsl(8, 48%, 42%);
	border-radius: 0.25em;
	box-shadow:
		0 0.25em 0.5em hsla(0, 0%, 0%, 0.22),
		0 0 0 0.25em hsl(8, 55%, 32%) inset;
	padding: 0.25em;
	perspective: 37.5em;
	position: relative;
	width: 8em;
	height: 6em;
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
}

.ausbia-book-loader__pg-shadow,
.ausbia-book-loader__pg {
	position: absolute;
	left: 0.25em;
	width: calc(50% - 0.25em);
}

.ausbia-book-loader__pg-shadow {
	animation-name: ausbia-book-shadow;
	background-image: linear-gradient(
		-45deg,
		hsla(0, 0%, 0%, 0) 50%,
		hsla(0, 0%, 0%, 0.28) 50%
	);
	filter: blur(0.25em);
	top: calc(100% - 0.25em);
	height: 3.75em;
	transform: scaleY(0);
	transform-origin: 100% 0%;
}

.ausbia-book-loader__pg {
	animation-name: ausbia-book-pg1;
	background-color: hsl(228, 58%, 33%);
	background-image: linear-gradient(
		90deg,
		hsla(228, 45%, 28%, 0) 87.5%,
		hsl(228, 48%, 26%)
	);
	height: calc(100% - 0.5em);
	transform-origin: 100% 50%;
}

.ausbia-book-loader__pg--2,
.ausbia-book-loader__pg--3,
.ausbia-book-loader__pg--4 {
	background-image:
		repeating-linear-gradient(
			hsl(46, 92%, 68%) 0 0.125em,
			hsla(46, 92%, 68%, 0) 0.125em 0.5em
		),
		linear-gradient(90deg, hsla(228, 45%, 28%, 0) 87.5%, hsl(228, 48%, 26%));
	background-repeat: no-repeat;
	background-position: center;
	background-size:
		2.5em 4.125em,
		100% 100%;
}

.ausbia-book-loader__pg--2 {
	animation-name: ausbia-book-pg2;
}

.ausbia-book-loader__pg--3 {
	animation-name: ausbia-book-pg3;
}

.ausbia-book-loader__pg--4 {
	animation-name: ausbia-book-pg4;
}

.ausbia-book-loader__pg--5 {
	animation-name: ausbia-book-pg5;
}

@keyframes ausbia-book-cover {
	from,
	5%,
	45%,
	55%,
	95%,
	to {
		animation-timing-function: ease-out;
		background-color: hsl(8, 46%, 44%);
	}
	10%,
	40%,
	60%,
	90% {
		animation-timing-function: ease-in;
		background-color: hsl(8, 52%, 32%);
	}
}

@keyframes ausbia-book-shadow {
	from,
	10.01%,
	20.01%,
	30.01%,
	40.01% {
		animation-timing-function: ease-in;
		transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
	}
	5%,
	15%,
	25%,
	35%,
	45%,
	55%,
	65%,
	75%,
	85%,
	95% {
		animation-timing-function: ease-out;
		transform: translate3d(0, 0, 1px) scaleY(0.2) rotateY(90deg);
	}
	10%,
	20%,
	30%,
	40%,
	50%,
	to {
		animation-timing-function: ease-out;
		transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
	}
	50.01%,
	60.01%,
	70.01%,
	80.01%,
	90.01% {
		animation-timing-function: ease-in;
		transform: translate3d(0, 0, 1px) scaleY(0) rotateY(180deg);
	}
	60%,
	70%,
	80%,
	90%,
	to {
		animation-timing-function: ease-out;
		transform: translate3d(0, 0, 1px) scaleY(0) rotateY(0);
	}
}

@keyframes ausbia-book-pg1 {
	from,
	to {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0.4deg);
	}
	10%,
	15% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(180deg);
	}
	20%,
	80% {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(180deg);
	}
	85%,
	90% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(180deg);
	}
}

@keyframes ausbia-book-pg2 {
	from,
	to {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(0.3deg);
	}
	5%,
	10% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0.3deg);
	}
	20%,
	25% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(179.9deg);
	}
	30%,
	70% {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(179.9deg);
	}
	75%,
	80% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(179.9deg);
	}
	90%,
	95% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0.3deg);
	}
}

@keyframes ausbia-book-pg3 {
	from,
	10%,
	90%,
	to {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(0.2deg);
	}
	15%,
	20% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0.2deg);
	}
	30%,
	35% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(179.8deg);
	}
	40%,
	60% {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(179.8deg);
	}
	65%,
	70% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(179.8deg);
	}
	80%,
	85% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0.2deg);
	}
}

@keyframes ausbia-book-pg4 {
	from,
	20%,
	80%,
	to {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(0.1deg);
	}
	25%,
	30% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0.1deg);
	}
	40%,
	45% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(179.7deg);
	}
	50% {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(179.7deg);
	}
	55%,
	60% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(179.7deg);
	}
	70%,
	75% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0.1deg);
	}
}

@keyframes ausbia-book-pg5 {
	from,
	30%,
	70%,
	to {
		animation-timing-function: ease-in;
		background-color: hsl(228, 50%, 22%);
		transform: translate3d(0, 0, 1px) rotateY(0);
	}
	35%,
	40% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0deg);
	}
	50% {
		animation-timing-function: ease-in-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(179.6deg);
	}
	60%,
	65% {
		animation-timing-function: ease-out;
		background-color: hsl(228, 58%, 33%);
		transform: translate3d(0, 0, 1px) rotateY(0);
	}
}