/*
 * Payam motion layer. Each animation is scoped to its key in <html data-motion="…"> (Settings → انیمیشن‌ها) and to
 * prefers-reduced-motion: no-preference, and only moves transform, opacity or a stroke offset. With a key off, this
 * file gone, or reduced motion asked for, every element is simply in its finished state.
 */

@media (prefers-reduced-motion: no-preference) {
	/* arrow — the logo mark "delivers": the copper bar shoots in through the chevron, which settles. Plays once
	   where the mark appears: the home hero on load, and beside a success message the moment it is shown. */
	[data-motion~="arrow"] .payam-mark-bar {
		animation: payam-bar 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	[data-motion~="arrow"] .payam-mark-chevron {
		transform-box: fill-box;
		transform-origin: center;
		animation: payam-chevron 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	@keyframes payam-bar {
		from { transform: translateX(-55%); opacity: 0; }
		45% { opacity: 1; }
		to { transform: none; opacity: 1; }
	}
	@keyframes payam-chevron {
		0%, 40% { transform: none; }
		60% { transform: translateX(6%); }
		to { transform: none; }
	}

	/* ticket — the progress line fills from the first step to the current one. */
	[data-motion~="ticket"] .ticket-track-line > span {
		transform-origin: var(--track-origin, left);
		animation: payam-track 1.1s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	[dir="rtl"][data-motion~="ticket"] .ticket-track-line > span {
		--track-origin: right;
	}
	[data-motion~="ticket"] .ticket-track-dot.is-done {
		animation: payam-dot 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	@keyframes payam-track {
		from { transform: scaleX(0); }
	}
	@keyframes payam-dot {
		from { transform: scale(0.4); opacity: 0; }
	}

	/* circuit — the traces draw themselves once the section scrolls into view (assets/motion.js adds .is-in). */
	[data-motion~="circuit"] .circuit.js-pending path {
		stroke-dasharray: 1;
		stroke-dashoffset: 1;
	}
	[data-motion~="circuit"] .circuit.js-pending circle {
		opacity: 0;
	}
	[data-motion~="circuit"] .circuit.is-in path {
		stroke-dashoffset: 0;
		transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.2, 1);
	}
	[data-motion~="circuit"] .circuit.is-in path:nth-child(2) { transition-delay: 0.15s; }
	[data-motion~="circuit"] .circuit.is-in path:nth-child(3) { transition-delay: 0.3s; }
	[data-motion~="circuit"] .circuit.is-in path:nth-child(4) { transition-delay: 0.45s; }
	[data-motion~="circuit"] .circuit.is-in circle {
		opacity: 1;
		transition: opacity 0.4s 1.5s;
	}

	/* zoom — a product group's banner leans in a little under the pointer or keyboard focus. */
	[data-motion~="zoom"] [data-zoom] {
		transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	}
	[data-motion~="zoom"] a:hover > [data-zoom],
	[data-motion~="zoom"] a:focus-visible > [data-zoom] {
		transform: scale(1.05);
	}

	/* pins — dealer markers drop onto the map one after another. */
	[data-motion~="pins"] .payam-pin {
		animation: payam-pin 0.5s calc(var(--i, 0) * 70ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}
	@keyframes payam-pin {
		from { transform: translateY(-18px); opacity: 0; }
	}
}