/*
 * Tabula signature motion (Tabula Core).
 * Only active when <html> has the class "sig-js" (added in <head> by the plugin,
 * skipped for people who prefer reduced motion and inside the Elementor editor).
 * Without it, everything shows in its final state.
 */

/* 1. Artwork assembles: hide shapes until the script places them. */
.sig-js .sig-assemble:not(.is-ready) .sig-shape { opacity: 0; }
.sig-assemble .sig-shape { transition: translate 0.6s cubic-bezier(.22,1,.36,1); }

/* Mouse follow (any element with sig-mouse). */
.sig-mouse { transition: translate 0.6s cubic-bezier(.22,1,.36,1); }

/* 2. Live AI answer: hide bubbles until their text starts, blinking caret while typing. */
.sig-js .sig-chat .sig-type:not(.is-started) { opacity: 0; }
.sig-js .sig-chat .e-div-block-base:has(> .sig-type:not(.is-started)) { opacity: 0; transform: translateY(8px); }
.sig-chat .e-div-block-base:has(> .sig-type) { transition: opacity .35s ease, transform .35s ease; }
.sig-chat .sig-type.is-typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1.1em;
	margin-left: 2px;
	vertical-align: -0.15em;
	background: var(--brand-mint-deep, #1B7A60);
	animation: sigCaret .8s steps(1) infinite;
}
.sig-chat .sig-thinking {
	display: inline-flex;
	gap: 5px;
	padding: 0.6rem 0.9rem;
	border-radius: 18px;
	background: var(--surface-off-white, #F6F9F8);
	align-self: flex-start;
}
.sig-chat .sig-thinking i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand-mint, #5CC9A9);
	animation: sigDot 1s ease-in-out infinite;
}
.sig-chat .sig-thinking i:nth-child(2) { animation-delay: .15s; }
.sig-chat .sig-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes sigCaret { 50% { opacity: 0; } }
@keyframes sigDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }

/* 3. AI Answer Check flip. */
.sig-flip { transition: transform .18s ease-in, background-color .2s, color .2s; }
.sig-flip.is-no { background-color: #F6E4E1; color: #A33A2E; }
.sig-flip.is-yes { background-color: var(--brand-mint-light, #ACFCD2); color: var(--brand-mint-deep, #1B7A60); }
.sig-flip.is-flipping { transform: rotateY(90deg) scale(.9); }
.sig-flip.is-yes.is-done { animation: sigPop .35s ease-out; }
.sig-flip-state { transition: background-color .3s, color .3s; }
.sig-flip-state.is-after { background-color: var(--brand-mint, #5CC9A9); color: #000; animation: sigPop .4s ease-out; }
@keyframes sigPop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* 4. Clean-slate wipe: a mint bar sweeps across and reveals the element. */
.sig-js .sig-wipe { clip-path: inset(-6px 100% -6px 0); }
.sig-js .sig-wipe.is-in { animation: sigWipe .95s cubic-bezier(.65,0,.35,1) var(--sig-d, 0s) forwards; }
.sig-js .sig-wipe::after {
	content: "";
	position: absolute;
	top: -6px;
	bottom: -6px;
	left: -12px;
	width: 12px;
	border-radius: 999px;
	background: var(--brand-mint, #5CC9A9);
	box-shadow: 0 0 18px rgba(92, 201, 169, .65);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
}
.sig-js .sig-wipe.is-in::after { animation: sigBar .95s cubic-bezier(.65,0,.35,1) var(--sig-d, 0s) forwards; }
.sig-js .sig-wipe.is-done { clip-path: none; animation: none; }
.sig-js .sig-wipe.is-done::after { animation: none; opacity: 0; }
@keyframes sigWipe { to { clip-path: inset(-6px -6px -6px 0); } }
@keyframes sigBar { 0% { left: -12px; opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }