/* ============================================================
   共享动效 —— Apple 风格的克制运动
   三个原型共用这一份。

   Apple 的运动语言归纳下来是四条:
   1. 慢。0.9~1.1s,不是网页常见的 0.3s。快 = 廉价。
   2. 幅度小。位移 28px 左右,不是整屏飞入。
   3. 缓出曲线长尾。cubic-bezier(0.28,0.11,0.32,1),没有回弹、没有 spring。
   4. 错峰。同组元素间隔 70ms 依次进场,不是齐刷刷一起亮。

   ⚠️ 元素默认是可见的,`.rv` 由 JS 加上(见 motion.js)。
   这样没有 JS / 爬虫 / prefers-reduced-motion 的情况下,内容照常显示,
   不会出现"JS 没跑起来整页空白"。
   ============================================================ */

:root {
  --ease-apple: cubic-bezier(0.28, 0.11, 0.32, 1);
  --rv-dur: 0.95s;
  --rv-shift: 28px;
}

/* 基础:淡入 + 上移 */
.rv {
  opacity: 0;
  transform: translate3d(0, var(--rv-shift), 0);
  transition:
    opacity var(--rv-dur) var(--ease-apple),
    transform var(--rv-dur) var(--ease-apple);
  will-change: opacity, transform;
}
.rv.rv-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* 进场结束后撤掉 will-change,别一直占着合成层 */
.rv.rv-done { will-change: auto; }

/* 图片:轻微放大后落定 —— Apple 产品图最常用的一招 */
.rv-scale {
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 1.1s var(--ease-apple),
    transform 1.1s var(--ease-apple);
}
.rv-scale.rv-in { opacity: 1; transform: scale(1); }

/* 错峰:同组子元素依次进场 */
.rv[data-rv-i="1"] { transition-delay: 0.07s; }
.rv[data-rv-i="2"] { transition-delay: 0.14s; }
.rv[data-rv-i="3"] { transition-delay: 0.21s; }
.rv[data-rv-i="4"] { transition-delay: 0.28s; }
.rv[data-rv-i="5"] { transition-delay: 0.35s; }
.rv[data-rv-i="6"] { transition-delay: 0.42s; }
.rv[data-rv-i="7"] { transition-delay: 0.49s; }
.rv[data-rv-i="8"] { transition-delay: 0.56s; }

/* 首屏:不等滚动,加载即入场(Apple 的首屏也是立刻动的) */
.hero-rv {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  animation: heroIn 1.05s var(--ease-apple) forwards;
}
.hero-rv:nth-child(1) { animation-delay: 0.05s; }
.hero-rv:nth-child(2) { animation-delay: 0.13s; }
.hero-rv:nth-child(3) { animation-delay: 0.21s; }
.hero-rv:nth-child(4) { animation-delay: 0.29s; }
.hero-rv:nth-child(5) { animation-delay: 0.37s; }
@keyframes heroIn { to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* 顶栏:滚动后压扁 + 加深阴影,给页面一个"已经走远了"的实感 */
.nav {
  transition: padding 0.4s var(--ease-apple), box-shadow 0.4s var(--ease-apple);
}
.nav.nav-stuck {
  padding-top: 9px;
  padding-bottom: 9px;
  box-shadow: 0 6px 24px rgba(19, 35, 59, 0.07);
}

/* 卡片 hover:比原来更慢更小,跟整体运动语言对齐 */
.cat, .line, .pcard, .card {
  transition: transform 0.45s var(--ease-apple), box-shadow 0.45s var(--ease-apple);
}

/* ⚠️ 系统开了"减少动态"就全部关掉 —— 不是减速,是直接给最终状态 */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-scale, .hero-rv {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .nav, .cat, .line, .pcard, .card { transition: none; }
}

/* ============================================================
   首屏强调句 —— 流动渐变
   色域刻意锁在品牌橙附近(深橙 → 暖金 → 深橙),不是彩虹。
   B2B 贸易站上大色域渐变会显得廉价,这里要的是「光从字上扫过」。

   ⚠️ background-clip:text 一旦不被支持,文字会整句消失(因为 color 是透明的)。
      所以必须包在 @supports 里 —— 不支持时退回纯色,而不是白屏。
   ============================================================ */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero h1 .accent {
    background-image: linear-gradient(
      100deg,
      var(--accent) 0%,
      #e8a15c 22%,
      #f7d2a0 40%,
      #e8a15c 58%,
      var(--accent) 80%,
      var(--accent) 100%
    );
    background-size: 260% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: accentFlow 9s linear infinite;
  }
}

/* 9s 一轮 —— 再快就从「质感」变成「闪」了 */
@keyframes accentFlow {
  to { background-position: -160% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .accent {
    animation: none !important;
    /* 停在暖金那一段,静态也好看;不回退纯色是为了保持视觉一致 */
    background-position: 40% 50%;
  }
}