@import 'tailwindcss';
@import 'open-props/easings';

@theme {
	--breakpoint-sm: 520px;
	--breakpoint-lg: 976px;
	--color-highlight: #6202ff;
	--font-family-poppins: 'Poppins', sans-serif;

	--font-size-4_5xl: 2.625rem;
	--font-size-4_5xl--line-height: 1.15;
	--font-size-5_5xl: 3.375rem;
	--font-size-5_5xl--line-height: 1;

	@keyframes roll-reveal {
		from {
			transform: rotate(12deg) scale(0);
			opacity: 0;
		}
		to {
			transform: rotate(0deg) scale(1);
			opacity: 1;
		}
	}

	@keyframes fade-in {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@keyframes slide-left {
		from {
			transform: translateX(20px);
			opacity: 0;
		}
		to {
			transform: translateX(0px);
			opacity: 1;
		}
	}

	@keyframes slide-top {
		from {
			transform: translateY(20px);
			opacity: 0;
		}
		to {
			transform: translateY(0px);
			opacity: 1;
		}
	}

	--animate-roll-reveal: 0.4s roll-reveal var(--ease-spring-2) backwards;
	--animate-fade-in: 0.4s fade-in ease-out backwards;
	--animate-slide-top: 0.3s slide-top ease-out backwards;
	--animate-slide-left: 0.3s slide-left ease-out backwards;
}
