/**
 * Ambiz - Add to cart confirmation animation.
 *
 * Timeline once the product is actually in the cart (~1.0s in, then it holds
 * until the customer's next click, ~0.25s out - the dismissal lives in
 * ambiz-add-to-cart-tick.js):
 *
 *   0ms    button settles with a short spring, light sweep starts crossing it
 *   60ms   the tick's box opens, pushing the label left
 *   120ms  the ring strokes itself around the tick
 *   360ms  the tick strokes in, then pops
 *   520ms  four sparkles burst outward and fade
 *
 * Every colour is currentColor. Add-to-cart buttons on this site are not one
 * colour (archive cards, single product, ShopEngine widgets), so the whole
 * confirmation inherits whatever button it lands in rather than hardcoding the
 * rosewood accent.
 */

/* ---------------------------------------------------------------- tick box */

.ambiz-atc-tick {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0;
	height: 1.25em;
	margin-left: 0;
	vertical-align: middle;
	opacity: 0;
	flex: 0 0 auto;
	transition:
		width 260ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) 60ms,
		margin-left 260ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) 60ms,
		opacity 140ms ease 60ms;
}

.ambiz-atc-added .ambiz-atc-tick {
	width: 1.25em;
	margin-left: 0.5em;
	opacity: 1;
}

.ambiz-atc-tick svg {
	width: 1.25em;
	height: 1.25em;
	display: block;
	overflow: visible;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------- ring */

.ambiz-atc-ring {
	stroke-width: 2;
	opacity: 0.45;
	stroke-dasharray: 94.25; /* 2 * pi * r, r = 15 */
	stroke-dashoffset: 94.25;
	transform: rotate( -90deg );
	transform-origin: 50% 50%;
}

.ambiz-atc-added .ambiz-atc-ring {
	animation: ambiz-atc-ring 460ms cubic-bezier( 0.65, 0, 0.35, 1 ) 120ms forwards;
}

@keyframes ambiz-atc-ring {
	to {
		stroke-dashoffset: 0;
	}
}

/* ------------------------------------------------------------------ check */

.ambiz-atc-check {
	stroke-width: 3;
	stroke-dasharray: 26;
	stroke-dashoffset: 26;
	transform-origin: 50% 50%;
}

.ambiz-atc-added .ambiz-atc-check {
	animation:
		ambiz-atc-draw 300ms cubic-bezier( 0.65, 0, 0.35, 1 ) 360ms forwards,
		ambiz-atc-pop 320ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) 600ms;
}

@keyframes ambiz-atc-draw {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes ambiz-atc-pop {
	0%   { transform: scale( 1 ); }
	40%  { transform: scale( 1.18 ); }
	100% { transform: scale( 1 ); }
}

/* --------------------------------------------------------------- sparkles */

.ambiz-atc-spark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.28em;
	height: 0.28em;
	margin: -0.14em 0 0 -0.14em;
	background: currentColor;
	border-radius: 1px;
	opacity: 0;
	pointer-events: none;
	/* A rotated square reads as a small diamond - on brand for a jewellery
	   store, and it needs no extra markup or image. */
	transform: rotate( 45deg ) scale( 0 );
}

.ambiz-atc-added .ambiz-atc-spark {
	animation: ambiz-atc-spark 620ms cubic-bezier( 0.22, 1, 0.36, 1 ) 520ms forwards;
}

.ambiz-atc-spark:nth-child( 1 ) { --ambiz-tx:  0.85em; --ambiz-ty: -0.7em;  animation-delay: 520ms !important; }
.ambiz-atc-spark:nth-child( 2 ) { --ambiz-tx: -0.8em;  --ambiz-ty: -0.62em; animation-delay: 580ms !important; }
.ambiz-atc-spark:nth-child( 3 ) { --ambiz-tx:  0.7em;  --ambiz-ty:  0.72em; animation-delay: 560ms !important; }
.ambiz-atc-spark:nth-child( 4 ) { --ambiz-tx: -0.72em; --ambiz-ty:  0.68em; animation-delay: 620ms !important; }

@keyframes ambiz-atc-spark {
	0% {
		opacity: 0;
		transform: translate( 0, 0 ) rotate( 45deg ) scale( 0 );
	}
	35% {
		opacity: 0.9;
		transform: translate( calc( var( --ambiz-tx ) * 0.6 ), calc( var( --ambiz-ty ) * 0.6 ) ) rotate( 45deg ) scale( 1 );
	}
	100% {
		opacity: 0;
		transform: translate( var( --ambiz-tx ), var( --ambiz-ty ) ) rotate( 45deg ) scale( 0.3 );
	}
}

/* ------------------------------------------------------------ light sweep */

.ambiz-atc-shine {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(
		100deg,
		transparent 20%,
		rgba( 255, 255, 255, 0.38 ) 46%,
		rgba( 255, 255, 255, 0.55 ) 50%,
		rgba( 255, 255, 255, 0.38 ) 54%,
		transparent 80%
	);
	/* Mix-blend keeps the sweep readable on a light button too, where a plain
	   white overlay would be invisible. */
	mix-blend-mode: overlay;
	transform: translateX( -100% );
}

.ambiz-atc-added .ambiz-atc-shine {
	animation: ambiz-atc-shine 780ms cubic-bezier( 0.4, 0, 0.2, 1 ) 40ms forwards;
}

@keyframes ambiz-atc-shine {
	0%   { opacity: 0;   transform: translateX( -100% ); }
	18%  { opacity: 1; }
	82%  { opacity: 1; }
	100% { opacity: 0;   transform: translateX( 100% ); }
}

/* ----------------------------------------------------------- button state */

.ambiz-atc-added {
	/* Positioning context and clip for the sweep. Both are only in effect for
	   the ~2.2s the confirmation runs, so a button with an outside shadow or
	   icon is not permanently clipped. */
	position: relative;
	overflow: hidden;
	animation: ambiz-atc-settle 520ms cubic-bezier( 0.34, 1.56, 0.64, 1 ) 1;
}

@keyframes ambiz-atc-settle {
	0%   { transform: scale( 1 ); }
	28%  { transform: scale( 0.972 ); }
	62%  { transform: scale( 1.028 ); }
	100% { transform: scale( 1 ); }
}

/* In-flight. Woo and the side cart already add .loading; this only softens the
   button so the confirmation lands on something settled. */
.ambiz-atc-adding {
	opacity: 0.72;
	transition: opacity 140ms ease;
}

/*
 * WooCommerce marks an archive button .added and appends a "View cart" link
 * beside it. The tick is the confirmation now, so that duplicate link goes -
 * it was never part of the design and it reflows the product grid.
 *
 * Deliberately NOT scoped to .woocommerce: the product grids on this site are
 * rendered by ShopEngine / Elementor widgets that sit outside that wrapper, so
 * a scoped rule never matched them and the link stayed visible.
 */
a.added_to_cart,
a.added_to_cart.wc-forward {
	display: none !important;
}

/* -------------------------------------------------------- reduced motion */

@media ( prefers-reduced-motion: reduce ) {
	.ambiz-atc-tick,
	.ambiz-atc-adding {
		transition: none;
	}

	.ambiz-atc-added,
	.ambiz-atc-added .ambiz-atc-ring,
	.ambiz-atc-added .ambiz-atc-check,
	.ambiz-atc-added .ambiz-atc-spark,
	.ambiz-atc-added .ambiz-atc-shine {
		animation: none;
	}

	/* Still show the result, just without motion. */
	.ambiz-atc-added .ambiz-atc-ring,
	.ambiz-atc-added .ambiz-atc-check {
		stroke-dashoffset: 0;
	}

	.ambiz-atc-added .ambiz-atc-spark,
	.ambiz-atc-added .ambiz-atc-shine {
		opacity: 0;
	}
}