/**
 * Section 1: Hero — Figma desktop 4435:4077 · laptop 4435:7845 · mobile 4435:23470
 *
 * Visual (4435:4080) dựng trên 1 STAGE CỐ ĐỊNH 1400×545px, mọi toạ độ con ghi
 * thẳng số Figma. Stage được thu/phóng bằng transform: scale(--fd-hero-scale):
 *   desktop 1920  scale 1   stage 1400 = container 1400          (x = 0)
 *   laptop  1336  scale 1   stage 1400 tràn container 1272       (x = −64)
 *   mobile  390   scale .5  stage 700×272.5, container 350        (x = −175)
 *   tablet  834   (không có frame) — luật chung: stage rộng = 2 × container
 *                 như mobile, nhưng KHÔNG phóng quá 1 → 834 ra scale 1
 *                 (2 × 794 = 1588 > 1400), stage 1400 tràn 2 bên, cụm 6 thẻ
 *                 (x 325…1114) vẫn lọt trọn trong 834.
 * Công thức: scale = min(1, 2 × bề rộng container / 1400) — scripts.js tính theo
 * bề rộng thật; CSS chỉ khai giá trị mặc định cho lúc chưa có JS.
 * Stage tự overflow: hidden (Figma frame clip content); phần tràn ngang ra ngoài
 * viewport do #fraud-detection { overflow-x: clip } cắt.
 *
 * Hiệu ứng: get_motion_context(4435:12312) — 1 vòng 10.013s, loop vô hạn.
 * prefers-reduced-motion: reduce → KHÔNG khai animation nào, stage đứng yên ở
 * đúng frame tĩnh 4435:4080 (6 thẻ hiện đủ, vệt radar nằm dưới mask).
 */

#fd-hero {
	--fd-hero-scale: 1;
	/* Màu không có token chung — lấy mẫu pixel từ screenshot Figma */
	--fd-hero-purple: #2e10da;       /* viền thẻ, nét vòng tròn, icon tím */
	--fd-hero-blue: #77bbf3;         /* chữ nhấn "signup blocked", icon xanh */
	--fd-hero-cycle: 10.013s;        /* timeline cohort 4435:12312 */
}

@media (max-width: 1024px) {
	#fd-hero {
		--fd-hero-scale: .5;
	}
}

/* ============================================================
   Khung scale
   ============================================================ */
#fd-hero .fd-hero__visual {
	position: relative;
	width: 100%;
	height: calc(545px * var(--fd-hero-scale));
}

#fd-hero .fd-hero__stage {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1400px;
	height: 545px;
	margin-left: -700px;
	overflow: hidden;
	transform: scale(var(--fd-hero-scale));
	transform-origin: 50% 0;
	background: var(--color-reverse-bg);
}

#fd-hero .fd-hero__stage > * {
	position: absolute;
	display: block;
}

/* ============================================================
   circle background 4435:4081 — tâm (700, 500)
   Mỗi vòng: nét 1px tím + nền radial tối dần vào trong (đo pixel: màu nền
   bằng #050505 ở ~60% bán kính, đậm nhất sát mép). Nền đặc nên vòng trong đè
   kín vòng ngoài, khớp ảnh Figma mà không phải tính chồng alpha.
   ============================================================ */
#fd-hero .fd-hero__ring {
	border-radius: 50%;
	border: 1px solid var(--fd-hero-purple);
	background: radial-gradient(circle closest-side, var(--color-reverse-bg) 60%, var(--fd-ring-edge) 100%);
}

/* Ellipse 2 — Ø960: vòng ngoài cùng, chỉ có quầng xám rất nhẹ sát mép */
#fd-hero .fd-hero__ring--1 {
	left: 220px; top: 20px; width: 960px; height: 960px;
	border-color: rgba(46, 16, 218, .3);
	background: radial-gradient(circle closest-side, var(--color-reverse-bg) 95%, #0b0b0b 100%);
}

#fd-hero .fd-hero__ring--2 { left: 275px; top: 75px;  width: 850px; height: 850px; --fd-ring-edge: #0b071f; }
#fd-hero .fd-hero__ring--3 { left: 375px; top: 175px; width: 650px; height: 650px; --fd-ring-edge: #11083f; }
#fd-hero .fd-hero__ring--4 { left: 475px; top: 275px; width: 450px; height: 450px; --fd-ring-edge: #160a58; }
#fd-hero .fd-hero__ring--5 { left: 575px; top: 375px; width: 250px; height: 250px; --fd-ring-edge: #140950; }

/* ============================================================
   radar 4435:4087 — khung 850×850 tâm (700, 500), frame tĩnh xoay −90°
   (vệt quét nằm hẳn dưới đường chân trời → bị mask che).
   Vệt "Ellipse 12" = hình quạt vành khuyên: bán kính 107 → 425, từ 6.8° dưới
   phương ngang trái lên 61.8° trên (đo từ bbox vector: x 0…374.6, y 50.4…475.4).
   ============================================================ */
#fd-hero .fd-hero__radar {
	left: 275px;
	top: 75px;
	width: 850px;
	height: 850px;
	transform: rotate(-90deg);
}

#fd-hero .fd-hero__sweep {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	/* conic: 0deg = hướng lên, chiều kim đồng hồ. Quạt 263.2° → 331.8° (68.6°),
	   mép trước (theo chiều quay) sáng nhất, mờ dần về mép sau. */
	background: conic-gradient(
		from 263.2deg,
		rgba(46, 16, 218, 0) 0deg,
		rgba(46, 16, 218, .38) 68.6deg,
		transparent 68.6deg
	);
	-webkit-mask-image: radial-gradient(circle closest-side, transparent 25%, #000 25.2%);
	mask-image: radial-gradient(circle closest-side, transparent 25%, #000 25.2%);
}

/* mask 4435:4089 — che mọi thứ dưới y = 500 (trừ line/logo/thẻ nằm trên) */
#fd-hero .fd-hero__mask {
	left: 0;
	top: 500px;
	width: 100%;
	height: 45px;
	background: var(--color-reverse-bg);
}

/* ============================================================
   line 4435:4090 — ngang 1500 (x −50) + dọc 500 tại x = 700.
   Nét xanh, mờ dần về 2 đầu (ngang) và lên trên (dọc) — đo pixel.
   ============================================================ */
#fd-hero .fd-hero__line--h {
	left: -50px;
	top: 499.5px;
	width: 1500px;
	height: 1px;
	background: linear-gradient(90deg,
		rgba(16, 69, 142, .12) 0%,
		rgba(16, 69, 142, .5) 18%,
		rgba(16, 69, 142, .75) 35%,
		#10458e 50%,
		rgba(16, 69, 142, .75) 65%,
		rgba(16, 69, 142, .5) 82%,
		rgba(16, 69, 142, .12) 100%);
}

#fd-hero .fd-hero__line--v {
	left: 699.5px;
	top: 0;
	width: 1px;
	height: 500px;
	background: linear-gradient(180deg, rgba(16, 69, 142, 0) 8%, #10458e 100%);
}

/* dot 4435:4093 — 4 chấm 12px trên trục dọc, đúng đỉnh 4 vòng trong */
#fd-hero .fd-hero__dot {
	left: 694px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #464358;
	/* viền 1px — lấy mẫu pixel ảnh 1:1 Figma (MCP local) */
	box-shadow: inset 0 0 0 1px var(--fd-hero-purple);
}

/* logo 4435:4098 — 90×90 ở tâm đáy */
#fd-hero .fd-hero__logo {
	left: 655px;
	top: 454.72px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
}

#fd-hero .fd-hero__logo img {
	width: 90px;
	height: 90px;
}

/* Rectangle 2 / 3 (4435:12334 · 12335) — 124×46 tại (−17, 104.28) trong logo,
   dời lên −154px: vệt sáng quét qua logo. Frame tĩnh: nằm dưới logo → ẩn. */
#fd-hero .fd-hero__shine {
	position: absolute;
	left: -17px;
	top: 104.28px;
	width: 124px;
	height: 46px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
}

/* ============================================================
   Thẻ cảnh báo — 4435:4107 … 4166
   Figma: padding 10 / 12 (đã gồm nét 1px), icon 26, gap 8, radius 12.
   Line 1: 11px · line 2: 10px (lh 1.15), cách nhau 2.
   ============================================================ */
#fd-hero .fd-hero-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 11px;
	border: 1px solid var(--fd-hero-purple);
	border-radius: 12px;
	background: var(--color-reverse-bg);
	font-family: var(--font-body);
	white-space: nowrap;
}

#fd-hero .fd-hero-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 7px;
}

#fd-hero .fd-hero-card__icon svg {
	width: 16px;
	height: 16px;
}

#fd-hero .fd-hero-card__icon--light {
	background: #fff;
	color: var(--fd-hero-purple);
}

/* 2nd-bg của bộ dark (#1a1a1a) */
#fd-hero .fd-hero-card__icon--dark {
	background: #1a1a1a;
	color: var(--fd-hero-blue);
}

#fd-hero .fd-hero-card__text {
	display: flex;
	flex: none;
	flex-direction: column;
	gap: 2px;
}

/* Cỡ chữ — get_design_context(4435:4080): dòng 1 = 11px (giá trị trắng SemiBold,
   nhãn xanh Medium), dòng 2 = 10px Medium trắng 60%, line-height 1.15.
   KHÔNG làm tròn px như các text khác (base.css): so pixel 1:1 từng thẻ với Figma,
   1.15 lệch ít hơn 13px/11px (12.1% vs 14.5%) dù thẻ cao 46.14 thay vì 46. */
#fd-hero .fd-hero-card__line1 {
	display: flex;
	gap: 4px;
	font-size: 11px;
	line-height: 1.15;
	font-weight: 500;
}

#fd-hero .fd-hero-card__line2 {
	display: flex;
	flex-direction: column;
	font-size: 10px;
	line-height: 1.15;
	font-weight: 500;
}

/* Thẻ "Affiliate": dòng 2 xuống 2 dòng trong khối chữ 104 (Figma 104×22) */
#fd-hero .fd-hero-card__line2--wrap {
	white-space: normal;
}

#fd-hero .fd-hero-card__strong { color: #fff; font-weight: 600; }
#fd-hero .fd-hero-card__accent { color: var(--fd-hero-blue); }
#fd-hero .fd-hero-card__muted { color: rgba(255, 255, 255, .6); }

#fd-hero .fd-hero-card__strong-sm {
	color: #fff;
}

/* 2 nút tròn 12px của thẻ "Affiliate" (4435:4127) */
#fd-hero .fd-hero-card__actions {
	display: flex;
	flex: none;
	gap: 4px;
}

#fd-hero .fd-hero-card__actions svg {
	width: 12px;
	height: 12px;
}

/* toggle 4435:4144 — 26×14, chấm 10 ở x 14 (đang bật). Bị thẻ emma che ở frame
   tĩnh nên Figma không thấy màu → dùng màu nhấn xanh của bộ thẻ. */
#fd-hero .fd-hero-card__toggle {
	position: relative;
	flex: none;
	width: 26px;
	height: 14px;
	border-radius: 7px;
	background: var(--fd-hero-blue);
}

#fd-hero .fd-hero-card__toggle::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 14px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
}

/* "Held for review" 4435:4178 */
#fd-hero .fd-hero-card__status {
	flex: none;
	font-size: 10px;
	line-height: 1.15;
	font-weight: 500;
	color: var(--fd-hero-blue);
}

/* ============================================================
   Animation — chỉ khi người dùng KHÔNG bật giảm chuyển động.
   Keyframe chép từ get_motion_context(4435:12312).
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

	/* Radar: Figma xoay −90° → 540° rồi nhảy 900° ở 99.865% → 100%, vòng mới lại
	   bắt đầu ở −90° ⇒ mỗi lần loop lệch 90° (giật). Sửa: −90° → 630° (đúng 2
	   vòng), góc cuối ≡ góc đầu (mod 360°); ease-in-out nên vận tốc ở 2 đầu = 0,
	   nối vòng không giật. */
	#fd-hero .fd-hero__radar {
		animation: fd-hero-radar var(--fd-hero-cycle) cubic-bezier(.5, 0, .5, 1) infinite;
	}

	#fd-hero .fd-hero__shine--1 {
		animation: fd-hero-shine-1 var(--fd-hero-cycle) linear infinite;
	}

	#fd-hero .fd-hero__shine--2 {
		animation: fd-hero-shine-2 var(--fd-hero-cycle) linear infinite;
	}

	/* 6 thẻ dùng CHUNG 1 bộ keyframe (cả 6 node Figma có cùng nhịp tương đối),
	   lệch pha bằng animation-delay = thời điểm thẻ xuất hiện. fill-mode
	   backwards → trước lần chạy đầu thẻ ẩn sẵn (opacity 0). */
	#fd-hero .fd-hero-card {
		opacity: 0;
		animation:
			fd-hero-card-opacity var(--fd-hero-cycle) linear var(--fd-card-delay, 0s) infinite backwards,
			fd-hero-card-translate var(--fd-hero-cycle) linear var(--fd-card-delay, 0s) infinite backwards,
			fd-hero-card-scale var(--fd-hero-cycle) linear var(--fd-card-delay, 0s) infinite backwards;
	}

	/* Hero ra khỏi viewport → dừng hết cho nhẹ máy (scripts.js bật class) */
	#fd-hero.is-paused .fd-hero__radar,
	#fd-hero.is-paused .fd-hero__shine,
	#fd-hero.is-paused .fd-hero-card {
		animation-play-state: paused;
	}
}

@keyframes fd-hero-radar {
	from { transform: rotate(-90deg); }
	to   { transform: rotate(630deg); }
}

/* Rectangle 2: 16.588% → 36.561% · Rectangle 3: 55.465% → 75.438% */
@keyframes fd-hero-shine-1 {
	0%, 16.588% { transform: translateY(0); }
	36.561%, 100% { transform: translateY(-154px); }
}

@keyframes fd-hero-shine-2 {
	0%, 55.465% { transform: translateY(0); }
	75.438%, 100% { transform: translateY(-154px); }
}

/* Nhịp thẻ — lấy theo node 4435:12339, mốc 0% = lúc thẻ bắt đầu hiện:
   hiện  opacity 0→1 (0.4s) · y +20→0 (1s, ease-in) · scale .6→1 (0.78s)
   giữ   tới 18.875% (opacity) / 15.879% (scale)
   ẩn    opacity →0, scale →.8, xong ở 26.365% */
@keyframes fd-hero-card-opacity {
	0%       { opacity: 0; animation-timing-function: cubic-bezier(.09, .55, .5, 1); }
	3.995%   { opacity: 1; }
	18.875%  { opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .5, .9); }
	26.365%  { opacity: 0; }
	100%     { opacity: 0; }
}

@keyframes fd-hero-card-translate {
	0%      { translate: 0 20px; animation-timing-function: ease-in; }
	9.987%  { translate: 0 0; }
	100%    { translate: 0 0; }
}

@keyframes fd-hero-card-scale {
	0%       { scale: .6; animation-timing-function: cubic-bezier(.15, .52, .5, 1); }
	7.79%    { scale: 1; }
	15.879%  { scale: 1; animation-timing-function: cubic-bezier(.5, 0, .7, .7); }
	26.365%  { scale: .8; }
	100%     { scale: .8; }
}