/* -----------------------------------------
   Soulmix - Hover de botones
   Al pasar el cursor: la caja del botón hace un zoom leve y su texto sale
   por arriba y vuelve a entrar por abajo (mismo lenguaje de máscara que la
   animación de entrada de los títulos, ver text-reveal.css).
   Las flechas de los botones que las llevan conservan su propia animación
   diagonal, definida en producto.css: aquí no se toca nada de eso.
   ----------------------------------------- */

/*
 * El zoom va en el botón, no en el texto: se escala la caja completa. Como
 * .btn ya define `transition: opacity`, aquí se redeclara incluyendo
 * transform para que ambas propiedades animen.
 *
 * transform en un inline-block/inline-flex funciona sin cambiar el flujo;
 * los botones del tema ya son inline-block (.btn) o inline-flex
 * (.producto__cta, .fruta-card__cta), así que no hace falta forzar display.
 */
/*
 * El botón de Contacto se nombra como `.header-nav .nav-link--contact` (y no
 * solo `.nav-link--contact`) a propósito: header.css declara
 * `.header-nav .nav-link { transition: color }`, que con mayor
 * especificidad borraba el transform de esta transición y hacía que el zoom
 * saltase de golpe en vez de animarse. Se igualan la especificidad y se
 * incluye `color` para no perder el hover naranja de la cabecera.
 */
.btn,
.flavor-btn,
.recetas-filter-btn,
.header-nav .nav-link--contact {
	/*
	 * --btn-text-delay: cuánto espera el texto desde que empieza el zoom.
	 * Deja que el aumento de la caja se lea como un gesto propio antes de
	 * que el texto se mueva, en vez de arrancar todo a la vez.
	 */
	--btn-text-delay: 0.16s;
	transition: opacity 0.3s ease, color 0.2s ease, transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.btn:hover,
.flavor-btn:hover,
.recetas-filter-btn:hover,
.nav-link--contact:hover {
	transform: scale(1.04);
}

/*
 * Cada palabra es su propia ventana de recorte, con overflow:hidden.
 *
 * No se recorta en el botón: ahí el overflow convive con el transform:scale
 * del hover en el mismo elemento y el duplicado en position:absolute se
 * escapaba de la caja, asomando por debajo del botón.
 *
 * La holgura para que las tildes no se decapiten se consigue con
 * line-height (que agranda la caja de la palabra por arriba y por abajo a
 * partes iguales) compensado con márgenes negativos del mismo valor, de
 * modo que el botón no gana ni un píxel de altura.
 */
.btn-reveal__word {
	display: inline-block;
	overflow: hidden;
	/*
	 * La ventana es más alta que el texto (1.55em frente a ~1.2em de caja
	 * de línea) para que las tildes no se decapiten al recortar, y los
	 * márgenes negativos devuelven ese excedente para que el botón no gane
	 * altura.
	 *
	 * Centrado vertical: `vertical-align: top` dejaba ~3px más de aire
	 * abajo que arriba, y `middle` invertía el desequilibrio exactamente
	 * igual (3px de más arriba), porque alinea con el centro de la
	 * x-height, no con el de la caja. El punto correcto está justo entre
	 * ambos, así que se parte de `middle` y se baja la mitad de esa
	 * diferencia con un desplazamiento fino, que deja el texto centrado.
	 */
	line-height: 1.55;
	height: 1.55em;
	margin-block: -0.275em;
	vertical-align: middle;
	/* `relative` sirve además de ancla para el duplicado en absolute. */
	position: relative;
	top: -0.1em;
}

.btn-reveal__word-inner {
	display: inline-block;
	transform: translateY(0);
	/*
	 * Movimiento más directo que el del botón: el zoom de la caja es el
	 * gesto suave, y el texto responde con decisión en vez de deslizarse.
	 * La misma curva y duración en salida y entrada mantiene las dos
	 * mitades del relevo acompasadas.
	 */
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Salida: el texto sube y desaparece por el borde superior de la ventana.
 * 100% del alto de la ventana: la palabra sale justo por el borde.
 */
.btn:hover .btn-reveal__word-inner,
.flavor-btn:hover .btn-reveal__word-inner,
.recetas-filter-btn:hover .btn-reveal__word-inner,
.nav-link--contact:hover .btn-reveal__word-inner {
	transform: translateY(-100%);
}

/*
 * Entrada: un duplicado del texto espera fuera de la ventana, por abajo, y
 * sube a su sitio. Se apila sobre el original con posicionamiento absoluto
 * para que no añada anchura al botón (si no, el texto contaría dos veces y
 * el botón sería el doble de ancho).
 */
.btn-reveal__word-in {
	position: absolute;
	top: 0;
	left: 0;
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn:hover .btn-reveal__word-in,
.flavor-btn:hover .btn-reveal__word-in,
.recetas-filter-btn:hover .btn-reveal__word-in,
.nav-link--contact:hover .btn-reveal__word-in {
	transform: translateY(0);
}

/*
 * Secuencia del hover: primero crece la caja del botón y, ya empezado ese
 * gesto, arranca el texto. Todas las palabras se mueven a la vez, como un
 * bloque: a diferencia de los títulos (que sí van en cascada), el texto de
 * un botón es corto y escalonarlo se leía como un desajuste, no como ritmo.
 */
.btn-reveal__word-inner,
.btn-reveal__word-in {
	transition-delay: var(--btn-text-delay);
}

/*
 * Al quitar el cursor el texto vuelve de inmediato, sin el retardo de
 * entrada: si se mantuviera, el botón ya habría recuperado su tamaño
 * mientras el texto seguía quieto, y la vuelta se sentiría desacoplada.
 */
.btn:not(:hover) .btn-reveal__word-inner,
.btn:not(:hover) .btn-reveal__word-in,
.flavor-btn:not(:hover) .btn-reveal__word-inner,
.flavor-btn:not(:hover) .btn-reveal__word-in,
.recetas-filter-btn:not(:hover) .btn-reveal__word-inner,
.recetas-filter-btn:not(:hover) .btn-reveal__word-in,
.nav-link--contact:not(:hover) .btn-reveal__word-inner,
.nav-link--contact:not(:hover) .btn-reveal__word-in {
	transition-delay: 0s;
}

/* Respeta la preferencia de menos movimiento del sistema. */
@media (prefers-reduced-motion: reduce) {
	.btn:hover,
	.flavor-btn:hover,
	.recetas-filter-btn:hover,
	.nav-link--contact:hover {
		transform: none;
	}

	.btn-reveal__word-inner,
	.btn-reveal__word-in,
	.btn:hover .btn-reveal__word-inner,
	.btn:hover .btn-reveal__word-in,
	.flavor-btn:hover .btn-reveal__word-inner,
	.flavor-btn:hover .btn-reveal__word-in,
	.recetas-filter-btn:hover .btn-reveal__word-inner,
	.recetas-filter-btn:hover .btn-reveal__word-in,
	.nav-link--contact:hover .btn-reveal__word-inner,
	.nav-link--contact:hover .btn-reveal__word-in {
		transition: none;
		transform: none;
	}

	/* Sin animación, el duplicado sobra: se oculta para no solaparse. */
	.btn-reveal__word-in {
		display: none;
	}
}