/*
 * Entrada de Fersho AI: una sola fuente para la portada (demo «Mira cómo
 * funciona», fd-home-b2b.css) y la bienvenida del cotizador. El marcado es
 * fd_fersho_escena() (inc/fersho.php). Quien la use agrega las clases
 * .is-intro e .is-intro-sale a su contenedor; la portada entra por
 * .fdb-anima .fdb-chat y el cotizador por .cia-bienvenida.
 */

.fdb-fz-escena {
	--fdb-demo-fondo: #0B0F14;
	--fdb-blanco: #FFFFFF;
	--fdb-texto-3: #B5B5AE;
	position: absolute;
	inset: 0;
	z-index: 5;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	background: radial-gradient(ellipse at 50% 100%, #3A1D08, var(--fdb-demo-fondo) 62%);
}

.fdb-fz-escena__portal {
	position: absolute;
	left: 50%;
	bottom: -40px;
	width: 340px;
	height: 90px;
	margin-left: -170px;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(249, 115, 22, .75), rgba(249, 115, 22, 0) 70%);
	opacity: .55;
}

.fdb-fz-escena__entra {
	filter: drop-shadow(0 20px 30px rgba(249, 115, 22, .45));
}

.fdb-fz-escena__saluda {
	transform-origin: 50% 90%;
}

.fdb-fz-escena__hola {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-width: 340px;
	padding: 14px 18px;
	border-radius: 16px;
	background: rgba(18, 23, 34, .92);
	border: 1px solid #2E3646;
	text-align: center;
}

.fdb-fz-escena__hola strong {
	font-size: 17px;
	color: var(--fdb-blanco);
}

.fdb-fz-escena__hola span {
	font-size: 13px;
	line-height: 1.45;
	color: var(--fdb-texto-3);
}

:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro .fdb-fz-escena {
	display: flex;
}

@media (prefers-reduced-motion: no-preference) {
	@keyframes fdb-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
	@keyframes fdb-sube-suave { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
	@keyframes fdb-portal { 0% { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: .55; transform: scale(1); } }
	@keyframes fdb-fz-entra { 0% { opacity: 0; transform: translateY(260px) scale(.5); } 55% { opacity: 1; transform: translateY(-18px) scale(1.06); } 75% { transform: translateY(6px) scale(.98); } 100% { transform: none; } }
	@keyframes fdb-saluda { 0%, 100% { transform: rotate(0deg); } 20% { transform: rotate(-9deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(3deg); } }
	@keyframes fdb-fz-atras { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40px) scale(.12); } }
	@keyframes fdb-baja-fuera { to { opacity: 0; transform: translateY(14px) scale(.95); } }
	@keyframes fdb-desvanece { to { opacity: 0; } }

	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro .fdb-fz-escena__portal { animation: fdb-portal 1.6s ease-out both; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro .fdb-fz-escena__entra { animation: fdb-fz-entra 1.1s .2s cubic-bezier(.2, .9, .3, 1.2) both; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro .fdb-fz-escena__saluda { animation: fdb-saluda 1.1s 1.3s ease-in-out both; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro .fdb-fz-escena__flota { animation: fdb-flota 3.4s 2.5s ease-in-out infinite; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro .fdb-fz-escena__hola { animation: fdb-sube-suave .5s 1.2s cubic-bezier(.2, .8, .2, 1) both; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro-sale .fdb-fz-escena { pointer-events: none; animation: fdb-desvanece .7s .35s ease-in forwards; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro-sale .fdb-fz-escena__entra { animation: fdb-fz-atras .75s cubic-bezier(.55, 0, .75, .2) forwards; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro-sale .fdb-fz-escena__hola { animation: fdb-baja-fuera .35s ease-in forwards; }
	:is(.fdb-anima .fdb-chat, .cia-bienvenida).is-intro-sale .fdb-fz-escena__portal { animation: fdb-baja-fuera .5s ease-in forwards; }
}