/* 猪猪发卡 v5 动效系统(首页 / 文章页 / 买家端共用)
   原则:只动 transform / opacity / scale / translate,不抢页面原有的 transform;尊重"减少动效"设置。 */
:root {
  --fx-brand: 62, 99, 221;
  --fx-mint: 46, 158, 120;
  --fx-ease: cubic-bezier(.2, .7, .2, 1);
  --fx-spring: cubic-bezier(.34, 1.56, .64, 1);
}
html { -webkit-tap-highlight-color: transparent; }

/* 页面之间淡入淡出(支持的浏览器自动生效,其余忽略) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fx-vt-out .2s var(--fx-ease) both; }
::view-transition-new(root) { animation: fx-vt-in .42s var(--fx-ease) both; }
@keyframes fx-vt-out { to { opacity: 0; } }
@keyframes fx-vt-in { from { opacity: 0; translate: 0 10px; } }

/* 点击涟漪:挂在被点元素内部的独立图层,不改动元素本身的 overflow */
.fx-ripple-host { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); }

/* 顶部导航进度条 */
.fx-bar, .fx-progress { position: fixed; top: 0; left: 0; z-index: 2147483000; width: 100%; height: 2.5px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, rgb(var(--fx-brand)), #8FA6EE 70%, #F2A3B3); }
.fx-bar { opacity: 0; box-shadow: 0 0 12px rgba(var(--fx-brand), .45); transition: transform .45s var(--fx-ease), opacity .35s; }
.fx-bar.is-run { opacity: 1; }
.fx-progress { height: 2px; opacity: .85; }

/* 回到顶部(带滚动进度环) */
.fx-top { position: fixed; right: 24px; bottom: 28px; z-index: 45; display: grid; place-items: center; width: 48px; height: 48px; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  color: #1D1B2C; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(29, 27, 44, .07) inset, 0 14px 30px -14px rgba(29, 27, 44, .35);
  opacity: 0; translate: 0 18px; scale: .86; pointer-events: none; transition: opacity .35s, translate .55s var(--fx-spring), scale .55s var(--fx-spring); }
.fx-top.is-on { opacity: 1; translate: 0 0; scale: 1; pointer-events: auto; }
.fx-top.is-on:hover { translate: 0 -3px; }
.fx-top > svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fx-top .fx-ring { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.fx-top .fx-ring circle { fill: none; stroke: rgb(var(--fx-brand)); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 138.2; stroke-dashoffset: 138.2; }

/* 滑动下划线(导航) */
.fx-ink { position: absolute; left: 0; bottom: 3px; height: 2px; width: 0; border-radius: 2px; background: rgb(var(--fx-brand)); opacity: 0; pointer-events: none;
  transition: translate .5s var(--fx-spring), width .5s var(--fx-spring), opacity .25s; }
.fx-ink-ready > a::after { display: none !important; }

/* 光泽扫过:悬停一次;带 -auto 的每隔几秒自动扫一次(只给最关键的购买按钮) */
.fx-sheen, html[data-zz] footer.app-footer .arco-btn-primary, html[data-zz] .page-bottom .buy-this, html[data-zz] #confirm_order_number .btn_box .arco-btn-primary {
  background-image: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .38) 50%, transparent 62%) !important;
  background-size: 260% 100% !important; background-repeat: no-repeat !important; background-position: 140% 0 !important;
}
.fx-sheen:hover, html[data-zz] footer.app-footer .arco-btn-primary:hover, html[data-zz] #confirm_order_number .btn_box .arco-btn-primary:hover { background-position: -40% 0 !important; transition: background-position .9s var(--fx-ease), transform .25s var(--fx-ease), box-shadow .25s; }
html[data-zz] footer.app-footer .arco-btn-primary, html[data-zz] .page-bottom .buy-this, .fx-sheen-auto { animation: fx-sheen 5s ease-in-out 1.6s infinite; }
@keyframes fx-sheen { 0% { background-position: 140% 0; } 22%, 100% { background-position: -40% 0; } }

/* 数值跳动 / 复制成功 */
@keyframes fx-copied {
  0% { box-shadow: 0 0 0 1px #F3E3B4 inset, 0 0 0 0 rgba(var(--fx-mint), .4); }
  25% { box-shadow: 0 0 0 1.5px rgba(var(--fx-mint), .9) inset, 0 0 0 6px rgba(var(--fx-mint), .14); background-color: #F2FAF6; }
  100% { box-shadow: 0 0 0 1px #F3E3B4 inset, 0 0 0 10px rgba(var(--fx-mint), 0); }
}
.fx-copied { animation: fx-copied 1.3s var(--fx-ease) !important; }
.fx-bubble { position: fixed; z-index: 2147483001; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; pointer-events: none;
  font: 600 13px/1 "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", sans-serif; color: #fff; background: rgb(var(--fx-mint)); box-shadow: 0 10px 22px -10px rgba(var(--fx-mint), .8); white-space: nowrap; }
.fx-bubble svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fx-confetti { position: fixed; inset: 0; z-index: 2147482999; pointer-events: none; }
.fx-hush { opacity: 0 !important; transition: none !important; }

/* 买家端:品牌加载动画(替换原来的灰色转圈) */
html[data-zz] .page-loading { flex-direction: column; gap: 18px; background: #FAF8F5; }
html[data-zz] .page-loading .circular { width: 60px; height: 60px; border: 0; border-radius: 20px; background: #fff url(/assets/zzfk/mark.webp) center / 44px no-repeat;
  box-shadow: 0 0 0 1px rgba(29, 27, 44, .06) inset, 0 16px 34px -14px rgba(29, 27, 44, .3); animation: fx-loader 1.5s var(--fx-ease) infinite; }
html[data-zz] .page-loading::after { content: ""; width: 72px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, rgba(var(--fx-brand), .12), rgb(var(--fx-brand)), rgba(var(--fx-brand), .12)) 0 0 / 200% 100%; animation: fx-load-bar 1.2s linear infinite; }
@keyframes fx-loader { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-9px) rotate(-7deg); } 60% { transform: translateY(-9px) rotate(5deg); } 80% { transform: translateY(0) rotate(0); } }
@keyframes fx-load-bar { to { background-position: -200% 0; } }

/* 卡密解码中 */
.fx-decoding { color: rgba(var(--fx-brand), .85) !important; }

/* 系统开启"减少动画"时:保留淡入淡出、涟漪、光泽、数值变化,去掉位移、弹跳与自动循环 */
@media (prefers-reduced-motion: reduce) {
  @keyframes fx-vt-in { from { opacity: 0; } }
  .fx-confetti { display: none !important; }
  .fx-sheen-auto, html[data-zz] footer.app-footer .arco-btn-primary, html[data-zz] .page-bottom .buy-this { animation: none !important; }
  html[data-zz] .page-loading .circular { animation: fx-pulse 1.4s ease-in-out infinite; }
  @keyframes fx-pulse { 50% { opacity: .55; } }
  .fx-top, .fx-top.is-on, .fx-top.is-on:hover { translate: none; scale: 1; }
}