/**
 * Section: hero — Figma 4002:1687 (desktop) / 4002:2183 (mobile)
 *
 * Đối chiếu Figma:
 *   hero              padding 140 / 32   (mobile 140 / 20)  fill 1st-bg
 *   content-wrapper   VERTICAL gap 80 (mobile 40), max-width 1400
 *   section-headings  gap 28; block gap 12; main gap 16
 *   image 1           1400 x 867.35  → aspect-ratio 1400 / 867.35
 *   logo carousel     44px, list gap 52, logo cao 24
 */

#cd-hero .cd-hero__visual img {
	width: 100%;
	height: auto;
	aspect-ratio: 1400 / 867.35;
	object-fit: cover;
}

/* logo-carousel-high-tier rộng CỐ ĐỊNH 1454 ở CẢ 4 frame Figma
   (desktop 1920 / laptop 1336 / tablet 834 / mobile 390) và luôn căn giữa
   theo viewport, tràn ra ngoài content-wrapper:
     desktop 1400 → tràn 27px mỗi bên      laptop 1272 → tràn 91px
     tablet  794  → tràn 330px mỗi bên     mobile 350  → tràn 552px
   Giữ 1454 cố định cũng giữ đúng hình học mask gradient của component.
   Phần tràn được #creator-discovery { overflow-x: clip } cắt gọn. */
#cd-hero .cd-hero__logos {
	width: 1454px;
	max-width: none;
	margin-inline: auto;
}

/* Figma dùng 2 bản copy description khác nhau cho hero */
#cd-hero .cd-hero__desc-mobile {
	display: none;
}

@media (max-width: 1024px) {
	#cd-hero .cd-hero__desc-desktop {
		display: none;
	}

	#cd-hero .cd-hero__desc-mobile {
		display: inline;
	}
}

/* ============================================================
   Effect "Flip image" (spec PDF — Hero banner)
   Mặt A: Data table · Mặt B: View profile
   Tham khảo Dia Browser: scene perspective 1800px,
   card transition transform .72s cubic-bezier(.65,0,.2,1),
   2 mặt backface-visibility: hidden, mặt sau xoay sẵn 180°.
   ============================================================ */
#cd-hero .cd-flip__scene {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	perspective: 1800px;
}

#cd-hero .cd-flip__card {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1400 / 867.35;
	transform-style: preserve-3d;
	transition: transform .72s cubic-bezier(.65, 0, .2, 1);
}

#cd-hero .cd-flip.is-flipped .cd-flip__card {
	transform: rotateY(180deg);
}

#cd-hero .cd-flip__face {
	position: absolute;
	inset: 0;
	display: block;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
}

#cd-hero .cd-flip__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#cd-hero .cd-flip__face--front { transform: translateZ(1px); }
#cd-hero .cd-flip__face--back  { transform: rotateY(180deg) translateZ(1px); }

/* ---- Lật xong thì trả thẻ về 2D cho ảnh nét ----
   Chrome gộp subtree `preserve-3d` thành một texture và không dựng lại theo
   devicePixelRatio -> ảnh mờ hẳn lúc đứng yên (đo được: kém 54-61% độ nét).
   Ở trạng thái nghỉ, đổi về `flat` và ẩn mặt không dùng thì Chrome vẽ thẳng ảnh.
   CỐ Ý không đụng `transform` của .cd-flip__card — đổi nó là hỏng animation lật.
   (.is-settled do section-hero/assets/scripts.js gắn.) */
#cd-hero .cd-flip.is-settled .cd-flip__card {
	transform-style: flat;
}

#cd-hero .cd-flip.is-settled .cd-flip__face {
	backface-visibility: visible;
	-webkit-backface-visibility: visible;
}

/* Hết 3D thì backface không còn che mặt kia -> phải ẩn tay.
   Mặt sau vẫn giữ rotateY(180deg); thẻ khi is-flipped cũng rotateY(180deg),
   dưới `flat` hai phép lật ngang triệt tiêu nhau nên hình không bị soi gương. */
#cd-hero .cd-flip.is-settled:not(.is-flipped) .cd-flip__face--back  { display: none; }
#cd-hero .cd-flip.is-settled.is-flipped      .cd-flip__face--front { display: none; }

@media (prefers-reduced-motion: reduce) {
	#cd-hero .cd-flip__card { transition: none; }
}