/* =========================================================
   恒盛鑫竹 · 纯视觉增强层（Organic / 深林竹材）
   --------------------------------------------------------
   原则：
   1. 保留原站深色森林绿主基调，文字亮度/对比度不降级。
   2. 不改原 JS/CSS bundle，不改任何文字字符串。
   3. 仅装饰性伪元素，不新增可读文字。
   4. 全中文系统字体栈，无外部依赖。
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root{
  --enh-bg:#0E1A11;
  --enh-bg2:#13251A;
  --enh-panel:#172A1C;
  --enh-panel2:#1E3526;
  --enh-line:rgba(168,196,158,.16);
  --enh-line-strong:rgba(168,196,158,.28);
  --enh-paper:#F1E8D8;
  --enh-paper-dim:#C9D2BE;
  --enh-muted:#9FB29A;
  --enh-muted2:#7F957C;
  --enh-moss:#6A7F4E;
  --enh-sage:#8B9D83;
  --enh-sage-light:#A9C0A0;
  --enh-clay:#B08B6E;
  --enh-terracotta:#D98F5F;
  --enh-ochre:#D0A24E;
  --enh-green:#47B262;
  --enh-font-sans:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --enh-font-serif:"Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong","SimSun",serif;
  --enh-ease:cubic-bezier(.22,1,.36,1);
  --enh-shadow-soft:0 24px 70px -30px rgba(0,0,0,.65);
  --enh-shadow-card:0 18px 45px -26px rgba(0,0,0,.6);
  --enh-glow:0 0 0 1px rgba(168,196,158,.10), 0 18px 45px -26px rgba(0,0,0,.6);
}

/* ---------- 2. 全局基底与排版 ---------- */
html{
  scrollbar-color:var(--enh-moss) #0E1A11;
  scroll-behavior:smooth;
}
body{
  background-color:var(--enh-bg) !important;
  background-image:
    radial-gradient(1100px 600px at 12% -6%, rgba(107,138,77,.20), transparent 60%),
    radial-gradient(900px 520px at 100% 8%, rgba(139,157,131,.12), transparent 55%),
    radial-gradient(800px 700px at 50% 115%, rgba(62,96,62,.18), transparent 60%);
  background-attachment:fixed;
  color:var(--enh-paper);
  font-family:var(--enh-font-sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}

/* 让 React 内联的 system-ui 字体栈统一成更温暖的中文无衬线 */
[style*="font-family: system-ui"]{ font-family:var(--enh-font-sans) !important; }
[style*="font-family: -apple-system"]{ font-family:var(--enh-font-sans) !important; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--enh-font-serif) !important;
  font-weight:500 !important;
  letter-spacing:.02em;
}
h1,h2{ text-wrap:balance; }

::selection{ background:rgba(216,143,95,.45); color:#13251A; }

:where(a,button,input,select,textarea,[role="button"]):focus-visible{
  outline:2px solid var(--enh-terracotta) !important;
  outline-offset:3px;
  border-radius:8px;
}

::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#0E1A11; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#3D5733,#6A7F4E);
  border:3px solid #0E1A11;
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background:#6A7F4E; }

/* 全站纸张颗粒（深色底用 overlay 混合，轻量） */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:2000;
  pointer-events:none;
  mix-blend-mode:overlay;
  opacity:.075;
  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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* ---------- 3. 通用元素打磨 ---------- */
img{ border-radius:14px; }
button, [role="button"]{ transition:transform .35s var(--enh-ease), box-shadow .35s var(--enh-ease), background-color .35s var(--enh-ease) !important; }
a{ transition:color .3s ease, opacity .3s ease; }

/* 通用卡片 / 面板：圆角 + 柔影（仅影响无边框深色容器，不改变文字） */
[class*="grid"] > div:not([class*="scene"]),
.info-grid > div,
.green-grid > div{
  border-radius:18px;
  box-shadow:var(--enh-shadow-card);
}

/* ---------- 4. 品牌 LOGO ---------- */
.site-logo{ letter-spacing:.06em; }

/* ---------- 5. 导航 ---------- */
.desktop-nav a{
  position:relative;
  padding:4px 2px;
}
.desktop-nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-3px;
  height:2px;
  background:linear-gradient(90deg,var(--enh-terracotta),var(--enh-ochre));
  transition:right .35s var(--enh-ease);
}
.desktop-nav a:hover::after{ right:0; }

.mobile-menu-btn{
  border-radius:10px !important;
  transition:background-color .3s ease !important;
}
.mobile-menu-btn:hover{ background:rgba(168,196,158,.10); }
.burger-line{ border-radius:2px; }

/* ---------- 6. 时间线 ---------- */
.timeline-row{ position:relative; }
.timeline-row::before{
  content:"";
  position:absolute;
  left:10px;
  top:0; bottom:0;
  width:1px;
  background:linear-gradient(180deg,transparent,var(--enh-line-strong),transparent);
}
.timeline-year{
  display:inline-flex;
  align-items:center;
  gap:10px;
  letter-spacing:.04em;
}
.timeline-year::before{
  content:"";
  width:11px; height:11px;
  border-radius:50%;
  background:var(--enh-bg);
  border:2px solid var(--enh-terracotta);
  box-shadow:0 0 0 4px rgba(216,143,95,.14), 0 0 18px rgba(216,143,95,.35);
}

/* ---------- 7. 新闻卡片 ---------- */
.news-card-img{
  overflow:hidden !important;
  border-radius:18px !important;
  box-shadow:var(--enh-shadow-card);
}
.news-card-img img{ transition:transform .8s var(--enh-ease); }
.news-card-img:hover img{ transform:scale(1.06); }

/* ---------- 8. 竹利用树 ---------- */
.tree-trunk{
  background:linear-gradient(180deg,var(--enh-moss),rgba(106,127,78,.25)) !important;
  border-radius:8px;
}
.tree-spine{
  background:linear-gradient(180deg,rgba(168,196,158,.5),rgba(168,196,158,.08)) !important;
}
.tree-branch{ position:relative; }
.tree-arm{
  background:linear-gradient(90deg,var(--enh-sage),rgba(139,157,131,.15)) !important;
  border-radius:6px;
}
.tree-arm::after{
  content:"";
  position:absolute;
  right:-3px;
  top:50%;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--enh-clay);
  transform:translateY(-50%);
}

/* ---------- 9. 纤维对比表 ---------- */
.fiber-compare{
  scrollbar-color:var(--enh-moss) transparent;
  padding-bottom:14px;
}
.fiber-compare table{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:var(--enh-shadow-card);
}
.fiber-compare th{ letter-spacing:.04em; }
.swipe-hint{ opacity:.78; white-space:nowrap; }

/* ---------- 10. 场景网格 ---------- */
.scene-grid{ gap:14px !important; background:transparent !important; }
.scene-grid > div{
  border-radius:20px !important;
  overflow:hidden !important;
  box-shadow:var(--enh-shadow-card);
  transition:transform .5s var(--enh-ease), box-shadow .5s var(--enh-ease) !important;
}
.scene-grid > div:hover{
  transform:translateY(-6px);
  box-shadow:0 32px 70px -28px rgba(0,0,0,.75) !important;
}

/* ---------- 11. CNN 输入 / 输出（深色玻璃） ---------- */
.cnn-input,
.cnn-output{
  padding:16px 18px;
  border-radius:20px;
  background:rgba(20,39,26,.55);
  border:1px solid var(--enh-line-strong);
  box-shadow:var(--enh-shadow-card);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* ---------- 12. 竹种网格 ---------- */
.species-grid{ gap:12px !important; background:transparent !important; }
.species-grid button{
  border-radius:18px !important;
  box-shadow:var(--enh-shadow-card);
}
.species-grid button:hover{
  background:var(--enh-moss) !important;
  transform:translateY(-4px);
}
.species-name{ letter-spacing:.03em; }

/* ---------- 13. 集群 / AI 思考 / 视觉 / 困境 / 闭环 ---------- */
.think-grid > div:first-child{
  padding:18px;
  border-radius:22px;
  background:rgba(20,39,26,.55);
  border:1px solid var(--enh-line);
}
.vision-grid > div:first-child > div:first-child{
  border-radius:20px !important;
  border-color:var(--enh-line-strong) !important;
}
.dilemma-grid img{ filter:saturate(.85) contrast(1.06); }

.loop-grid{ gap:12px !important; background:transparent !important; }
.loop-grid > div{
  background:var(--enh-panel) !important;
  border-radius:18px !important;
  box-shadow:var(--enh-shadow-card);
  border:1px solid var(--enh-line);
  transition:transform .5s var(--enh-ease), box-shadow .5s var(--enh-ease), border-color .5s var(--enh-ease) !important;
}
.loop-grid > div:hover{
  transform:translateY(-5px);
  border-color:var(--enh-line-strong) !important;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.75) !important;
}
.loop-grid > div > div:first-child{
  color:var(--enh-terracotta) !important;
}

/* ---------- 14. 轻量上扬悬浮（通用，但避开已接管动画的元素） ---------- */
.news-card-img,
.scene-grid > div,
.loop-grid > div,
.species-grid button{
  will-change:transform;
}

/* ---------- 15. Reveal 初始态（enhance.js 添加 data-enh-reveal） ---------- */
html.enh-js [data-enh-reveal]:not(.is-visible){
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--enh-ease), transform .7s var(--enh-ease);
}
html.enh-js [data-enh-reveal].is-visible{
  opacity:1;
  transform:none;
}

/* ---------- 16. 响应式 ---------- */
@media (max-width: 640px){
  .process-arrow{ display:none !important; }
  .cnn-input,.cnn-output{ padding:12px 14px; border-radius:16px; }
}



/* ---------- 18. 3D 倾斜（JS 鼠标跟踪 + 光影扫过） ---------- */
[data-enh-tilt]{
  position:relative;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
[data-enh-tilt]::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity .45s ease;
  mix-blend-mode:screen;
  background:radial-gradient(620px circle at var(--gx,50%) var(--gy,50%), rgba(255,238,205,.18), transparent 42%);
}
[data-enh-tilt]:hover::after{ opacity:1; }

/* ---------- 17. 无障碍：减少动态 ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html.enh-js [data-enh-reveal]:not(.is-visible){ opacity:1; transform:none; }
}


/* ---------- 18. 浅色区块过淡文字的可读性微调（仅局部、不改文字内容） ---------- */
p[style*="color: rgb(153, 153, 153)"]{ color:#55685A !important; }
div[style*="color: rgb(220, 232, 220)"]{ color:#7C9180 !important; }


/* ---------- 19. 排版体检修复 ---------- */
h1{ line-height:1.18 !important; }
h2{ line-height:1.35 !important; }
@media (max-width: 640px){
  html, body{ overflow-x:hidden; }
}