/* [project]/src/components/text-3d-flip.css [app-client] (css) */
.text3d {
  vertical-align: middle;
  flex-wrap: wrap;
  display: inline-flex;
}

.text3d__palabra {
  display: inline-flex;
}

.text3d__espacio {
  white-space: pre;
}

.text3d__char {
  --text3d-contenedor: translateZ(-.5lh);
  --text3d-frontal: translateZ(.5lh);
  --text3d-posterior: rotateX(-90deg) translateZ(.5lh);
  --text3d-rotacion: rotateX(90deg);
  --text3d-retraso: 0s;
  transform-style: preserve-3d;
  transform: var(--text3d-contenedor);
  display: inline-block;
  position: relative;
}

.text3d__cara {
  backface-visibility: hidden;
  height: 1lh;
  display: block;
}

.text3d__cara--frontal {
  transform: var(--text3d-frontal);
  position: relative;
}

.text3d__cara--posterior {
  width: 100%;
  transform: var(--text3d-posterior);
  position: absolute;
  top: 0;
  left: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .btn--flip:hover .text3d__char, .btn--flip:focus-visible .text3d__char, .btn--flip--activo .text3d__char {
    animation: .7s cubic-bezier(.34, 1.3, .64, 1) both text3d-giro;
    animation-delay: var(--text3d-retraso);
  }
}

@keyframes text3d-giro {
  0%, 100% {
    transform: var(--text3d-contenedor);
  }

  50% {
    transform: var(--text3d-rotacion);
  }
}

@media (prefers-reduced-motion: reduce) {
  .text3d__char {
    animation: none;
  }
}

.btn--flip:disabled .text3d__char, .btn--flip[aria-disabled="true"] .text3d__char {
  animation: none;
}

.btn--flip {
  isolation: isolate;
}

/*# sourceMappingURL=src_components_text-3d-flip_0zvixi-ui69ic.css.map*/