/* =========================================================
   SOUQDENT FLOATING AD
   ========================================================= */

.sd-floating-ad {
	position: fixed;

	right: var(--sd-fa-desktop-right);
	bottom: var(--sd-fa-desktop-bottom);

	width: var(--sd-fa-desktop-width);
	max-width: 42vw;

	z-index: var(--sd-fa-z);

	opacity: 0;
	visibility: hidden;

	transform: translateY(12px);

	transition:
		opacity .35s ease,
		transform .35s ease;

	user-select: none;
	-webkit-user-select: none;

	touch-action: none;
}

.sd-floating-ad.is-visible {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);
}


/* =========================================================
   AD ITEM
   ========================================================= */

.sd-floating-ad__item {
	display: none;

	width: 100%;

	color: inherit;
	text-decoration: none;

	-webkit-tap-highlight-color: transparent;
}

.sd-floating-ad__item.is-active {
	display: block;
}

.sd-floating-ad__item {
	display: none;

	width: 100%;

	color: inherit;
	text-decoration: none;

	-webkit-tap-highlight-color: transparent;

	user-select: none;
	-webkit-user-select: none;

	-webkit-user-drag: none;
}


.sd-floating-ad,
.sd-floating-ad * {
	-webkit-user-drag: none;
}




/* =========================================================
   CARD
   ========================================================= */

.sd-floating-ad__card {
	position: relative;

	width: 100%;

	background: transparent;

	border: 0;
	border-radius: 0;

	overflow: visible;

	box-shadow: none;

	cursor: grab;

	animation:
		sdFloatingBreath
		var(--sd-fa-breath-speed)
		ease-in-out
		infinite;
}

.sd-floating-ad.is-dragging
.sd-floating-ad__card {
	cursor: grabbing;
	animation-play-state: paused;
}


/* =========================================================
   IMAGE
   ========================================================= */

.sd-floating-ad__media {
	position: relative;

	width: 100%;

	background: transparent;

	overflow: visible;
}

.sd-floating-ad__media img {
	display: block;

	width: 100%;
	height: auto;

	margin: 0;

	background: transparent;

	border: 0;
	border-radius: 0;

	box-shadow: none;

	pointer-events: none;

	user-select: none;
	-webkit-user-drag: none;
}


/* =========================================================
   SHINE
   ========================================================= */

.sd-floating-ad__card::after {
	content: "";

	position: absolute;

	top: -12%;
	left: -45%;

	width: 34%;
	height: 125%;

	z-index: 3;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			rgba(255,255,255,0) 0%,
			rgba(255,255,255,.10) 45%,
			rgba(255,255,255,.34) 50%,
			rgba(255,255,255,.10) 55%,
			rgba(255,255,255,0) 100%
		);

	animation:
		sdFloatingShine
		var(--sd-fa-shine-speed)
		ease-in-out
		infinite;
}


/* =========================================================
   BREATHING
   ========================================================= */

@keyframes sdFloatingBreath {

	0%,
	100% {
		transform:
			translateY(0)
			scale(1);
	}

	50% {
		transform:
			translateY(-4px)
			scale(1.025);
	}

}


@keyframes sdFloatingShine {

	0% {
		transform:
			translateX(-130%)
			skewX(-18deg);
	}

	100% {
		transform:
			translateX(300%)
			skewX(-18deg);
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

	.sd-floating-ad {
		right: var(--sd-fa-mobile-right);

		bottom:
			calc(
				env(safe-area-inset-bottom) +
				var(--sd-fa-mobile-bottom)
			);

		width: var(--sd-fa-mobile-width);

		max-width: 38vw;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.sd-floating-ad__card,
	.sd-floating-ad__card::after {
		animation: none;
	}

}