.jj-text-reveal {
  --jj-tr-reveal-width: 355px;
  --jj-tr-gap: 0.25em;
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--jj-tr-color, #555555);
  font-size: var(--jj-tr-font-size, 32px);
  line-height: var(--jj-tr-line-height, 1.2);
  font-weight: inherit;
  text-align: inherit;
  overflow: visible;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.jj-text-reveal--align-left {
  justify-content: flex-start;
}

.jj-text-reveal--align-center {
  justify-content: center;
}

.jj-text-reveal--align-right {
  justify-content: flex-end;
}

.jj-text-reveal__inner {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: nowrap;
  max-width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: visible;
}

.jj-text-reveal__first,
.jj-text-reveal__second-wrap,
.jj-text-reveal__second {
  display: inline-block;
  white-space: nowrap;
  line-height: inherit;
  vertical-align: baseline;
}

.jj-text-reveal__first {
  flex: 0 0 auto;
  overflow: hidden;
  animation-name: jjTextRevealShowUp;
  animation-duration: var(--jj-tr-duration, 7s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}

.jj-text-reveal__second-wrap {
  flex: 0 0 auto;
  width: 0;
  margin-left: var(--jj-tr-gap, 0.25em);
  opacity: 0;
  overflow: hidden;
  animation-name: jjTextRevealReveal;
  animation-duration: var(--jj-tr-duration, 7s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}

.jj-text-reveal__second {
  transform: translateX(calc(-1 * var(--jj-tr-reveal-width, 355px)));
  animation-name: jjTextRevealSlideIn;
  animation-duration: var(--jj-tr-duration, 7s);
  animation-timing-function: ease;
  animation-fill-mode: both;
}


/* Wait to animate until JS confirms the element is visible. */
.jj-text-reveal:not(.jj-text-reveal--in-view) .jj-text-reveal__first,
.jj-text-reveal:not(.jj-text-reveal--in-view) .jj-text-reveal__second-wrap,
.jj-text-reveal:not(.jj-text-reveal--in-view) .jj-text-reveal__second {
  animation-play-state: paused;
}

.jj-text-reveal.jj-text-reveal--in-view .jj-text-reveal__first,
.jj-text-reveal.jj-text-reveal--in-view .jj-text-reveal__second-wrap,
.jj-text-reveal.jj-text-reveal--in-view .jj-text-reveal__second {
  animation-play-state: running;
}

.jj-text-reveal--loop-yes .jj-text-reveal__first,
.jj-text-reveal--loop-yes .jj-text-reveal__second-wrap,
.jj-text-reveal--loop-yes .jj-text-reveal__second {
  animation-iteration-count: infinite;
}

.jj-text-reveal--loop-no .jj-text-reveal__first,
.jj-text-reveal--loop-no .jj-text-reveal__second-wrap,
.jj-text-reveal--loop-no .jj-text-reveal__second {
  animation-iteration-count: 1;
}

.jj-text-reveal--loop-no.jj-text-reveal--done .jj-text-reveal__first,
.jj-text-reveal--loop-no.jj-text-reveal--done .jj-text-reveal__second-wrap {
  opacity: 1;
}

.jj-text-reveal--loop-no.jj-text-reveal--done .jj-text-reveal__second-wrap {
  width: var(--jj-tr-reveal-width, auto);
}

.jj-text-reveal--loop-no.jj-text-reveal--done .jj-text-reveal__second {
  transform: translateX(0);
}

@keyframes jjTextRevealShowUp {
  0% { opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes jjTextRevealSlideIn {
  0% { transform: translateX(calc(-1 * var(--jj-tr-reveal-width, 355px))); }
  20% { transform: translateX(calc(-1 * var(--jj-tr-reveal-width, 355px))); }
  35% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes jjTextRevealReveal {
  0% { opacity: 0; width: 0; }
  20% { opacity: 1; width: 0; }
  30% { width: var(--jj-tr-reveal-width, 355px); }
  80% { opacity: 1; }
  100% { opacity: 0; width: var(--jj-tr-reveal-width, 355px); }
}

.jj-text-reveal--loop-no .jj-text-reveal__first {
  animation-name: jjTextRevealShowUpOnce;
}

.jj-text-reveal--loop-no .jj-text-reveal__second-wrap {
  animation-name: jjTextRevealRevealOnce;
}

.jj-text-reveal--loop-no .jj-text-reveal__second {
  animation-name: jjTextRevealSlideInOnce;
}

@keyframes jjTextRevealShowUpOnce {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 1; }
}

@keyframes jjTextRevealSlideInOnce {
  0% { transform: translateX(calc(-1 * var(--jj-tr-reveal-width, 355px))); }
  20% { transform: translateX(calc(-1 * var(--jj-tr-reveal-width, 355px))); }
  35% { transform: translateX(0); }
  100% { transform: translateX(0); }
}

@keyframes jjTextRevealRevealOnce {
  0% { opacity: 0; width: 0; }
  20% { opacity: 1; width: 0; }
  30% { width: var(--jj-tr-reveal-width, 355px); }
  100% { opacity: 1; width: var(--jj-tr-reveal-width, 355px); }
}

@media (max-width: 999px) {
  .jj-text-reveal {
    font-size: var(--jj-tr-mobile-font-size, 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jj-text-reveal__first,
  .jj-text-reveal__second-wrap,
  .jj-text-reveal__second {
    animation: none !important;
    opacity: 1 !important;
    width: auto !important;
    transform: none !important;
  }
}