/**
 * نوار بیت‌یار در /services/ (template-parts/services-bityar.php).
 * تیره با هاله‌ی نارنجی؛ ماسکوت شناور و تاب‌خوران، ستاره‌های ریز، و حبابی که سه نمونه‌پرسش را
 * پشت سر هم نشان می‌دهد. همه‌ی حرکت‌ها با «کاهش حرکت» سیستم خاموش می‌شوند.
 */

.byb { padding-block: 24px 8px; }
.byb__wrap {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	align-items: center;
	gap: 28px;
	padding: 36px 44px;
	border-radius: var(--radius-lg, 24px);
	background:
		radial-gradient(520px 340px at 14% 50%, rgba(247, 160, 29, .2), transparent 70%),
		radial-gradient(420px 300px at 100% 0%, rgba(123, 97, 255, .16), transparent 70%),
		linear-gradient(135deg, #1b1d21 0%, #26282c 55%, #1e2125 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.byb__wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(90deg, #000, transparent 70%);
}

/* ---- ماسکوت ---- */
.byb__art { position: relative; order: 2; height: 320px; display: grid; place-items: center; }
.byb__glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 154, 31, .55), rgba(255, 106, 0, .12) 58%, transparent 72%); animation: byb-pulse 3.2s ease-in-out infinite; }
.byb__ring { position: absolute; width: 250px; height: 250px; border-radius: 50%; border: 1px dashed rgba(247, 160, 29, .45); animation: byb-spin 26s linear infinite; }
.byb__bym { position: relative; width: 300px; height: auto; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); transform-origin: 50% 92%; animation: byb-float 4.2s ease-in-out infinite; }
.byb__spark { position: absolute; width: 10px; height: 10px; background: #ffd27a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: byb-tw 2.6s ease-in-out infinite; }
.byb__spark.s1 { top: 34px; left: 62px; }
.byb__spark.s2 { top: 96px; right: 40px; width: 8px; height: 8px; animation-delay: .9s; }
.byb__spark.s3 { bottom: 58px; left: 36px; width: 12px; height: 12px; animation-delay: 1.7s; }

/* حباب حرف با سه نمونه‌پرسش که پشت سر هم می‌آیند */
.byb__bubble {
	position: absolute;
	top: 12px;
	right: 8px;
	display: grid;
	min-width: 196px;
	padding: 10px 14px;
	border-radius: 16px 16px 4px 16px;
	background: #fff;
	color: #1e2125;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.5;
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, .5);
}
.byb__bubble::after { content: ""; position: absolute; bottom: -7px; right: 26px; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.byb__bubble .q { grid-area: 1 / 1; opacity: 0; animation: byb-q 9s infinite; white-space: nowrap; }
.byb__bubble .q2 { animation-delay: 3s; }
.byb__bubble .q3 { animation-delay: 6s; }

/* ---- متن ---- */
.byb__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px; background: rgba(247, 160, 29, .14); color: #ffc46b; font-size: 13px; font-weight: 700; }
.byb__eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary, #f7a01d); box-shadow: 0 0 0 4px rgba(247, 160, 29, .2); }
.byb__title { margin: 14px 0 10px; font-size: clamp(24px, 3vw, 34px); font-weight: 800; line-height: 1.45; color: #fff; }
.byb__title em { font-style: normal; color: var(--primary, #f7a01d); }
.byb__lead { margin: 0 0 20px; max-width: 620px; font-size: 15px; line-height: 2; color: var(--dark-muted, #b9bcbf); }
.byb__cards { display: grid; gap: 10px; max-width: 640px; }
.byb__card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--dark-border, #3c3f44); background: rgba(255, 255, 255, .03); color: #fff; text-decoration: none; transition: border-color .18s, background .18s, transform .18s; }
.byb__card:hover, .byb__card:focus-visible { border-color: rgba(247, 160, 29, .6); background: rgba(247, 160, 29, .07); transform: translateX(-3px); }
.byb__ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(247, 160, 29, .14); color: #ffc46b; }
.byb__ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.byb__txt { min-width: 0; }
.byb__txt b { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.byb__txt small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.8; color: var(--dark-muted, #b9bcbf); }
.byb__tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(22, 163, 74, .18); color: #4ade80; }
.byb__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 22px; }
.byb__link { color: #ffc46b; font-weight: 700; text-decoration: none; }
.byb__link:hover { color: #fff; }

@keyframes byb-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes byb-pulse { 0%, 100% { transform: scale(.94); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes byb-spin { to { transform: rotate(360deg); } }
@keyframes byb-tw { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@keyframes byb-q { 0% { opacity: 0; transform: translateY(6px); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 960px) {
	.byb__wrap { grid-template-columns: minmax(0, 1fr); padding: 26px 20px 24px; gap: 8px; }
	.byb__art { order: 0; height: 240px; }
	.byb__glow { width: 230px; height: 230px; }
	.byb__ring { width: 196px; height: 196px; }
	.byb__bym { width: 220px; }
	.byb__bubble { top: 6px; right: 50%; transform: translateX(62%); min-width: 0; font-size: 12px; }
	.byb__lead { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.byb__glow, .byb__ring, .byb__bym, .byb__spark { animation: none; }
	.byb__bubble .q { animation: none; }
	.byb__bubble .q1 { opacity: 1; }
}