/**
 * makeiteasy/flip-card — the 3D flip, front end only (viewStyle)
 *
 * This is the Avada / Fusion "classic" flipbox mechanism. Rather than rotating a
 * single container in preserve-3d, each face rotates independently by 180deg
 * inside a shared perspective, with backface-visibility hiding whichever face is
 * turned away. The z-index swap decides which face takes pointer events.
 *
 * Per-axis rotations are held in custom properties so the state rules below stay
 * to a single pair, instead of four near-identical copies.
 *
 * Deliberately not loaded in the editor: :hover and :focus-within would flip the
 * card while you were editing it, and rotated text is not editable. The editor
 * uses the flat .show-overlay toggle in editor.css instead.
 */

.wp-block-makeiteasy-flip-card {
	perspective: var(--mie-flip-perspective, 1000px);

	/* Keeps the rotation from shimmering on the compositor in WebKit. */
	backface-visibility: hidden;
	transform: translate3d(0, 0, 0);
}

/* --- rotation per direction ---------------------------------------------- */

.wp-block-makeiteasy-flip-card.mie-flip-right {
	--mie-front-rest: rotateY(0deg);
	--mie-front-flipped: rotateY(180deg);
	--mie-back-rest: rotateY(-180deg);
	--mie-back-flipped: rotateY(0deg);
}

.wp-block-makeiteasy-flip-card.mie-flip-left {
	--mie-front-rest: rotateY(0deg);
	--mie-front-flipped: rotateY(-180deg);
	--mie-back-rest: rotateY(180deg);
	--mie-back-flipped: rotateY(0deg);
}

.wp-block-makeiteasy-flip-card.mie-flip-up {
	--mie-front-rest: rotateX(0deg);
	--mie-front-flipped: rotateX(180deg);
	--mie-back-rest: rotateX(-180deg);
	--mie-back-flipped: rotateX(0deg);
}

.wp-block-makeiteasy-flip-card.mie-flip-down {
	--mie-front-rest: rotateX(0deg);
	--mie-front-flipped: rotateX(-180deg);
	--mie-back-rest: rotateX(180deg);
	--mie-back-flipped: rotateX(0deg);
}

/* --- resting state ------------------------------------------------------- */

.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-front,
.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-back {
	backface-visibility: hidden;
	transition: transform var(--mie-flip-duration, 500ms)
		var(--mie-flip-easing, cubic-bezier(0.2, 0.85, 0.4, 1.275));
}

.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-front {
	z-index: 2;
	transform: var(--mie-front-rest, rotateY(0deg));
}

.wp-block-makeiteasy-flip-card .wp-block-makeiteasy-flip-card-back {
	z-index: 1;
	transform: var(--mie-back-rest, rotateY(-180deg));
}

/*
 * --- flipped by class ---------------------------------------------------
 *
 * view.js sets .mie-flipped on click cards, and on hover cards when the device
 * has no hover-capable pointer. Ungated, so it works on every device.
 */

.wp-block-makeiteasy-flip-card.mie-flipped .wp-block-makeiteasy-flip-card-front {
	z-index: 1;
	transform: var(--mie-front-flipped, rotateY(180deg));
}

.wp-block-makeiteasy-flip-card.mie-flipped .wp-block-makeiteasy-flip-card-back {
	z-index: 2;
	transform: var(--mie-back-flipped, rotateY(0deg));
}

/*
 * --- flipped by pointer or keyboard -------------------------------------
 *
 * Hover-driven flipping applies only on a wide viewport WITH a hover pointer.
 * Everywhere else the card falls back to tap-to-flip, driven by view.js.
 *
 * Two separate reasons, and both are needed:
 *   - hover: none — on touch, :hover sticks after a tap and :focus-within
 *     sticks after focus, so a hover card would flip once and then refuse to
 *     flip back.
 *   - max-width — at the mobile breakpoint the layout is a phone layout even
 *     when the browser still reports a mouse, which is what a narrow desktop
 *     window and the editor's device preview do.
 *
 * 767px/768px is this theme's mobile breakpoint, matching Kadence and
 * assets/scss/arc-style.scss. KEEP IN SYNC with TAP_QUERY in view.js, which
 * must stay the exact complement of this condition.
 *
 * :where() keeps specificity flat, so these win on source order alone.
 */

@media (hover: hover) and (min-width: 768px) {

	.wp-block-makeiteasy-flip-card:where(
			.flip-on-hover:hover,
			.flip-on-hover:focus,
			.flip-on-hover:focus-within
		) .wp-block-makeiteasy-flip-card-front {
		z-index: 1;
		transform: var(--mie-front-flipped, rotateY(180deg));
	}

	.wp-block-makeiteasy-flip-card:where(
			.flip-on-hover:hover,
			.flip-on-hover:focus,
			.flip-on-hover:focus-within
		) .wp-block-makeiteasy-flip-card-back {
		z-index: 2;
		transform: var(--mie-back-flipped, rotateY(0deg));
	}
}

.wp-block-makeiteasy-flip-card.flip-on-click {
	cursor: pointer;
}

/* Hover cards become tap-to-flip wherever hovering is not the interaction. */
@media (hover: none), (max-width: 767px) {

	.wp-block-makeiteasy-flip-card.flip-on-hover {
		cursor: pointer;
	}
}

/* Reduced motion is handled globally in assets/scss/arc-style.scss. */