/**
 * Animated Service Box — Style 4: Slide-Up Overlay
 *
 * A solid accent panel slides up from the bottom on hover to fill the card,
 * flipping the text to white and floating the icon tile. Reads as a clean
 * card at rest and a bold call-out on interaction.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-anibox.captwiki-style-4 {
	padding: 36px 30px;
	background: #ffffff;
	border: 1px solid #eceef3;
	border-radius: 18px;
	transition: box-shadow var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox.captwiki-style-4::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	transform: translateY( 100% );
	background: linear-gradient( 160deg, var( --captwiki-ab-accent ), var( --captwiki-ab-accent-2 ) );
	transition: transform var( --captwiki-ab-speed ) cubic-bezier( 0.22, 1, 0.36, 1 );
}

.captwiki-anibox.captwiki-style-4:hover {
	box-shadow: 0 28px 46px -24px var( --captwiki-ab-accent );
}

.captwiki-anibox.captwiki-style-4:hover::before {
	transform: translateY( 0 );
}

.captwiki-anibox.captwiki-style-4 .captwiki-anibox__media {
	background: color-mix( in srgb, var( --captwiki-ab-accent ) 12%, transparent );
	transition: transform var( --captwiki-ab-speed ) cubic-bezier( 0.34, 1.56, 0.64, 1 ), background var( --captwiki-ab-speed ) ease, box-shadow var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox.captwiki-style-4:hover .captwiki-anibox__media {
	transform: translateY( -6px );
	background: rgba( 255, 255, 255, 0.18 );
	box-shadow: 0 0 0 6px rgba( 255, 255, 255, 0.15 );
}

.captwiki-anibox.captwiki-style-4 .captwiki-anibox__icon {
	transition: color var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox.captwiki-style-4:hover .captwiki-anibox__icon {
	color: #ffffff;
}

.captwiki-anibox.captwiki-style-4 .captwiki-anibox__title,
.captwiki-anibox.captwiki-style-4 .captwiki-anibox__desc {
	transition: color var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox.captwiki-style-4:hover .captwiki-anibox__title,
.captwiki-anibox.captwiki-style-4:hover .captwiki-anibox__desc {
	color: #ffffff;
}

.captwiki-anibox.captwiki-style-4 .captwiki-anibox__btn {
	background: var( --captwiki-ab-accent );
	transition: background-color var( --captwiki-ab-speed ) ease, color var( --captwiki-ab-speed ) ease, transform var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox.captwiki-style-4:hover .captwiki-anibox__btn {
	background: #ffffff;
	color: var( --captwiki-ab-accent );
}

.captwiki-anibox.captwiki-style-4:hover .captwiki-anibox__btn svg {
	fill: var( --captwiki-ab-accent );
}
