@charset "UTF-8";

/**
 * animations.css 1.1.0
 * Author: hybrid.
 *
 * Global animation tokens, loading states, keyframes and loader components.
 *
 * Tokens
 * --duration-fast    .125s
 * --duration-normal  .25s
 * --duration-slow    1s
 * --ease             ease
 * --ease-fast        cubic-bezier(0, .5, .5, 1)
 * --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)
 * --elastic          cubic-bezier(1, 0.01, 0, 1.22)
 *
 * Classes
 * .is-loading        — spinning dot loader on any element
 * body.is-loading    — full-page loading state (fixed, centered)
 * .loader            — spinner icon only (1em)
 * .loading           — spinner inline with text (.75em)
 * .instant-transition — disables all transitions
 */



/* ================================================================================================== */
/* ============================================= CONFIG ============================================= */
/* ================================================================================================== */

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

:root {

	/* duration */
	--duration-fast: .25s; /* .125s */
	--duration-normal: .5s; /* .25s */
	--duration-slow: 1s;

	/* easing */
	--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);
}


/* ============================== THEME ============================== */

:root {
	--loading-animation-fx: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Ccircle cx='10' cy='20' r='5' fill='%23ff0000'%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 -12;0 0' dur='0.6s' begin='0s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='30' cy='20' r='5' fill='%23ff0000'%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 -12;0 0' dur='0.6s' begin='0.2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='20' r='5' fill='%23ff0000'%3E%3CanimateTransform attributeName='transform' type='translate' values='0 0;0 -12;0 0' dur='0.6s' begin='0.4s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
}



/* ================================================================================================ */
/* ============================================= CORE ============================================= */
/* ================================================================================================ */

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

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

.is-loading:before {
	/*content: var(--loading-animation-fx);*/
	content: '';
	display: inline-flex;
	width: 2em;
	aspect-ratio: 1/1;
	border-radius: 50%;
	border-style: solid;
	border-width: var(--stroke-width);
	border-bottom:solid var(--stroke-width) transparent;
	animation: spinner var(--duration-slow) infinite linear;
}


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

body.is-loading:before {
	position: fixed;
	z-index: 100;
	top: 50%;
	left: 50%;
	margin: -1em 0 0 -1em;
}
body.is-loading #wrapper {
	opacity: .33;
}


/* ============================== 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;
}


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

.instant-transition {
	transition: none;
}


/* =============== 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); }
}



/* ================================================================================================= */
/* ============================================= THEME ============================================= */
/* ================================================================================================= */

/* here for custom animation overrides */

/* ============================== OVERLAY ============================== */

.overlay.is-loading .overlay-container::before {
    content: '';
    position: absolute;
    z-index: 110;
    top: 50%;
    left: 50%;
    width: 2em;
    aspect-ratio: 1;
    border: solid var(--stroke-width) currentColor;
    border-bottom-color: transparent;
    border-radius: 50%;
	margin: -1em 0 0 -1em;
    animation: spinner var(--duration-slow) infinite linear;
}


/* ============================== TILT SHAKING ============================== */

@keyframes tilt-shaking {
	0% { transform: rotate(0deg); }
	25% { transform: rotate(5deg); }
	50% { transform: rotate(0eg); }
	75% { transform: rotate(-5deg); }
	100% { transform: rotate(0deg); }
}