/**
 * Animated Service Box — Style 3: 3D Icon Flip
 *
 * The box tilts gently in 3D on hover while a gradient border draws itself
 * around the edge. The icon tile performs a full 3D Y-axis flip. Best on a
 * light section background.
 *
 * @package captain-widgets-kit
 * @since   1.6.0
 */

.captwiki-anibox.captwiki-style-3 {
	padding: 36px 32px;
	background: #ffffff;
	border-radius: 18px;
	box-shadow: 0 10px 30px -22px rgba( 17, 24, 39, 0.5 );
	transform-style: preserve-3d;
	transition: transform var( --captwiki-ab-speed ) cubic-bezier( 0.22, 1, 0.36, 1 ), box-shadow var( --captwiki-ab-speed ) ease;
}

/* Drawn gradient border via a masked pseudo-element. */
.captwiki-anibox.captwiki-style-3::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	padding: 2px;
	border-radius: inherit;
	background: linear-gradient( 130deg, var( --captwiki-ab-accent ), var( --captwiki-ab-accent-2 ) );
	-webkit-mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 );
	mask: linear-gradient( #fff 0 0 ) content-box, linear-gradient( #fff 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity var( --captwiki-ab-speed ) ease;
}

.captwiki-anibox.captwiki-style-3:hover {
	transform: perspective( 900px ) rotateX( 6deg ) rotateY( -6deg ) translateY( -6px );
	box-shadow: 0 34px 54px -28px var( --captwiki-ab-accent );
}

.captwiki-anibox.captwiki-style-3:hover::before {
	opacity: 1;
}

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

.captwiki-anibox.captwiki-style-3:hover .captwiki-anibox__media {
	transform: rotateY( 360deg );
	background: linear-gradient( 135deg, var( --captwiki-ab-accent ), var( --captwiki-ab-accent-2 ) );
}

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

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