/**
 * Flipbox — Style 4: Slide Reveal
 *
 * The back face slides up over the front face like a curtain, while the
 * front content drifts slightly upwards for depth.
 *
 * @package captain-widgets-kit
 * @since   1.7.0
 */

.captwiki-flipbox.captwiki-style-4 {
	perspective: none;
	overflow: hidden;
	border-radius: 12px;
}

.captwiki-flipbox.captwiki-style-4 .captwiki-flipbox__face {
	-webkit-backface-visibility: visible;
	backface-visibility: visible;
	transition: transform var( --captwiki-fb-duration ) cubic-bezier( 0.65, 0, 0.35, 1 );
}

.captwiki-flipbox.captwiki-style-4 .captwiki-flipbox__front .captwiki-flipbox__content {
	transition: transform var( --captwiki-fb-duration ) cubic-bezier( 0.65, 0, 0.35, 1 );
}

.captwiki-flipbox.captwiki-style-4 .captwiki-flipbox__back {
	transform: translateY( 100% );
}

.captwiki-flipbox.captwiki-style-4.captwiki-flipbox--hover:hover .captwiki-flipbox__back,
.captwiki-flipbox.captwiki-style-4.captwiki-flipbox--hover:focus-within .captwiki-flipbox__back,
.captwiki-flipbox.captwiki-style-4.is-flipped .captwiki-flipbox__back {
	transform: translateY( 0 );
}

.captwiki-flipbox.captwiki-style-4.captwiki-flipbox--hover:hover .captwiki-flipbox__front .captwiki-flipbox__content,
.captwiki-flipbox.captwiki-style-4.captwiki-flipbox--hover:focus-within .captwiki-flipbox__front .captwiki-flipbox__content,
.captwiki-flipbox.captwiki-style-4.is-flipped .captwiki-flipbox__front .captwiki-flipbox__content {
	transform: translateY( -24px );
}
