/**
 * Animated Service Box — Common base CSS ( loads for every style ).
 *
 * Shared structure and the on-scroll entrance reveal only. Per-style files paint
 * the box and own its unique hover / motion behaviour. Two CSS variables —
 * --captwiki-ab-accent and --captwiki-ab-accent-2 — let the colour controls
 * re-theme every style at once, while --captwiki-ab-speed drives timing.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-anibox {
	--captwiki-ab-accent: #6d5efc;
	--captwiki-ab-accent-2: #00d4ff;
	--captwiki-ab-speed: 450ms;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	box-sizing: border-box;
	overflow: hidden;
}

.captwiki-anibox *,
.captwiki-anibox *::before,
.captwiki-anibox *::after {
	box-sizing: border-box;
}

.captwiki-anibox__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
}

/* ── Media ─────────────────────────────────────────────── */
.captwiki-anibox__media-wrap {
	margin-bottom: 22px;
}

.captwiki-anibox__media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 18px;
}

.captwiki-anibox__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 38px;
	line-height: 1;
	color: var( --captwiki-ab-accent );
}

.captwiki-anibox__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-anibox__icon i {
	font-size: inherit;
	font-style: normal;
}

.captwiki-anibox__image {
	display: block;
	width: 64px;
	height: auto;
	max-width: 100%;
}

/* Alignment-aware media placement ( inline style set by the control ). */
.captwiki-anibox[style*="text-align: center"] .captwiki-anibox__media-wrap,
.captwiki-anibox[style*="text-align:center"] .captwiki-anibox__media-wrap {
	display: flex;
	justify-content: center;
}

.captwiki-anibox[style*="text-align: right"] .captwiki-anibox__media-wrap,
.captwiki-anibox[style*="text-align:right"] .captwiki-anibox__media-wrap {
	display: flex;
	justify-content: flex-end;
}

/* ── Body ──────────────────────────────────────────────── */
.captwiki-anibox__title {
	margin: 0 0 12px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	color: #111827;
}

.captwiki-anibox__desc {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #6b7280;
}

/* ── Button ────────────────────────────────────────────── */
.captwiki-anibox__btn-wrap {
	margin-top: 22px;
}

.captwiki-anibox__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: #ffffff;
	background: var( --captwiki-ab-accent );
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color var( --captwiki-ab-speed ) ease, color var( --captwiki-ab-speed ) ease, transform var( --captwiki-ab-speed ) ease, box-shadow var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox__btn-icon {
	display: inline-flex;
	align-items: center;
	transition: transform var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox__btn-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.captwiki-anibox__btn-icon i {
	font-style: normal;
}

.captwiki-anibox__btn:hover .captwiki-anibox__btn-icon--after {
	transform: translateX( 4px );
}

.captwiki-anibox__btn:hover .captwiki-anibox__btn-icon--before {
	transform: translateX( -4px );
}

/* ── On-scroll entrance reveal ─────────────────────────── */
.captwiki-anibox--animate {
	opacity: 0;
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier( 0.22, 1, 0.36, 1 );
	will-change: opacity, transform;
}

.captwiki-anibox--animate[data-captwiki-fx="fade"] {
	transform: none;
}

.captwiki-anibox--animate[data-captwiki-fx="fade-up"] {
	transform: translateY( 40px );
}

.captwiki-anibox--animate[data-captwiki-fx="fade-down"] {
	transform: translateY( -40px );
}

.captwiki-anibox--animate[data-captwiki-fx="zoom-in"] {
	transform: scale( 0.88 );
}

.captwiki-anibox--animate[data-captwiki-fx="flip-up"] {
	transform: perspective( 800px ) rotateX( -28deg );
	transform-origin: bottom center;
}

.captwiki-anibox--animate.is-inview {
	opacity: 1;
	transform: none;
}

/* Editor preview: never hide the box behind the entrance state. */
.elementor-editor-active .captwiki-anibox--animate,
.elementor-editor-preview .captwiki-anibox--animate {
	opacity: 1;
	transform: none;
}

/* Respect reduced-motion preferences. */
@media ( prefers-reduced-motion: reduce ) {
	.captwiki-anibox--animate {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}