/* NikolicWP Zavesa – the curtain shown while a page loads.
 * Colours and size come from the settings as CSS variables (printed in <head>). */

.nwp-zavesa {
	--nwp-zavesa-speed: .45s;
	--nwp-zv-s: min(var(--nwp-zavesa-size, 100px), 70vw, 60vh);
	align-items: center;
	justify-content: center;
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--nwp-zavesa-speed) ease, visibility var(--nwp-zavesa-speed) ease, transform var(--nwp-zavesa-speed) ease;
	pointer-events: auto;
	overflow: hidden;
}
.nwp-zavesa__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	padding: 24px;
	text-align: center;
	transition: opacity .25s ease;
}
.nwp-zavesa__media { width: var(--nwp-zv-s); height: var(--nwp-zv-s); border: 0; display: block; }
.nwp-zavesa__img { object-fit: contain; }
.nwp-zavesa__text { margin: 0; color: var(--nwp-zavesa-color); font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .02em; opacity: .85; }

/* Lifting */
.nwp-zavesa.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.nwp-zavesa--exit-zoom.is-hidden { transform: scale(1.08); }
.nwp-zavesa--exit-slide.is-hidden { transform: translateY(-6%); }
.nwp-zavesa.is-gone { display: none !important; }

/* "Curtain": two halves part to the sides */
.nwp-zavesa--curtain { --nwp-zavesa-speed: .7s; background: transparent; }
.nwp-zavesa__panel { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--nwp-zavesa-bg); z-index: 1; transition: transform var(--nwp-zavesa-speed) cubic-bezier(.77, 0, .18, 1); }
.nwp-zavesa__panel--l { left: 0; box-shadow: inset -18px 0 24px -22px rgba(0, 0, 0, .35); }
.nwp-zavesa__panel--r { right: 0; box-shadow: inset 18px 0 24px -22px rgba(0, 0, 0, .35); }
.nwp-zavesa--curtain.is-hidden { opacity: 1; transition: visibility 0s linear var(--nwp-zavesa-speed); }
.nwp-zavesa--curtain.is-hidden .nwp-zavesa__panel--l { transform: translateX(-102%); }
.nwp-zavesa--curtain.is-hidden .nwp-zavesa__panel--r { transform: translateX(102%); }
.nwp-zavesa.is-hidden .nwp-zavesa__inner { opacity: 0; }

/* Shown again while leaving for another page */
.nwp-zavesa.is-leaving { display: flex !important; transition-duration: .2s; }

/* Spinners */
.nwp-zavesa__spinner { display: block; position: relative; width: var(--nwp-zv-s); height: var(--nwp-zv-s); color: var(--nwp-zavesa-color); }
.nwp-zavesa__spinner--ring { box-sizing: border-box; border-radius: 50%; border: max(3px, calc(var(--nwp-zv-s) / 22)) solid rgba(127, 127, 127, .18); border-top-color: currentColor; animation: nwp-zavesa-spin .8s linear infinite; }
.nwp-zavesa__spinner--dots { display: flex; align-items: center; justify-content: center; gap: calc(var(--nwp-zv-s) / 10); height: auto; }
.nwp-zavesa__spinner--dots i { display: block; width: calc(var(--nwp-zv-s) / 5); height: calc(var(--nwp-zv-s) / 5); border-radius: 50%; background: currentColor; animation: nwp-zavesa-dot 1.2s ease-in-out infinite both; }
.nwp-zavesa__spinner--dots i:nth-child(2) { animation-delay: .15s; }
.nwp-zavesa__spinner--dots i:nth-child(3) { animation-delay: .3s; }
.nwp-zavesa__spinner--bars { display: flex; align-items: center; justify-content: center; gap: calc(var(--nwp-zv-s) / 14); height: calc(var(--nwp-zv-s) * .6); }
.nwp-zavesa__spinner--bars i { display: block; width: calc(var(--nwp-zv-s) / 9); height: 100%; border-radius: 4px; background: currentColor; animation: nwp-zavesa-bar 1s ease-in-out infinite; }
.nwp-zavesa__spinner--bars i:nth-child(2) { animation-delay: .1s; }
.nwp-zavesa__spinner--bars i:nth-child(3) { animation-delay: .2s; }
.nwp-zavesa__spinner--bars i:nth-child(4) { animation-delay: .3s; }
@keyframes nwp-zavesa-spin { to { transform: rotate(360deg); } }
@keyframes nwp-zavesa-dot { 0%, 80%, 100% { transform: scale(.4); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
@keyframes nwp-zavesa-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }

/* Logo animations (picture type) */
.nwp-zavesa-anim-pulse { animation: nwp-zavesa-pulse 1.6s ease-in-out infinite; }
.nwp-zavesa-anim-rotate { animation: nwp-zavesa-spin 2s linear infinite; }
.nwp-zavesa-anim-fade { animation: nwp-zavesa-fade 1.4s ease-in-out infinite; }
.nwp-zavesa-anim-bounce { animation: nwp-zavesa-bounce 1s ease-in-out infinite; }
@keyframes nwp-zavesa-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .85; } }
@keyframes nwp-zavesa-fade { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes nwp-zavesa-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Visitors who asked their system for less motion */
@media (prefers-reduced-motion: reduce) {
	.nwp-zavesa--rm, .nwp-zavesa--rm * { animation-duration: 2.4s !important; transition-duration: .15s !important; }
	.nwp-zavesa--rm .nwp-zavesa-anim-pulse, .nwp-zavesa--rm .nwp-zavesa-anim-rotate, .nwp-zavesa--rm .nwp-zavesa-anim-bounce { animation: none !important; }
	.nwp-zavesa--rm.is-hidden { transform: none !important; }
}