@charset "UTF-8";

/**
 * animations.css 1.0.0
 *
 * Global animation variables, loading states, keyframes and loader components.
 *
 * VARS
 * Duration and easing variables used across all CSS files.
 * References: easings.net — easingwizard.com
 *
 * LOADING
 * .is-loading  — inline SVG bouncing dots loader on any element
 * body.is-loading — full-page loading state (fixed, centered)
 *
 * LOADER
 * .loader  — spinner icon only (1rem)
 * .loading — spinner inline with text (.75em)
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


/* ========== DEFAULT ========== */

:root {
	--duration-fast: .125s;
	--duration-normal: .25s;
	--duration-slow: 1s;

	--ease: ease;

	--ease-fast: cubic-bezier(0, .5, .5, 1);
	--elastic: cubic-bezier(1, 0.01, 0, 1.22);

	--easeInQuint: cubic-bezier(0.64, 0, 0.78, 0);
	--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);

	--easeInOutQuint: cubic-bezier(0.75, 0, 0.25, 1);
	--easeInOutQuint-fast: cubic-bezier(0.95, 0, 0.15, 1);
}


/* ========== CUSTOM ========== */

/* here for custom duration and easing overrides */


/* ================================================= */
/* ==================== LOADING ==================== */
/* ================================================= */


/* ========== DEFAULT ========== */

.is-loading:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: calc(var(--stroke-width) * 4);
	width: calc(var(--stroke-width) * 4);
	border-radius: 50%;
	box-shadow: inset 0 0 0 calc(var(--stroke-width) * 4);
	color: var(--yellow-color);
	animation: pulse .5s infinite linear;
}


/* ========== REFRESH ========== */

body.is-loading:before {
	/*content: "";*/
	position: fixed;
	z-index: 100;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
body.is-loading #wrapper {
	/*filter: blur(.125em) grayscale(.66);*/
	opacity: .33;
}


/* ==================================================== */
/* ==================== ANIMATIONS ==================== */
/* ==================================================== */


/* ========== DEFAULT ========== */

.instant-transition {
	transition: none;
}


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

@keyframes pulse {
	0% { transform: scale(1); }
	50% { transform: scale(4); }
	100% { transform: scale(1); }
}


/* ========== SPINNER ========== */

@keyframes spinner {
	0%, 50%, 100% { animation-timing-function: cubic-bezier(0.5, 0.5, 0.5, 0.5); }
	0%   { transform: rotate(0); }
	50%  { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}


/* ================================================ */
/* ==================== LOADER ==================== */
/* ================================================ */

/*
.loader == for icons only
.loading =: for inline text
*/



.loader:before,
.loading:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 1em;
	aspect-ratio: 1/1;
	margin-top: calc(-.5em + var(--stroke-width) * 2);
	border-radius: 50%;
	border-style: solid;
	border-width: var(--stroke-width);
	border-color: currentColor currentColor currentColor transparent;
	animation: spinner 1s infinite linear;
}

/* Inline with text */

.loading:before {
	width: .75em;
	/*margin: calc(var(--stroke-width) * -1);*/
	/*content: "";
	display: inline-block;
	
	height: .75em;
	width: .75em;
	margin: -.375em .375em -.375em -.375em;
	border-radius: 50%;
	border-style: solid;
	border-width: 0.125em;
	border-color: rgb(65, 65, 65) rgb(65, 65, 65) rgb(65, 65, 65) transparent;*/
	/*animation: spinner .5s infinite linear;*/
}


/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */

/* here for custom animation overrides */