/* =========================================================================
   hero.css —— 粒子英雄区（外挂注入，不改动 React 源码）
   作用对象：React 渲染出的 <section class="hero">
   只在 .hero--particle 生效；脚本未运行时页面完全保持原样。
   ========================================================================= */

/* ---------- 把现有浅色文字 Hero 改造成深色全屏舞台 ---------- */
/* 注意：这里不能加 overflow:hidden —— 祖先一旦成为滚动容器，
   内部 .hero-stage__inner 的 position:sticky 就会失效。 */
.hero--particle {
  max-width: none;
  padding: 0;
  margin: 0;
  background: #04050a;
}

/* 原有文字：视觉交给粒子，但保留在 DOM 里供爬虫与读屏器使用 */
.hero--particle .hero-copy {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 舞台：sticky canvas，滚动驱动形变 ---------- */
.hero-stage {
  position: relative;
  height: 320vh;          /* 行程长度：越大滚动动画越慢 */
}
.hero-stage__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.hero-stage__inner > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 舞台上的 UI ---------- */
.hero-ui {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: 0 6vw 8vh;
  pointer-events: none;
}
/* 克隆自原 Hero 的 CTA，在深色上反色 */
.hero-ui .primary-link {
  pointer-events: auto;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  transition: border-color .25s, background .25s, color .25s;
}
.hero-ui .primary-link:hover {
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.hero-scroll-hint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .22em;
  color: rgba(255, 255, 255, .42);
}
.hero-scroll-hint i {
  display: block;
  width: 1px; height: 42px;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  animation: hero-hint 2.1s ease-in-out infinite;
}
@keyframes hero-hint {
  0%, 100% { opacity: .25; transform: scaleY(.5); }
  50%      { opacity: 1;   transform: scaleY(1); }
}

/* ---------- 顶部：从上方纸色柔和过渡到深空 ---------- */
.hero-fade-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 90px;
  background: linear-gradient(rgba(244, 242, 236, 1), rgba(244, 242, 236, 0));
  pointer-events: none;
}

/* ---------- 降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-hint i { animation: none; }
  .hero-stage { height: 100vh; }   /* 不做滚动形变，只留一屏静态画面 */
}

@media (max-width: 640px) {
  .hero-stage { height: 260vh; }
  .hero-ui { padding-bottom: 6vh; gap: 18px; }
}