/* SGH motion (batch 6). Restrained, purposeful motion layered on the existing markup.
   Paired with assets/sgh-motion.js, which adds the m-* classes. Rules:
   - only transform and opacity animate (stroke-dashoffset on diagram lines; the FAQ height
     transition is progressive enhancement where the browser supports ::details-content);
   - every hidden or moving state needs a class the script adds, so content is complete without JS;
   - nothing moves under prefers-reduced-motion: reduce (the script does not start, and every
     rule here sits inside a no-preference query);
   - continuous motion (brand ticker) has a pause button; the rest stops within 5 seconds or is
     one-time. */

/* Ticker controls exist only once the script builds them, in every motion setting. */
.m-tk-btn { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; }
.m-tk-btn:hover { border-color: var(--line-strong); }
.m-tk-btn:focus-visible { outline: 2px solid var(--focus, var(--focus)); outline-offset: 2px; }
.m-tk-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.m-tk-btn .m-i-play { fill: currentColor; stroke-width: 1.4; display: none; }
.m-tk.is-paused .m-tk-btn .m-i-play { display: inline; }
.m-tk.is-paused .m-tk-btn .m-i-pause { display: none; }

@media (prefers-reduced-motion: no-preference) {

	/* 1. Brand logo ticker (homepage brand rail). A seamless loop: the script appends one hidden
	   copy of the tiles and the track moves by half its width. */
	.m-tk { display: flex; align-items: center; gap: 12px; min-width: 0; }
	.m-tk-view { flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent); }
	.m-tk .x-brail-list { width: max-content; overflow: visible; padding-right: 10px; scroll-snap-type: none; animation: m-marquee var(--m-dur, 90s) linear infinite; will-change: transform; }
	.m-tk.is-paused .x-brail-list, .m-tk.is-off .x-brail-list, .m-tk-view:hover .x-brail-list { animation-play-state: paused; }
	/* Keyboard users get the plain rail: the track stops at the start and focus scrolls it. */
	.m-tk-view:focus-within .x-brail-list { animation: none; }
	.m-tk-side { flex: none; display: flex; align-items: center; gap: 10px; }
	.m-tk-side .x-brail-all { width: 156px; }
	@keyframes m-marquee { to { transform: translate3d(-50%, 0, 0); } }
	@media (max-width: 640px) {
		.m-tk { flex-wrap: wrap; gap: 8px; }
		.m-tk-view { flex-basis: 100%; }
		.m-tk-side { width: 100%; justify-content: space-between; }
		.m-tk-side .x-brail-all { width: auto; height: 40px; padding: 8px 14px; }
	}

	/* 2. Count-up figures. The real number stays in the text (and in its width); a copy on top counts. */
	.m-num.is-counting { position: relative; -webkit-text-fill-color: transparent; }
	.m-num.is-counting::after { content: attr(data-v); position: absolute; left: 0; top: 0; white-space: nowrap; -webkit-text-fill-color: currentColor; font-variant-numeric: tabular-nums; }

	/* 3. Scroll reveals, below the first screen only. */
	.motion-ready .m-rv { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
	.motion-ready .m-rv.m-in { opacity: 1; transform: none; }

	/* 4. Diagram life: wires trace in, dashed links flow, numbered hotspots ring. All finite. */
	.m-ring { opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; fill: none !important; stroke: var(--orange-press) !important; stroke-width: 2 !important; }
	.m-live .m-ring { animation: m-ring 1.4s cubic-bezier(.2, .6, .3, 1) calc(var(--m-d, 0s) + var(--m-i, 0) * .18s) 2 backwards; }
	.m-hold .m-ring, .m-hold .m-flow, .m-hold .m-sig > i, .m-hold .h6-mark::after { animation-play-state: paused !important; }
	@keyframes m-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(2.1); } }
	.m-live .m-flow { animation: m-flow .9s linear 5; }
	@keyframes m-flow { to { stroke-dashoffset: var(--m-p, -9px); } }
	.m-pend .m-wire, .m-live .m-wire { stroke-dasharray: var(--m-len); }
	.m-pend .m-wire { stroke-dashoffset: var(--m-len); }
	.m-live .m-wire { animation: m-draw .9s cubic-bezier(.4, 0, .2, 1) calc(var(--m-i, 0) * .12s) backwards; }
	@keyframes m-draw { from { stroke-dashoffset: var(--m-len); } }
	/* Homepage scene: the four numbered marks ring in order, matching the legend below. */
	.h6-mark::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--orange-press); border-radius: 50%; opacity: 0; pointer-events: none; }
	.m-live .h6-mark::after { animation: m-ring 1.4s cubic-bezier(.2, .6, .3, 1) calc(.4s + var(--m-i, 0) * .3s) 2 backwards; }
	/* Solution topology: one signal dot runs along each connector in the arrow's direction. */
	.m-sig { position: absolute; left: 0; right: 9px; top: calc(50% - 6px); height: 12px; overflow: hidden; pointer-events: none; }
	.m-sig > i { position: absolute; inset: 0; opacity: 0; }
	.m-sig > i::before { content: ""; position: absolute; right: 2px; top: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-press); box-shadow: 0 0 0 2px var(--paper); }
	.m-live .m-sig > i { animation: m-sig 1.5s cubic-bezier(.45, 0, .55, 1) calc(var(--m-i, 0) * .12s) 2 backwards; }
	@keyframes m-sig { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: none; } }
	@media (max-width: 1179px) {
		.m-sig { left: 22px; right: auto; top: 0; bottom: 9px; width: 12px; height: auto; }
		.m-sig > i::before { left: 2px; right: auto; top: auto; bottom: 2px; }
		@keyframes m-sig { 0% { opacity: 0; transform: translate3d(0, -100%, 0); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: none; } }
	}

	/* 5. Micro-interactions. */
	/* Cards and tiles with a frame lift slightly; the image inside scales within its frame. */
	ul.products.sgh-cards > li.product, .x-fam, .x-mini-sols a, .sgh-ctiles a, .x-plat, .x-brail-tile { transition: transform .2s ease, box-shadow .2s ease, border-color .15s ease; }
	ul.products.sgh-cards > li.product:hover, .x-fam:hover, .x-mini-sols a:hover, .sgh-ctiles a:hover, .x-plat:hover { transform: translate3d(0, -3px, 0); box-shadow: 0 10px 24px rgba(30, 30, 28, .07); }
	.x-brail-tile:hover { transform: translate3d(0, -2px, 0); }
	.x-fam-pic, .sgh-ctiles .pic, .h6-guide-vis .x-gthumb { overflow: hidden; }
	.x-fam-pic img, .sgh-ctiles .pic img, .h6-rg-pic img, .h6-sol-vis > *, .h6-guide-vis .x-gthumb > *, .x-mini-sols a > svg, .x-mini-sols a > img { transition: transform .35s ease; }
	.x-fam:hover .x-fam-pic img, .sgh-ctiles a:hover .pic img, .h6-rg-lead:hover .h6-rg-pic img, .h6-rg-list a:hover .h6-rg-pic img, .h6-sol:hover .h6-sol-vis > *, .h6-guides a:hover .x-gthumb > * { transform: scale(1.04); }
	/* Buttons press in. */
	.btn, .button, .single_add_to_cart_button, .search button, .h6-search button { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: .15s; }
	.btn:active, .button:active, .single_add_to_cart_button:active, .search button:active, .h6-search button:active, .m-tk-btn:active { transform: translate3d(0, 1px, 0) scale(.985); }
	/* Mega menu, its panes and the phone drawer open with a short fade and drop. */
	.primary-nav.mega .mega-panel:not([hidden]) { animation: m-drop .18s ease-out; }
	.mega-pane:not([hidden]) { animation: m-fade .16s ease-out; }
	.sgh-drawer-backdrop:not([hidden]) { animation: m-fade .2s ease-out; }
	.sgh-drawer.is-open .dr-nav, .sgh-drawer.is-open .dr-quick, .sgh-drawer.is-open .dr-acts { animation: m-drop .24s .06s ease-out backwards; }
	@keyframes m-drop { from { opacity: 0; transform: translate3d(0, -6px, 0); } }
	@keyframes m-fade { from { opacity: 0; } }
	/* FAQ and drawer accordions: the answer fades in; the height eases where supported. */
	.sgh-faqs details[open] > :not(summary), details.x-qa[open] > :not(summary), .x-faq details[open] > :not(summary), .dr-depts details[open] > ul { animation: m-drop .22s ease-out; }
	@supports (interpolate-size: allow-keywords) {
		.sgh-faqs details, details.x-qa, .x-faq details, .dr-depts details { interpolate-size: allow-keywords; }
		.sgh-faqs details::details-content, details.x-qa::details-content, .x-faq details::details-content, .dr-depts details::details-content { height: 0; overflow: clip; transition: height .24s ease, content-visibility .24s allow-discrete; }
		.sgh-faqs details[open]::details-content, details.x-qa[open]::details-content, .x-faq details[open]::details-content, .dr-depts details[open]::details-content { height: auto; }
	}
	/* Product gallery crossfade (set in the script for desktop pointers). Fade mode has no viewport:
	   the slide list must contain its stacked floats, and each slide clips its own zoom image. */
	.m-gfade .woocommerce-product-gallery__wrapper { display: flow-root; }
	.m-gfade .woocommerce-product-gallery__image { overflow: hidden; }
	/* Header quote and cart counts pulse after an item is added. */
	.count.m-bump { animation: m-bump .55s cubic-bezier(.3, .7, .4, 1) 2; }
	@keyframes m-bump { 30% { transform: scale(1.35); } 60% { transform: scale(.94); } }
}

/* Reduced motion switched on after the ticker was built: back to one static row. */
@media (prefers-reduced-motion: reduce) { .m-tk .m-clone, .m-tk-btn { display: none; } }

@media print { .m-rv { opacity: 1 !important; transform: none !important; } }