/* ═══════════════════════════════════════════════════
   惠海 AI 效率引擎 · 设计系统
   所有页面共享的基础样式、组件和令牌
   ═══════════════════════════════════════════════════ */

/* ═══ DESIGN TOKENS — 惠海品牌色 ═══ */
:root {
  --ink:       oklch(0.18 0.02 250);
  --ink-soft:  oklch(0.42 0.02 250);
  --ink-muted: oklch(0.62 0.01 250);
  --surface:   oklch(0.97 0.006 250);
  --surface-2: oklch(0.94 0.01 250);
  --surface-3: oklch(0.91 0.012 250);
  --white:     oklch(0.995 0.002 250);
  /* 品牌蓝 RGB(1,122,211) */
  --accent:    oklch(0.55 0.15 250);
  /* 品牌绿 RGB(32,191,163) */
  --accent-2:  oklch(0.72 0.14 165);
  --accent-3:  oklch(0.62 0.14 200);
  --accent-4:  oklch(0.48 0.12 250);
  --accent-5:  oklch(0.65 0.12 310);

  --text-xs:   clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm:   clamp(0.8rem, 0.75rem + 0.3vw, 0.9rem);
  --text-base: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  --text-lg:   clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --text-xl:   clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --text-2xl:  clamp(1.8rem, 1.4rem + 1.5vw, 2.8rem);
  --text-3xl:  clamp(2.4rem, 1.8rem + 2.5vw, 4.2rem);
  --text-hero: clamp(3rem, 2rem + 4.5vw, 6.5rem);

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem;
  --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;
  --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;
  --sp-32: 8rem; --sp-40: 10rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --shadow-sm: 0 1px 2px oklch(0.18 0.02 250 / 0.06);
  --shadow-md: 0 4px 16px oklch(0.18 0.02 250 / 0.08);
  --shadow-lg: 0 12px 40px oklch(0.18 0.02 250 / 0.1);
}

/* ═══ RESET + BASE ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Source Sans 3', 'PingFang SC', 'Noto Sans SC', system-ui, sans-serif;
  font-size: var(--text-base); line-height: 1.6;
  color: var(--ink); background: var(--surface); overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: 'Playfair Display', 'Noto Serif SC', Georgia, serif;
  line-height: 1.15; letter-spacing: -0.02em;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ═══ SCROLL REVEAL ═══ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.9s var(--ease-out-expo), transform 0.9s var(--ease-out-expo); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }
.stagger > * { transition-delay: calc(var(--i, 0) * 80ms); }

/* ═══ NAVIGATION ═══ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--sp-4) var(--sp-8);
  display: flex; align-items: center; justify-content: space-between;
  background: oklch(0.97 0.006 250 / 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid oklch(0.18 0.02 250 / 0.06);
  transition: box-shadow 0.4s var(--ease-out-quart);
}
.nav.scrolled { box-shadow: var(--shadow-sm); }
.nav-logo {
  font-family: 'Playfair Display', serif; font-size: var(--text-lg);
  font-weight: 700; display: flex; align-items: center; gap: var(--sp-3);
}
.nav-logo .logo-img { height: 36px; width: auto; display: block; }
.nav-logo .brand-dot {
  width: 8px; height: 8px; background: var(--accent);
  border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(1.3)} }
.nav-links { display: flex; gap: var(--sp-6); list-style: none; }
.nav-links a {
  font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft);
  letter-spacing: 0.08em; text-transform: uppercase;
  position: relative; padding-bottom: 2px;
}
.nav-links a::after {
  content:''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1.5px; background: var(--accent);
  transition: width 0.3s var(--ease-out-expo);
}
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: var(--sp-4); }
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  width: 28px; height: 20px; position: relative;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; background: var(--ink);
  position: absolute; left: 0; transition: all 0.3s var(--ease-out-quart);
}
.nav-toggle span:nth-child(1){top:0}
.nav-toggle span:nth-child(2){top:9px}
.nav-toggle span:nth-child(3){top:18px}

/* ═══ SUB-PAGE BACK BAR ═══ */
.back-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: var(--sp-4) var(--sp-8);
  display: flex; align-items: center; justify-content: space-between;
  background: oklch(0.97 0.006 250 / 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid oklch(0.18 0.02 250 / 0.06);
}
.back-link {
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs);
  font-weight: 500; color: var(--accent); letter-spacing: 0.08em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: var(--sp-2);
  transition: color 0.3s;
}
.back-link:hover { color: var(--ink); }
.back-title {
  font-family: 'Playfair Display', serif; font-size: var(--text-lg);
  font-weight: 700; color: var(--ink);
}

/* ═══ LANGUAGE TOGGLE ═══ */
.lang-toggle {
  display: inline-flex; align-items: center;
  background: var(--surface-2);
  border: 1.5px solid oklch(0.18 0.02 250 / 0.1);
  border-radius: 3px; overflow: hidden; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: var(--text-xs);
  font-weight: 500; letter-spacing: 0.05em;
  transition: all 0.3s var(--ease-out-quart);
}
.lang-toggle:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.lang-toggle span {
  padding: var(--sp-1) var(--sp-3);
  transition: all 0.3s var(--ease-out-quart);
  color: var(--ink-muted); user-select: none;
}
.lang-toggle span.active { background: var(--ink); color: var(--white); }
body.lang-ja .lang-toggle .lt-zh { color: var(--ink-muted); background: transparent; }
body.lang-ja .lang-toggle .lt-ja { background: var(--ink); color: var(--white); }

/* ═══ BILINGUAL DISPLAY ═══ */
[data-zh] { display: contents !important; }
[data-ja] { display: none !important; }
body.lang-ja [data-zh] { display: none !important; }
body.lang-ja [data-ja] { display: contents !important; }

/* ═══ JAPANESE FONT OVERRIDES ═══ */
body.lang-ja .nav-logo { font-family: 'Noto Sans JP', 'Playfair Display', serif; }
body.lang-ja .footer-brand-text { font-family: 'Noto Sans JP', 'Playfair Display', serif; }
body.lang-ja h1, body.lang-ja h2, body.lang-ja h3, body.lang-ja h4 {
  font-family: 'Noto Sans JP', 'Playfair Display', Georgia, serif;
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:0.01ms!important; transition-duration:0.01ms!important; }
  .reveal,.reveal-left,.reveal-right,.reveal-scale { opacity:1; transform:none; }
  .btn-press { transform: none !important; }
  .card-lift:hover { transform: none !important; box-shadow: var(--shadow-md) !important; }
}

/* ═══ VISUAL POLISH — micro-interactions ═══ */

/* Page entrance — subtle body fade-in */
@keyframes page-enter { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-enter 0.5s var(--ease-out-expo); }

/* Button press — click feedback scale down */
.btn-press {
  transition: transform 0.15s var(--ease-out-quart), box-shadow 0.15s var(--ease-out-quart);
  cursor: pointer;
}
.btn-press:active { transform: scale(0.96); }

/* Card lift — standardized hover elevation */
.card-lift {
  transition: transform 0.35s var(--ease-out-expo),
              box-shadow 0.35s var(--ease-out-expo),
              border-color 0.35s var(--ease-out-expo);
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

/* Link underline — smooth reveal via background gradient */
.link-underline {
  background: linear-gradient(to right, var(--accent), var(--accent)) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.35s var(--ease-out-expo);
}
.link-underline:hover { background-size: 100% 1.5px; }

/* Image scale on hover */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.6s var(--ease-out-expo); }
.img-zoom:hover img { transform: scale(1.04); }

/* Focus ring — accessible keyboard navigation */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lang toggle micro-interaction */
.lang-toggle span {
  transition: all 0.25s var(--ease-out-expo), color 0.2s, background 0.2s;
}
.lang-toggle:hover { transform: translateY(-1px); }

/* Selection highlight */
::selection { background: oklch(0.55 0.15 250 / 0.18); color: var(--ink); }

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(0.18 0.02 250 / 0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: oklch(0.18 0.02 250 / 0.25); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); padding: var(--sp-6) var(--sp-8);
    border-bottom: 1px solid oklch(0.18 0.02 250 / 0.06); gap: var(--sp-4);
  }
  .nav.open .nav-right {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); padding: var(--sp-4) var(--sp-8);
    border-bottom: 1px solid oklch(0.18 0.02 250 / 0.06);
    display: flex; justify-content: flex-end;
  }
}
@media (max-width: 600px) {
  .hero-title { max-width: 100%; }
}