/********************************************************/
/*
/*      Animation CSS
/*
/********************************************************/
.animate,
.animate::before,
.animate::after {
	pointer-events: none !important;
}

@keyframes fade-in {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes fade-out {
	0%   { opacity: 1; }
	100% { opacity: 0; }
}

@keyframes slide-in-left {
	0%   { translate: 100%; }
	100% { translate: 0; }
}

@keyframes slide-in-left-fade-in {
	0%   { translate: 100%; opacity: 0; }
	100% { translate: 0; opacity: 1; }
}

@keyframes slide-in-right {
	0%   { translate: -100%; }
	100% { translate: 0; }
}

@keyframes slide-in-right-fade-in {
	0%   { translate: -100%; opacity: 0; }
	100% { translate: 0; opacity: 1; }
}

@keyframes slide-in-out-left {
	0%   { translate: 100%; }
	100% { translate: -100%; }
}

@keyframes slide-in-out-left-fade-in {
	0%   { translate: 100%; opacity: 0; }
	100% { translate: -100%; opacity: 1; }
}

@keyframes slide-in-out-right {
	0%   { translate: -100%; }
	100% { translate: 100%; }
}

@keyframes slide-in-out-right-fade-in {
	0%   { translate: -100%; opacity: 0; }
	100% { translate: 100%; opacity: 1; }
}

@keyframes scale-up {
	0%   { scale: 0; }
	100% { scale: 1; }
}

/******************************/
/* Profile animations
/******************************/
@keyframes profile-init {
	0%   { translate: 0 100svh; }
	100% { translate: 0 calc(((var(--wp--preset--spacing--0-75) * var(--index)) * -1) + var(--adjustment, 0px)); }
}

@keyframes profile-swipe-1 {
	0%   { opacity: 0; scale: 1; }
	20%  { opacity: 1; scale: 0.9; }
	100% { opacity: 1; scale: 0.66; }
}

@keyframes profile-swipe-2 {
	0%   { translate: 0 calc(((var(--wp--preset--spacing--0-75) * var(--index)) * -1) + var(--adjustment, 0px)); rotate: 0deg; }
	100% { translate: var(--swipe-translation) calc(((var(--wp--preset--spacing--0-75) * var(--index)) * -1) + var(--adjustment, 0px)); rotate: var(--swipe-rotation); }
}

/******************************/
/* App menu animations
/******************************/
@keyframes flash {
	50% { --color: var(--wp--preset--color--blanc); --background: var(--wp--preset--color--orange); --opacity: 1; }
}

/******************************/
/* Chat animations
/******************************/
@keyframes message-init {
	0%   { grid-template-rows: 0fr; }
	20%  { scale: 0.5; opacity: 0; }
	30%  { grid-template-rows: 1fr; }
	65%  { scale: 1.025; }
	100% { scale: 1; opacity: 1; }
}

@keyframes bubble-inner-in {
	0%   { scale: 0.5; opacity: 0; }
	50%  { scale: 0.5; opacity: 0; }
	80%  { scale: 1.025; opacity: 1; }
	100% { scale: 1; opacity: 1; }
}

@keyframes bubble-in {
	0%    { display: none; }
	0.01% { display: grid; scale: 0.8; opacity: 0; translate: 0 3rem; }
	80%   { scale: 1.025; translate: 0 -1rem; }
	100%  { scale: 1;  opacity: 1; translate: 0 0; }
}

@keyframes bubble-out {
	0%     { scale: 1;  opacity: 1; translate: 0 0; }
	20%    { scale: 1.025; translate: 0 -1rem; }
	99.99% { scale: 0.8; opacity: 0; translate: 0 3rem; }
	100%   { display: none; }
}

/******************************/
/* Loader animations
/******************************/
@keyframes loader-out {
	0%   { scale: 1; opacity: 1; }
	20%  { scale: 1.3; opacity: 1; }
	100% { scale: 0.5; opacity: 0; }
}

@keyframes loader-anim {
  0%     { mask-size: 0         0, 0         0, 0         0, auto; }
  16.67% { mask-size: var(--s, 0), 0         0, 0         0, auto; }
  33.33% { mask-size: var(--s, 0), var(--s, 0), 0         0, auto; }
  50%    { mask-size: var(--s, 0), var(--s, 0), var(--s, 0), auto; }
  66.67% { mask-size: 0         0, var(--s, 0), var(--s, 0), auto; }
  83.33% { mask-size: 0         0, 0         0, var(--s, 0), auto; }
  100%   { mask-size: 0         0, 0         0, 0         0, auto; }
}

/******************************/
/* ScrollTrigger animations
/******************************/
.st:not(.target-before, .target-after, .target-selector),
.st:not(.target-selector).target-before::before,
.st:not(.target-selector).target-after::after,
.st.target-selector .target,
.st.target-selector.target-before .target::before,
.st.target-selector.target-after .target::after {
	opacity: var(--st-initial-opacity, 1) !important;
	transform: translate(var(--st-initial-translation-h, 0%), var(--st-initial-translation-v, 0%)) rotate(var(--st-initial-rotation, 0deg)) scale(var(--st-initial-scale, 1)) !important;
}

.st:not(.target-before, .target-after, .target-selector):not(.revealed),
.st:not(.target-selector).target-before:not(.revealed)::before,
.st:not(.target-selector).target-after:not(.revealed)::after,
.st.target-selector:not(.revealed) .target,
.st.target-selector.target-before:not(.revealed) .target::before,
.st.target-selector.target-after:not(.revealed) .target::after {
	transition-property: unset !important;
	transition-duration: unset !important;
	transition-delay: unset !important;
	transition-timing-function: unset !important;
}

.st:not(.stay-visible):not(.target-before, .target-after, .target-selector),
.st:not(.stay-visible):not(.target-selector).target-before::before,
.st:not(.stay-visible):not(.target-selector).target-after::after,
.st:not(.stay-visible).target-selector .target,
.st:not(.stay-visible).target-selector.target-before .target::before,
.st:not(.stay-visible).target-selector.target-after .target::after {
	visibility: hidden !important;
}

.st:not(.target-before, .target-after, .target-selector):is(.active, .revealed),
.st:not(.target-selector).target-before:is(.active, .revealed)::before,
.st:not(.target-selector).target-after:is(.active, .revealed)::after,
.st.target-selector:is(.active, .revealed) .target,
.st.target-selector.target-before:is(.active, .revealed) .target::before,
.st.target-selector.target-after:is(.active, .revealed) .target::after {
	visibility: visible !important;
	opacity: var(--st-final-opacity, 1) !important;
	transform: translate(var(--st-final-translation-h, 0%), var(--st-final-translation-v, 0%)) rotate(var(--st-final-rotation, 0deg)) scale(var(--st-final-scale, 1)) !important;
}

.st:not(.target-before, .target-after, .target-selector).active,
.st:not(.target-selector).target-before.active::before,
.st:not(.target-selector).target-after.active::after,
.st.target-selector.active .target,
.st.target-selector.target-before.active .target::before,
.st.target-selector.target-after.active .target::after {
	pointer-events: none !important;
	transition-property: opacity, transform !important;
	transition-duration: var(--st-duration, 1250ms) !important;
	transition-delay: var(--st-delay, 0ms) !important;
	transition-timing-function: var(--st-timing-function, cubic-bezier(0.5, 0, 0, 1)) !important;
}