/**
 * Flip Box Extras Pro — effect styles for push / overlay / fade.
 *
 * Companion to the free Flip Box style.css. Faces stay identified
 * structurally (`.wpminty-fb > :first-child` = front, `:nth-child(2)` =
 * back) and every transition consumes the shared `--wpminty-fb-flipped`
 * flag (0/1) set by the free trigger branches, plus the advanced tokens
 * --wpminty-fb-duration / --wpminty-fb-easing (free style.css fallbacks
 * apply; the Pro extension only declares them when customized).
 *
 * Animations are transform/opacity only. No !important — the selectors
 * are effect-scoped and never fight the free rules.
 *
 * Visibility delays are asymmetric on purpose: an entering face becomes
 * visible the instant its transition starts, while an exiting face keeps
 * visibility until its exit transition completes. CSS transitions use the
 * delay declared on the state being entered, so the two directions are
 * configured on different rule sets below (flipped/hover state rules
 * always come after the trigger-scoped visibility rules, so their
 * transition shorthands win the cascade).
 */

/* ==========================================================================
   Hidden-face pointer isolation (shared by the Pro effects)
   A face that is currently hidden must never swallow pointer events:
   fade keeps the back face stacked over the front at opacity 0, and
   overlay/push park the back face just outside the container.
   ========================================================================== */

.wpminty-fb--effect-fade > :nth-child(2),
.wpminty-fb--effect-overlay > :nth-child(2),
.wpminty-fb--effect-push > :nth-child(2) {
	pointer-events: none;
}

/* Mirrors the free trigger branches that raise --wpminty-fb-flipped.
   The :focus-within branches stay gated behind @media (hover: hover) to
   match the free style.css: on touch devices a lingering focus would
   otherwise re-enable pointer events on a face the tap toggle just hid. */
.wpminty-fb--trigger-hover.is-flipped > :nth-child(2),
.wpminty-fb--trigger-tab.is-flipped > :nth-child(2),
.wpminty-fb--trigger-click.is-flipped > :nth-child(2) {
	pointer-events: auto;
}

@media (hover: hover) {
	.wpminty-fb--trigger-hover:hover > :nth-child(2),
	.wpminty-fb--trigger-hover:focus-within > :nth-child(2),
	.wpminty-fb--trigger-tab:focus-within > :nth-child(2) {
		pointer-events: auto;
	}
}

/* ==========================================================================
   Effect: push (both faces slide together in lockstep; the back face
   waits pre-offset 100% on the entry side, hidden by the container clip)
   ========================================================================== */

.wpminty-fb--effect-push {
	overflow: hidden;
}

.wpminty-fb--effect-push > :first-child,
.wpminty-fb--effect-push > :nth-child(2) {
	grid-area: 1 / 1;
	transition:
		transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear 0s;
	will-change: transform;
}

/*
 * Hidden-face a11y: both faces stay in the shared grid cell at all times,
 * so the one parked outside the clip is hidden from the Tab order and the
 * accessibility tree. Visibility switching is asymmetric so the slide is
 * always continuous — no gap, no flash:
 * - the entering face becomes visible with zero delay the moment the
 *   slide starts (the flipped/hover rule sets that state's delay to 0s,
 *   overriding this base rule in the cascade),
 * - the exiting face keeps visibility until its slide completes.
 */
.wpminty-fb--effect-push > :nth-child(2) {
	visibility: hidden;
	/* At-rest timing for the back face (overrides the shared rule above):
	   when sliding back home it must keep visibility until the return
	   slide completes, mirroring the front face's entry behavior. */
	transition:
		transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear var(--wpminty-fb-duration, 0.6s);
}

.wpminty-fb--effect-push.wpminty-fb--trigger-hover.is-flipped > :first-child,
.wpminty-fb--effect-push.wpminty-fb--trigger-tab.is-flipped > :first-child,
.wpminty-fb--effect-push.wpminty-fb--trigger-click.is-flipped > :first-child {
	visibility: hidden;
}

.wpminty-fb--effect-push.wpminty-fb--trigger-hover.is-flipped > :nth-child(2),
.wpminty-fb--effect-push.wpminty-fb--trigger-tab.is-flipped > :nth-child(2),
.wpminty-fb--effect-push.wpminty-fb--trigger-click.is-flipped > :nth-child(2) {
	visibility: visible;
}

@media (hover: hover) {
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:hover > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:focus-within > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-tab:focus-within > :first-child {
		visibility: hidden;
	}

	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:hover > :nth-child(2),
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:focus-within > :nth-child(2),
	.wpminty-fb--effect-push.wpminty-fb--trigger-tab:focus-within > :nth-child(2) {
		visibility: visible;
	}
}

/*
 * Lockstep visibility timing for the push (after the trigger-scoped
 * visibility rules above, so its transition shorthand overrides theirs):
 * the entering face becomes visible instantly (0s delay) so both faces
 * slide together from the first frame; the exiting face stays visible
 * until its slide finishes (full-duration delay), hiding the parked.
 */
.wpminty-fb--effect-push.wpminty-fb--trigger-hover.is-flipped > :first-child,
.wpminty-fb--effect-push.wpminty-fb--trigger-tab.is-flipped > :first-child,
.wpminty-fb--effect-push.wpminty-fb--trigger-click.is-flipped > :first-child {
	transition:
		transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear var(--wpminty-fb-duration, 0.6s);
}

.wpminty-fb--effect-push.wpminty-fb--trigger-hover.is-flipped > :nth-child(2),
.wpminty-fb--effect-push.wpminty-fb--trigger-tab.is-flipped > :nth-child(2),
.wpminty-fb--effect-push.wpminty-fb--trigger-click.is-flipped > :nth-child(2) {
	transition:
		transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear 0s;
}

@media (hover: hover) {
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:hover > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:focus-within > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-tab:focus-within > :first-child {
		transition:
			transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
			visibility 0s linear var(--wpminty-fb-duration, 0.6s);
	}

	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:hover > :nth-child(2),
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:focus-within > :nth-child(2),
	.wpminty-fb--effect-push.wpminty-fb--trigger-tab:focus-within > :nth-child(2) {
		transition:
			transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
			visibility 0s linear 0s;
	}
}

/* Entry-side offsets per direction (back face start position). */
.wpminty-fb--effect-push.wpminty-fb--dir-right {
	--wpminty-fb-push-front-x: -100%;
	--wpminty-fb-push-back-x: 100%;
}

.wpminty-fb--effect-push.wpminty-fb--dir-left {
	--wpminty-fb-push-front-x: 100%;
	--wpminty-fb-push-back-x: -100%;
}

.wpminty-fb--effect-push.wpminty-fb--dir-up {
	--wpminty-fb-push-front-y: 100%;
	--wpminty-fb-push-back-y: -100%;
}

.wpminty-fb--effect-push.wpminty-fb--dir-down {
	--wpminty-fb-push-front-y: -100%;
	--wpminty-fb-push-back-y: 100%;
}

.wpminty-fb--effect-push > :first-child {
	transform: translateX(calc(var(--wpminty-fb-push-front-x, 0%) * var(--wpminty-fb-flipped)))
		translateY(calc(var(--wpminty-fb-push-front-y, 0%) * var(--wpminty-fb-flipped)));
}

.wpminty-fb--effect-push > :nth-child(2) {
	transform: translateX(calc(var(--wpminty-fb-push-back-x, 0%) * (1 - var(--wpminty-fb-flipped))))
		translateY(calc(var(--wpminty-fb-push-back-y, 0%) * (1 - var(--wpminty-fb-flipped))));
}

/* ==========================================================================
   Effect: overlay (front face keeps its layout spot; the back face is an
   absolutely positioned panel that slides in over it from the chosen side)
   ========================================================================== */

.wpminty-fb--effect-overlay {
	overflow: hidden;
}

.wpminty-fb--effect-overlay > :nth-child(2) {
	position: absolute;
	z-index: 2;
	transition:
		transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear var(--wpminty-fb-duration, 0.6s);
	will-change: transform;
	/* Parked outside the container: out of the Tab order and a11y tree
	   while at rest; the full-duration delay keeps it hidden until the
	   exit slide back home completes. Entering uses a zero delay (see
	   the flipped-state rules below) so the panel is visible for its
	   whole slide-in instead of flashing at the end. */
	visibility: hidden;
}

.wpminty-fb--effect-overlay.wpminty-fb--trigger-hover.is-flipped > :nth-child(2),
.wpminty-fb--effect-overlay.wpminty-fb--trigger-tab.is-flipped > :nth-child(2),
.wpminty-fb--effect-overlay.wpminty-fb--trigger-click.is-flipped > :nth-child(2) {
	visibility: visible;
}

@media (hover: hover) {
	.wpminty-fb--effect-overlay.wpminty-fb--trigger-hover:hover > :nth-child(2),
	.wpminty-fb--effect-overlay.wpminty-fb--trigger-hover:focus-within > :nth-child(2),
	.wpminty-fb--effect-overlay.wpminty-fb--trigger-tab:focus-within > :nth-child(2) {
		visibility: visible;
	}
}

/* Zero visibility delay while entering: the panel must be visible for
   the whole slide-in (a full-duration delay — the base rule's value —
   kept it hidden until the slide finished, showing as a flash). Placed
   after the trigger-scoped visibility rules so the transition shorthand
   overrides theirs. */
.wpminty-fb--effect-overlay.wpminty-fb--trigger-hover.is-flipped > :nth-child(2),
.wpminty-fb--effect-overlay.wpminty-fb--trigger-tab.is-flipped > :nth-child(2),
.wpminty-fb--effect-overlay.wpminty-fb--trigger-click.is-flipped > :nth-child(2) {
	transition:
		transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear 0s;
}

@media (hover: hover) {
	.wpminty-fb--effect-overlay.wpminty-fb--trigger-hover:hover > :nth-child(2),
	.wpminty-fb--effect-overlay.wpminty-fb--trigger-hover:focus-within > :nth-child(2),
	.wpminty-fb--effect-overlay.wpminty-fb--trigger-tab:focus-within > :nth-child(2) {
		transition:
			transform var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
			visibility 0s linear 0s;
	}
}

/* coverage=full: the panel spans the whole face. */
.wpminty-fb--effect-overlay.wpminty-fb--coverage-full > :nth-child(2) {
	inset: 0;
}

/* coverage=content: the panel sizes to its content and stays anchored to
   the edge it enters from (never clipped once fully inside). */
.wpminty-fb--effect-overlay.wpminty-fb--coverage-content.wpminty-fb--dir-up > :nth-child(2) {
	top: 0;
	left: 0;
	right: 0;
}

.wpminty-fb--effect-overlay.wpminty-fb--coverage-content.wpminty-fb--dir-down > :nth-child(2) {
	bottom: 0;
	left: 0;
	right: 0;
}

.wpminty-fb--effect-overlay.wpminty-fb--coverage-content.wpminty-fb--dir-left > :nth-child(2) {
	top: 0;
	bottom: 0;
	left: 0;
}

.wpminty-fb--effect-overlay.wpminty-fb--coverage-content.wpminty-fb--dir-right > :nth-child(2) {
	top: 0;
	bottom: 0;
	right: 0;
}

/* Slide-in per direction: parked just outside the container, translated
   home when the flipped flag raises. */
.wpminty-fb--effect-overlay.wpminty-fb--dir-right > :nth-child(2) {
	transform: translateX(calc(100% * (1 - var(--wpminty-fb-flipped))));
}

.wpminty-fb--effect-overlay.wpminty-fb--dir-left > :nth-child(2) {
	transform: translateX(calc(-100% * (1 - var(--wpminty-fb-flipped))));
}

.wpminty-fb--effect-overlay.wpminty-fb--dir-up > :nth-child(2) {
	transform: translateY(calc(-100% * (1 - var(--wpminty-fb-flipped))));
}

.wpminty-fb--effect-overlay.wpminty-fb--dir-down > :nth-child(2) {
	transform: translateY(calc(100% * (1 - var(--wpminty-fb-flipped))));
}

/* ==========================================================================
   Effect: fade (pure opacity cross-fade — no transform: any scale
   beyond 1 would overflow the card box, and the scale itself was not
   wanted). The entering face fades in from the very first frame, so the
   two opacities overlap for the whole duration.
   ========================================================================== */

.wpminty-fb--effect-fade > :first-child,
.wpminty-fb--effect-fade > :nth-child(2) {
	grid-area: 1 / 1;
	transition:
		opacity var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear 0s;
}

/*
 * Hidden-face a11y for the cross-fade: the fully faded-out face is
 * hidden from the Tab order and the accessibility tree. The entering
 * face becomes visible instantly (flipped-state delay overridden to 0s
 * below) so both faces stay exposed while they are partially visible
 * during the cross-fade; the exiting face keeps visibility until its
 * fade-out completes.
 */
.wpminty-fb--effect-fade > :nth-child(2) {
	visibility: hidden;
	/* At-rest timing for the back face (overrides the shared rule above):
	   when fading back home it must keep visibility until its fade-out
	   completes, mirroring the front face's entry behavior. */
	transition:
		opacity var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear var(--wpminty-fb-duration, 0.6s);
}

.wpminty-fb--effect-fade.wpminty-fb--trigger-hover.is-flipped > :first-child,
.wpminty-fb--effect-fade.wpminty-fb--trigger-tab.is-flipped > :first-child,
.wpminty-fb--effect-fade.wpminty-fb--trigger-click.is-flipped > :first-child {
	visibility: hidden;
}

.wpminty-fb--effect-fade.wpminty-fb--trigger-hover.is-flipped > :nth-child(2),
.wpminty-fb--effect-fade.wpminty-fb--trigger-tab.is-flipped > :nth-child(2),
.wpminty-fb--effect-fade.wpminty-fb--trigger-click.is-flipped > :nth-child(2) {
	visibility: visible;
}

@media (hover: hover) {
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:hover > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:focus-within > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-tab:focus-within > :first-child {
		visibility: hidden;
	}

	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:hover > :nth-child(2),
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:focus-within > :nth-child(2),
	.wpminty-fb--effect-fade.wpminty-fb--trigger-tab:focus-within > :nth-child(2) {
		visibility: visible;
	}
}

/* Full visibility delay while fading out: the front face must stay
   exposed until its fade-out completes (the shared base rule's zero
   delay would drop it the instant the flag flips, popping the front
   away before the back has faded in). Placed before the back-face
   entry override below; both come after the trigger-scoped visibility
   rules so the transition shorthands win the cascade. */
.wpminty-fb--effect-fade.wpminty-fb--trigger-hover.is-flipped > :first-child,
.wpminty-fb--effect-fade.wpminty-fb--trigger-tab.is-flipped > :first-child,
.wpminty-fb--effect-fade.wpminty-fb--trigger-click.is-flipped > :first-child {
	transition:
		opacity var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear var(--wpminty-fb-duration, 0.6s);
}

/* Zero visibility delay while fading in: the back face must be visible
   for the whole cross-fade (a full-duration delay — the base rule's
   value — kept it hidden during its fade-in, collapsing the effect to
   fade-out + pop). */
.wpminty-fb--effect-fade.wpminty-fb--trigger-hover.is-flipped > :nth-child(2),
.wpminty-fb--effect-fade.wpminty-fb--trigger-tab.is-flipped > :nth-child(2),
.wpminty-fb--effect-fade.wpminty-fb--trigger-click.is-flipped > :nth-child(2) {
	transition:
		opacity var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
		visibility 0s linear 0s;
}

@media (hover: hover) {
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:hover > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:focus-within > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-tab:focus-within > :first-child {
		transition:
			opacity var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
			visibility 0s linear var(--wpminty-fb-duration, 0.6s);
	}

	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:hover > :nth-child(2),
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:focus-within > :nth-child(2),
	.wpminty-fb--effect-fade.wpminty-fb--trigger-tab:focus-within > :nth-child(2) {
		transition:
			opacity var(--wpminty-fb-duration, 0.6s) var(--wpminty-fb-easing, ease),
			visibility 0s linear 0s;
	}
}

.wpminty-fb--effect-fade > :first-child {
	opacity: calc(1 - var(--wpminty-fb-flipped));
}

.wpminty-fb--effect-fade > :nth-child(2) {
	opacity: var(--wpminty-fb-flipped);
}

/* ==========================================================================
   Motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wpminty-fb--effect-push > :first-child,
	.wpminty-fb--effect-push > :nth-child(2),
	.wpminty-fb--effect-overlay > :nth-child(2),
	.wpminty-fb--effect-fade > :first-child,
	.wpminty-fb--effect-fade > :nth-child(2) {
		/* No motion: drop the visibility delay too so the hidden-face
		   switch snaps together with the unanimated state change. */
		transition: visibility 0s;
	}

	/* Re-assert the snap on the flipped-state rules above, whose higher
	   specificity would otherwise keep their full-duration exit delays
	   while the transform itself snaps (the exiting face would linger
	   in the Tab order after it is already off screen / fully faded). */
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover.is-flipped > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-tab.is-flipped > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-click.is-flipped > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover.is-flipped > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-tab.is-flipped > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-click.is-flipped > :first-child {
		transition: visibility 0s;
	}
}

@media (prefers-reduced-motion: reduce) and (hover: hover) {
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:hover > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-hover:focus-within > :first-child,
	.wpminty-fb--effect-push.wpminty-fb--trigger-tab:focus-within > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:hover > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-hover:focus-within > :first-child,
	.wpminty-fb--effect-fade.wpminty-fb--trigger-tab:focus-within > :first-child {
		transition: visibility 0s;
	}
}