/* ==========================================================================
   AOV Demo Tool — Components: Nav · Badge · Field · Button
   Số đo từ Figma "AOV Free Gift" › node 26780:3433.
   Mọi màu/spacing/radius/font đi qua var() của css/tokens.css.
   ========================================================================== */

/* --- 1. NAV — thanh điều hướng trên cùng --------------------------------- */

.site-header {
  position: absolute;            /* Figma: nav nằm TRONG khung 1080, không
                                    đẩy hero xuống → trang gọn 1 màn */
  inset-inline: 0;
  top: 0;
  z-index: 2;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 82px;                  /* chiều cao đo từ Figma (hình học) */
  padding-block: var(--sp-600);
}

.nav__brand {
  display: inline-flex;
  transition: opacity var(--dur) var(--ease);
}
.nav__brand:hover {
  opacity: 0.8;
}
.nav__brand img {
  display: block;
  width: 100px;      /* logo 100 × 27.6px — giữ tỉ lệ bằng height:auto */
  height: auto;
}

.nav__link {
  /* Phần tử mang class này là <button> (mở chat tại chỗ), nên phải gỡ sạch mặc
     định của nút trước khi tạo dáng — kẻo nó mọc nền xám, viền và font hệ thống
     ngay cạnh "Install app". Giữ luật dùng được cho cả <a> lẫn <button>. */
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-display);
  /* Cùng độ đậm với `.btn` ngay cạnh (Install app cũng --fw-light). Trước để
     --fw-bold nên link chữ trần lại nặng hơn cả cái nút — sai thứ bậc: header
     phải lùi lại nhường CTA giữa hero. Origin chỉ có 300/700/900, không có
     medium, nên 300 là bậc nhẹ duy nhất có thật. */
  font-weight: var(--fw-light);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  line-height: var(--lh-tight);
  color: var(--c-accent);
  text-decoration: none;
  transition: text-decoration-color var(--dur) var(--ease);
}
.nav__link:hover,
.nav__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;   /* độ lệch gạch chân (hình học) */
}

/* Cụm hành động bên phải header. Contact us giữ nguyên dạng chữ, Install app
   là nút viền — khác cấp bậc rõ mà không tranh phần nhìn với CTA chính giữa
   hero (nút đặc, 50px). Header lùi lại, hero mới là chỗ mắt phải dừng. */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-500);
}

/* --- 2. BADGE — pill "AOV.ai Free Gift demo" ---------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-200);
  width: fit-content;
  margin: 0;
  padding: var(--sp-100) var(--sp-400);
  background: var(--c-accent-soft);
  border-radius: var(--r-pill);
}

.badge__mark {
  flex-shrink: 0;
  width: 11px;      /* khối vuông đặc 11 × 11px (hình học) */
  height: 11px;
  background: var(--c-accent);
  border-radius: var(--r-chip);
  opacity: 0.8;
}

.badge__text {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-badge);
  letter-spacing: var(--ls-badge);
  line-height: var(--lh-tight);
  color: var(--c-accent);
  opacity: 0.7;
  white-space: nowrap;
}

/* --- 3. FIELD — ô nhập domain cửa hàng --------------------------------- */

.field {
  box-sizing: border-box;
  flex: 1 1 400px;          /* rộng 400px ở desktop nhưng co được */
  max-width: 400px;
  min-width: 0;
  height: 50px;             /* chiều cao đo từ Figma (hình học) */
  padding: var(--sp-300);
  background: var(--c-white);
  border: var(--bw-hair) solid var(--c-border);
  border-radius: var(--r-control);
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-control);
  letter-spacing: var(--ls-control);
  line-height: var(--lh-control);
  color: var(--c-ink);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field::placeholder {
  color: var(--c-placeholder);
  opacity: 1;    /* Firefox mặc định làm mờ placeholder — ép về 1 */
}
.field:hover {
  border-color: var(--c-accent);
}
.field:focus-visible {
  outline: none;   /* ngoại lệ hợp lệ: đã có focus ring riêng ngay dưới */
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-soft);
}

/* --- 4. BUTTON — CTA "Try it on my store" ------------------------------- */

.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;             /* chiều cao đo từ Figma (hình học) */
  padding: var(--sp-300) var(--sp-500);
  border: none;
  border-radius: var(--r-control);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;      /* .btn dùng được cho cả <a> — mặc định <a> có gạch chân */
  font-family: var(--font-display);
  font-weight: var(--fw-light);
  font-size: var(--fs-control);
  letter-spacing: var(--ls-control);
  line-height: var(--lh-control);
  transition: filter var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn--primary {
  background: var(--c-accent);
  color: var(--c-white);
  box-shadow: var(--sh-btn);
}
.btn--primary:hover:not(:disabled) {
  filter: brightness(0.93);
}
.btn--primary:active:not(:disabled) {
  transform: translateY(1px);   /* nhấn xuống 1px (hình học) */
  box-shadow: none;
}
/* Secondary = ĐÚNG nút chính, chỉ đảo màu: cùng .btn nên thừa hưởng nguyên
   chiều cao 50px, bán kính --r-control, font/letter-spacing của --fs-control.
   Khác mỗi nền trong + viền accent. Dùng `border` thật (không phải inset
   box-shadow) vì .btn đã box-sizing:border-box → viền không làm nút cao thêm,
   và viền thật thì in ra / High Contrast Mode vẫn còn. */
.btn--secondary {
  background: transparent;
  color: var(--c-accent);
  border: var(--bw-hair) solid var(--c-accent);
  /* Thấp hơn nút chính một bậc: cùng bo góc, cùng chữ, chỉ bớt chiều cao —
     đủ để header nhẹ đi mà vẫn đọc ra là cùng một họ nút. */
  height: 42px;
  padding-inline: var(--sp-400);
}
.btn--secondary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
}
.btn--secondary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}


/* ==========================================================================
   Run status — dòng phản hồi dưới form (lỗi domain / đang chạy / chưa nối)
   ========================================================================== */
.run-status {
  min-height: 1.2em;             /* giữ chỗ sẵn: hiện thông báo không làm nhảy layout */
  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: .7;
}

.run-status[data-tone="error"] {
  color: var(--c-accent);
  opacity: 1;
}

.run-status[data-tone="busy"],
.run-status[data-tone="pending"] {
  color: var(--c-accent);
  opacity: .85;
}


/* ==========================================================================
   REVEAL — nội dung hiện ra theo TỪNG PHẦN
   --------------------------------------------------------------------------
   Trang này KHÔNG cuộn được (base.css khoá `overflow:hidden` trên html/body,
   `.hero` cao đúng 100dvh) — đo được scrollHeight = innerHeight = 900 ở
   1440×900, không có một pixel nào dưới nếp gấp. Nên "hiện dần khi cuộn" ở đây
   phải đọc là: hiện dần LÚC MỞ TRANG, theo đúng thứ tự mắt đọc.
   Cơ chế vẫn dựng bằng IntersectionObserver (js/run.js) chứ không phải một
   chuỗi setTimeout: ngày nào thêm khối dưới nếp gấp thì nó chạy đúng luôn,
   không phải viết lại.

   NHỊP HAI TẦNG — cùng cách đã sửa cho popup bên demo:
     --b  thứ tự NHÓM  × --stagger-block (150ms)
     --i  thứ tự DÒNG trong nhóm × --stagger (46ms)
   Một bậc duy nhất 46ms trải trên 7 khối thì lúc nào cũng có ~6 khối đang chạy
   (260ms ÷ 46ms) → mắt đọc thành MỘT MẢNG trôi lên, không thành "từng phần".
   Hai tầng hạ đỉnh chạy đồng thời xuống 4.

   CHỈ opacity + transform. KHÔNG blur: quãng dịch + blur chung một khung đẩy
   animation xuống main-thread và giật theo nấc ~1 device pixel (đã đo ở màn
   demo). Và dải collage rộng 1920px thì blur từng khung là phép đắt nhất trang.
   `--ease-soft` (zeta 1.021, vọt 0%) chứ không `--ease-spring`: mấy khối này
   đều là vật TO — trôi vào rồi DỪNG, không nảy.
   ========================================================================== */

/* Quãng trồi. Đây là HÌNH HỌC (px), không phải nhịp — nhịp nằm hết ở
   tokens.css. 10px đủ đọc ra là "đi lên" ở cỡ chữ 13–60px mà chưa thành cú
   nhảy; vật to hơn tự nới ở chỗ khai riêng bên dưới. */
:root { --reveal-y: 10px; }

@keyframes reveal-rise {
  from { opacity: 0;                  transform: translateY(var(--reveal-y)); }
  to   { opacity: var(--reveal-o, 1); transform: translateY(0); }
}

/* Trạng thái ẩn CHỈ tồn tại khi js/run.js đã bật cờ `has-reveal` trên <html>.
   Không JS, JS lỗi, hoặc người dùng đặt prefers-reduced-motion → không có cờ →
   không có dòng nào dưới đây khớp → nội dung hiện đủ ngay, không có cửa nào
   mất chữ. Đây KHÔNG phải phòng xa thừa: khối reduced-motion ở base.css:104
   ép `animation-duration` về 0.01ms nhưng KHÔNG hề đụng `animation-delay`, nên
   nếu neo vào nó thì dải collage vẫn nằm vô hình đúng 450ms trên máy của người
   đã xin tắt chuyển động. Cờ ở tầng <html> là chỗ duy nhất chặn được. */
html.has-reveal [data-reveal] { opacity: 0; }

html.has-reveal [data-reveal].is-in {
  animation: reveal-rise var(--reveal-dur, var(--dur-2)) var(--ease-soft) both;
  animation-delay: calc(
    var(--b, 0) * var(--stagger-block) + var(--i, 0) * var(--stagger)
  );
}

/* Nhóm 0 — khung trang. Nav đi cùng nhãn badge: cả hai chỉ là "trang này là
   cái gì", chưa phải lời mời, nên chúng chia chung một khoảnh khắc. */
.nav { --b: 0; --i: 0; }