/**
 * Section: 5 steps — Figma 4002:1821 (desktop) / 4002:2328 (mobile)
 *
 * Dial (--dial-u = "đơn vị tỉ lệ" dạng length: 1px ở desktop, .4px ở mobile,
 * .8px ở tablet — mọi kích thước dial = hằng số Figma × var(--dial-u)):
 *   vòng tròn  Ø1000, stroke 1px #4a4949
 *   marker     bán kính 514, cách nhau 30°, xoay theo góc
 *   chấm       Ø20 #ff000f · số 32/600 màu #fff (inactive: opacity .3, chấm ẩn)
 *   gap        8 giữa chấm và số
 */

#cd-steps {
	/* Figma frame clipsContent = true — cắt phần vòng quay tràn sang trái.
	   Dùng overflow-x: clip thay cho hidden vì hidden sẽ phá position: sticky
	   của khối spinner bên trong. */
	overflow-x: clip;
	overflow-y: visible;
}

/* Section này full-bleed: content-wrapper = 1856 = 1920 − 2 × 32 */
#cd-steps .cd-container--wide {
	max-width: none;
}

#cd-steps .cd-steps {
	--dial-u: 1px;
	--dial-diameter: calc(1000 * var(--dial-u));
	--dial-radius: calc(514 * var(--dial-u));

	display: flex;
	align-items: center;
	gap: var(--var-80);
}

/* ---------- dial ---------- */
/* Figma: cột vòng quay là FIXED 538 ở desktop (1856) nhưng chuyển sang FILL ở
   laptop (1272) → khi đó 3 cột chia đều 370.67. Công thức min() khớp CẢ HAI mà
   không cần thêm breakpoint:
     desktop (1856-160)/3 = 565.3 → min(538, 565.3) = 538      ✓
     laptop  (1272-160)/3 = 370.67 → min(538, 370.67) = 370.67 ✓
   Hai cột còn lại flex: 1 1 0 tự chia phần dư (desktop 579, laptop 370.67). */
#cd-steps .cd-steps__dial {
	position: relative;
	flex: none;
	width: min(538px, calc((100% - 2 * var(--var-80)) / 3));
	height: 1076px;
}

/* Tâm vòng tròn neo theo mép PHẢI của cột dial, không phải mép trái.
   Figma đặt marker đang chọn cách mép phải cột đúng 24px ở CẢ hai breakpoint:
     desktop  cột 538    → tâm ở 538 − 514 − 24 = 0        (đúng bằng mép trái)
     laptop   cột 370.67 → tâm ở 370.67 − 514 − 24 = −167.3 (Figma đo được −167.1)
   Trước đây `left: 0` chỉ đúng ở desktop; ở laptop cột hẹp hơn nên marker văng ra
   ngoài cột 143px và ĐÈ LÊN chữ của panel bên cạnh. */
#cd-steps .cd-steps__circle {
	position: absolute;
	left: calc(100% - var(--dial-radius) - 24px);
	top: 50%;
	width: var(--dial-diameter);
	height: var(--dial-diameter);
	margin-left: calc(var(--dial-diameter) / -2);
	margin-top: calc(var(--dial-diameter) / -2);
	border: 1px solid var(--color-stroke);
	border-radius: 50%;
}

#cd-steps .cd-steps__marker {
	position: absolute;
	left: calc(100% - var(--dial-radius) - 24px);
	top: 50%;
	transform-origin: 0 0;
	transform: rotate(calc(var(--angle) + var(--cd-dial-base, 0deg))) translateX(var(--dial-radius));
}

#cd-steps .cd-steps__marker-inner {
	display: flex;
	align-items: center;
	gap: calc(8 * var(--dial-u));
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--cd-dial-base, 0deg)));
}

#cd-steps .cd-steps__dot {
	width: calc(20 * var(--dial-u));
	height: calc(20 * var(--dial-u));
	flex: none;
	border-radius: 50%;
	background: #ff000f;
}

/* Figma: text node rộng cố định 20, line-height 32 (100%), căn giữa
   → marker inner = 20 + gap 8 + 20 = 48 × 32 */
#cd-steps .cd-steps__num {
	width: calc(20 * var(--dial-u));
	flex: none;
	font-size: calc(32 * var(--dial-u));
	font-weight: var(--fw-semibold);
	line-height: calc(32 * var(--dial-u));
	text-align: center;
	color: var(--color-1st-fg);
}

/* trạng thái marker theo Figma */
#cd-steps .cd-steps__marker.is-dim .cd-steps__dot {
	opacity: 0;
}

#cd-steps .cd-steps__marker.is-dim .cd-steps__num {
	opacity: .3;
}

#cd-steps .cd-steps__marker.is-off {
	opacity: 0;
}

/* ---------- text + media ---------- */
#cd-steps .cd-steps__text,
#cd-steps .cd-steps__media {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
}

#cd-steps .cd-steps__media {
	align-self: center;
}

#cd-steps .cd-steps__text-inner {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
	width: 100%;
}

#cd-steps .cd-steps__title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--color-1st-fg);
}

#cd-steps .cd-steps__media img {
	width: 100%;
	height: auto;
	aspect-ratio: 579.033 / 599;
	object-fit: cover;
}

/* ---------- Desktop ---------- */
@media (min-width: 1025px) {
	#cd-steps .cd-steps {
		height: 1076px;
	}
}

/* ---------- Mobile + tablet ---------- */
@media (max-width: 1024px) {
	/* Figma đo được: vòng quay ở tablet đúng gấp ĐÔI mobile
	     Ø 400 → 800 · R 205.6 → 411.2 · chấm 8 → 16 · số 12.8 → 25.6 · gap 3.2 → 6.4
	   nên --dial-u nội suy tuyến tính theo bề rộng viewport, khớp đúng 2 mốc Figma:
	     390px → .4   (0.4 + 0 × 0.0009009)
	     834px → .8   (0.4 + 444 × 0.0009009)
	   Đây là MỘT quy tắc fluid, không phải breakpoint thứ ba. */
	#cd-steps .cd-steps {
		--dial-u: calc(.4px + (100vw - 390px) * 0.0009009009);
		flex-direction: column;
		align-items: stretch;
		gap: var(--var-40);
		height: auto;
	}

	/* Khung nhìn dial: Figma 350×120 @390 và 794×150 @834 → cao nội suy tương tự. */
	#cd-steps .cd-steps__dial {
		width: 100%;
		height: calc(120px + (100vw - 390px) * 0.06756757);
		overflow: hidden;
	}

	/* Figma: content của panel (heading + ảnh) rộng TỐI ĐA 500 và căn giữa
	   (mobile 350 < 500 nên vô hiệu; tablet 834 → đúng 500 như frame 4002:2003) */
	#cd-steps .cd-steps__text,
	#cd-steps .cd-steps__media {
		width: 100%;
		max-width: 500px;
		margin-inline: auto;
	}

	/* Figma mobile: marker đang chọn nằm ở 89.89° (đáy vòng tròn = giữa khung nhìn) */
	#cd-steps .cd-steps__dial {
		--cd-dial-base: 90deg;
	}

	/* Vì ô đang chọn nằm ở đáy vòng tròn, marker xếp DỌC: chấm nằm trên cung,
	   số nằm dưới — đúng Figma 4002:2328 và giống orionix mobile.
	   (desktop giữ nguyên xếp ngang: chấm trái, số phải) */
	#cd-steps .cd-steps__marker-inner {
		flex-direction: column;
	}

	/* Tâm vòng tròn: đáy vòng cách đáy khung nhìn đúng 38 × --dial-u
	     mobile 120 − 15.2 − 200 = −95.2   ✓ Figma
	     tablet 150 − 30.4 − 400 = −280.4  ✓ Figma */
	#cd-steps .cd-steps__circle,
	#cd-steps .cd-steps__marker {
		left: 50%;
		top: calc(100% - 38 * var(--dial-u) - var(--dial-diameter) / 2);
	}

	#cd-steps .cd-steps__circle {
		margin-top: calc(var(--dial-diameter) / -2);
	}

	#cd-steps .cd-steps__text-inner {
		gap: var(--var-16);
	}

	#cd-steps .cd-steps__media img {
		aspect-ratio: 350 / 362.069;
	}

}

/* ============================================================
   Effect "Step spinner" (spec PDF — 5-steps listing)
   Vòng quay xoay −30°/step để marker của step đang chọn về vị trí 0° (bên phải).
   Marker active: chấm đỏ + số trắng. Marker khác: số mờ 30%, ẩn chấm.
   ============================================================ */
#cd-steps .cd-steps__dial {
	--cd-dial-rot: 0deg;
}

#creator-discovery.cd-motion-ready #cd-steps .cd-steps__circle,
#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker {
	transition: transform .72s var(--cd-ease-out, ease);
}

/* Xoay cả cụm marker quanh tâm vòng tròn.
 *
 *   vị trí marker  = --angle + --cd-dial-base + --cd-dial-rot
 *   hướng nội dung = --rot   + --cd-dial-rot          (quay theo mặt số)
 *   → inner phải bù lại: --rot − --angle − --cd-dial-base
 *
 * --cd-dial-base: vị trí "ô active" trên vòng tròn.
 *   desktop 0°  → active nằm bên phải (tâm ở mép trái cột)
 *   mobile  90° → active nằm đáy giữa khung (tâm ở phía trên khung) — đúng
 *                 Figma 4002:2328 (marker 1 ở 89.89°) và giống orionix mobile.
 */
#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker {
	transform: rotate(calc(var(--angle) + var(--cd-dial-base, 0deg) + var(--cd-dial-rot))) translateX(var(--dial-radius));
}

#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker-inner {
	transform: translate(-50%, -50%) rotate(calc(-1 * var(--cd-dial-base, 0deg)));
	transition: transform .72s var(--cd-ease-out, ease);
}

/* Trạng thái do JS điều khiển thay cho is-dim/is-off tĩnh của Figma */
#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker.is-off { opacity: 1; }

#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker .cd-steps__dot { opacity: 0; }
#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker .cd-steps__num { opacity: .3; }

#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker.is-current .cd-steps__dot { opacity: 1; }
#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker.is-current .cd-steps__num { opacity: 1; }

#cd-steps .cd-steps__dot,
#cd-steps .cd-steps__num {
	transition: opacity .4s var(--cd-ease-out, ease);
}

/* Nội dung + ảnh của từng step: crossfade */
#cd-steps .cd-steps__panel {
	transition: opacity .42s var(--cd-ease-out, ease), transform .42s var(--cd-ease-out, ease);
}

#creator-discovery.cd-motion-ready #cd-steps .cd-steps__panel:not(.is-active) {
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
}

/* Panels chiếm phần còn lại sau cột dial; mỗi panel = text 579 + gap 80 + media 579 */
#cd-steps .cd-steps__panels {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

#cd-steps .cd-steps__panel {
	display: flex;
	align-items: center;
	gap: var(--var-80);
	width: 100%;
}

@media (min-width: 1025px) {
	/* Khối panels cao đúng 1076 nhờ align-self: stretch của khối .cd-steps,
	   nên TẤT CẢ panel đều absolute inset 0 — kể cả panel đầu. Nếu để panel đầu
	   ở position: relative thì nó chỉ cao bằng nội dung (595) và bị dính lên
	   đỉnh, trong khi panel 2–5 lại căn giữa 1076 → step 1 lệch so với các step khác. */
	#cd-steps .cd-steps__panels {
		align-self: stretch;
	}

	#cd-steps .cd-steps__panel {
		position: absolute;
		inset: 0;
		height: 100%;
	}
}

@media (max-width: 1024px) {
	#cd-steps .cd-steps__panel {
		flex-direction: column;
		align-items: stretch;
		gap: var(--var-20);
	}

	/* Spinner chạy cả ở mobile (xem scripts.js): các panel chồng lên nhau và
	   crossfade đúng như desktop, thay vì chỉ hiện step 1.
	   Panel đầu giữ trong luồng để khối panels vẫn có chiều cao tự nhiên. */
	#cd-steps .cd-steps__panel {
		position: absolute;
		inset: 0;
	}

	#cd-steps .cd-steps__panel:first-child {
		position: relative;
	}
}


@media (prefers-reduced-motion: reduce) {
	#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker,
	#creator-discovery.cd-motion-ready #cd-steps .cd-steps__marker-inner,
	#cd-steps .cd-steps__panel { transition: none; }
}