/* ==================================================
   GLOBAL THEME STYLES
   01. Elementor Off Canvas timing
   02. Page transition / preloader
   JavaScript: assets/js/preloader.js
================================================== */

/* 01. Прискорення анімації всіх віджетів Off Canvas */
.elementor-widget-off-canvas {
    --e-off-canvas-animation-duration: 600ms !important;
}

/* ==================================================
   02. VOXELMARKET PAGE TRANSITION
================================================== */

#custom-preloader {
	position: fixed;
	inset: 0;
	z-index: 999999;

	display: grid;
	place-items: center;

	background: #262223;

	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	overflow: hidden;

	/*
	 * Плавне відкриття нової сторінки.
	 */
	transition:
		opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 0s;

	will-change: opacity;
}


/*
 * Сторінка відкрита — прелоадер прихований.
 */
#custom-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition:
		opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
		visibility 0s linear 520ms;
}


/*
 * Натиснули внутрішнє посилання —
 * прелоадер швидко проявляється.
 */
#custom-preloader.is-covering {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity 280ms cubic-bezier(0.4, 0, 0.2, 1),
		visibility 0s linear 0s;
}


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

.vm-preloader__spinner {
	width: 46px;
	height: 46px;

	border: 0;
	border-radius: 50%;

	background: conic-gradient(
		from 0deg,
		#4a181c 0%,
		#54171c 55%,
		#7d1219 70%,
		#e30613 86%,
		#951019 96%,
		#4a181c 100%
	);

	-webkit-mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 3px),
			#000 0
		);

	mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 3px),
			#000 0
		);

	animation: vm-preloader-spin 900ms linear infinite;

	will-change: transform;
}

/*
 * Тут змінюємо тільки opacity.
 * Transform не чіпаємо, тому обертання не ламається.
 */
#custom-preloader.is-hidden .vm-preloader__spinner {
	opacity: 0;
}


@keyframes vm-preloader-spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}