/* START OF ANIMATIONS SECTION ******************************************/

.fade-in {
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation-name: fadeBulge;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	display: inline-block;
	animation-duration: var(--fade-duration, 0.5s);
	}

@keyframes fadeBulge {
	0% {
		opacity: 0;
		transform: scale(var(--bulge-scale, 1));
	}

	40% {
		opacity: 1;
		transform: scale(var(--bulge-scale, 1.2));
		}

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

.pure-fade-in {
	opacity: 0;
	animation-name: pureFade;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
	display: inline-block;
	animation-duration: var(--fade-duration, 0.5s);
	}

@keyframes pureFade {
	0% {
		opacity: 0;
		}

	100% {
		opacity: 1;
		}
	}

/* LTR SLIDE CLASSES (Now using transform: translateX) */
.slide-in {
	position: relative;
	opacity: 0;
	animation: slideInAnim var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
	}

@keyframes slideInAnim {
	0% {
		opacity: 0;
		transform: translateX(var(--slide-amount-neg, 0px));
		}

	100% {
		opacity: 1;
		transform: translateX(0);
		}
	}

.slide-bulge-in {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: slideBulgeIn var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
	}

@keyframes slideBulgeIn {
	0% {
		opacity: 0;
		transform: translateX(var(--slide-amount-neg, 0px)) scale(var(--bulge-scale, 1));
		}

	40% {
		opacity: 1;
		transform: translateX(calc(var(--slide-amount-neg, 0px) * 0.6)) scale(var(--bulge-scale, 1.2));
		}

	100% {
		opacity: 1;
		transform: translateX(0) scale(1);
		}
	}

/* RTL SLIDE CLASSES (Already using transform) */
.slide-in-rtl {
	position: relative;
	opacity: 0;
	animation: slideInAnimRTL var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
	}

@keyframes slideInAnimRTL {
	0% {
		opacity: 0;
		transform: translateX(var(--slide-amount, 0px));
		}

	100% {
		opacity: 1;
		transform: translateX(0px);
		}
	}

.slide-bulge-in-rtl {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: slideBulgeInRTL var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
	}


@keyframes slideBulgeInRTL {
	0% {
		opacity: 0;
		transform: translateX(var(--slide-amount, 0px)) scale(var(--bulge-scale, 1));
		}

	40% {
		opacity: 1;
		transform: translateX(calc(var(--slide-amount, 0px) * 0.6)) scale(var(--bulge-scale, 1.2));
		}

	100% {
		opacity: 1;
		transform: translateX(0px) scale(1);
		}
	}

.no-animation {
	opacity: 1 !important;
	transition: none !important;
	animation: none !important;
	}

/* END OF OLD ANIMATIONS SECTION ******************************************/

/* ########################################  */
/*  NEW ANIMATIONS ADDED  */
/* ########################################  */


/* === VERTICAL SLIDE CLASSES === */

/* Slide in vertically (Down) */

.pure-vert {
  animation: pureVerticalMove 0.6s cubic-bezier(.19,1,.22,1) forwards;
  /* Use your --vert-slide-amount or --vert-slide-neg variables as needed */
}

@keyframes pureVerticalMove {  
from {    transform: translateY(var(--vert-slide-amount, 0));    opacity: 0;  }
  to {    transform: translateY(0);    opacity: 1;  }
}

.pure-vert-up {
  animation: pureVerticalMoveUp 0.6s cubic-bezier(.19,1,.22,1) forwards;
  /* Use your --vert-slide-amount or --vert-slide-neg variables as needed */
}

@keyframes pureVerticalMoveUp {  
  from { transform: translateY(var(--vert-slide-neg, 0)); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}


.vert-in {
	position: relative;
	opacity: 0;
	animation: vertInAnim var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes vertInAnim {
0% { opacity: 0; transform: translateY(var(--vert-slide-neg, 0px)); }
100% { opacity: 1; transform: translateY(0); }
}

/* Slide in vertically (Up) */
.vert-in-up {
	position: relative;
	opacity: 0;
	animation: vertInAnimUp var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes vertInAnimUp {
0% { opacity: 0; transform: translateY(var(--vert-slide-amount, 0px)); }
100% { opacity: 1; transform: translateY(0); }
}

/* Bulge + Vertical (Down) */
.bulge-vert-in {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: bulgeVertInAnim var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
/*
@keyframes bulgeVertInAnim {
0% { opacity: 0; transform: translateY(var(--vert-slide-neg, 0px)) scale(var(--bulge-scale, 1)); }
40% { opacity: 1; transform: translateY(calc(var(--vert-slide-neg, 0px) * 0.6)) scale(var(--bulge-scale, 1.2)); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
*/
@keyframes bulgeVertInAnim {
  0% { opacity: 0; transform: translateY(var(--vert-slide-amount, 0px)) scale(var(--bulge-scale, 1)); }
  40% { opacity: 1; transform: translateY(calc(var(--vert-slide-amount, 0px) * 0.6)) scale(var(--bulge-scale, 1.2)); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Bulge + Vertical (Up) */
/*
.bulge-vert-in-up {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: bulgeVertInAnimUp var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}

@keyframes bulgeVertInAnimUp {
0% { opacity: 0; transform: translateY(var(--vert-slide-amount, 0px)) scale(var(--bulge-scale, 1)); }
40% { opacity: 1; transform: translateY(calc(var(--vert-slide-amount, 0px) * 0.6)) scale(var(--bulge-scale, 1.2)); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
*/
.bulge-vert-in-up {
    position: relative;
    opacity: 0;
    transform: scale(var(--bulge-scale, 1));
    animation: bulgeVertInAnimUp var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
    display: inline-block;
}

@keyframes bulgeVertInAnimUp {
    0% {
        opacity: 0;
        transform: translateY(var(--vert-slide-neg, 0px)) scale(var(--bulge-scale, 1));
    }
    40% {
        opacity: 1;
        transform: translateY(calc(var(--vert-slide-neg, 0px) * 0.6)) scale(var(--bulge-scale, 1.2));
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* === COMBINED SLIDE (HORIZONTAL + VERTICAL) CLASSES === */

/* LTR: Horizontal (X) + Vertical (Y, Down) */
.slide-vert-in {
	position: relative;
	opacity: 0;
	animation: slideVertInAnim var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideVertInAnim {
	0% {		opacity: 0;		transform: translateX(var(--slide-amount-neg, 0px)) translateY(var(--vert-slide-amount, 0px));	}
	100% {		opacity: 1;		transform: translateX(0) translateY(0);	}
}

/* LTR: Horizontal (X) + Vertical (Y, Up) */
.slide-vert-in-up {
	position: relative;
	opacity: 0;
	animation: slideVertInAnimUp var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideVertInAnimUp {
	0% {	opacity: 0;		transform: translateX(var(--slide-amount-neg, 0px)) translateY(var(--vert-slide-neg, 0px));	}
	100% {		opacity: 1;		transform: translateX(0) translateY(0);	}
}

/* RTL: Horizontal (X) + Vertical (Y, Down) */
.slide-vert-in-rtl {
	position: relative;
	opacity: 0;
	animation: slideVertInAnimRTL var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideVertInAnimRTL {
	0% {	opacity: 0;		transform: translateX(var(--slide-amount, 0px)) translateY(var(--vert-slide-amount, 0px));	}
	100% {	opacity: 1;		transform: translateX(0) translateY(0);	}
}

/* RTL: Horizontal (X) + Vertical (Y, Up) */
.slide-vert-in-rtl-up {
	position: relative;
	opacity: 0;
	animation: slideVertInAnimRTLUp var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideVertInAnimRTLUp {
	0% {	opacity: 0;		transform: translateX(var(--slide-amount, 0px)) translateY(var(--vert-slide-neg, 0px));	}
	100% {	opacity: 1;		transform: translateX(0) translateY(0);	}
}

/* === COMBINED SLIDE + BULGE + VERTICAL CLASSES === */

/* LTR: Slide + Bulge + Vertical Down */
.slide-bulge-vert-in {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: slideBulgeVertInAnim var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideBulgeVertInAnim {
	0% {	opacity: 0;	transform: translateX(var(--slide-amount-neg, 0px)) translateY(var(--vert-slide-amount, 0px)) scale(var(--bulge-scale, 1));	}
	40% {	opacity: 1;	transform: translateX(calc(var(--slide-amount-neg, 0px) * 0.6)) translateY(calc(var(--vert-slide-amount, 0px) * 0.6)) scale(var(--bulge-scale, 1.2));	}
	100% {	opacity: 1;	transform: translateX(0) translateY(0) scale(1);}
}

/* LTR: Slide + Bulge + Vertical Up */
.slide-bulge-vert-in-up {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: slideBulgeVertInAnimUp var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideBulgeVertInAnimUp {
	0% {opacity: 0;	transform: translateX(var(--slide-amount-neg, 0px)) translateY(var(--vert-slide-neg, 0px)) scale(var(--bulge-scale, 1));}
	40% {opacity: 1;transform: translateX(calc(var(--slide-amount-neg, 0px) * 0.6)) translateY(calc(var(--vert-slide-neg, 0px) * 0.6)) scale(var(--bulge-scale, 1.2));	}
	100% {opacity: 1;transform: translateX(0) translateY(0) scale(1);}
}

/* RTL: Slide + Bulge + Vertical Down */
.slide-bulge-vert-in-rtl {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: slideBulgeVertInAnimRTL var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideBulgeVertInAnimRTL {
	0% {
		opacity: 0;
		transform: translateX(var(--slide-amount, 0px)) translateY(var(--vert-slide-amount, 0px)) scale(var(--bulge-scale, 1));
	}
	40% {
		opacity: 1;
		transform: translateX(calc(var(--slide-amount, 0px) * 0.6)) translateY(calc(var(--vert-slide-amount, 0px) * 0.6)) scale(var(--bulge-scale, 1.2));
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

/* RTL: Slide + Bulge + Vertical Up */
.slide-bulge-vert-in-rtl-up {
	position: relative;
	opacity: 0;
	transform: scale(var(--bulge-scale, 1));
	animation: slideBulgeVertInAnimRTLUp var(--slide-duration, 400ms) cubic-bezier(.4, 1, .5, 1) forwards;
	display: inline-block;
}
@keyframes slideBulgeVertInAnimRTLUp {
	0% {
		opacity: 0;
		transform: translateX(var(--slide-amount, 0px)) translateY(var(--vert-slide-neg, 0px)) scale(var(--bulge-scale, 1));
	}
	40% {
		opacity: 1;
		transform: translateX(calc(var(--slide-amount, 0px) * 0.6)) translateY(calc(var(--vert-slide-neg, 0px) * 0.6)) scale(var(--bulge-scale, 1.2));
	}
	100% {
		opacity: 1;
		transform: translateX(0) translateY(0) scale(1);
	}
}

/*END of ALL animations section  */