/* Hero: bốn lớp chồng lên nhau, hiện lần lượt, vừa đúng một màn hình.
   Bảng lớp và thời lượng: .claude/docs/design-spec.md */

.hero {
  position: relative;
  /* svh = phần khung nhìn còn lại sau khi trừ thanh công cụ trình duyệt di
     động, nên Hero không bị tràn xuống dưới màn hình đầu tiên trên điện thoại.
     Dòng vh phía trên là dự phòng cho trình duyệt cũ chưa hiểu svh. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--white);
  isolation: isolate;
}

/* ------------------------------------------------- lớp 0 · nền tối */

.hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(60% 70% at 72% 45%, rgb(255 255 255 / 0.07), transparent 70%),
    linear-gradient(160deg, var(--ink-900) 0%, var(--ink-800) 100%);
}

/* Hạt nhiễu sinh bằng bộ lọc SVG nhúng thẳng dạng data-URI — không thêm một
   lượt tải nào, và nhìn mịn ở mọi độ phân giải vì nó là hoạ tiết vector. */
.hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* --------------------------------------------- lớp 1 · trang trí kỹ thuật */

.hero__decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  color: var(--gold-muted);
  opacity: 0;
  animation: hero-fade var(--dur-enter) var(--ease-out) var(--delay-decor) forwards;
}

.hero__grid {
  position: absolute;
  left: 0;
  top: 12%;
  width: min(46%, 30rem);
  height: 46%;
  opacity: 0.14;
}

.hero__topo {
  position: absolute;
  right: 0;
  top: 30%;
  width: min(42%, 26rem);
  height: 40%;
  opacity: 0.16;
}

/* ------------------------------------------------- lớp 2 · ảnh lốp */

/* Neo theo tâm dọc rồi kéo lên 6%: khối chữ bên trái nặng ở nửa trên, lốp canh
   đúng giữa sẽ trông như bị trĩu xuống. Chỉ báo cuộn ở đáy cũng cần chỗ trống. */
.hero__tire {
  position: absolute;
  z-index: 2;
  right: clamp(-4rem, -2vw, 2%);
  top: 42%;
  opacity: 0;
  transform: translate(8%, -50%);
  animation: hero-tire var(--dur-tire) var(--ease-out) var(--delay-tire) forwards;
}

.hero__tire img {
  width: auto;
  height: min(72svh, 40rem);
  /* Bóng đổ dựng bằng CSS: bóng thật trong ảnh gốc là bóng trên nền sáng, đã
     bị cắt bỏ lúc tách nền (xem scripts/build-images.sh). */
  filter: drop-shadow(0 2.5rem 3rem rgb(0 0 0 / 0.55));
}

/* --------------------------------------------------- lớp 3 · nội dung */

.hero__content {
  position: relative;
  z-index: 3;
  max-width: min(var(--container), 100%);
  opacity: 0;
  transform: translateX(-2.5rem);
  animation: hero-content var(--dur-enter) var(--ease-out) var(--delay-content) forwards;
}

.hero__eyebrow {
  margin-bottom: var(--sp-6);
  color: var(--gold);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.hero__title {
  max-width: 15ch;
  font-size: clamp(2.5rem, 6.5vw, 5rem);
}

.hero__desc {
  max-width: 34rem;
  margin-top: var(--sp-6);
  color: var(--text-dim);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
}

/* ------------------------------------------------------ chỉ báo cuộn */

.hero__scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: var(--sp-8);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-dim);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  opacity: 0;
  animation: hero-fade var(--dur-enter) var(--ease-out) var(--delay-scroll-hint) forwards;
}

.hero__scroll:hover {
  color: var(--gold);
}

.hero__scroll-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: hero-scroll-pulse 2s var(--ease-soft) infinite;
}

/* -------------------------------------------------------- chuyển động */

@keyframes hero-fade {
  to { opacity: 1; }
}

@keyframes hero-tire {
  to {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

@keyframes hero-content {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hero-scroll-pulse {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  50% { transform: scaleY(0.55); transform-origin: top; opacity: 0.5; }
}

/* Hai keyframes cho bố cục mobile phải khai báo ở cấp ngoài cùng, KHÔNG lồng
   trong @media. Keyframes định nghĩa bên trong một media query chỉ tồn tại ở
   đúng khoảng đó; đặt nhầm chỗ thì ở những bề rộng khác `animation-name` trỏ
   vào một tên không có thật, animation không chạy, và phần tử kẹt lại ở
   opacity: 0 — tức là biến mất hẳn. */
@keyframes hero-tire-mobile {
  to {
    opacity: 0.35;
    transform: translate(50%, -50%);
  }
}

@keyframes hero-content-mobile {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------------------- mobile */

@media (max-width: 48em) {
  .hero {
    text-align: center;
  }

  /* Trên màn hẹp không đủ chỗ để lốp và chữ nằm cạnh nhau, nên lốp lùi ra sau
     làm nền mờ, chữ về giữa. */
  .hero__tire {
    right: 50%;
    opacity: 0;
    transform: translate(50%, -50%);
    animation-name: hero-tire-mobile;
  }

  .hero__tire img {
    height: min(58svh, 26rem);
    filter: blur(1px);
  }

  .hero__title {
    max-width: none;
    margin-inline: auto;
  }

  .hero__desc {
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  /* Bố cục dồn về giữa nên chữ trôi lên từ dưới, không trượt ngang nữa. */
  .hero__content {
    transform: translateY(1.5rem);
    animation-name: hero-content-mobile;
  }
}

/* Màn rất hẹp: xếp dọc và cho hai nút bằng nhau, thay vì để chúng xuống dòng
   với bề rộng lệch theo độ dài chữ. */
@media (max-width: 30em) {
  .hero__actions {
    flex-direction: column;
    align-items: center;
  }

  .hero__actions .button {
    width: min(100%, 16rem);
  }
}