/*
 * Simulazione della prenotazione su WhatsApp nella sezione finale di
 * Autonomia Digitale (template-parts/autonomia-whatsapp-call.php).
 *
 * Riprende telefono e conversazione della landing di San Salvo, adattati
 * alla sezione scura .launch-section: anello tratteggiato chiaro, alone
 * arancione del brand. Tutto sta sotto .ad-phone-stage, con il prefisso ad-,
 * per non toccare il resto della pagina.
 *
 * I messaggi si nascondono solo quando lo script ha aggiunto .ad-anim: senza
 * JavaScript la conversazione resta visibile per intero.
 */

.ad-phone-stage {
	position: relative;
	display: flex;
	justify-content: center;
	padding: 20px 0;
}
.ad-phone-stage::before {
	content: '';
	position: absolute;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(circle, #ff5a1f40, transparent 68%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.ad-phone-stage::after {
	content: '';
	position: absolute;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	border: 1px dashed #ffffff26;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: ad-spin 60s linear infinite;
	pointer-events: none;
}

.ad-phone {
	position: relative;
	z-index: 1;
	width: min(320px, 82vw);
	height: auto;
	font-family: inherit;
	filter: drop-shadow(0 40px 60px #00000080);
	animation: ad-phone-float 7s ease-in-out infinite;
}

/* messaggi e digitazione */
.ad-phone .ad-typing { opacity: 0; }
.ad-anim .ad-phone .ad-msg,
.ad-anim .ad-phone .ad-typing {
	opacity: 0;
	transform: translateY(12px) scale(.96);
	transform-box: fill-box;
	transform-origin: center bottom;
	transition: opacity .45s ease, transform .45s cubic-bezier(.2, .9, .3, 1.2);
}
.ad-anim .ad-phone .ad-show { opacity: 1; transform: none; }
.ad-phone .ad-typing circle { animation: ad-typing 1.2s ease-in-out infinite; }
.ad-phone .ad-typing circle:nth-child(3) { animation-delay: .15s; }
.ad-phone .ad-typing circle:nth-child(4) { animation-delay: .3s; }

/* «sta scrivendo…» al posto di «online» */
.ad-phone .ad-status-online { transition: opacity .3s; }
.ad-phone .ad-status-typing { opacity: 0; transition: opacity .3s; }
.ad-phone.ad-is-typing .ad-status-typing { opacity: 1; }
.ad-phone.ad-is-typing .ad-status-online { opacity: 0; }

/* la conferma della call */
.ad-booked {
	position: absolute;
	z-index: 2;
	right: 2%;
	bottom: 16%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: #fff;
	border: 1px solid #e4e4e7;
	border-radius: 14px;
	box-shadow: 0 20px 45px #00000059;
	color: #111;
	text-align: left;
}
.ad-anim .ad-booked {
	opacity: 0;
	transform: translateY(14px) scale(.95);
	transition: .5s cubic-bezier(.2, .9, .3, 1.2);
}
.ad-anim .ad-booked.ad-show { opacity: 1; transform: none; }
.ad-booked i {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: #ff5a1f;
	color: #fff;
	font-style: normal;
	font-weight: 900;
}
.ad-booked strong {
	display: block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.02em;
}
.ad-booked span { font-size: 12px; color: #69696f; }

@keyframes ad-phone-float {
	0%, 100% { transform: translateY(0) rotate(-2deg); }
	50%      { transform: translateY(-14px) rotate(-1deg); }
}
@keyframes ad-typing {
	0%, 60%, 100% { opacity: .35; transform: translateY(0); }
	30%           { opacity: 1; transform: translateY(-3px); }
}
@keyframes ad-spin {
	to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* il pulsante lungo nella lettera non deve uscire dallo schermo */
.founder-letter-close .group-cta .group-cta-button { white-space: normal; }

@media (max-width: 700px) {
	.ad-phone-stage::after { width: 340px; height: 340px; }
	.ad-phone-stage::before { width: 300px; height: 300px; }
	.ad-booked { right: 0; bottom: 8%; }
}

@media (prefers-reduced-motion: reduce) {
	.ad-phone,
	.ad-phone-stage::after,
	.ad-phone .ad-typing circle { animation: none; }
}