/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
body:not(.preview) .swaptify-type-text:not(.swaptify-unblur) > .swaptify-inner-content,
body:not(.preview) .swaptify-type-image:not(.swaptify-unblur) > .swaptify-inner-content,
body:not(.preview) .swaptify-type-url:not(.swaptify-unblur) > .swaptify-inner-content
{
    opacity: 0;
}

.swaptify-unblur {
    animation: swaptify-unblur 1.5s;
}

@keyframes swaptify-pulse-loader {
	0% {
		transform: translate(-50%, -50%) scale(0.1);
		opacity: 0.7;
	}
	100% {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

.swaptify-render-segment {
	position: relative;
}

.swaptify-render-segment::after,
.swaptify-render-segment::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 25%;
	aspect-ratio: 1 / 1;
	background-color: gray;
	border-radius: 50%;
	mix-blend-mode: difference;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-out;
	opacity: 0;
}

.swaptify-render-segment.swaptify-blur::after {
	animation-name: swaptify-pulse-loader;
}

.swaptify-render-segment.swaptify-blur::before {
	animation-name: swaptify-pulse-loader;
	animation-delay: -1s;
}

@-webkit-keyframes swaptify-unblur {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.swaptify-blur {
    animation: swaptify-blur .5s;
}

@-webkit-keyframes swaptify-blur {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}