/**
 * Pop Commerce builder: pc-anim.css (R5).
 * Contract: docs/forms-builder/F2-contracts.md section 5.8.
 * Overlay fade and in/out animations of the card (first element under the overlay).
 */

/* Overlay fade (like legacy). */
:where(.pc-popup) {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

:where(.pc-popup.is-visible) {
	opacity: 1;
}

/* Card in/out: duration from --pc-anim-ms. */
:where(.pc-popup.pc-anim-in-fade > .pc-b-card) {
	animation: pcFadeIn var(--pc-anim-ms, 400ms) ease-out forwards;
}

:where(.pc-popup.pc-anim-out-fade > .pc-b-card) {
	animation: pcFadeOut var(--pc-anim-ms, 400ms) ease-in forwards;
}

:where(.pc-popup.pc-anim-in-slide-up > .pc-b-card) {
	animation: pcSlideUpIn var(--pc-anim-ms, 400ms) ease-out forwards;
}

:where(.pc-popup.pc-anim-out-slide-up > .pc-b-card) {
	animation: pcSlideUpOut var(--pc-anim-ms, 400ms) ease-in forwards;
}

:where(.pc-popup.pc-anim-in-slide-down > .pc-b-card) {
	animation: pcSlideDownIn var(--pc-anim-ms, 400ms) ease-out forwards;
}

:where(.pc-popup.pc-anim-out-slide-down > .pc-b-card) {
	animation: pcSlideDownOut var(--pc-anim-ms, 400ms) ease-in forwards;
}

:where(.pc-popup.pc-anim-in-scale > .pc-b-card) {
	animation: pcScaleIn var(--pc-anim-ms, 400ms) ease-out forwards;
}

:where(.pc-popup.pc-anim-out-scale > .pc-b-card) {
	animation: pcScaleOut var(--pc-anim-ms, 400ms) ease-in forwards;
}

:where(.pc-popup.pc-anim-in-rotate-fade > .pc-b-card) {
	animation: pcRotateFadeIn var(--pc-anim-ms, 400ms) ease-out forwards;
}

:where(.pc-popup.pc-anim-out-rotate-fade > .pc-b-card) {
	animation: pcRotateFadeOut var(--pc-anim-ms, 400ms) ease-in forwards;
}

/* stylelint-disable keyframes-name-pattern */
@keyframes pcFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes pcFadeOut {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes pcSlideUpIn {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pcSlideUpOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(-30px);
	}
}

@keyframes pcSlideDownIn {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pcSlideDownOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}

	to {
		opacity: 0;
		transform: translateY(30px);
	}
}

@keyframes pcScaleIn {
	from {
		opacity: 0;
		transform: scale(0.3);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes pcScaleOut {
	from {
		opacity: 1;
		transform: scale(1);
	}

	to {
		opacity: 0;
		transform: scale(0.3);
	}
}

@keyframes pcRotateFadeIn {
	from {
		opacity: 0;
		transform: rotate(-180deg) scale(0.3);
	}

	to {
		opacity: 1;
		transform: rotate(0) scale(1);
	}
}

@keyframes pcRotateFadeOut {
	from {
		opacity: 1;
		transform: rotate(0) scale(1);
	}

	to {
		opacity: 0;
		transform: rotate(180deg) scale(0.3);
	}
}

/* Survey option icon bounce (odd rows down, even rows up). */
@keyframes pcBounceDown {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pcBounceUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Button spinner. */
@keyframes pcSpin {
	to {
		transform: rotate(360deg);
	}
}

/* Reduced motion: no card movement; end state equals the natural state (F7-D15). */
@media (prefers-reduced-motion: reduce) {
	:where(.pc-popup[class*="pc-anim-"] > .pc-b-card) {
		animation: none;
	}
}

/* stylelint-enable keyframes-name-pattern */