/* ====================== */
/* ======= Variables ======= */
/* ====================== */

:root {
  --transform-distance: 40px;
}

/* ======================== */
/* ======= Animations ======= */
/* ======================== */

.brx-animate-ja-slideInRight {
  animation-name: ja-slideInRight;
}

@keyframes ja-slideInRight {
  0% {
    opacity: 0;
    transform: translateX(var(--transform-distance));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

/* ====================================== */

.brx-animate-ja-slideInLeft {
  animation-name: ja-slideInLeft;
}

@keyframes ja-slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(calc(-1 * var(--transform-distance)));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

/* ====================================== */

.brx-animate-ja-slideInUp {
  animation-name: ja-slideInUp;
}

@-webkit-keyframes ja-slideInUp {
  0% {
    opacity: 0;
    transform: translateY(var(--transform-distance));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes ja-slideInUp {
  0% {
    opacity: 0;
    transform: translateY(var(--transform-distance));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

/* ====================================== */

.brx-animate-ja-slideInDown {
  animation-name: ja-slideInDown;
}

@keyframes ja-slideInDown {
  0% {
    opacity: 0;
    transform: translateY(calc(-1 * var(--transform-distance)));
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

/* ====================================== */

.brx-animate-ja-flipInY {
  animation-name: ja-flipInY;
  backface-visibility: visible !important;
}

@-webkit-keyframes ja-flipInY {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
  }
  to {
    transform: perspective(400px);
  }
}
@keyframes ja-flipInY {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
  }
  to {
    transform: perspective(400px) rotateY(0deg);
  }
}

/* ====================================== */

.brx-animate-ja-scale-in {
  animation-name: ja-scale-in;
}

@-webkit-keyframes ja-scale-in {
  0% {
    transform: scale(1.1);
  }

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

@keyframes ja-scale-in {
  0% {
    transform: scale(1.1);
  }

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

/* ====================================== */

@-webkit-keyframes ja-scroll-reveal {
  0% {
    clip-path: inset(var(--space-xl) var(--space-7xl) 0 var(--space-7xl));
  }
  100% {
    clip-path: inset(0);
  }
}

@keyframes ja-scroll-reveal {
  0% {
    clip-path: inset(var(--space-xl) var(--space-7xl) 0 var(--space-7xl));
  }
  100% {
    clip-path: inset(0);
  }
}