.dtk-gradshift {
	background-image: var(--dtk-gs-img);
	background-size: var(--dtk-gs-sz, 300% 300%);
	background-repeat: no-repeat;
}

.dtk-gradshift-demo {
	padding: 2rem;
	min-height: 6rem;
}

.dtk-gradshift--always {
	animation: dtk-gradshift var(--dtk-gs-dur, 4s) linear infinite;
}

.dtk-gradshift--hover {
	animation: dtk-gradshift var(--dtk-gs-dur, 4s) linear infinite;
	animation-play-state: paused;
}

.dtk-gradshift--hover:hover {
	animation-play-state: running;
}

.dtk-gradshift--radial {
	position: relative;
	overflow: hidden;
	background-image: none;
}

.dtk-gradshift--radial.dtk-gradshift--always,
.dtk-gradshift--radial.dtk-gradshift--hover {
	animation: none;
}

.dtk-gradshift--radial::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150%;
	height: 150%;
	pointer-events: none;
	z-index: 0;
	border-radius: inherit;
	background-image: var(--dtk-gs-img);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transform: translate(-50%, -50%) scale(0.35);
	transform-origin: center center;
	animation: dtk-gradshift-radial-out var(--dtk-gs-dur, 4s) linear infinite;
}

.dtk-gradshift--radial-in::before {
	animation-name: dtk-gradshift-radial-in;
}

.dtk-gradshift--radial.dtk-gradshift--hover::before {
	animation-play-state: paused;
}

.dtk-gradshift--radial.dtk-gradshift--hover:hover::before {
	animation-play-state: running;
}

.dtk-gradshift--radial > * {
	position: relative;
	z-index: 1;
}

@keyframes dtk-gradshift {
	from {
		background-position: var(--dtk-gs-fx, 0%) var(--dtk-gs-fy, 50%);
	}
	to {
		background-position: var(--dtk-gs-tx, 100%) var(--dtk-gs-ty, 50%);
	}
}

@keyframes dtk-gradshift-radial-out {
	from {
		transform: translate(-50%, -50%) scale(0.35);
	}
	to {
		transform: translate(-50%, -50%) scale(1.15);
	}
}

@keyframes dtk-gradshift-radial-in {
	from {
		transform: translate(-50%, -50%) scale(1.15);
	}
	to {
		transform: translate(-50%, -50%) scale(0.35);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dtk-gradshift--always,
	.dtk-gradshift--hover,
	.dtk-gradshift--hover:hover,
	.dtk-gradshift--radial::before,
	.dtk-gradshift--radial.dtk-gradshift--hover:hover::before {
		animation: none;
	}
}