.appear-flip-letters {
  perspective: 1000px;
  min-width: 0.04em;
  /* optional spacing between letters */
}

/* Each letter becomes a 3D rotator */
.appear-flip-letters span {
  position: relative;
  display: inline-grid;
  place-items: center;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  opacity: 0;

  /* stagger: set via --i from JS (fallback 0) */
  min-width: 0.3em;
  /* keeps spaces & narrow letters sized nicely */
}

.appear-flip-letters:hover span,
.appear-flip-letters.is-on span {
  animation: letter-flip 0.6s ease-in forwards;

}

@keyframes letter-flip {

  20%,
  to {
    opacity: 1;
  }

  to {
    transform: rotateY(0) translateX(0);

  }
}


.appear-fade-in {
  opacity: 0;
  transition: 1.5s ease-in-out;

}

.appear-fade-in.is-on {
  opacity: 1;
}