/* ============================================================
   喜市官网 · 全站共享动效（唯一动效源，改效果只改这里）
   各页面引用：<link rel="stylesheet" href="assets/anim.css">
              <script src="assets/anim.js" defer></script>
   ============================================================ */
html{scroll-behavior:smooth}
header.scrolled{box-shadow:0 6px 20px rgba(10,60,70,.12)}

/* —— 首屏（仅主页有 .hero）：图片缓慢呼吸 + 文案逐行浮现 + 下滑箭头 —— */
.hero img{animation:kb 16s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,1%)}}
.hero h1,.hero p,.hero .tag{opacity:0;transform:translateY(22px);animation:heroUp .9s ease forwards}
.hero p{animation-delay:.25s}
.hero .tag{animation-delay:.5s}
@keyframes heroUp{to{opacity:1;transform:none}}
.hero .down{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);color:#fff;opacity:.85;
  width:40px;height:40px;border:1px solid rgba(255,255,255,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;
  animation:bob 1.7s ease-in-out infinite;pointer-events:none}
.hero .down svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* —— 滚动出场：anim.js 自动挂 .reveal，进入视口后浮起 ——
   隐藏态写在 :not(.in) 上，不占用元素平时的 transform，
   所以各页面原有的 hover 上浮/阴影动画不受影响 */
.reveal{transition:opacity .7s ease,transform .7s ease}
.reveal:not(.in){opacity:0;transform:translateY(26px)}
.case.reveal{transition-duration:.55s}

/* —— 回到顶部按钮（四页都有） —— */
#topbtn{position:fixed;right:22px;bottom:26px;width:46px;height:46px;border-radius:50%;
  background:rgba(10,84,99,.92);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:20px;opacity:0;pointer-events:none;transition:.3s;z-index:98;box-shadow:0 8px 20px rgba(10,60,70,.3);
  border:0;cursor:pointer;font-family:inherit}
#topbtn.show{opacity:1;pointer-events:auto}
#topbtn:hover{background:var(--brand-dk)}

/* —— 无障碍：系统开了"减少动态效果"就全部静止 —— */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal:not(.in),.hero h1,.hero p,.hero .tag{transition:none;animation:none;opacity:1;transform:none}
  .hero img,.hero .down{animation:none}
  #topbtn{transition:none}
}