/**
 * Pro Effects — Center Reveal (per-letter 3D Cube)
 *
 * Cada letra del button text es un mini cubo CSS 3D con 2 caras (front +
 * bottom). En hover cada cubo rota +90° o -90° en X (según direction). Por
 * geometria, la cara front sube hasta el borde superior del button (atravesando
 * el padding) y la bottom sube hasta la posicion front.
 *
 * El stagger nace en la letra del CENTRO (--pe-cr-idx=0) y se propaga hacia
 * los lados. transition-delay = idx × stagger.
 */

/* IMPORTANTE: clip al button. Como cada cube depth = button height, las
 * caras bottom inicialmente extienden bajo el button. overflow:hidden
 * clips cualquier cara fuera del area visible del button. */
.elementor-button.pe-cr-active {
  overflow: hidden;
}

/* Wrapper de cada char-cube — aplica perspective per-letter (cada letra
 * es su propio mini-cubo independiente). */
.elementor-button.pe-cr-active .pe-cr-char-cube {
  display: inline-block;
  position: relative;
  perspective: var(--pe-cr-perspective, 800px);
  vertical-align: baseline;
  line-height: 1;
}

/* Cube — el rotador 3D. Hereda dimensiones del front face (normal flow). */
.elementor-button.pe-cr-active .pe-cr-cube {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  transition: transform var(--pe-cr-dur, 0.5s) cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--pe-cr-idx, 0) * var(--pe-cr-stagger, 0.05s));
  transform: rotateX(0deg);
  will-change: transform;
}

/* Direction Up: rotateX +90 → bottom sube a posicion front */
.elementor-button.pe-cr-active[data-pe-cr-dir="up"]:hover .pe-cr-cube {
  transform: rotateX(90deg);
}
/* Direction Down: rotateX -90 → top sube a posicion front */
.elementor-button.pe-cr-active[data-pe-cr-dir="down"]:hover .pe-cr-cube {
  transform: rotateX(-90deg);
}

/* Front face — NORMAL FLOW. Define el tamaño del cubo (= char glyph). */
.elementor-button.pe-cr-active .pe-cr-face--front {
  position: relative;
  display: inline-block;
  transform: translateZ(calc(var(--pe-cr-cube-h, 50px) / 2));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Bottom face — ABSOLUTE encima del front. Posicion 3D depende del data-dir. */
.elementor-button.pe-cr-active .pe-cr-face--bottom {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
}
.elementor-button.pe-cr-active[data-pe-cr-dir="up"] .pe-cr-face--bottom {
  /* Posicionada como cara INFERIOR del cubo */
  transform: rotateX(-90deg) translateZ(calc(var(--pe-cr-cube-h, 50px) / 2));
}
.elementor-button.pe-cr-active[data-pe-cr-dir="down"] .pe-cr-face--bottom {
  /* Posicionada como cara SUPERIOR del cubo */
  transform: rotateX(90deg) translateZ(calc(var(--pe-cr-cube-h, 50px) / 2));
}

/* Color hover — solo aplica al clone (la cara que entra) */
.elementor-button.pe-cr-active[style*="--pe-cr-color-hover"]:hover .pe-cr-face--bottom {
  color: var(--pe-cr-color-hover);
}

/* ─── Return Mode: LINEAR ─────────────────────────────────────────────────
 * Idle (no hover) tiene transition-delay 0 → la salida es uniforme.
 * En :hover el delay es idx*stagger → entry sigue siendo center-out staggered. */
.elementor-button.pe-cr-active[data-pe-cr-return="linear"] .pe-cr-cube,
.elementor-button.pe-cr-active[data-pe-cr-return="linear"] .pe-cr-face {
  transition-delay: 0s;
}
.elementor-button.pe-cr-active[data-pe-cr-return="linear"]:hover .pe-cr-cube,
.elementor-button.pe-cr-active[data-pe-cr-return="linear"]:hover .pe-cr-face {
  transition-delay: calc(var(--pe-cr-idx, 0) * var(--pe-cr-stagger, 0.05s));
}

/* ─── Faces Scale Effect (opcional) ───────────────────────────────────────
 * Front: scale 1 idle → scale_min hover. Bottom: scale_min → scale 1. */
.elementor-button.pe-cr-active[data-pe-cr-scale="yes"] .pe-cr-face {
  transition: transform var(--pe-cr-dur, 0.5s) cubic-bezier(0.65, 0, 0.35, 1),
              color     var(--pe-cr-dur, 0.5s) ease;
  transition-delay: calc(var(--pe-cr-idx, 0) * var(--pe-cr-stagger, 0.05s));
}
.elementor-button.pe-cr-active[data-pe-cr-scale="yes"]:hover .pe-cr-face--front {
  transform: translateZ(calc(var(--pe-cr-cube-h, 50px) / 2)) scale(var(--pe-cr-scale-min, 0.65));
}
.elementor-button.pe-cr-active[data-pe-cr-scale="yes"][data-pe-cr-dir="up"] .pe-cr-face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--pe-cr-cube-h, 50px) / 2)) scale(var(--pe-cr-scale-min, 0.65));
}
.elementor-button.pe-cr-active[data-pe-cr-scale="yes"][data-pe-cr-dir="up"]:hover .pe-cr-face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--pe-cr-cube-h, 50px) / 2)) scale(1);
}
.elementor-button.pe-cr-active[data-pe-cr-scale="yes"][data-pe-cr-dir="down"] .pe-cr-face--bottom {
  transform: rotateX(90deg) translateZ(calc(var(--pe-cr-cube-h, 50px) / 2)) scale(var(--pe-cr-scale-min, 0.65));
}
.elementor-button.pe-cr-active[data-pe-cr-scale="yes"][data-pe-cr-dir="down"]:hover .pe-cr-face--bottom {
  transform: rotateX(90deg) translateZ(calc(var(--pe-cr-cube-h, 50px) / 2)) scale(1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-cr-active .pe-cr-cube,
  .elementor-button.pe-cr-active .pe-cr-face {
    transition: color 0.2s ease;
    transform: none !important;
    transition-delay: 0s !important;
  }
}