@use '../base/mixins/breakpoints' as break;

@keyframes reveal {
	0% {
		transform: scale(0.5);
	}

	90% {
		transform: scale(1);
	}

	100% {
		transform: scale(1);
	}
}

.animated {
	opacity: 1;
	transform: translateZ(0);
	transform-style: preserve-3d;
}

.fly-in-top {
	animation: fly-in-top 3s 1 ease-out;
}

.fly-in-bottom {
	animation: fly-in-bottom 3s 1 ease-in-out;
	z-index: 10;
}

.pan-left {
	animation: pan-left 3s 1 ease-out;
}

.pan-right {
	animation: pan-right 3s 1 ease-out;
}

.fade-in {
	animation: fade-in 3s 1 ease-out;
}

.fade-out {
	animation: fade-out 3s 1 ease-out;
}

.shimmer {
	animation: shimmer 3s infinite;
}

.sparkle {
	animation: sparkle 4s ease-in-out infinite;
}

.revealing-image {
	// This animation goes out from mobile (starts on tablet sizes)
	@include break.min-mobile {
		@supports (animation-timeline: view()) {
			animation: linear reveal both;
			animation-timeline: view();
			animation-range: entry 25% cover 50%;
		}
	}
}