/* =============================================================
   SERVICES BADGE — css/services-badge.css
   -------------------------------------------------------------
   The drawn gear-and-tools logo from inc/icons.php, in its two
   homes (inc/services-badge.php has the why):

   1. Homepage Services tile — draws itself (outline, fill,
      tools) when js/services-badge.js sets `.is-drawing`.
   2. Services category product cards — laid over the logo
      stamped into the photo; the gear turns on card hover.

   Enqueued on those two pages only, and layout-critical there:
   without it §3's overlay is a full-size SVG below the photo.

   Every animation sits inside `prefers-reduced-motion:
   no-preference`, so asking for less motion gets the still logo
   with no further rule needed. The resting state is always the
   finished drawing — nothing here hides content. → LESSONS §JS-1

   No raw hex — tokens only (style.css §1, "Services badge").
   ============================================================= */

/* --- 1. The drawing ------------------------------------------ */

.wows-svc-badge {
	display: block;
	overflow: visible;
}

.wows-svc-badge__disk    { fill: none; }
.wows-svc-badge__gear    { fill: var(--wows-svc-gear); }
.wows-svc-badge__wrench  { fill: var(--wows-svc-wrench); }
.wows-svc-badge__handle  { fill: var(--wows-svc-handle); }
.wows-svc-badge__shaft   { fill: var(--wows-svc-shaft); }
.wows-svc-badge__stripe  { fill: var(--wows-white); }

.wows-svc-badge__trace {
	stroke: var(--wows-svc-gear);
	stroke-width: 2.2;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	opacity: 0;
}

/* The gear turns about the badge centre — px are viewBox units here. */
.wows-svc-badge__gear,
.wows-svc-badge__tools {
	transform-origin: 50px 50px;
}

/* --- 2. Homepage tile: draws itself ---------------------------- */

/* Same footprint the logo had as a photo thumbnail in the 78px well. */
.wows-cat-card__well > .wows-svc-badge {
	width: 84%;
	height: 84%;
}

@media (prefers-reduced-motion: no-preference) {
	.wows-svc-badge.is-drawing .wows-svc-badge__trace {
		animation: wows-svc-trace 1.3s ease-in-out .15s both;
	}

	.wows-svc-badge.is-drawing .wows-svc-badge__gear {
		animation: wows-svc-fill .45s ease-out 1.25s both;
	}

	.wows-svc-badge.is-drawing .wows-svc-badge__tools {
		animation: wows-svc-pop .45s cubic-bezier(.3, 1.6, .6, 1) 1.6s both;
	}
}

@keyframes wows-svc-trace {
	0%   { stroke-dashoffset: 1; opacity: 1; }
	85%  { opacity: 1; }
	100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes wows-svc-fill {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes wows-svc-pop {
	from { opacity: 0; transform: scale(.4) rotate(-30deg); }
	to   { opacity: 1; transform: none; }
}

/* --- 3. Services product cards: turns on hover ---------------- */

/*
 * The wrapper takes the photo's place as the well's flex item, at the same
 * width, so the photo inside it lays out exactly as it did unwrapped —
 * a width-filling square (inc/services-badge.php says why it is not
 * `contain`ed). The stamp overlay is that square: top-left of the wrapper,
 * full width, aspect 1. The badge is then placed in percentages of it.
 *
 * The stamp, measured on the photos: centre (0.8607, 0.1407) of the side,
 * tooth tips r = 0.0919. The badge's tips are r46 of its 100 box, so the
 * badge is 0.0919 / 0.46 = 19.967% of the side, and its top-left corner is
 * the centre less half that: (76.08%, 4.08%). Its disk (r49.5) is a hair
 * wider than the stamp's teeth and painted the media well's colour — what
 * the photo's white becomes under the card's multiply blend — so the
 * stamp never shows round it.
 */
.wows-svc-photo {
	position: relative;
	display: block;
	width: 100%;
}

.wows-svc-stamp {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	aspect-ratio: 1;
	pointer-events: none;
	transition: transform .35s ease;
}

.wows-svc-stamp > .wows-svc-badge {
	position: absolute;
	top: 4.08%;
	left: 76.08%;
	width: 19.967%;
	height: 19.967%;
}

.wows-svc-stamp .wows-svc-badge__disk {
	fill: var(--wows-surface);
}

/* Follows the photo's own hover zoom (style.css §11), or the stamp
   underneath would slide out from behind the badge. */
.wows-product-card:hover .wows-svc-stamp {
	transform: scale(1.05);
}

@media (prefers-reduced-motion: no-preference) {
	/* Paused, not removed, off hover: the gear stops where it is
	   instead of snapping back to upright. */
	.wows-svc-stamp .wows-svc-badge__gear {
		animation: wows-svc-spin 3s linear infinite paused;
	}

	.wows-product-card:hover .wows-svc-stamp .wows-svc-badge__gear {
		animation-play-state: running;
	}
}

@keyframes wows-svc-spin {
	to { transform: rotate(360deg); }
}