/* ============================================================================
 * 「宣纸与墨玉」· 动效层 v2
 * ----------------------------------------------------------------------------
 * 加载顺序：styles.css -> admin-clone.css -> motion.css -> theme.css
 * 令牌与 theme.css 对齐：T1 .12s / T2 .18s / T3 .24s / T4 .42s / T5 .56s
 *
 * 硬性红线（见 docs/visual-layer-perf-compat-redline.md）：
 *   · 只动画 transform / opacity / filter，不触发布局
 *   · 单元素位移 ≤16px；同帧参与动画元素 ≤24，单批错峰 ≤8
 *   · 入场模糊 blur() ≤8px 且仅用一次，不叠加两层
 *   · will-change 只在入场期间由脚本临时添加，结束即回收
 *   · 渐变/玻璃层独立容器 + contain:paint，尺寸 ≤1.5 倍视口
 * ========================================================================== */

/* --------------------------------------------------- 01 首屏入场（印刷感） */
.fx-enter { animation: fx-enter var(--dur-4) var(--ease-4) both; }
@keyframes fx-enter {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
/* 主视觉内文分层错峰：标题 → 承接句 → 标签 */
.banner-copy > span { animation: fx-rise var(--dur-4) var(--ease-4) both; }
.banner-copy h1 { animation: fx-rise var(--dur-4) var(--ease-4) 70ms both; }
.banner-copy p { animation: fx-rise var(--dur-4) var(--ease-4) 140ms both; }
.banner-copy > div { animation: fx-rise var(--dur-4) var(--ease-4) 210ms both; }
@keyframes fx-rise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------- 02 滚动渐进呈现（一次性） */
/* 初始/终态由 ui-fx.js 以内联样式驱动：无 JS 时内容完全可见，
   脚本异常或标签页被节流时由心跳巡检在 1.6s 内强制复位。 */

/* ------------------------------------------------------------ 03 悬停反馈 */
/* 前台卡片：上移 3px + 描边加深；不使用彩色阴影，避免廉价感 */
.reference-category-card,
.home-product-card,
.product-card,
.account-member-card,
.account-grid,
.category-rail,
.auth-forms form {
  transition:
    transform var(--dur-3) var(--ease-3),
    border-color var(--dur-3) var(--ease-3),
    background-color var(--dur-3) var(--ease-3),
    box-shadow var(--dur-3) var(--ease-3);
}
.reference-category-card .product-visual { transition: transform var(--dur-5) var(--ease-4); }
.reference-category-card:hover .product-visual { transform: scale(1.04); }

/* 方向性描边：光从上方来（mask 合成，纯 CSS，无位图） */
.fx-hairline { position: relative; }
.fx-hairline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(11, 122, 85, .16);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-3) var(--ease-3);
}
.admin-shell .fx-hairline::before { background: rgba(26, 90, 168, .18); }
.fx-hairline:hover::before, .fx-hairline:focus-within::before { opacity: 1; }

/* ---------------------------------------------------------- 04 按钮涟漪 */
.fx-ripple-stage { position: relative; overflow: hidden; }
.fx-ripple {
  position: absolute;
  z-index: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  animation: fx-ripple-out var(--dur-5) var(--ease-4) forwards;
}
.btn:not(.primary):not(.danger) .fx-ripple,
.btn.ghost .fx-ripple,
.clone-button:not(.primary) .fx-ripple,
.category-rail button .fx-ripple {
  background: radial-gradient(circle, rgba(11, 122, 85, .2), rgba(11, 122, 85, 0) 70%);
}
.admin-shell .clone-button:not(.primary) .fx-ripple {
  background: radial-gradient(circle, rgba(26, 90, 168, .2), rgba(26, 90, 168, 0) 70%);
}
@keyframes fx-ripple-out {
  to { transform: scale(30); opacity: 0; }
}

/* -------------------------------------------------------- 05 页面切换淡入 */
.client-main > *,
.admin-content > * {
  animation: fx-page var(--dur-4) var(--ease-4) both;
}
@keyframes fx-page {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------- 06 悬浮导航与顶栏收起 */
.fx-scrolled .admin-top {
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .9);
}
.fx-scrolled .client-brand img { transform: scale(.96); }
.client-brand img { transition: transform var(--dur-2) var(--ease-2); }

/* -------------------------------------------------- 07 分类轨道选中滑动感 */
.category-rail button { position: relative; }
.category-rail button::after {
  content: "";
  position: absolute;
  left: 14px;
  bottom: 10px;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width var(--dur-4) var(--ease-4);
}
.category-rail button:hover::after, .category-rail button.active::after { width: 22px; }

/* ------------------------------------------------------- 08 弹窗与提示 */
.modal-backdrop { animation: fx-fade var(--dur-2) var(--ease-2) both; }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card { animation: fx-dialog var(--dur-3) var(--ease-3) 40ms both; }
@keyframes fx-dialog {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); }
  to { opacity: 1; transform: none; }
}
.toast.show { animation: fx-toast var(--dur-3) var(--ease-3) both; }
@keyframes fx-toast {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(.98); }
  to { opacity: 1; transform: none; }
}

/* -------------------------------------------------- 09 后台数据呈现动画 */
.clone-trend-svg path,
.clone-trend-svg polyline {
  stroke-dasharray: 1600;
  animation: fx-draw 1.4s var(--ease-4) both;
}
@keyframes fx-draw { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: 0; } }
.clone-status-donut circle { animation: fx-donut var(--dur-4) var(--ease-4) both; }
@keyframes fx-donut {
  from { opacity: .25; transform: scale(.92); transform-origin: 50% 50%; }
  to { opacity: 1; transform: none; }
}
.progress > *, .clone-bar-fill {
  animation: fx-bar var(--dur-4) var(--ease-4) both;
  transform-origin: 0 50%;
}
@keyframes fx-bar { from { transform: scaleX(.1); opacity: .6; } to { transform: none; opacity: 1; } }
.metric-card strong { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ 10 公告跑马灯 */
.reference-notice .notice-marquee i { animation: fx-marquee 22s linear infinite; }
@keyframes fx-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
.reference-notice:hover .notice-marquee i,
.reference-notice:focus-within .notice-marquee i { animation-play-state: paused; }

/* ------------------------------------------------------ 11 加载态与骨架 */
.loading-page { animation: fx-pulse 1.6s var(--ease-2) infinite; color: var(--muted); }
@keyframes fx-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

/* ------------------------------------------------------ 12 悬浮工具呼吸 */
.service-dock a, .service-dock button { transition: border-color var(--dur-2) var(--ease-2), color var(--dur-2) var(--ease-2), transform var(--dur-2) var(--ease-5); }
.service-dock a:hover, .service-dock button:hover { transform: translateY(-2px); }
.mobile-bottom-nav a, .mobile-bottom-nav button { transition: transform var(--dur-2) var(--ease-5), color var(--dur-2) var(--ease-2); }
.mobile-bottom-nav a:active, .mobile-bottom-nav button:active { transform: scale(.94); }

/* ================================================== 无障碍 / 低性能降级 */
@media (prefers-reduced-motion: reduce) {
  /* 逐项降级：保留状态变化，去掉位移与模糊 */
  .fx-enter, .banner-copy > span, .banner-copy h1, .banner-copy p, .banner-copy > div,
  .client-main > *, .admin-content > *, .modal-backdrop, .modal-card, .toast.show,
  .clone-trend-svg path, .clone-trend-svg polyline, .clone-status-donut circle,
  .progress > *, .clone-bar-fill { animation: none !important; }
  .modal-card, .toast.show, .client-main > *, .admin-content > * { opacity: 1; transform: none; }
  .reference-notice .notice-marquee i { animation: none; padding-left: 0; }
  .loading-page { animation: none; opacity: .8; }
  .fx-ripple, .fx-hairline::before { display: none; }
  .reference-category-card:hover, .home-product-card:hover, .product-card:hover { transform: none; }
  .reference-category-card:hover .product-visual { transform: none; }
  .service-dock a:hover, .service-dock button:hover { transform: none; }
  * { scroll-behavior: auto !important; }
}

/* 触屏：去掉悬停态残留与方向描边 */
@media (hover: none) {
  .fx-hairline::before { display: none; }
  .category-rail button::after { display: none; }
}

/* 移动端：收缩高开销效果 */
@media (max-width: 640px) {
  .reference-category-card .product-visual { transition: none; }
  .fx-ripple { display: none; }
}