/**
 * Section: introducing — Figma 4002:1697 (desktop) / 4002:2194 (mobile)
 *
 * Desktop  grid 1290 x 328 (căn giữa trong 1400)
 *   ô chữ    30 x 37, font 32/600/lh115%, màu #ffffff@24% (trúng từ khoá = #ffffff)
 *   gap      cột 40 (var-40) · hàng 60 (var-60)
 * Mobile    grid 464 x 430 (tràn 57px mỗi bên của 350)
 *   ô chữ    30 x 25.3, font 22/600/lh115%
 *   gap      cột 32 (var-32) · hàng 45 (step)
 * Pill      viền 2px gradient 90deg #cc6af9 → #ff4e41, radius 100
 */

#cd-introducing .cd-wordgrid {
	display: flex;
	justify-content: center;
}

/* ---------- Pill dùng chung ---------- */
#cd-introducing .cd-wordgrid__pill {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

#cd-introducing .cd-wordgrid__svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Effect "Highlight keywords" (spec PDF — Solution intro):
   viền gradient tự vẽ quanh lần lượt FIND → VET → RECRUIT.
   Kỹ thuật lấy từ cofounder.co: stroke-dashoffset chạy từ hết chiều dài về 0.

   --pen-len do PHP tính (2 cạnh thẳng + 1 đường tròn) và ghi inline trên .pill.
   KHÔNG dùng pathLength="1000": Chrome không áp dụng pathLength cho <rect>, và
   `vector-effect: non-scaling-stroke` khiến dash được đo ở hệ toạ độ khác với
   hình học — hệ quả là viền chạy xong vẫn hở một đoạn. */
#cd-introducing .cd-wordgrid__pen {
	fill: none;
	stroke-width: 2;
	stroke-dasharray: var(--pen-len, 1000);
	stroke-dashoffset: var(--pen-len, 1000);
}

/* Chưa có JS → hiện sẵn viền, không phụ thuộc hiệu ứng */
#creator-discovery:not(.cd-motion-ready) #cd-introducing .cd-wordgrid__pen {
	stroke-dashoffset: 0;
}

#cd-introducing .cd-wordgrid__pill.is-drawn .cd-wordgrid__pen {
	animation: cd-word-stroke var(--cd-word-draw, 560ms) cubic-bezier(.45, .05, .25, 1) var(--cd-word-delay, 0ms) both;
}

@keyframes cd-word-stroke {
	from { stroke-dashoffset: var(--pen-len, 1000); }
	to   { stroke-dashoffset: 0; }
}

/* Chữ trong từ khoá sáng lên ngay sau khi viền vẽ xong */
#cd-introducing .cd-wordgrid__cell.is-on {
	transition: color .45s var(--cd-ease-out, ease) var(--cd-word-letter-delay, 0ms);
}

#creator-discovery.cd-motion-ready #cd-introducing .cd-wordgrid__cell.is-on {
	color: var(--color-disabled-fg);
}

#creator-discovery.cd-motion-ready #cd-introducing .cd-wordgrid__row.is-lit .cd-wordgrid__cell.is-on,
#creator-discovery.cd-motion-ready #cd-introducing .cd-wordgrid__col.is-lit .cd-wordgrid__cell.is-on {
	color: var(--color-1st-fg);
}

@media (prefers-reduced-motion: reduce) {
	#cd-introducing .cd-wordgrid__pen { stroke-dashoffset: 0; animation: none; }
	#creator-discovery.cd-motion-ready #cd-introducing .cd-wordgrid__cell.is-on { color: var(--color-1st-fg); }
}

#cd-introducing .cd-wordgrid__cell {
	position: relative;
	z-index: 1;
	display: block;
	width: 30px;
	flex: none;
	text-align: center;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	color: var(--color-disabled-fg);
}

#cd-introducing .cd-wordgrid__cell.is-on {
	color: var(--color-1st-fg);
}

/* ---------- Desktop ---------- */
#cd-introducing .cd-wordgrid__desktop {
	display: flex;
	flex-direction: column;
	gap: var(--var-60);
}

#cd-introducing .cd-wordgrid__row {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--var-40);
	height: 36.8px;
}

#cd-introducing .cd-wordgrid__desktop .cd-wordgrid__cell {
	font-size: var(--fs-h4);
}

/* Viền neo theo DÃY CHỮ, không theo mép hàng.
   Hàng là flex `justify-content: center`, dãy chữ rộng (n × 70 − 40). Ở desktop dãy
   vừa đúng bề rộng hàng nên mép trái dãy = mép trái hàng; nhưng Figma laptop chỉ có
   18 chữ/hàng còn code render 19 (1290 > 1272) → dãy tràn và bị căn giữa lại, mép
   trái lùi 12.25px. Nếu tính left từ mép hàng thì viền lệch đúng 12.25px ở laptop.
   Công thức dưới bám theo tâm hàng nên đúng ở MỌI bề rộng:
     left = 50% − (dãy/2) + i × 70 − 25 */
#cd-introducing .cd-wordgrid__desktop .cd-wordgrid__pill {
	left: calc(50% - (var(--row-n) * 70px - 40px) / 2 + var(--pill-i) * 70px - 25px);
	width: var(--pill-width);
	top: 50%;
	height: 60px;
	transform: translateY(-50%);
}

@media (min-width: 1025px) {
	#cd-introducing .cd-wordgrid__mobile {
		display: none;
	}
}

/* ---------- Mobile + tablet ---------- */
@media (max-width: 1024px) {
	#cd-introducing .cd-wordgrid__desktop {
		display: none;
	}

	#cd-introducing .cd-wordgrid {
		/* Figma: grid rộng 464 nằm giữa content 350 → tràn 57px mỗi bên */
		margin-inline: calc((100% - 464px) / 2);
		width: 464px;
		max-width: none;
	}

	#cd-introducing .cd-wordgrid__mobile {
		display: flex;
		gap: var(--var-32);
	}

	#cd-introducing .cd-wordgrid__col {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 30px;
		flex: none;
	}

	/* Figma: ô cao 25.3 (lh 115%), khoảng cách hàng 19.7 → bước 45,
	   cột 10 ô = 10 × 25.3 + 9 × 19.7 = 430.3 (không phải 10 × 45) */
	#cd-introducing .cd-wordgrid__col {
		gap: 19.7px;
	}

	#cd-introducing .cd-wordgrid__mobile .cd-wordgrid__cell {
		font-size: 22px;
		height: 25.3px;
		line-height: 25.3px;
	}

	/* top/height tính từ index chữ: top = 45r − 10, height = 45n */
	#cd-introducing .cd-wordgrid__mobile .cd-wordgrid__pill {
		left: -5px;
		width: 40px;
		top: var(--pill-top);
		height: var(--pill-height);
	}
}