/* ---------- Hero (Marquee Hero + apparatus) ---------- */
.hero {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
  background:
    linear-gradient(var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(60% 50% at 78% 30%, var(--color-paper-emit) 0%, transparent 65%),
    var(--color-paper);
  overflow: clip;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.hero h1 em { font-style: normal; color: var(--color-navy-deep); position: relative; white-space: nowrap; padding-inline: 0.18em; margin-inline: -0.18em; }
.hero__grid { position: relative; }
.hero h1 { isolation: isolate; }
.sketch-arrow { display: none; }
@media (min-width: 56rem) {
  .hero__text { padding-right: 2.5rem; }
  /* doodle arrow, flipped + rotated 90deg CCW in the file itself; anchored to the globe so it never lands on the headline */
  .sketch-arrow { display: block; position: absolute; z-index: 1; right: calc(100% - 1.5rem); top: 1.5rem; width: 8.5rem; aspect-ratio: 265 / 177; background: var(--color-accent-2); -webkit-mask: url("../../img/arrow-doodle.svg") center / contain no-repeat; mask: url("../../img/arrow-doodle.svg") center / contain no-repeat; pointer-events: none; }
}
.hero__lede { margin-top: var(--space-lg); max-width: 48ch; font-size: var(--text-lg); }
.hero__points { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.hero__points li { padding: 0.375rem 0.875rem; border-radius: var(--radius-pill); background: var(--color-paper); box-shadow: 0 0 0 1px var(--color-rule-2); font-size: var(--text-sm); color: var(--color-navy-text); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
@media (min-width: 56rem) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); } }

/* apparatus: data globe — Việt Nam ↔ Nhật Bản */
.apparatus { position: relative; display: grid; gap: var(--space-lg); justify-items: center; }
.globe { position: relative; width: min(100%, 26rem); aspect-ratio: 1; }
.globe canvas { display: block; width: 100%; height: 100%; }
.callouts { display: grid; gap: var(--space-sm); justify-self: stretch; max-width: 26rem; }
.callouts li {
  display: flex; align-items: center; gap: var(--space-md);
  font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-neutral);
}
.callouts li::before { content: ""; flex: none; width: 1.5rem; height: 1px; background: var(--color-rule-2); }
.callouts li.is-hl { color: var(--color-ink); }
.callouts li.is-hl::before { width: 0.5rem; height: 0.5rem; background: var(--color-accent); border-radius: 1px; }

/* meter strip: Việt Nam ↔ Nhật Bản link, envelope-driven */
.meter { border-block: 1px solid var(--color-rule); background: var(--color-paper); }
.meter__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; padding-block: var(--space-md); }
.meter__label { font: 500 var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-neutral); white-space: nowrap; }
.meter__bars { display: flex; gap: 2px; align-items: end; height: 28px; }
.meter__bars span { flex: 1; min-width: 1px; height: var(--h); background: var(--color-accent); opacity: var(--o); border-radius: 0.5px; }
@media (max-width: 35.99rem) { .meter__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } .meter__label:last-child { justify-self: end; } }


/* hero motion: entrance and sketch arrow */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
  .hero__text { animation: rise var(--dur-long) var(--ease-out) both; }
  .sketch-arrow { animation: draw 900ms var(--ease-out) 1000ms backwards; }
}