/**
 * Minimal Side Cart — animations.
 *
 * All motion is CSS-driven:
 *   - Panel slide: transition on `transform`, triggered by flipping aria-hidden
 *     (JS just sets aria-hidden="true|false"; the transition does the rest).
 *   - Cart badge pop: keyframe animation, triggered by adding `.is-popping`.
 *   - New-item flash: keyframe animation, triggered by adding `.is-flashing`.
 *
 * GPU-composited transform/opacity only; no main-thread tweening.
 */

/* ---------------------------------------------------------------------------
 * Panel slide-in / slide-out.
 * Different durations and easings for open vs. close — decelerate on the way
 * in, accelerate on the way out.
 * ------------------------------------------------------------------------ */
.msc-panel {
	transform: translateX(100%);
	transition: transform 300ms cubic-bezier(0.64, 0, 0.78, 0);
	will-change: transform;
}

.msc-panel[aria-hidden="false"] {
	transform: translateX(0);
	transition: transform 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------------------------
 * Cart count "pop" on add-to-cart.
 * Smooth zoom to 1.35× and back. Triggered by toggling `.is-popping`.
 * ------------------------------------------------------------------------ */
@keyframes msc-cart-pop {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.35); }
}

.cart-count.is-popping {
	transform-origin: center center;
	animation: msc-cart-pop 400ms cubic-bezier(0.45, 0, 0.55, 1);
}

/* ---------------------------------------------------------------------------
 * Newly added item flash.
 * Yellow wash that fades to transparent. Triggered by `.is-flashing`.
 * ------------------------------------------------------------------------ */
@keyframes msc-item-flash {
	0%   { background-color: #fef3c7; }
	100% { background-color: transparent; }
}

.msc-item.is-flashing {
	animation: msc-item-flash 900ms ease-out;
}

/* ---------------------------------------------------------------------------
 * Quantity <input type="number"> — hide the native spinner so our +/- buttons
 * are the visible controls, while still allowing direct typing.
 * ------------------------------------------------------------------------ */
.msc-qty-input {
	-moz-appearance: textfield;
}
.msc-qty-input::-webkit-outer-spin-button,
.msc-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}