/**
 * Waito Animated Preloader — front end styles.
 *
 * Every template below is fully functional and ships with the free plugin.
 * Values marked with custom properties are set from the plugin settings.
 */

/*
 * Hidden until the script says otherwise. Without JavaScript nothing reveals
 * it, so a visitor whose scripts fail is never trapped behind the overlay —
 * and the plugin never has to print a style element to arrange that.
 */
.waitoap-preloader {
	display: none;
}

html.waitoap-js .waitoap-preloader {
	display: flex;
}

.waitoap-preloader {
	--waitoap-accent: #0b7fe0;
	--waitoap-bg: #ffffff;
	--waitoap-text-color: #1f2937;
	--waitoap-percent-color: #1f2937;
	--waitoap-percent-size: 12px;
	--waitoap-size: 56px;
	--waitoap-stroke: 4px;
	--waitoap-text-size: 15px;
	--waitoap-bar-height: 6px;
	--waitoap-image-width: 120px;

	position: fixed;
	inset: 0;
	z-index: 999999;
	align-items: center;
	justify-content: center;
	background: var(--waitoap-bg);
}

.waitoap-preloader .waitoap-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 90vw;
}

/* Position */

.waitoap-pos-top {
	align-items: flex-start;
	padding-top: 12vh;
}

.waitoap-pos-bottom {
	align-items: flex-end;
	padding-bottom: 12vh;
}

.waitoap-preloader.waitoap-is-hiding {
	pointer-events: none;
}

.waitoap-preloader.waitoap-is-hidden {
	display: none !important;
}

html.waitoap-locked,
body.waitoap-locked {
	overflow: hidden !important;
}

/* Shared animation container */

.waitoap-anim {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--waitoap-accent);
}

/* ---------------------------------------------------------------- Spinners */

.waitoap-kind-ring .waitoap-anim span {
	display: block;
	width: var(--waitoap-size);
	height: var(--waitoap-size);
	border-radius: 50%;
	border: var(--waitoap-stroke) solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--waitoap-accent);
	animation: waitoap-spin 0.9s linear infinite;
}

.waitoap-tpl-ring-dual .waitoap-anim span {
	border-color: transparent;
	border-top-color: var(--waitoap-accent);
	border-bottom-color: var(--waitoap-accent);
	animation-duration: 1.1s;
}

.waitoap-tpl-ring-dashed .waitoap-anim span {
	border-style: dashed;
	border-color: var(--waitoap-accent);
	animation-duration: 1.6s;
}

.waitoap-tpl-ring-arc .waitoap-anim span {
	border-color: transparent;
	border-top-color: var(--waitoap-accent);
	border-right-color: var(--waitoap-accent);
	opacity: 0.9;
	animation-duration: 0.75s;
}

@keyframes waitoap-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ------------------------------------------------------------------- Dots */

.waitoap-kind-dots .waitoap-anim {
	gap: calc(var(--waitoap-size) / 6);
}

.waitoap-kind-dots .waitoap-anim span {
	display: block;
	width: calc(var(--waitoap-size) / 4);
	height: calc(var(--waitoap-size) / 4);
	border-radius: 50%;
	background: var(--waitoap-accent);
	animation: waitoap-bounce 1.2s infinite ease-in-out;
}

.waitoap-kind-dots .waitoap-anim span:nth-child(2) {
	animation-delay: 0.15s;
}

.waitoap-kind-dots .waitoap-anim span:nth-child(3) {
	animation-delay: 0.3s;
}

.waitoap-tpl-dots-three .waitoap-anim span {
	animation-name: waitoap-scale-dot;
}

.waitoap-tpl-dots-fading .waitoap-anim span {
	animation-name: waitoap-blink;
	animation-duration: 1.4s;
}

.waitoap-tpl-dots-wide .waitoap-anim {
	gap: calc(var(--waitoap-size) / 2);
}

@keyframes waitoap-bounce {
	0%,
	80%,
	100% {
		transform: translateY(0);
		opacity: 0.45;
	}
	40% {
		transform: translateY(-30%);
		opacity: 1;
	}
}

@keyframes waitoap-scale-dot {
	0%,
	80%,
	100% {
		transform: scale(0.6);
		opacity: 0.4;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes waitoap-blink {
	0%,
	100% {
		opacity: 0.25;
	}
	50% {
		opacity: 1;
	}
}

/* ------------------------------------------------------------------- Bars */

.waitoap-kind-bars .waitoap-anim {
	gap: calc(var(--waitoap-stroke) * 1.4);
	height: var(--waitoap-size);
}

.waitoap-kind-bars .waitoap-anim span {
	display: block;
	width: var(--waitoap-stroke);
	height: 100%;
	border-radius: 2px;
	background: var(--waitoap-accent);
	animation: waitoap-bar 1s infinite ease-in-out;
}

.waitoap-kind-bars .waitoap-anim span:nth-child(2) {
	animation-delay: 0.12s;
}

.waitoap-kind-bars .waitoap-anim span:nth-child(3) {
	animation-delay: 0.24s;
}

.waitoap-kind-bars .waitoap-anim span:nth-child(4) {
	animation-delay: 0.36s;
}

.waitoap-tpl-bars-tall .waitoap-anim {
	height: calc(var(--waitoap-size) * 1.4);
}

.waitoap-tpl-bars-soft .waitoap-anim span {
	border-radius: 999px;
	opacity: 0.85;
	animation-name: waitoap-wave;
}

.waitoap-tpl-bars-stagger .waitoap-anim span {
	animation-duration: 1.4s;
	animation-name: waitoap-wave;
}

.waitoap-tpl-bars-stagger .waitoap-anim span:nth-child(2) {
	animation-delay: 0.2s;
}

.waitoap-tpl-bars-stagger .waitoap-anim span:nth-child(3) {
	animation-delay: 0.4s;
}

.waitoap-tpl-bars-stagger .waitoap-anim span:nth-child(4) {
	animation-delay: 0.6s;
}

@keyframes waitoap-bar {
	0%,
	100% {
		transform: scaleY(0.35);
	}
	50% {
		transform: scaleY(1);
	}
}

@keyframes waitoap-wave {
	0%,
	40%,
	100% {
		transform: scaleY(0.4);
	}
	20% {
		transform: scaleY(1);
	}
}

/* ------------------------------------------------------------------ Pulse */

.waitoap-kind-pulse .waitoap-anim {
	position: relative;
	width: var(--waitoap-size);
	height: var(--waitoap-size);
}

.waitoap-kind-pulse .waitoap-anim span {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: var(--waitoap-stroke) solid var(--waitoap-accent);
	animation: waitoap-ripple 1.4s ease-out infinite;
}

.waitoap-kind-pulse .waitoap-anim span:nth-child(2) {
	animation-delay: 0.7s;
}

.waitoap-tpl-pulse-ripple .waitoap-anim span:nth-child(2) {
	display: none;
}

.waitoap-tpl-pulse-radar .waitoap-anim span:first-child {
	border-color: var(--waitoap-accent);
	opacity: 0.25;
	animation: none;
}

.waitoap-tpl-pulse-radar .waitoap-anim span:nth-child(2) {
	inset: 0;
	border: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0deg, var(--waitoap-accent) 90deg, transparent 91deg);
	animation: waitoap-spin 1.4s linear infinite;
	opacity: 0.85;
}

@keyframes waitoap-ripple {
	0% {
		transform: scale(0.4);
		opacity: 1;
	}
	100% {
		transform: scale(1.25);
		opacity: 0;
	}
}

/* ------------------------------------------------------------------- Text */

.waitoap-text {
	margin: 0;
	color: var(--waitoap-text-color);
	font-size: var(--waitoap-text-size);
	line-height: 1.4;
	text-align: center;
}

.waitoap-ellipsis {
	animation: waitoap-blink 1.2s infinite;
}.waitoap-tpl-text-fading .waitoap-text {
	animation: waitoap-blink 1.8s infinite;
}

.waitoap-tpl-text-fading .waitoap-ellipsis {
	display: none;
}

/* --------------------------------------------------------------- Progress */

.waitoap-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	width: min(280px, 72vw);
}

.waitoap-track {
	flex: 1;
	height: var(--waitoap-bar-height);
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.waitoap-fill {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: var(--waitoap-accent);
	transition: width 0.25s ease;
}

.waitoap-percent {
	min-width: 42px;
	text-align: right;
	color: var(--waitoap-percent-color, var(--waitoap-text-color));
	font-size: var(--waitoap-percent-size, calc(var(--waitoap-text-size) * 0.8));
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ Image */

.waitoap-image {
	display: block;
	width: var(--waitoap-image-width);
	max-width: 80vw;
	height: auto;
}

/* ------------------------------------------------------------ Small screens */

@media (max-width: 767px) {
	.waitoap-preloader .waitoap-anim {
		transform: scale(0.8);
	}

	.waitoap-preloader .waitoap-image {
		width: calc(var(--waitoap-image-width) * 0.8);
	}
}

/* ------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.waitoap-reduced-motion .waitoap-anim span,
	.waitoap-reduced-motion .waitoap-image,
	.waitoap-reduced-motion .waitoap-text,
	.waitoap-reduced-motion .waitoap-ellipsis {
		animation: none !important;
	}

	.waitoap-reduced-motion .waitoap-fill {
		transition: none;
	}
}

/* ================================================================
   Additional templates
   ================================================================ */

/* ------------------------------------------------------- More spinners */

.waitoap-tpl-ring-dotted .waitoap-anim span {
	border-style: dotted;
	border-color: var(--waitoap-accent);
	animation-duration: 1.8s;
}

.waitoap-tpl-ring-segment .waitoap-anim span {
	border-color: transparent;
	border-left-color: var(--waitoap-accent);
	border-right-color: var(--waitoap-accent);
	animation-duration: 0.8s;
}

.waitoap-tpl-ring-orbit .waitoap-anim span {
	position: relative;
	border-color: rgba(0, 0, 0, 0.08);
	animation-duration: 1.2s;
}

.waitoap-tpl-ring-orbit .waitoap-anim span::after {
	content: "";
	position: absolute;
	top: calc(var(--waitoap-stroke) * -1.6);
	left: 50%;
	width: calc(var(--waitoap-stroke) * 2.6);
	height: calc(var(--waitoap-stroke) * 2.6);
	margin-left: calc(var(--waitoap-stroke) * -1.3);
	border-radius: 50%;
	background: var(--waitoap-accent);
}

.waitoap-tpl-ring-double .waitoap-anim span {
	position: relative;
	border-color: rgba(0, 0, 0, 0.08);
	border-top-color: var(--waitoap-accent);
	animation-duration: 1.2s;
}

.waitoap-tpl-ring-double .waitoap-anim span::before {
	content: "";
	position: absolute;
	inset: calc(var(--waitoap-stroke) * 1.6);
	border-radius: 50%;
	border: var(--waitoap-stroke) solid transparent;
	border-bottom-color: var(--waitoap-accent);
	animation: waitoap-spin 0.7s linear infinite reverse;
}

/* ----------------------------------------------------------- More dots */

.waitoap-tpl-dots-wave .waitoap-anim span {
	animation-name: waitoap-dot-wave;
	animation-duration: 1.3s;
}

.waitoap-tpl-dots-grow .waitoap-anim span {
	animation-name: waitoap-dot-grow;
	animation-duration: 1.1s;
}

.waitoap-tpl-dots-slide .waitoap-anim span {
	animation-name: waitoap-dot-slide;
	animation-duration: 1.4s;
}

.waitoap-tpl-dots-flash .waitoap-anim span {
	animation-name: waitoap-dot-flash;
	animation-duration: 1s;
}

@keyframes waitoap-dot-wave {
	0%,
	60%,
	100% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(-70%);
	}
}

@keyframes waitoap-dot-grow {
	0%,
	100% {
		transform: scale(0.35);
		opacity: 0.35;
	}
	50% {
		transform: scale(1.15);
		opacity: 1;
	}
}

@keyframes waitoap-dot-slide {
	0%,
	100% {
		transform: translateX(-45%);
		opacity: 0.45;
	}
	50% {
		transform: translateX(45%);
		opacity: 1;
	}
}

@keyframes waitoap-dot-flash {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.2;
	}
	40% {
		transform: scale(1.25);
		opacity: 1;
	}
}

/* ----------------------------------------------------------- More bars */

.waitoap-tpl-bars-wave .waitoap-anim span {
	animation-name: waitoap-bar-wave;
	animation-duration: 1.2s;
	border-radius: 999px;
}

.waitoap-tpl-bars-thick .waitoap-anim {
	gap: calc(var(--waitoap-stroke) * 0.9);
}

.waitoap-tpl-bars-thick .waitoap-anim span {
	width: calc(var(--waitoap-stroke) * 2.2);
	border-radius: 3px;
}

.waitoap-tpl-bars-skew .waitoap-anim {
	transform: skewX(-12deg);
}

.waitoap-tpl-bars-skew .waitoap-anim span {
	border-radius: 1px;
	animation-name: waitoap-wave;
}

.waitoap-tpl-bars-fade .waitoap-anim span {
	animation-name: waitoap-bar-fade;
	animation-duration: 1.2s;
	border-radius: 999px;
}

@keyframes waitoap-bar-wave {
	0%,
	100% {
		transform: scaleY(0.3) translateY(0);
	}
	50% {
		transform: scaleY(1) translateY(-8%);
	}
}

@keyframes waitoap-bar-fade {
	0%,
	100% {
		opacity: 0.2;
		transform: scaleY(0.55);
	}
	50% {
		opacity: 1;
		transform: scaleY(1);
	}
}

/* ---------------------------------------------------------- More pulse */

.waitoap-tpl-pulse-dot .waitoap-anim span:first-child {
	border: 0;
	background: var(--waitoap-accent);
	animation: waitoap-pulse-solid 1.3s ease-in-out infinite;
}

.waitoap-tpl-pulse-dot .waitoap-anim span:nth-child(2) {
	display: none;
}

.waitoap-tpl-pulse-glow .waitoap-anim span:first-child {
	border: 0;
	inset: 22%;
	background: var(--waitoap-accent);
	animation: waitoap-pulse-glow 1.5s ease-out infinite;
}

.waitoap-tpl-pulse-glow .waitoap-anim span:nth-child(2) {
	display: none;
}

.waitoap-tpl-pulse-beat .waitoap-anim span:first-child {
	border: 0;
	background: var(--waitoap-accent);
	animation: waitoap-beat 1.4s ease-in-out infinite;
}

.waitoap-tpl-pulse-beat .waitoap-anim span:nth-child(2) {
	display: none;
}

@keyframes waitoap-pulse-solid {
	0%,
	100% {
		transform: scale(0.65);
		opacity: 0.55;
	}
	50% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes waitoap-pulse-glow {
	0% {
		box-shadow: 0 0 0 0 currentColor;
		opacity: 1;
	}
	100% {
		box-shadow: 0 0 0 calc(var(--waitoap-size) * 0.45) transparent;
		opacity: 0.85;
	}
}

@keyframes waitoap-beat {
	0%,
	40%,
	100% {
		transform: scale(0.72);
	}
	15% {
		transform: scale(1);
	}
	28% {
		transform: scale(0.85);
	}
}

/* ----------------------------------------------------------- More text */

.waitoap-tpl-text-slide .waitoap-text {
	animation: waitoap-text-slide 1.8s ease-in-out infinite;
}

.waitoap-tpl-text-slide .waitoap-ellipsis {
	display: none;
}

.waitoap-tpl-text-glow .waitoap-text {
	font-weight: 700;
	animation: waitoap-text-glow 1.6s ease-in-out infinite;
}

.waitoap-tpl-text-glow .waitoap-ellipsis {
	display: none;
}.waitoap-tpl-text-tracking .waitoap-text {
	text-transform: uppercase;
	font-weight: 600;
	animation: waitoap-text-tracking 2s ease-in-out infinite;
}

.waitoap-tpl-text-tracking .waitoap-ellipsis {
	display: none;
}.waitoap-tpl-text-breathe .waitoap-text {
	animation: waitoap-text-breathe 2.4s ease-in-out infinite;
}

.waitoap-tpl-text-breathe .waitoap-ellipsis {
	display: none;
}

@keyframes waitoap-text-slide {
	0%,
	100% {
		transform: translateY(28%);
		opacity: 0;
	}
	20%,
	80% {
		transform: translateY(0);
		opacity: 1;
	}
}

@keyframes waitoap-text-glow {
	0%,
	100% {
		text-shadow: 0 0 0 transparent;
		opacity: 0.7;
	}
	50% {
		text-shadow: 0 0 14px var(--waitoap-accent);
		opacity: 1;
	}
}

@keyframes waitoap-text-tracking {
	0%,
	100% {
		letter-spacing: 0.04em;
		opacity: 0.65;
	}
	50% {
		letter-spacing: 0.34em;
		opacity: 1;
	}
}

@keyframes waitoap-text-breathe {
	0%,
	100% {
		transform: scale(0.94);
		opacity: 0.6;
	}
	50% {
		transform: scale(1.04);
		opacity: 1;
	}
}/* ---------------------------------------------------------- More image */

/* --------------------------------------------------------- Entrance

   The overlay is already covering the page on first load, so an entrance only
   animates the contents. On a page transition the whole overlay arrives.
   ------------------------------------------------------------------------ */

.waitoap-enter-fade .waitoap-inner {
	animation: waitoap-enter-fade var(--waitoap-entrance-ms, 350ms) ease both;
}

.waitoap-enter-zoom .waitoap-inner {
	animation: waitoap-enter-zoom var(--waitoap-entrance-ms, 350ms) cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

.waitoap-enter-drop .waitoap-inner {
	animation: waitoap-enter-drop var(--waitoap-entrance-ms, 350ms) cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes waitoap-enter-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes waitoap-enter-zoom {
	from { opacity: 0; transform: scale(0.85); }
	to { opacity: 1; transform: none; }
}

@keyframes waitoap-enter-drop {
	from { opacity: 0; transform: translateY(-24px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.waitoap-reduced-motion .waitoap-inner {
		animation: none !important;
	}
}