/* CAROUSEL ANIMATION */

.promo-cards {
	position: relative;
	width: 60vw;
	height: 40vw;
	max-width: 360px;
	max-height: 190px;
	margin: 35px 20px 0 20px;
	perspective: 700px;
	transform-origin: center;
}

.promo-cards__content {
	position: absolute;
	width: 100%;
	height: 100%;
	transform-origin: center;
	transform-style: preserve-3d;
	transform: translateZ(-30vw) rotateY(0);
	animation: carousel 16s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.promo-cards__content.step-animation {
	animation: carousel 16s infinite steps(1) forwards;
}

.promo-cards__content:hover {
	animation-play-state: paused;
}

.promo-cards__item {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 60vw;
	height: 40vw;
	max-width: 350px;
	max-height: 150px;
	box-shadow: 0 5px 70px rgb(0 0 0 / 80%);
	border-radius: 6px;
	transform-origin: center;
}

.promo-cards__item:nth-child(1) {
	background: #FDD94F;
	opacity: 0.9;
	transform: rotateY(0) translateZ(35vw);
}

.promo-cards__item:nth-child(2) {
	background: #FDD94F;
	opacity: 0.9;
	transform: rotateY(120deg) translateZ(35vw);
}

.promo-cards__item:nth-child(3) {
	background: #FDD94F;
	opacity: 0.9;
	transform: rotateY(240deg) translateZ(35vw);
}

@keyframes carousel {
	0%, 17.5% {
		transform: translateZ(-35vw) rotateY(0);
	}
	27.5%, 45% {
		transform: translateZ(-35vw) rotateY(-120deg);
	}
	55%, 72.5% {
		transform: translateZ(-35vw) rotateY(-240deg);
	}
	82.5%, 100% {
		transform: translateZ(-35vw) rotateY(-360deg);
	}
}


/* TEXT ANIMATION */

.cross-bar-reveal {
	position: relative;
}

.cross-bar-reveal .bars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cross-bar-reveal .bars .bar {
	width: 100%;
	flex: 1;
	background: currentColor;
	border-radius: 50px;
	animation: 0.6s cubic-bezier(0.4, 0.2, 0.175, 1) forwards;
}

.cross-bar-reveal .bars .bar:nth-child(odd) {
	transform: translateX(100%);
	animation-name: slide-left;
}

.cross-bar-reveal .bars .bar:nth-child(even) {
	transform: translateX(-100%);
	animation-name: slide-right;
}

.cross-bar-reveal .bars .bar:nth-child(1) {
	animation-delay: 0.3s;
}

.cross-bar-reveal .bars .bar:nth-child(2) {
	animation-delay: 0.2s;
}

.cross-bar-reveal .bars .bar:nth-child(3) {
	animation-delay: 0.5s;
}

.cross-bar-reveal .bars .bar:nth-child(4) {
	animation-delay: 0.3s;
}

.cross-bar-reveal .bars .bar:nth-child(5) {
	animation-delay: 0.4s;
}

.cross-bar-reveal .glitch {
	opacity: 0;
	animation: reveal forwards 0.3s;
	animation-delay: 0.6s;
}

.cross-bar-reveal .glitch span:not(:last-child) {
	--ratio: calc(100% / var(--slice-count));
	--top: calc(var(--ratio) * (var(--i) - 1));
	--bottom: calc(var(--ratio) * (var(--slice-count) - var(--i)));
	position: absolute;
	white-space: nowrap;
	clip-path: inset(var(--top) 0 var(--bottom) 0);
	animation-duration: 0.6s;
}

.cross-bar-reveal .glitch span:nth-child(odd) {
	animation-name: slide-from-left;
}

.cross-bar-reveal .glitch span:nth-child(even) {
	animation-name: slide-from-right;
}

.cross-bar-reveal .glitch span:last-child {
	opacity: 0;
	animation: reveal steps(1) forwards;
	animation-delay: 1.2s;
}

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

@keyframes slide-from-right {
	from {
		transform: translateX(20%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes reveal {
	to {
		opacity: 1;
	}
}

@keyframes slide-left {
	to {
		transform: translateX(-100%);
	}
}

@keyframes slide-right {
	to {
		transform: translateX(100%);
	}
}


/* BLOCKS AND ICONS */

@keyframes fadein_blur {
	0% {
		opacity: 0;
	}
	30% {
		filter: grayscale(1) blur(5px);
	}
	100% {
		filter: grayscale(0) blur(0);
		opacity: 1;
	}
}

.reveal-item {
	animation: fadein_blur 500ms ease 1.4s backwards;
}