/* ============================================================
   公共动效层 —— 所有店页共享的 motion 基础设施（V4 链接）
   版式布局由各页内嵌样式独立定义，本文件只管动效。
   类名约定：.reveal/.wrap（入场）、.grid/.card（商品触屏反馈）、
   .claim（主张触屏反馈）、.hero-photo（hero 图容器）。
   ============================================================ */

/* — reveal 子元素错落入场（--d 由页尾脚本注入；移动端同步启用） — */
.js-reveal .reveal.is-visible > .wrap > *,
.js-reveal .reveal.is-visible > *:not(.wrap) {
  animation: stRise 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  animation-delay: var(--d, 0ms);
}

@keyframes stRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .js-reveal .reveal { transition-duration: 0.4s; }
  .js-reveal .reveal.is-visible > .wrap > *,
  .js-reveal .reveal.is-visible > *:not(.wrap) { animation-duration: 0.45s; }
}

/* — demo-strip：底缘流光细线 + 内容入场滑入 — */
.demo-strip { position: relative; }

.demo-strip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--amber, #C8963E) 42%, transparent) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: stripFlow 7s ease-in-out infinite alternate;
}

@keyframes stripFlow {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

.js-reveal .demo-strip .container { animation: stRise 0.5s ease-out backwards; }

/* — 页脚服务链接 hover 反馈 — */
footer a.svc { transition: color 0.28s ease-out; }
footer a.svc:hover { color: var(--amber, #C8963E); }

/* — 触屏按压反馈 — */
@media (hover: none) and (pointer: coarse) {
  .grid .card:active { opacity: 0.82; transition: opacity 0.12s ease-out; }
  .btn:active { opacity: 0.7; }
  nav.menu a:active, .nav-icons a:active { opacity: 0.55; }
  .claim:active { background: color-mix(in srgb, var(--amber, #C8963E) 9%, transparent); }
}

/* — hero 呼吸（对使用 .hero-photo 的页面生效，各页可覆盖 animation-name） — */
body[data-hero-breath] .hero-photo img {
  animation: heroBreath 13s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroBreath {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

/* — 视差缓冲（img 需标记 data-plx，页尾脚本驱动） — */
.js-parallax img[data-plx] {
  height: calc(100% + 80px);
  margin-top: -40px;
  will-change: transform;
}

/* — reduced motion：全部动效关闭 — */
@media (prefers-reduced-motion: reduce) {
  .demo-strip::after,
  .js-reveal .demo-strip .container,
  .js-reveal .reveal.is-visible > .wrap > *,
  .js-reveal .reveal.is-visible > *:not(.wrap),
  body[data-hero-breath] .hero-photo img {
    animation: none !important;
  }

  .js-parallax img[data-plx] { margin-top: 0; height: 100%; }
  .claim, footer a.svc { transition: none !important; }
}