/* ============================================================
 * Typography layer — Syne / Space Grotesk / Manrope / IBM Plex Mono
 * Quiet-premium (Isaac Fayemi × Airform × Talkify)
 * Linked after premium.css; overrides Barlow/Inter without rewriting cinematic.css
 * ============================================================ */

:root {
  --font-display: 'Syne', 'Noto Sans SC', sans-serif;
  --font-ui: 'Space Grotesk', 'Noto Sans SC', sans-serif;
  --font-body: 'Manrope', 'Noto Sans SC', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-zh: 'Noto Sans SC', sans-serif;

  --type-ink: #f4f6fa;
  --type-body: #9aa3b5;
  --type-eyebrow: rgba(127, 178, 255, 0.78);
  --prem-type-display: clamp(2.75rem, 6.2vw, 5rem);
  --prem-type-section: clamp(2.1rem, 4.6vw, 3.75rem);
  --prem-type-lead: clamp(1.05rem, 1.55vw, 1.22rem);
}

/* -------- Base -------- */
body {
  font-family: var(--font-body) !important;
  color: var(--type-ink);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.005em;
}

p, .lead, .section-lead, .hero-sub, .about-copy, .card-body, .product-card .body,
.quality-card p, .app-card p, .page-hero .lead, .footer-copy, .footer p {
  font-family: var(--font-body) !important;
  font-weight: 300;
  color: var(--type-body);
  line-height: 1.7;
}

.section-lead,
.hero-sub,
.page-hero .lead {
  font-weight: 300 !important;
  color: #9aa3b5 !important;
  line-height: 1.72 !important;
}

/* -------- Display / titles -------- */
.hero-title,
.page-hero h1,
.section-title,
.craft-row .cn,
.stat-num,
.prem-big-num {
  font-family: var(--font-display) !important;
}

.hero-title {
  font-size: var(--prem-type-display) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  color: #f4f6fa !important;
  text-shadow:
    0 0 32px rgba(59, 130, 246, 0.16),
    0 2px 22px rgba(0, 0, 0, 0.5) !important;
}

.hero-title em {
  color: var(--brand-soft, #7FB2FF) !important;
  font-style: normal;
  text-shadow:
    0 0 22px rgba(127, 233, 255, 0.45),
    0 0 48px rgba(59, 130, 246, 0.28);
  filter: drop-shadow(0 0 14px rgba(127, 178, 255, 0.4));
}

.section-title {
  font-family: var(--font-display) !important;
  font-size: var(--prem-type-section) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
  color: #f4f6fa !important;
}

.section-title em {
  font-style: normal;
  color: var(--brand, #3B82F6);
  position: relative;
}

body.page-sub .page-hero h1 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
  color: #f4f6fa !important;
}

/* -------- UI: nav, buttons, eyebrows, tabs, craft idx -------- */
.nav-list a,
.nav-list > a,
.nav-brand .name,
.btn,
.lang-switch,
.lang-btn,
.product-tabs button,
.product-tab,
.section-eyebrow,
.craft-eyebrow,
.craft-step .idx,
.craft-row .idx,
#prem-capsule a,
.hero-brand .brand-mark-sub,
.nav-brand .mark {
  font-family: var(--font-ui) !important;
}

.nav-list a,
.nav-list > a {
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  font-size: 13.5px;
}

.btn {
  font-family: var(--font-ui) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

.section-eyebrow,
.craft-eyebrow,
.hero-brand .brand-mark-sub {
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase;
  color: var(--type-eyebrow) !important;
}

.product-tabs button,
.product-tab {
  font-family: var(--font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em;
}

.craft-step .idx,
.craft-row .idx {
  font-family: var(--font-ui) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* -------- Mono: specs, chips, progress, technical -------- */
.product-card .meta,
.product-card .spec,
.product-card .tags,
.catalogue-grid .product-card .body small,
.catalogue-grid .product-card .meta,
.quality-card .meta,
.craft-progress,
.prem-chip,
.prem-conveyor .track span,
.prem-marquee .track span,
.spec-chip,
.tag {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 400;
}

.prem-marquee .track span,
.prem-conveyor .track span {
  letter-spacing: 0.2em !important;
}

/* -------- Cards / headings that used Barlow -------- */
.product-card h3,
.product-card h4,
.quality-card h4,
.app-card h3,
.app-card h4,
.vitem h4,
.ecard .co,
.about-stat .num,
.stat .num {
  font-family: var(--font-display) !important;
}

/* Override inline Barlow on family codes / big numbers */
[style*="Barlow"],
[style*="Barlow Condensed"] {
  font-family: var(--font-display) !important;
}

/* -------- zh mode: slightly looser tracking -------- */
html[data-lang="zh"] body,
html[data-lang="zh"] .section-lead,
html[data-lang="zh"] .hero-sub,
html[data-lang="zh"] .hero-title,
html[data-lang="zh"] .section-title,
html[data-lang="zh"] .page-hero h1 {
  letter-spacing: 0.02em;
  font-family: var(--font-zh), var(--font-body);
}

html[data-lang="zh"] .hero-title,
html[data-lang="zh"] .section-title,
html[data-lang="zh"] .page-hero h1 {
  font-family: var(--font-display) !important;
  letter-spacing: 0.01em !important;
}

html[data-lang="zh"] .section-eyebrow,
html[data-lang="zh"] .craft-eyebrow {
  letter-spacing: 0.28em !important;
}

html[data-lang="zh"] .nav-list a {
  letter-spacing: 0.08em !important;
}

/* ============================================================
 * Text motion styles (restrained; pairs with typography.js)
 * ============================================================ */

/* Hero: opacity + blur→sharp on line spans */
.hero-title .line.typo-line-boost span,
.hero-title .line.prem-line-boost span {
  filter: blur(6px);
  transition:
    transform 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.1s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
body.hero-active .hero-title .line.typo-line-boost span,
body.hero-active .hero-title .line.prem-line-boost span,
body.home-active .hero-title .line.typo-line-boost span,
body.home-active .hero-title .line.prem-line-boost span {
  filter: blur(0);
}

/* Section title word stagger — better easing */
.prem-word {
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition-delay: calc(var(--wi, 0) * 52ms) !important;
  filter: blur(3px);
}
.is-staggered .prem-word,
.prem-stagger-ready .prem-word {
  filter: blur(0);
}

/* One-shot gradient shimmer on section-title em */
.section-title em.typo-em-shimmer,
.section-title .prem-word em.typo-em-shimmer,
.section-title em .prem-word.typo-em-shimmer {
  background: linear-gradient(
    105deg,
    var(--brand, #3B82F6) 0%,
    var(--brand, #3B82F6) 35%,
    #e8f4ff 48%,
    var(--brand-soft, #7FB2FF) 55%,
    var(--brand, #3B82F6) 70%,
    var(--brand, #3B82F6) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: typoEmShimmer 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
@keyframes typoEmShimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.section-title.is-staggered em.typo-em-done,
.section-title em.typo-em-done {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--brand, #3B82F6) !important;
  animation: none;
}

/* Soft underline draw under em / key links */
.section-title em.typo-underline,
a.typo-underline {
  position: relative;
}
.section-title em.typo-underline::after,
a.typo-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-soft, #7FB2FF), transparent 90%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0.55;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  pointer-events: none;
}
.section-title.is-staggered em.typo-underline::after,
a.typo-underline.is-drawn::after,
.section-title em.typo-underline.is-drawn::after {
  transform: scaleX(1);
}

/* Eyebrow: tracking from wider → target + fade (no glitch) */
.section-eyebrow.typo-track,
.craft-eyebrow.typo-track {
  opacity: 0;
  letter-spacing: 0.55em !important;
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing 1.05s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.4s ease;
}
.section-eyebrow.typo-track.is-in,
.craft-eyebrow.typo-track.is-in {
  opacity: 1;
  letter-spacing: 0.32em !important;
}
html[data-lang="zh"] .section-eyebrow.typo-track.is-in,
html[data-lang="zh"] .craft-eyebrow.typo-track.is-in {
  letter-spacing: 0.28em !important;
}

/* Silence legacy glitch when typography track is active */
.section-eyebrow.typo-track.prem-glitch::before,
.section-eyebrow.typo-track.prem-glitch::after,
.section-eyebrow.typo-track.prem-glitch.is-glitching::before,
.section-eyebrow.typo-track.prem-glitch.is-glitching::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

/* Craft idx / big counters: subtle scale-in when active */
.craft-step .idx {
  transform-origin: left center;
  transition:
    color 0.45s ease,
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.45s ease;
}
.craft-step.active .idx.typo-idx-pop {
  animation: typoIdxPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes typoIdxPop {
  0%   { transform: scale(0.92); opacity: 0.7; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1.08); opacity: 1; }
}

.typo-counter {
  display: inline-block;
  transform-origin: center;
}
.typo-counter.is-in {
  animation: typoCounterIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes typoCounterIn {
  from { transform: scale(0.88); opacity: 0.4; filter: blur(4px); }
  to   { transform: scale(1); opacity: 1; filter: blur(0); }
}

/* -------- Reduced motion -------- */
@media (prefers-reduced-motion: reduce) {
  .hero-title .line.typo-line-boost span,
  .hero-title .line.prem-line-boost span,
  .prem-word,
  .section-eyebrow.typo-track,
  .craft-eyebrow.typo-track,
  .craft-step .idx,
  .typo-counter {
    transition: none !important;
    animation: none !important;
    filter: none !important;
    letter-spacing: inherit !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .section-title em.typo-em-shimmer,
  .section-title em.typo-underline::after,
  a.typo-underline::after {
    animation: none !important;
    transform: none !important;
    background: none !important;
    color: var(--brand, #3B82F6) !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
  }
  .section-eyebrow.typo-track,
  .craft-eyebrow.typo-track {
    letter-spacing: 0.32em !important;
    opacity: 1 !important;
  }
}