/**
 * Efeitos do text_rotator (animações cíclicas e marquee horizontal).
 *
 * @package WC_Custom_Hooks
 */

.wc-ch-text-rotator {
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
}

.wc-ch-text-rotator__viewport {
	display: inline-grid;
	position: relative;
	vertical-align: bottom;
	overflow: hidden;
	perspective: 900px;
	transform-style: preserve-3d;
}

.wc-ch-text-rotator__item {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	white-space: nowrap;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	will-change: transform, opacity;
}

.wc-ch-text-rotator__item.is-visible {
	opacity: 1;
	visibility: visible;
}

.wc-ch-text-rotator__item.is-entering,
.wc-ch-text-rotator__item.is-exiting {
	visibility: visible;
}

.wc-ch-text-rotator--fade .wc-ch-text-rotator__item.is-exiting {
	animation: wc-ch-tr-fade-out var(--wc-ch-tr-duration, 0.45s) ease forwards;
}

.wc-ch-text-rotator--fade .wc-ch-text-rotator__item.is-entering {
	animation: wc-ch-tr-fade-in var(--wc-ch-tr-duration, 0.45s) ease forwards;
}

.wc-ch-text-rotator--flip .wc-ch-text-rotator__item.is-exiting {
	animation: wc-ch-tr-flip-out var(--wc-ch-tr-duration, 0.45s) ease-in forwards;
}

.wc-ch-text-rotator--flip .wc-ch-text-rotator__item.is-entering {
	animation: wc-ch-tr-flip-in var(--wc-ch-tr-duration, 0.45s) ease-out forwards;
}

.wc-ch-text-rotator--flipup .wc-ch-text-rotator__item.is-exiting {
	animation: wc-ch-tr-flip-up-out var(--wc-ch-tr-duration, 0.45s) ease-in forwards;
}

.wc-ch-text-rotator--flipup .wc-ch-text-rotator__item.is-entering {
	animation: wc-ch-tr-flip-up-in var(--wc-ch-tr-duration, 0.45s) ease-out forwards;
}

.wc-ch-text-rotator--flipcube .wc-ch-text-rotator__item.is-exiting {
	animation: wc-ch-tr-flip-cube-out var(--wc-ch-tr-duration, 0.45s) ease-in forwards;
}

.wc-ch-text-rotator--flipcube .wc-ch-text-rotator__item.is-entering {
	animation: wc-ch-tr-flip-cube-in var(--wc-ch-tr-duration, 0.45s) ease-out forwards;
}

.wc-ch-text-rotator--flipcubeup .wc-ch-text-rotator__item.is-exiting {
	animation: wc-ch-tr-flip-cube-up-out var(--wc-ch-tr-duration, 0.45s) ease-in forwards;
}

.wc-ch-text-rotator--flipcubeup .wc-ch-text-rotator__item.is-entering {
	animation: wc-ch-tr-flip-cube-up-in var(--wc-ch-tr-duration, 0.45s) ease-out forwards;
}

.wc-ch-text-rotator--spin .wc-ch-text-rotator__item.is-exiting {
	animation: wc-ch-tr-spin-out var(--wc-ch-tr-duration, 0.45s) ease-in forwards;
}

.wc-ch-text-rotator--spin .wc-ch-text-rotator__item.is-entering {
	animation: wc-ch-tr-spin-in var(--wc-ch-tr-duration, 0.45s) ease-out forwards;
}

.wc-ch-text-rotator--marqueescroll {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	vertical-align: middle;
}

.wc-ch-text-rotator__marquee-viewport {
	display: block;
	overflow: hidden;
	width: 100%;
}

.wc-ch-text-rotator__marquee-track {
	display: inline-flex;
	width: max-content;
	animation: wc-ch-tr-marquee-scroll-left linear infinite;
	will-change: transform;
}

.wc-ch-text-rotator__marquee-track--right {
	animation-name: wc-ch-tr-marquee-scroll-right;
}

.wc-ch-text-rotator__marquee-group {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	gap: var(--wc-ch-marquee-gap, 10px);
}

.wc-ch-text-rotator__marquee-group + .wc-ch-text-rotator__marquee-group {
	padding-left: var(--wc-ch-marquee-gap, 10px);
}

.wc-ch-text-rotator__marquee-item {
	display: inline-block;
	flex: 0 0 auto;
	white-space: nowrap;
}

@keyframes wc-ch-tr-fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

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

@keyframes wc-ch-tr-flip-out {
	from {
		opacity: 1;
		transform: rotateX(0deg);
	}
	to {
		opacity: 0;
		transform: rotateX(90deg);
	}
}

@keyframes wc-ch-tr-flip-in {
	from {
		opacity: 0;
		transform: rotateX(-90deg);
	}
	to {
		opacity: 1;
		transform: rotateX(0deg);
	}
}

@keyframes wc-ch-tr-flip-up-out {
	from {
		opacity: 1;
		transform: rotateX(0deg);
	}
	to {
		opacity: 0;
		transform: rotateX(-90deg);
	}
}

@keyframes wc-ch-tr-flip-up-in {
	from {
		opacity: 0;
		transform: rotateX(90deg);
	}
	to {
		opacity: 1;
		transform: rotateX(0deg);
	}
}

@keyframes wc-ch-tr-flip-cube-out {
	from {
		opacity: 1;
		transform: rotateY(0deg);
	}
	to {
		opacity: 0;
		transform: rotateY(-90deg);
	}
}

@keyframes wc-ch-tr-flip-cube-in {
	from {
		opacity: 0;
		transform: rotateY(90deg);
	}
	to {
		opacity: 1;
		transform: rotateY(0deg);
	}
}

@keyframes wc-ch-tr-flip-cube-up-out {
	from {
		opacity: 1;
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		opacity: 0;
		transform: rotateX(-90deg) rotateY(-90deg);
	}
}

@keyframes wc-ch-tr-flip-cube-up-in {
	from {
		opacity: 0;
		transform: rotateX(90deg) rotateY(90deg);
	}
	to {
		opacity: 1;
		transform: rotateX(0deg) rotateY(0deg);
	}
}

@keyframes wc-ch-tr-spin-out {
	from {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
	to {
		opacity: 0;
		transform: rotate(90deg) scale(0.85);
	}
}

@keyframes wc-ch-tr-spin-in {
	from {
		opacity: 0;
		transform: rotate(-90deg) scale(0.85);
	}
	to {
		opacity: 1;
		transform: rotate(0deg) scale(1);
	}
}

@keyframes wc-ch-tr-marquee-scroll-left {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(calc(-1 * var(--wc-ch-marquee-shift, 50%)));
	}
}

@keyframes wc-ch-tr-marquee-scroll-right {
	from {
		transform: translateX(calc(-1 * var(--wc-ch-marquee-shift, 50%)));
	}
	to {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wc-ch-text-rotator__marquee-track {
		animation: none;
	}

	.wc-ch-text-rotator__item.is-entering,
	.wc-ch-text-rotator__item.is-exiting {
		animation: none !important;
	}
}