/* Do or Drink Paywall — Animations */

@keyframes dodp-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes dodp-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes dodp-fade-out-left {
	to {
		opacity: 0;
		transform: translateX(-60px) rotate(-6deg);
	}
}

@keyframes dodp-fade-out-right {
	to {
		opacity: 0;
		transform: translateX(60px) rotate(6deg);
	}
}

@keyframes dodp-pop-in {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes dodp-drip {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(6px);
	}
}

.dodp-card {
	animation: dodp-fade-in 0.35s ease both;
}

.dodp-card.dodp-card-leaving-left {
	animation: dodp-fade-out-left 0.25s ease forwards;
}

.dodp-card.dodp-card-leaving-right {
	animation: dodp-fade-out-right 0.25s ease forwards;
}

.dodp-modal-box,
.dodp-paywall-card,
.dodp-success-screen .dodp-card,
.dodp-completed-screen .dodp-card {
	animation: dodp-pop-in 0.3s ease both;
}

.dodp-wet-icon {
	animation: dodp-drip 1.6s ease-in-out infinite;
}

.dodp-progress-fill {
	will-change: width;
}