/**
 * Creator Discovery — lớp dùng chung của trang (1 file duy nhất)
 *
 * Gồm 3 phần, đọc từ trên xuống:
 *   1. Design token  — map 1-1 với Figma variable
 *   2. Reset + layout primitive + component dùng chung
 *   3. Lớp chuyển động dùng chung (reveal + engine sticky-step)
 *
 * CSS riêng của từng section nằm ở
 * template-parts/Round13/page-creator-discovery/section-<ten>/assets/styles.css
 */

/* ============================================================================
   PHẦN 1 — DESIGN TOKEN

   Trang dùng THẲNG bộ token chung của project ở assets/css/global.css
   (--var-*, --fs-*, --color-*, --section-*, --container-max, --font-body).
   Ở đây chỉ khai báo 2 nhóm:
     a) giá trị DARK ghi đè cho phạm vi trang (global.css mặc định là light)
     b) token Figma của trang mà global.css chưa có tương đương

   Figma chỉ có 2 mode, khớp đúng Rule 1:
     desktop  (frame 1920 / laptop 1336)  -> mặc định
     mobile   (tablet 834 / mobile 390)   -> @media (max-width: 1024px)
   ============================================================================ */

/* Trang này là bản DARK của design system. global.css đã có sẵn scope `.is-dark`
   (hiện đang comment) với đúng bộ giá trị này; ở đây chỉ ghi đè trong phạm vi trang
   để không đụng tới 2 trang tối còn lại (enterprise / switch-to-uppromote).
   `body.page-template-...` cần thiết vì header / footer-cta / footer nằm NGOÀI
   #creator-discovery nhưng vẫn phải lấy đúng nền trang. */
body.page-template-page-creator-discovery {
	--color-1st-bg: #050505;
	--color-2nd-bg: #1a1a1a;

	--color-1st-fg: #ffffff;
	--color-2nd-fg: rgba(255, 255, 255, .8);
	--color-disabled-fg: rgba(255, 255, 255, .24);
	--color-reverse-fg: #050505;

	--color-stroke: #4a4949;

	--color-3rd-brd: #ddedfc;

	--color-1st-btn-bg: #ffffff;
	--color-1st-btn-fg: #050505;
	--color-2nd-btn-bg: #050505;
	--color-2nd-btn-fg: #ffffff;

}

/* Header / footer-CTA / footer dùng cơ chế `is-dark` của theme (template đăng ký trong
   $dark_templates, inc/functions.php → filter body_class). Chỉ cần ghi đè MỘT token:
   `.is-dark` mặc định cho nền header #1A1A1A (đúng cho enterprise / switch-to-uppromote),
   trang này nền #050505 nên header phải lấy đúng --color-1st-bg mới liền mạch. */
body.page-template-page-creator-discovery.is-dark .header-r11,
body.page-template-page-creator-discovery.is-dark .header-r11__drawer {
	--header-r11-bg: var(--color-1st-bg);
}

/* Token CHỈ có ở Figma của trang này — global.css chưa có tương đương.
   Mọi thứ còn lại (--var-*, --fs-*, --section-*, --container-max, --font-body,
   --color-1st-brd/2nd-brd, --color-semantic-shopify-*) dùng thẳng của global.css. */
#creator-discovery {
	/* Typography — Figma "description" và các trục global chưa mô tả */
	--description: 16px;
	--description-lg: 20px;

	--lh-heading: 1.15;
	--lh-description: 1.4;
	--lh-label: 1;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	/* Spacing Figma chưa có trong thang chung */
	--var-72: 72px;
	--section-vertical-padding: var(--space-section-lg);

	/* Chip "Smart filters / Audience fit ..." — Rule 2: layer không có ở style.css thì tự tạo */
	--chip-font-size: 15px;
	--chip-line-height: 11px;
	--chip-letter-spacing: -.3px;
	--chip-radius: 16px;
	--chip-border-width: 1px;
	--chip-padding-block: 6px;
	--chip-padding-inline: 20px;
	--chip-padding-inline-start: 16px; /* biến thể "Smart filters" */
	--chip-padding-inline-end: 12px;
}

@media (max-width: 1024px) {
	#creator-discovery {
		--description-lg: 16px;
		/* Figma giữ 16px ở mobile, global hạ --fs-label-lg xuống 14px */
		--fs-label-lg: 16px;
	}
}

/* ============================================================================
   PHẦN 2 — RESET · LAYOUT PRIMITIVE · COMPONENT DÙNG CHUNG
Creator Discovery — base layer
   Reset + layout primitives + shared Figma components
   (section-headings, button/text, badges, logo-carousel).
  
   Toàn bộ giá trị lấy từ Figma variable, xem PHẦN 1 phía trên.
   ============================================================================ */
/* ============================================================
   Font — DM Sans
   Dùng CHUNG bản Google Fonts đã enqueue toàn site (handle 'dm-sans',
   import-assets/import-css-js.php) như mọi trang khác, thay vì self-host riêng.
   Trang này chỉ dùng weight 400/500/600/700 + italic 400 — nằm trọn trong URL đó.
   ============================================================ */

/* ============================================================
   Reset — scope trong #creator-discovery.
   Dùng :where() để specificity = 0, tránh đè lên class component.
   ============================================================ */
:where(#creator-discovery),
:where(#creator-discovery *),
:where(#creator-discovery *::before),
:where(#creator-discovery *::after) {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0 solid;
	min-width: 0;
}

#creator-discovery {
	font-family: var(--font-body);
	background: var(--color-1st-bg);
	color: var(--color-1st-fg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

:where(#creator-discovery img),
:where(#creator-discovery svg),
:where(#creator-discovery video) {
	display: block;
	max-width: 100%;
}

/* theme global.css đặt a { display: block } — trả về mặc định inline,
   các component cần block/flex tự khai báo lại */
:where(#creator-discovery a) {
	display: inline;
	color: inherit;
	text-decoration: none;
}

:where(#creator-discovery ul),
:where(#creator-discovery ol) {
	list-style: none;
}

:where(#creator-discovery button) {
	font: inherit;
	color: inherit;
	background: none;
	cursor: pointer;
}

/* ============================================================
   Layout primitives
   Figma: mọi section = FRAME full-bleed, fill 1st-bg,
   padding-inline = section-horizontal-padding (32 / 20),
   padding-block  = var-140.
   Mobile+tablet: chỉ hero giữ padding-top 140, các section khác = 0.
   ============================================================ */
.cd-section {
	background: var(--color-1st-bg);
	padding-block: var(--var-140);
	padding-inline: var(--section-horizontal-padding);
}

.cd-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
}

/* content-wrapper dọc, khoảng cách mặc định = section-gap (80 / 40) */
.cd-stack {
	display: flex;
	flex-direction: column;
	gap: var(--section-gap);
}

/* Mobile/tablet: Figma bỏ padding-top của các section giữa trang, chỉ hero giữ 140. */
@media (max-width: 1024px) {
	.cd-section:not(.cd-section--hero) {
		padding-top: 0;
	}
}

/* ============================================================
   Typography — headings/heading-* + description
   ============================================================ */
.cd-heading {
	font-family: var(--font-body);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	letter-spacing: 0;
	color: var(--color-1st-fg);
}

.cd-heading--h1 { font-size: var(--fs-h1); }
.cd-heading--h2 { font-size: var(--fs-h2); }
.cd-heading--h4 { font-size: var(--fs-h4); }
.cd-heading--h5 { font-size: var(--fs-h5); }

.cd-description {
	font-family: var(--font-body);
	font-weight: var(--fw-regular);
	font-size: var(--description);
	line-height: var(--lh-description);
	letter-spacing: 0;
	color: var(--color-2nd-fg);
}

.cd-description--description-lg {
	font-size: var(--description-lg);
}

/* label/LABEL-*-CAP */
.cd-label {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fs-label-md);
	line-height: var(--lh-label);
	letter-spacing: 0;
	text-transform: uppercase;
}

/* ============================================================
   Component: section-headings (Figma 4002:76 / 4002:89)
   ============================================================ */
.cd-headings {
	display: flex;
	flex-direction: column;
	gap: var(--var-28);
}

.cd-headings__block {
	display: flex;
	flex-direction: column;
	gap: var(--var-12);
}

.cd-headings__badges {
	display: flex;
	align-items: center;
	gap: var(--var-6);
}

.cd-headings__main {
	display: flex;
	flex-direction: column;
	gap: var(--var-16);
}

.cd-headings--center {
	align-items: center;
	text-align: center;
}

.cd-headings--center .cd-headings__block,
.cd-headings--center .cd-headings__main {
	align-items: center;
	width: 100%;
}

.cd-headings__buttons {
	display: flex;
	align-items: center;
	gap: var(--var-12);
}

/* Figma: component "section-headings/heading" luôn rộng cố định 800 ở cấp section
   (a creator / introducing / match / make sure / turn one / 5 steps / price)
   → đây là thứ quyết định điểm xuống dòng của heading. Hero dùng layout split nên trừ ra. */
.cd-headings:not(.cd-headings--split) > .cd-headings__block .cd-heading {
	width: 800px;
	max-width: 100%;
}

/* layout "split": hero desktop — heading | description nằm ngang, gap 16.
   description bị giới hạn 600px, heading ăn phần còn lại (1400-16-600 = 784). */
@media (min-width: 1025px) {
	.cd-headings--split .cd-headings__main {
		flex-direction: row;
		align-items: flex-start;
	}

	.cd-headings--split .cd-heading {
		flex: 1 1 auto;
	}

	.cd-headings--split .cd-description {
		flex: 0 0 600px;
		max-width: 600px;
	}
}

/* ============================================================
   Component: section-headings/bfs-badge + rating badge
   ============================================================ */
.cd-bfs-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--var-4);
	padding: var(--var-4);
	background: var(--color-semantic-shopify-bg);
	color: var(--color-semantic-shopify-fg);
	overflow: hidden;
}

.cd-bfs-badge__label {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fs-label-md);
	line-height: 1;
	text-align: center;
	color: var(--color-semantic-shopify-fg);
}

.cd-headings__divider {
	display: block;
	width: 1px;
	align-self: stretch;
	background: var(--color-stroke);
}

.cd-rating-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--var-4);
}

.cd-rating-badge__label {
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fs-label-md);
	line-height: 1;
	color: var(--color-1st-fg);
}

.cd-bfs-badge__icon,
.cd-rating-badge__icon {
	width: 14px;
	height: 14px;
	flex: none;
}

/* ============================================================
   Component: button/text (Figma 4002:62 primary / 4002:56 secondary)
   padding 14 / 28, gap 6, radius 100
   ============================================================ */
.cd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--var-6);
	padding: var(--var-14) var(--var-28);
	border-radius: 100px;
	font-family: var(--font-body);
	font-weight: var(--fw-medium);
	font-size: var(--fs-label-md);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: opacity .2s ease;
}

.cd-btn:hover {
	opacity: .85;
}

.cd-btn--primary {
	background: var(--color-1st-btn-bg);
	color: var(--color-1st-btn-fg);
}

.cd-btn--secondary {
	background: var(--color-2nd-btn-bg);
	color: var(--color-2nd-btn-fg);
	box-shadow: 0 0 0 1px var(--color-stroke);
}

/* ============================================================
   Component: logo-carousel-high-tier (Figma 4002:702)
   list gap 52, logo cao 24, mask gradient 0 → 15.38% → 85.1% → 100%
   ============================================================ */
.cd-logo-carousel {
	position: relative;
	width: 100%;
	height: 44px;
	display: flex;
	align-items: center;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 15.38%, #000 85.1%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 15.38%, #000 85.1%, rgba(0, 0, 0, 0) 100%);
}

.cd-logo-carousel__track {
	display: flex;
	align-items: center;
	gap: var(--var-52);
	width: max-content;
	padding-right: var(--var-52);
	animation: cd-marquee 40s linear infinite;
}

.cd-logo-carousel__item {
	flex: none;
	height: 24px;
	display: flex;
	align-items: center;
}

.cd-logo-carousel__item img {
	height: 24px;
	width: auto;
	object-fit: contain;
}

@keyframes cd-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.cd-logo-carousel__track {
		animation: none;
	}
}

/* ============================================================================
   PHẦN 3 — LỚP CHUYỂN ĐỘNG DÙNG CHUNG
Creator Discovery — lớp chuyển động dùng chung
  
   Yêu cầu cơ bản (spec PDF "UPPROMOTE - Creator Discovery"):
     1. Lazy loading — scroll tới đâu hiện effect/nội dung tới đó
     2. Luôn show section title trước (fade in) rồi mới tới nội dung bên dưới
     3. Effect chỉ chạy 1 lần, reset khi user reload trang
  
   Cách hoạt động: JS gắn [data-cd-reveal] cho title + từng khối nội dung,
   IntersectionObserver bật .is-revealed một lần rồi unobserve.
   Không có JS (hoặc prefers-reduced-motion) → nội dung hiển thị bình thường.
   ============================================================================ */
#creator-discovery {
	--cd-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--cd-reveal-ms: 620ms;
	--cd-reveal-shift: 18px;
}

/* Chỉ ẩn khi JS đã sẵn sàng — tránh nội dung biến mất nếu JS lỗi */
#creator-discovery.cd-motion-ready [data-cd-reveal] {
	opacity: 0;
	transform: translateY(var(--cd-reveal-shift));
	transition:
		opacity var(--cd-reveal-ms) var(--cd-ease-out) var(--cd-reveal-delay, 0ms),
		transform var(--cd-reveal-ms) var(--cd-ease-out) var(--cd-reveal-delay, 0ms);
	will-change: opacity, transform;
}

#creator-discovery.cd-motion-ready [data-cd-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

/* Khối pin (sticky) dùng chung cho creator / make-sure / 5 steps */
.cd-pin-track {
	position: relative;
}

.cd-pin {
	position: sticky;
	top: var(--cd-pin-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
	#creator-discovery.cd-motion-ready [data-cd-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	#creator-discovery * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}