/* ==========================================================================
   Icon Capsule — Cube 3D flip (port de Pro Effects, adaptado a .mg-btn)
   El recurso original: pro-effects/assets/buttons/icon-capsule/
   Aplica a botones tipo "separated": .mg-btn > .mg-btn__label + .mg-btn__arrow
   El JS (icon-capsule.js) envuelve cada cápsula en un cubo y agrega .mg-btn--capsule.
   100% CSS-driven en hover.
   ========================================================================== */

:root {
	--pe-capsule-duration: 0.5s;
	--pe-capsule-cube-perspective: 800px;
	--pe-capsule-cube-scale-min: 0.86;
}

/* Los cubos necesitan alineación central (no stretch del .mg-btn) */
.mg-btn--capsule { align-items: center; }

/* Contenedor con perspectiva (reemplaza la posición de la cápsula) */
.pe-capsule-cube-container {
	display: inline-block;
	position: relative;
	perspective: var(--pe-capsule-cube-perspective, 800px);
}

/* El rotador: gira en hover. preserve-3d mantiene las caras en el espacio 3D */
.pe-capsule-cube {
	position: relative;
	display: inline-block;
	transform-style: preserve-3d;
	transform: rotateX(0deg);
	transition: transform var(--pe-capsule-duration, 0.5s) cubic-bezier(0.65, 0, 0.35, 1);
	will-change: transform;
}

/* Hover → rotación de 90° (la cara trasera/clon sube al frente) */
.mg-btn--capsule:hover .pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube {
	transform: rotateX(90deg);
}
.mg-btn--capsule:hover .pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube {
	transform: rotateX(-90deg);
}

/* Cara frontal — en flujo normal, define el tamaño del cubo.
   Empujada al frente media-profundidad (= altura/2) */
.pe-capsule-cube-face--front {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(calc(var(--pe-cube-h, 50px) / 2));
}

/* Cara trasera (clon) — absoluta sobre la frontal, posicionada por geometría 3D */
.pe-capsule-cube-face--bottom {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform-origin: center center;
}
.pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube-face--bottom {
	transform: rotateX(-90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2));
}
.pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube-face--bottom {
	transform: rotateX(90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2));
}

/* Polish opcional: leve escalado de las caras durante el giro (más sensación 3D) */
.mg-btn--capsule .pe-capsule-cube-face--front {
	transition: transform var(--pe-capsule-duration, 0.5s) cubic-bezier(0.65, 0, 0.35, 1);
}
.mg-btn--capsule:hover .pe-capsule-cube-face--front {
	transform: translateZ(calc(var(--pe-cube-h, 50px) / 2)) scale(var(--pe-capsule-cube-scale-min, 0.86));
}
.mg-btn--capsule .pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube-face--bottom {
	transition: transform var(--pe-capsule-duration, 0.5s) cubic-bezier(0.65, 0, 0.35, 1);
}
.mg-btn--capsule:hover .pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube-face--bottom {
	transform: rotateX(-90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2)) scale(1);
}
/* estado base de la cara trasera con scale reducido (para que "crezca" al entrar) */
.mg-btn--capsule .pe-capsule-cube-container[data-dir="up"] .pe-capsule-cube-face--bottom {
	transform: rotateX(-90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2)) scale(var(--pe-capsule-cube-scale-min, 0.86));
}
/* misma lógica para dirección "down" (flecha) */
.mg-btn--capsule .pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube-face--bottom {
	transition: transform var(--pe-capsule-duration, 0.5s) cubic-bezier(0.65, 0, 0.35, 1);
	transform: rotateX(90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2)) scale(var(--pe-capsule-cube-scale-min, 0.86));
}
.mg-btn--capsule:hover .pe-capsule-cube-container[data-dir="down"] .pe-capsule-cube-face--bottom {
	transform: rotateX(90deg) translateZ(calc(var(--pe-cube-h, 50px) / 2)) scale(1);
}

/* Accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
	.pe-capsule-cube,
	.pe-capsule-cube-face--front,
	.pe-capsule-cube-face--bottom {
		transition: none !important;
		transform: none !important;
	}
	.pe-capsule-cube-face--bottom { display: none; }
}