/* ==========================================================================
   Animated Text Block — front-end styles
   ========================================================================== */

.atb-block {
	--atb-duration: 700ms;
	--atb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	position: relative;
}

.atb-block .atb-items {
	position: relative;
}

.atb-block .atb-item {
	margin: 0;
	animation-duration: var(--atb-duration);
	animation-timing-function: var(--atb-ease);
	animation-fill-mode: both;
	will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   SEQUENCE MODE
   -------------------------------------------------------------------------- */

.atb-mode-sequence .atb-item {
	opacity: 0;
}

.atb-item.atb-anim-fade-in    { animation-name: atb-fade-in; }
.atb-item.atb-anim-fade-out   { animation-name: atb-fade-out; }
.atb-item.atb-anim-fade-in-up { animation-name: atb-fade-in-up; }
.atb-item.atb-anim-fade-in-down { animation-name: atb-fade-in-down; }
.atb-item.atb-anim-fade-in-left { animation-name: atb-fade-in-left; }
.atb-item.atb-anim-fade-in-right { animation-name: atb-fade-in-right; }
.atb-item.atb-anim-move-left  { animation-name: atb-move-left; }
.atb-item.atb-anim-move-right { animation-name: atb-move-right; }
.atb-item.atb-anim-move-up    { animation-name: atb-move-up; }
.atb-item.atb-anim-move-down  { animation-name: atb-move-down; }
.atb-item.atb-anim-zoom-in    { animation-name: atb-zoom-in; }
.atb-item.atb-anim-zoom-out   { animation-name: atb-zoom-out; }
.atb-item.atb-anim-rotate-in  { animation-name: atb-rotate-in; }
.atb-item.atb-anim-flip-in-x  { animation-name: atb-flip-in-x; }
.atb-item.atb-anim-flip-in-y  { animation-name: atb-flip-in-y; }
.atb-item.atb-anim-bounce-in  { animation-name: atb-bounce-in; }
.atb-item.atb-anim-blur-in    { animation-name: atb-blur-in; }
.atb-item.atb-anim-diagonal-in { animation-name: atb-diagonal-in; }
.atb-item.atb-anim-skew-in    { animation-name: atb-skew-in; }

/* ---------- Keyframes ---------- */

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

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

@keyframes atb-fade-in-up {
	from { opacity: 0; transform: translate3d(0, 40px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-fade-in-down {
	from { opacity: 0; transform: translate3d(0, -40px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-fade-in-left {
	from { opacity: 0; transform: translate3d(-60px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-fade-in-right {
	from { opacity: 0; transform: translate3d(60px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-move-left {
	from { opacity: 1; transform: translate3d(80px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-move-right {
	from { opacity: 1; transform: translate3d(-80px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-move-up {
	from { opacity: 1; transform: translate3d(0, 60px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-move-down {
	from { opacity: 1; transform: translate3d(0, -60px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-zoom-in {
	from { opacity: 0; transform: scale(0.5); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes atb-zoom-out {
	from { opacity: 0; transform: scale(1.6); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes atb-rotate-in {
	from { opacity: 0; transform: rotate(-12deg) scale(0.9); }
	to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

@keyframes atb-flip-in-x {
	from { opacity: 0; transform: perspective(700px) rotateX(90deg); }
	to   { opacity: 1; transform: perspective(700px) rotateX(0deg); }
}

@keyframes atb-flip-in-y {
	from { opacity: 0; transform: perspective(700px) rotateY(90deg); }
	to   { opacity: 1; transform: perspective(700px) rotateY(0deg); }
}

@keyframes atb-bounce-in {
	0%   { opacity: 0; transform: scale(0.3); }
	50%  { opacity: 1; transform: scale(1.08); }
	70%  { transform: scale(0.96); }
	100% { opacity: 1; transform: scale(1); }
}

@keyframes atb-blur-in {
	from { opacity: 0; filter: blur(12px); }
	to   { opacity: 1; filter: blur(0); }
}

@keyframes atb-diagonal-in {
	from { opacity: 0; transform: translate3d(-60px, 60px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes atb-skew-in {
	from { opacity: 0; transform: skewX(20deg) translate3d(-40px, 0, 0); }
	to   { opacity: 1; transform: skewX(0deg) translate3d(0, 0, 0); }
}

/* --------------------------------------------------------------------------
   SLIDER MODE
   -------------------------------------------------------------------------- */

.atb-mode-slider .atb-items {
	display: grid;
}

.atb-mode-slider .atb-item {
	grid-area: 1 / 1;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 500ms var(--atb-ease),
		transform 500ms var(--atb-ease);
}

.atb-mode-slider .atb-item.is-active {
	opacity: 1;
	pointer-events: auto;
}

.atb-effect-slide .atb-item          { transform: translate3d(60px, 0, 0); }
.atb-effect-slide .atb-item.is-active { transform: translate3d(0, 0, 0); }

.atb-effect-zoom .atb-item           { transform: scale(0.85); }
.atb-effect-zoom .atb-item.is-active { transform: scale(1); }

.atb-effect-none .atb-item           { transition: none; }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.atb-mode-sequence .atb-item {
		opacity: 1 !important;
		animation: none !important;
		transform: none !important;
		filter: none !important;
	}
	.atb-mode-slider .atb-item {
		transition: none !important;
	}
}