/*
 * PBplan — animaciones: título de la portada, árbol y hover de botones ya
 * están en theme.css. Todo va dentro de prefers-reduced-motion:
 * no-preference, así que con «reducir movimiento» no se anima nada.
 * La clase .pbplan-anim la pone en <html> un script de una línea en <head>
 * (functions.php) solo si el usuario no pidió reducir movimiento.
 */

/* Líneas del título (animaciones.js envuelve cada línea). */
.pbplan-portada h1 .pbplan-linea {
	display: inline-block;
	overflow: hidden;
	padding: 0.02em 0.04em 0.08em 0;
	margin-bottom: -0.06em;
	vertical-align: top;
}

.pbplan-portada h1 .pbplan-linea__in {
	display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
	/* Hasta que animaciones.js divide el título, no se muestra; si el JS no
	 * carga, aparece igual a los 1,5 s. */
	.pbplan-anim .pbplan-portada h1:not(.is-listo) {
		visibility: hidden;
		animation: pbplan-mostrar 0s 1.5s forwards;
	}

	/* «Stock less.» y «Sell more.» suben línea por línea. */
	.pbplan-anim .pbplan-portada h1 .pbplan-linea__in {
		animation: pbplan-subir 0.9s var(--wp--custom--motion--ease-out) both;
	}

	.pbplan-anim .pbplan-portada h1 .pbplan-linea:nth-of-type(2) .pbplan-linea__in {
		animation-delay: 0.14s;
	}

	/* Luego el amarillo de «Sell more.» se pinta de izquierda a derecha. */
	.pbplan-anim .pbplan-portada h1 mark::before {
		animation: pbplan-pintar 0.7s var(--wp--custom--motion--ease-wipe) 0.75s both;
	}

	.pbplan-anim .pbplan-portada__bajada,
	.pbplan-anim .pbplan-portada .wp-block-buttons {
		animation: pbplan-aparecer 0.8s ease 1s both;
	}

	.pbplan-anim .pbplan-portada .wp-block-buttons {
		animation-delay: 1.15s;
	}

	/* Árbol: los tallos crecen desde abajo, las dos hojas sueltas aparecen
	 * al final y después se mece ±1,6° cada 7 s. */
	.pbplan-arbol .pbplan-planta {
		transform-box: view-box;
		transform-origin: 393px 573px;
		animation: pbplan-mecer 7s ease-in-out 0.3s infinite;
	}

	.pbplan-arbol .pbplan-crecer {
		animation: pbplan-crecer 2s var(--wp--custom--motion--ease-grow) 0.3s both;
	}

	.pbplan-arbol .pbplan-hoja {
		transform-box: fill-box;
	}

	.pbplan-arbol .pbplan-hoja--izq {
		transform-origin: 95% 100%;
		animation: pbplan-abrir-izq 1s var(--wp--custom--motion--ease-pop) 2s both;
	}

	.pbplan-arbol .pbplan-hoja--arriba {
		transform-origin: 30% 100%;
		animation: pbplan-abrir-arriba 1s var(--wp--custom--motion--ease-pop) 2.3s both;
	}
}

@keyframes pbplan-mostrar {
	to { visibility: visible; }
}

@keyframes pbplan-subir {
	from { transform: translateY(105%); }
	to { transform: none; }
}

@keyframes pbplan-pintar {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes pbplan-aparecer {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@keyframes pbplan-crecer {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

@keyframes pbplan-abrir-izq {
	from { transform: scale(0) rotate(25deg); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes pbplan-abrir-arriba {
	from { transform: scale(0) rotate(-20deg); opacity: 0; }
	to { transform: none; opacity: 1; }
}

@keyframes pbplan-mecer {
	0%, 100% { transform: rotate(-1.6deg); }
	50% { transform: rotate(1.6deg); }
}