/**
 * Divi WooCart — animation layer.
 *
 * Panel open/close keyframes (families × In/Out), the badge-bump keyframe, and
 * the Floating trigger button positioning. Every motion rule is wrapped
 * in `@media (prefers-reduced-motion: no-preference)`, so reduced-motion visitors
 * get an instant, non-animated open and no bump.
 *
 * The JS applies `qdwc-anim-in <keyframe-class>` on open and
 * `qdwc-anim-out <keyframe-class>` on close; keyframe classes are GPU-only
 * (transform / opacity), never animating layout properties.
 */

/* ====================================================================
 * Floating trigger button (LB / RB corner).
 * ================================================================== */
.qdwc-mc-floating {
	position: fixed;
	z-index: 99998;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 56px;
	block-size: 56px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--qdwc-primary, #5b21b6);
	color: var(--qdwc-on-accent, #fff);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	cursor: pointer;
}

.qdwc-mc-floating.qdwc-floating-rb { inset-block-end: 24px; inset-inline-end: 24px; }
.qdwc-mc-floating.qdwc-floating-lb { inset-block-end: 24px; inset-inline-start: 24px; }

.qdwc-mc-floating__icon {
	display: inline-flex;
}

.qdwc-mc-floating__icon svg {
	inline-size: 26px;
	block-size: 26px;
}

.qdwc-mc-floating__badge {
	position: absolute;
	inset-block-start: -2px;
	inset-inline-end: -2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 20px;
	block-size: 20px;
	padding-inline: 5px;
	box-sizing: border-box;
	border-radius: 10px;
	background: var(--qdwc-secondary, #6d28d9);
	color: var(--qdwc-on-accent, #fff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* ====================================================================
 * Animation layer — only when the visitor has not asked for reduced motion.
 * ================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Keyframe drives the panel; suppress the base transition so they don't fight. */
	.qdwc-mini-cart-panel.qdwc-anim-in,
	.qdwc-mini-cart-panel.qdwc-anim-out {
		transition: none;
		animation-duration: 0.32s;
		animation-fill-mode: both;
		animation-timing-function: ease;
	}

	/* ---- Fade ---- */
	.qdwc-fade-in { animation-name: qdwc-fade-in; }
	.qdwc-fade-out { animation-name: qdwc-fade-out; }

	@keyframes qdwc-fade-in { from { opacity: 0; } to { opacity: 1; } }
	@keyframes qdwc-fade-out { from { opacity: 1; } to { opacity: 0; } }

	/* ---- Slide ---- */
	.qdwc-slide-in-right { animation-name: qdwc-slide-in-right; }
	.qdwc-slide-in-left { animation-name: qdwc-slide-in-left; }
	.qdwc-slide-out-right { animation-name: qdwc-slide-out-right; }
	.qdwc-slide-out-left { animation-name: qdwc-slide-out-left; }

	@keyframes qdwc-slide-in-right { from { transform: translateX(105%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
	@keyframes qdwc-slide-in-left { from { transform: translateX(-105%); opacity: 0.4; } to { transform: translateX(0); opacity: 1; } }
	@keyframes qdwc-slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(105%); opacity: 0; } }
	@keyframes qdwc-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-105%); opacity: 0; } }

	/* ---- Flip ---- */
	.qdwc-flip-in-x { animation-name: qdwc-flip-in-x; }
	.qdwc-flip-in-y { animation-name: qdwc-flip-in-y; }
	.qdwc-flip-out-x { animation-name: qdwc-flip-out-x; }
	.qdwc-flip-out-y { animation-name: qdwc-flip-out-y; }

	@keyframes qdwc-flip-in-x { from { transform: perspective(800px) rotateX(80deg); opacity: 0; } to { transform: perspective(800px) rotateX(0); opacity: 1; } }
	@keyframes qdwc-flip-in-y { from { transform: perspective(800px) rotateY(80deg); opacity: 0; } to { transform: perspective(800px) rotateY(0); opacity: 1; } }
	@keyframes qdwc-flip-out-x { from { transform: perspective(800px) rotateX(0); opacity: 1; } to { transform: perspective(800px) rotateX(80deg); opacity: 0; } }
	@keyframes qdwc-flip-out-y { from { transform: perspective(800px) rotateY(0); opacity: 1; } to { transform: perspective(800px) rotateY(80deg); opacity: 0; } }

	/* ---- Bounce ---- */
	.qdwc-bounce-in { animation-name: qdwc-bounce-in; animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
	.qdwc-bounce-out { animation-name: qdwc-bounce-out; }

	@keyframes qdwc-bounce-in {
		0% { transform: scale(0.7); opacity: 0; }
		60% { transform: scale(1.05); opacity: 1; }
		80% { transform: scale(0.97); }
		100% { transform: scale(1); }
	}
	@keyframes qdwc-bounce-out {
		0% { transform: scale(1); opacity: 1; }
		30% { transform: scale(1.03); }
		100% { transform: scale(0.7); opacity: 0; }
	}

	/* ---- Light Speed ---- */
	.qdwc-light-speed-in { animation-name: qdwc-light-speed-in; animation-timing-function: ease-out; }
	.qdwc-light-speed-out { animation-name: qdwc-light-speed-out; animation-timing-function: ease-in; }

	@keyframes qdwc-light-speed-in {
		0% { transform: translateX(100%) skewX(-20deg); opacity: 0; }
		60% { transform: translateX(-10%) skewX(10deg); opacity: 1; }
		100% { transform: translateX(0) skewX(0); }
	}
	@keyframes qdwc-light-speed-out {
		0% { transform: translateX(0) skewX(0); opacity: 1; }
		100% { transform: translateX(100%) skewX(-20deg); opacity: 0; }
	}

	/* ---- Rotate ---- */
	.qdwc-rotate-in { animation-name: qdwc-rotate-in; }
	.qdwc-rotate-out { animation-name: qdwc-rotate-out; }

	@keyframes qdwc-rotate-in { from { transform: rotate(-12deg) scale(0.9); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
	@keyframes qdwc-rotate-out { from { transform: rotate(0) scale(1); opacity: 1; } to { transform: rotate(12deg) scale(0.9); opacity: 0; } }

	/* ---- Roll ---- */
	.qdwc-roll-in { animation-name: qdwc-roll-in; }
	.qdwc-roll-out { animation-name: qdwc-roll-out; }

	@keyframes qdwc-roll-in { from { transform: translateX(-100%) rotate(-120deg); opacity: 0; } to { transform: translateX(0) rotate(0); opacity: 1; } }
	@keyframes qdwc-roll-out { from { transform: translateX(0) rotate(0); opacity: 1; } to { transform: translateX(100%) rotate(120deg); opacity: 0; } }

	/* ---- Zoom ---- */
	.qdwc-zoom-in { animation-name: qdwc-zoom-in; }
	.qdwc-zoom-out { animation-name: qdwc-zoom-out; }

	@keyframes qdwc-zoom-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
	@keyframes qdwc-zoom-out { from { transform: scale(1); opacity: 1; } to { transform: scale(0.6); opacity: 0; } }

	/* ====================================================================
	 * Badge bump — a subtle scale "pop" on any cart-count badge when an item
	 * is added. Applied by the JS (qdwc-badge-bump), removed on animationend.
	 * ================================================================== */
	.qdwc-badge-bump {
		animation: qdwc-badge-bump 0.25s ease;
	}

	@keyframes qdwc-badge-bump {
		0% { transform: scale(1); }
		40% { transform: scale(1.4); }
		100% { transform: scale(1); }
	}
}