/* ==========================================================================
   AOV Demo Tool — Hero · Figma node 26780:3433 (artboard 1920×1080)
   Chỉ khai: .backdrop* · .hero* · .run-form · .collage · .shot
   Màu/type/shadow/radius đều qua var(). Px thô chỉ ở: toạ độ hình học lớp
   nền, bề rộng cột chữ đo từ Figma, khung collage — đều có comment.
   ========================================================================== */

/* --- 1. NỀN TRANG TRÍ — 3 lớp, nằm dưới mọi nội dung ------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Quầng sáng ấm — neo GÓC TRÊN, đẩy phần lớn ra ngoài mép trên nên chỉ
   rìa dưới của nó tràn vào màn. Giữa khung (chỗ đặt chữ) ở lại trắng. */
.backdrop__glow {
  position: absolute;
  left: -14vw;
  top: -58vh;
  width: 92vw;
  height: 108vh;
  transform: rotate(12.72deg);   /* góc gốc Figma */
  transform-origin: center center;
  /* Bán kính TƯỜNG MINH (62% 58%) thay vì mặc định farthest-corner:
     mặc định làm gradient chưa kịp trong suốt đã hết khối → lộ đường cắt
     thẳng ở mép. Có bán kính thì mọi thứ ngoài nó = stop cuối = trong suốt. */
  background: radial-gradient(
    ellipse 58% 54% at 52% 50%,
    color-mix(in srgb, var(--c-glow-warm) 70%, transparent) 0%,
    color-mix(in srgb, var(--c-glow-warm) 28%, transparent) 48%,
    color-mix(in srgb, var(--c-glow-warm) 0%, transparent) 100%
  );
}

/* Dải teal — neo GÓC DƯỚI, cũng chìm phần lớn ra ngoài mép dưới. Hai dải
   ôm trên/dưới, khung chính ở giữa gần như không dính màu. */
.backdrop__sweep {
  /* HÌNH THẬT từ Figma (node 26804:975 — bro tách riêng ra 1 frame để export),
     thay cho radial-gradient tôi tự dựng. Trước đây mỗi lần chỉnh là mò 3 con
     số (bán kính, tâm, %màu) để đuổi theo một hình mình không có; giờ dùng
     đúng path + blur + noise của thiết kế nên hết phải đoán.
     SVG 2KB, `preserveAspectRatio="none"` nên giãn theo khung là chủ ý.
     Toạ độ lấy từ Demo 5 (1920×984): vector bắt đầu ở y=214 → 21.7% chiều cao,
     khung chứa cao 772 → 78.5%. */
  position: absolute;
  left: 0;
  right: auto;
  top: 30%;        /* Figma đặt ở 21.7%; kéo xuống theo yêu cầu. Dừng ở 30% chứ
                      không phải 51.7% (=21.7+30): đo 3 mức thì từ ~40% trở đi
                      phần đậm của hình trôi khỏi đáy màn, xanh gần như mất hẳn. */
  bottom: auto;
  width: 100%;
  height: 78.5%;
  background: url("../assets/bg/sweep-shape.svg") no-repeat center / 100% 100%;
}

/* 2 ngôi sao 4 cánh ở nửa phải — SVG thật 1920×1320.75.
   KHÔNG dùng width:100% (làm sao co/giãn theo màn, sai kích thước thiết kế).
   Neo MÉP PHẢI + khoá bề rộng 1920px → sao giữ đúng cỡ và đúng khoảng cách
   tới mép phải ở mọi kích thước màn; phần thừa bên trái chạy ra ngoài. */
.backdrop__sparks {
  position: absolute;
  right: 0;
  left: auto;
  /* Trong SVG, sao lớn nằm ở y=346. Neo mốc đó vào 72% khoảng trống PHÍA TRÊN
     collage → ở 1920×1080 ra đúng y=346 như Figma, và ở màn thấp sao tự lùi
     lên thay vì rơi xuống đè lên card. */
  top: calc((100vh - var(--sparks-anchor-h)) * 0.72 - 346px);
  width: 1920px;                 /* khoá cỡ: KHÔNG co giãn theo màn */
  max-width: none;
  height: auto;
}

/* --- 2. HERO ----------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;               /* dvh: trừ thanh URL trên mobile */
  display: flex;
  flex-direction: column;
}

.hero__copy {
  padding-top: var(--hero-top);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;                /* chữ KHÔNG co — collage nhường chỗ */
  gap: var(--sp-stack);          /* badge → h1 → lead → form */
}

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--c-ink);
  /* `em` chứ KHÔNG phải px: `--fs-h1` co theo bề rộng màn (40px ở 1280 → 60px từ
     1920), nên một con số px đứng yên sẽ hết chỗ đúng lúc chữ to nhất. Bản trước
     đóng đinh 754px đo từ Figma, và nó gãy ở ≥1920px: dòng 1 cần 806px, hộp chỉ
     có 754px → tràn → `text-wrap: balance` bên dưới chia nó thành HAI dòng đều
     nhau, ra tiêu đề 3 dòng thay vì 2. Đo được ở 1920/2000/2560.
     `em` thì tỉ lệ đứng yên: đo lại ở 8 bề rộng, dòng 1 luôn cần đúng 13.44em.
     Lấy 15em = dư 12%, đủ đệm cho lúc font Origin chưa tải xong và trình duyệt
     đang dựng bằng font dự phòng rộng hơn.
     Đổi CHỮ tiêu đề thì đo lại con số này — nó là hàm của độ dài chữ. */
  max-width: min(15em, 100%);
  /* Giữ `balance`: khi đã đủ chỗ nó không làm gì cả, nhưng nếu font dự phòng
     rộng bất thường thì hai dòng đều nhau vẫn đọc tốt hơn một dòng dài kèm một
     chữ mồ côi. Nó là lưới an toàn, không phải thứ đang tạo ra bố cục. */
  text-wrap: balance;
}

/* Dòng 2 của tiêu đề — xanh, xuống dòng riêng, bỏ nghiêng mặc định của <em> */
.hero__title-accent {
  display: block;
  font-style: normal;
  color: var(--c-accent);
}

.hero__lead {
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-lead);
  color: var(--c-ink);
  opacity: .7;
  /* `em` chứ không phải px, cùng lý do với .hero__title: `--fs-lead` co theo
     bề rộng màn (14px ≤1440 → 18px từ 1920) nhưng một cái hộp đóng đinh px thì
     không, nên số chữ lọt một dòng nhảy từ ~104 xuống ~68 và cùng một đoạn chữ
     lúc 2 dòng lúc 3 dòng tuỳ màn. Tính theo em thì tỉ lệ đứng yên: đo ở 7 bề
     rộng, đoạn này luôn cần đúng 79.08em nếu để một dòng.
     45em vì hai lẽ. Một, 79.08 / 2 = 39.54em là sàn lý thuyết cho 2 dòng, mà
     ngắt dòng chỉ rơi được vào khoảng trắng nên sàn thật cao hơn: đo được 40em
     vẫn ra 3 dòng, 41em mới xuống 2 — 45em để dư ~5% (dòng 1 lấp 94.7% hộp),
     đủ đệm cho font dự phòng rộng hơn lúc Origin chưa tải xong. Hai, 45em ở cỡ
     chữ 18px = 810px, bằng đúng dòng dài nhất của tiêu đề (806px ở 1920) → mép
     phải hai khối thẳng hàng thay vì lệch một quãng vô nghĩa.
     Đổi CHỮ đoạn này thì đo lại con số — nó là hàm của độ dài chữ. */
  max-width: min(45em, 100%);
}

/* Khung form; style .field / .btn do file khác giữ */
.run-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--sp-500);
  width: 100%;
  /* 595px là bề rộng đo từ Figma cho hàng ô-nhập + nút. Từng nới lên 637 để
     chừa chỗ cho một lấp lánh trang trí bên phải nút; lấp lánh đã bỏ nên trả
     về đúng số đo gốc. */
  max-width: min(595px, 100%);
}

/* Dòng chân dưới ô nhập. Kéo sát lại form bằng margin âm vì nó KHÔNG phải một
   khối ngang hàng với badge/tiêu đề/lead — nó là chú thích CỦA form, để cách
   đủ một nhịp --sp-stack thì mắt đọc thành lời mời thứ hai rời rạc.
   Nhạt hơn .run-status một nấc (0.55 vs 0.7): khi có lỗi domain, thông báo lỗi
   phải là thứ nổi lên, không phải dòng trấn an nằm ngay trên nó. */
.hero__fine {
  margin: calc(var(--sp-400) - var(--sp-stack)) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-badge);
  letter-spacing: var(--ls-badge);
  line-height: var(--lh-control);
  color: var(--c-ink);
  opacity: .55;
}

/* --- 3. COLLAGE — 5 ảnh nghiêng, cố tình cắt đáy màn -------------------- */

.collage {
  margin-top: auto;              /* dính đáy hero */
  flex: 0 1 var(--collage-h);    /* thiếu chỗ thì co, không đẩy trang dài ra */
  min-height: 0;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;         /* dải bám đáy — thẻ cắt ở mép dưới như bản thiết kế */
  width: 100%;
  height: auto;                  /* cao theo chính dải ảnh, không chừa khoảng chết */
  overflow: hidden;              /* khung cắt — thẻ cố tình tràn mép */
}

/* Một dải ảnh duy nhất thay cho 5 figure + 3 biến inline.
   Trước đây CSS phải tự dựng lại độ nghiêng (--rot), độ đẩy (--dy) và chỗ
   cắt (--shot-y) của từng thẻ — ba con số phải khớp tay với Figma, và chỉ
   có 3 ảnh nguồn nên thẻ 4-5 là bản lặp. Giờ export nguyên dải: đúng 5 thẻ
   khác nhau, mọi biến đổi hình học nằm trong ảnh.
   min-width giữ sàn để màn hẹp thẻ không co thành tem — phần thừa bị
   .collage cắt đều hai bên nhờ justify-content:center. */
.collage__strip {
  display: block;
  flex: none;                    /* BẮT BUỘC: .collage là flex, mặc định item co
                                    lại vừa khung → ảnh bị bóp méo tỉ lệ */
  /* Bề rộng: ưu tiên cỡ suy từ chiều cao (giữ sức nặng như bản Figma), nhưng
     KHÔNG quá 112% khung — quá đà thì màn 16:9 cắt sâu tới mức mất tiêu đề
     thẻ ngoài cùng. aspect-ratio lo chiều cao nên không có cửa méo tỉ lệ. */
  /* KHÔNG BAO GIỜ phóng quá cỡ gốc của file. Trước đây sàn `100%` ép dải
     luôn phủ kín bề ngang → màn càng rộng ảnh càng nở: đo được 1.04× ở
     2000px và 1.33× ở 2560px, thẻ vừa to vừa mờ. Giờ trần là 1920px = đúng
     bề rộng file, màn rộng hơn thì chừa mép chứ không kéo giãn. */
  width: min(var(--strip-w), var(--strip-natural-w));
  height: auto;
  aspect-ratio: var(--strip-ratio);
  max-width: none;               /* huỷ `img { max-width:100% }` của base.css —
                                    nó chặn dải tràn ngang, ép ảnh méo tỉ lệ */
}

/* --- 4. RESPONSIVE ----------------------------------------------------- */

@media (max-width: 900px) {
  /* Màn hẹp: giữ dải cao hơn tỉ lệ vh để thẻ còn đọc được, phần thừa hai
     bên bị .collage cắt đều nhờ justify-content:center */
  .collage {
    --collage-h: min(486px, 58dvh);
  }
}

/* --- MOBILE (≤640) ------------------------------------------------------
   Ba thứ hỏng ở đây, đo trên iPhone 12 (390×844) và 15 Pro Max (430×932):
     1. Hai ngôi sao neo mép phải + khoá 1920px nên trên màn hẹp chúng trôi
        vào giữa khung chữ, đè lên tiêu đề và đoạn lead — chữ mất đọc được.
     2. .run-form là flex-wrap: input chiếm trọn dòng, nút rớt xuống dòng 2
        nhưng chỉ rộng bằng nội dung → lệch hẳn so với ô nhập ngay trên nó.
     3. Chữ cao gần hết màn, collage bị flex ép co còn một mẩu.
   -------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Trang trí KHÔNG được tranh chỗ với nội dung. Nền đã có glow ấm + dải
     teal; bỏ hai ngôi sao ở màn hẹp là mất ít nhất mà cứu được phần chữ. */
  .backdrop__sparks { display: none; }

  .hero__copy {
    /* Màn dọc hẹp: đỉnh 12.2vh thành khoảng chết to trong khi phía dưới
       thiếu chỗ. Nhưng KHÔNG được nhỏ hơn header: `.site-header` là
       position:absolute (nó cố ý không đẩy hero xuống), nên chữ tự chui
       lên nằm dưới logo nếu padding hụt. 82px = min-height của `.nav`. */
    padding-top: calc(82px + var(--sp-400));
  }

  /* Ô nhập và nút xếp dọc, cùng bề ngang — nút rộng bằng nội dung nằm dưới
     một ô full-width trông như bị rớt ra ngoài form. */
  .run-form {
    flex-direction: column;
    gap: var(--sp-400);
  }
  .run-form .field,
  .run-form .btn { width: 100%; }
  /* `.field` khai `flex: 1 1 400px` cho hàng ngang ở desktop. Đổi trục thành
     dọc thì chính flex-grow đó kéo ô nhập CAO ra, chiếm gần hết màn (đo được
     ~800px trên iPhone 12). Trục dọc thì bề cao là hình học cố định. */
  .run-form .field {
    flex: none;
    max-width: none;
  }

  .collage {
    /* Thấp hơn desktop nhưng vẫn đủ để đọc tiêu đề thẻ; phần thừa hai bên
       .collage cắt đều. Thấp hơn nữa thì thẻ thành tem, không nhận ra là
       giao diện gì. */
    --collage-h: min(340px, 40dvh);
  }
}


/* --- 5. NHỊP HIỆN RA CỦA HERO -------------------------------------------
   Máy chạy nằm ở components.css (§ REVEAL). Ở đây chỉ khai THỨ TỰ, vì thứ tự
   là quyết định biên tập chứ không phải kỹ thuật: nhãn → lời hứa → cách nó
   chạy → ô nhập → trấn an → hình.

   nhóm 0 : .nav + .badge          (đã khai ở components.css cho .nav)
   nhóm 1 : .hero__title            lời hứa — đứng MỘT MÌNH một nhịp
   nhóm 2 : .hero__lead → .run-form → .hero__fine   cụm "đọc rồi làm"
   nhóm 3 : .collage                hình, vào sau cùng

   Mốc thật (đo, không ước): khối cuối bắt đầu ở 450ms, cả chuỗi tắt ở 870ms —
   dưới trần 900ms. Không ai phải chờ: chữ tiêu đề đã đọc được từ 150ms.
   -------------------------------------------------------------------- */

.badge       { --b: 0; --i: 1; }
.hero__title { --b: 1; --i: 0; }

/* `--reveal-o` = độ mờ ĐÍCH của chính khối đó. Hai khối này cố ý nhạt (.7 và
   .55 — thứ bậc của bản thiết kế). Khung hình cuối của animation ghi đè khai
   báo `opacity` tĩnh, nên nếu để mặc định 1 thì chúng sáng lên hẳn một bậc và
   thứ bậc chữ vỡ. Khai đích ở đây thì animation dừng đúng chỗ nó vốn đứng. */
.hero__lead  { --b: 2; --i: 0; --reveal-o: .7; }
.run-form    { --b: 2; --i: 1; }
.hero__fine  { --b: 2; --i: 2; --reveal-o: .55; }

/* Dải collage: vật to nhất trang nên đi quãng dài hơn và chậm hơn một nấc
   (--dur-3), nếu không nó tới nơi trước cả dòng chữ ngay trên nó. `.hero` có
   `overflow:hidden` nên 16px trồi lên được cắt gọn ở mép dưới — dải trượt ra
   TỪ chỗ nó vốn bị cắt, đúng ý bản thiết kế. */
.collage {
  --b: 3;
  --i: 0;
  --reveal-y: 16px;
  --reveal-dur: var(--dur-3);
}