/* ==========================================================
   brand-site 共通设计系统
   色调：ink charcoal + warm cream + muted forest
   字体：Noto Serif JP（标题）+ Noto Sans JP（正文）
   ========================================================== */

:root {
  --bg-cream:    #FAF8F3;
  --bg-ivory:    #FFFDF7;
  --bg-sand:     #F2EFE6;
  --ink:         #1A1A1A;
  --ink-soft:    #333333;
  --ink-mute:    #6B6B6B;
  --ink-light:   #A8A8A8;
  --line:        #E5E1D6;
  --line-soft:   #EFEBE0;
  --forest:      #2D4A3E;
  --forest-soft: #E8EDE9;
  --accent:      #8B6F47;       /* 焦糖棕，低饱和 */
  --accent-soft: #F3EEE3;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', -apple-system, 'Hiragino Sans', 'Yu Gothic', sans-serif;
  font-feature-settings: "palt";   /* 日文比例字距 */
  color: var(--ink);
  background: var(--bg-cream);
  letter-spacing: 0.02em;
  line-height: 1.8;
}

.font-serif {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
}

/* 纵向书写风 —— 日文 Hero 装饰用 */
.vertical-jp {
  writing-mode: vertical-rl;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.3em;
}

/* 头部导航 */
.nav-link {
  position: relative;
  color: var(--ink-soft);
  transition: color .2s;
}
.nav-link::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: var(--ink); }
.nav-link.active::after { transform: scaleX(1); background: var(--accent); }

/* 主按钮 —— 墨黑填充 */
.btn-ink {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 2rem;
  background: var(--ink);
  color: var(--bg-ivory);
  border: 1px solid var(--ink);
  border-radius: 0;               /* 和风直角 */
  font-size: .9rem;
  letter-spacing: .1em;
  transition: all .25s;
}
.btn-ink:hover {
  background: transparent;
  color: var(--ink);
  transform: translateY(-1px);
}

/* 次级按钮 —— 线框 */
.btn-outline {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 2rem;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  font-size: .9rem;
  letter-spacing: .1em;
  transition: all .25s;
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--bg-ivory);
}

/* Amazon 品牌色按钮（保留亚马逊橙） */
.btn-amazon {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .9rem 2rem;
  background: #FF9900;
  color: #111;
  border: 1px solid #FF9900;
  border-radius: 0;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .05em;
  transition: all .2s;
}
.btn-amazon:hover {
  background: #F08E00;
  border-color: #F08E00;
  transform: translateY(-1px);
}

/* 章节分隔线 */
.divider-ink {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--ink);
  margin: 0 auto;
}

/* 装饰数字 */
.deco-num {
  font-family: 'Noto Serif JP', serif;
  font-size: .7rem;
  letter-spacing: .4em;
  color: var(--ink-mute);
  text-transform: uppercase;
}

/* 首屏墨迹圆 */
.ink-circle {
  position: absolute;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: .08;
  pointer-events: none;
}

/* 卡片 */
.card-bare {
  background: var(--bg-ivory);
  border: 1px solid var(--line);
  transition: all .3s;
}
.card-bare:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* 渐入动画 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp .8s cubic-bezier(.2,.8,.2,1) both;
}
.fade-up-d1 { animation-delay: .1s; }
.fade-up-d2 { animation-delay: .2s; }
.fade-up-d3 { animation-delay: .3s; }
.fade-up-d4 { animation-delay: .4s; }

/* FAQ details */
details[open] summary::after { transform: rotate(45deg); }
.faq-summary::after {
  content: "+";
  float: right;
  transition: transform .2s;
  font-weight: 300;
  color: var(--ink-mute);
}

/* 响应式微调 */
@media (max-width: 640px) {
  body { letter-spacing: 0.01em; }
  .btn-ink, .btn-outline, .btn-amazon { padding: .8rem 1.5rem; }
}

/* Tailwind 扩展（通过 class 注入） */
.bg-cream   { background-color: var(--bg-cream); }
.bg-ivory   { background-color: var(--bg-ivory); }
.bg-sand    { background-color: var(--bg-sand); }
.bg-forest  { background-color: var(--forest); }
.bg-forest-soft { background-color: var(--forest-soft); }
.bg-accent-soft { background-color: var(--accent-soft); }
.text-ink   { color: var(--ink); }
.text-ink-soft { color: var(--ink-soft); }
.text-ink-mute { color: var(--ink-mute); }
.text-forest { color: var(--forest); }
.text-accent { color: var(--accent); }
.border-line { border-color: var(--line); }
.border-ink { border-color: var(--ink); }

/* =========================================================
   炫酷动效
   ========================================================= */

/* 顶部滚动进度 */
#scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 0%; height: 2px;
  background: linear-gradient(90deg, var(--forest), var(--accent));
  z-index: 999; transition: width .08s linear;
  box-shadow: 0 0 10px rgba(45,74,62,.3);
}

/* 光标聚光灯 */
#cursor-spotlight {
  position: fixed; top: 0; left: 0;
  width: 360px; height: 360px;
  margin: -180px 0 0 -180px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(139,111,71,.10) 0%,
    rgba(139,111,71,.04) 30%,
    transparent 70%);
  z-index: 1;
  mix-blend-mode: multiply;
  transition: opacity .3s;
  will-change: transform;
}

/* 基础 reveal */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-zoom,
.reveal-clip {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal-up     { transform: translateY(40px); }
.reveal-left   { transform: translateX(-40px); }
.reveal-right  { transform: translateX(40px); }
.reveal-zoom   { transform: scale(.94); }
.reveal-clip {
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  transition: clip-path 1.2s cubic-bezier(.2,.8,.2,1);
}

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-zoom.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-clip.is-visible { clip-path: inset(0 0 0 0); }

/* staggered 子元素依次渐入 */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-stagger > *.is-visible {
  opacity: 1;
  transform: none;
}

/* 按字符切分显露 */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.8em) rotateX(-40deg);
  transform-origin: 50% 100%;
  animation: charIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes charIn {
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* 磁吸按钮 */
.magnetic { transition: transform .3s cubic-bezier(.2,.8,.2,1); }

/* 3D 倾斜卡片 */
.tilt {
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style: preserve-3d;
}

/* 光泽滑过 */
.shine {
  position: relative;
  overflow: hidden;
}
.shine::before {
  content: "";
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
  transform: skewX(-20deg);
  transition: left .7s cubic-bezier(.2,.8,.2,1);
}
.shine:hover::before { left: 120%; }

/* 浮动循环（装饰用） */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.float { animation: floatY 6s ease-in-out infinite; }
.float-slow { animation: floatY 9s ease-in-out infinite; }

/* 旋转循环（装饰用） */
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 30s linear infinite; }

/* 跑马灯 */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-inner {
  display: inline-flex;
  gap: 4rem;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee:hover .marquee-inner { animation-play-state: paused; }

/* 图片/视觉块 reveal + 内部缩放 */
.img-reveal {
  position: relative;
  overflow: hidden;
}
.img-reveal::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--bg-cream);
  transform-origin: right;
  transition: transform 1.2s cubic-bezier(.77,0,.18,1);
}
.img-reveal.is-visible::after {
  transform: scaleX(0);
}
.img-reveal > * { transition: transform 1.2s cubic-bezier(.2,.8,.2,1) .2s; transform: scale(1.15); }
.img-reveal.is-visible > * { transform: scale(1); }

/* 大号数据计数样式 */
.big-num {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.02em;
}

/* hover 时图片移位的"箭头" */
.arrow-move {
  display: inline-block;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.group:hover .arrow-move { transform: translateX(8px); }

/* 文字下划线动画 */
.underline-ink {
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .5s cubic-bezier(.2,.8,.2,1);
}
.underline-ink:hover { background-size: 100% 1px; }

/* KPI 数字进入视口时的底座 */
.kpi-card {
  position: relative;
  padding: 1.25rem 0;
}
.kpi-card::before {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--ink);
  transition: width 1.2s cubic-bezier(.2,.8,.2,1) var(--reveal-delay, 0ms);
}
.kpi-card.is-visible::before { width: 100%; }

/* 尊重用户的"减少动效"偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  #cursor-spotlight { display: none; }
}