/* ==========================================================================
   见山 MVP · 动效层（三端共用，纯 CSS）
   只做「手感」，不动布局；业务代码无需改动，由 motion-layer.js 打标记类
   ========================================================================== */
:root {
  --m-fast: 0.16s;
  --m-base: 0.26s;
  --m-slow: 0.42s;
  --m-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --m-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --m-bounce: cubic-bezier(0.2, 0.9, 0.25, 1.25);
}

/* ---------- 全局手感：按下反馈 / 平滑过渡 ---------- */
button,
.item-card,
.chip,
.cart-go,
[data-act],
.st-tab,
.side-link,
.btn {
  transition:
    transform var(--m-fast) var(--m-ease),
    background-color var(--m-base) var(--m-ease),
    color var(--m-base) var(--m-ease),
    box-shadow var(--m-base) var(--m-ease),
    opacity var(--m-base) var(--m-ease),
    border-color var(--m-base) var(--m-ease);
}
button:active,
[data-act]:active,
.btn:active,
.side-link:active { transform: scale(0.972); }
.item-card:active { transform: scale(0.988); }
.item-card img,
.thumb img { transition: transform 0.5s var(--m-ease); }
.item-card:active img,
.thumb:active img { transform: scale(1.04); }

/* 滚动更顺（注意：不要给带 fixed 子元素的宿主加 transform 动画） */

/* ---------- 关键帧 ---------- */
@keyframes m-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes m-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes m-pop {
  0% { opacity: 0; transform: scale(0.86); }
  60% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes m-badge-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  70% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
@keyframes m-sheet-in {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes m-shimmer {
  0% { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes m-check-draw {
  from { stroke-dashoffset: 44; }
  to { stroke-dashoffset: 0; }
}
@keyframes m-count-pop {
  0% { opacity: 0; transform: translateY(10px) scale(0.92); }
  100% { opacity: 1; transform: none; }
}
@keyframes m-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(11, 138, 110, 0.34); }
  70% { box-shadow: 0 0 0 12px rgba(11, 138, 110, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 138, 110, 0); }
}
@keyframes m-slide-in-right {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes m-slide-in-left {
  from { opacity: 0; transform: translateX(-22px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 动效工具类（motion-layer.js 自动挂） ---------- */
.m-page { animation: m-fade-up var(--m-base) var(--m-ease) both; }
.m-stagger { animation: m-fade-up var(--m-base) var(--m-ease) both; }
.m-sheet { animation: m-sheet-in 0.32s var(--m-spring) both; }
/* 只做透明度：用于含 fixed 子元素的宿主（避免 transform 破坏定位） */
.m-fade { animation: m-fade-in 0.22s var(--m-ease) both; }
.m-pop { animation: m-pop 0.42s var(--m-bounce) both; }
.m-bump { animation: m-badge-bump 0.42s var(--m-bounce); }
.m-code { animation: m-count-pop 0.5s var(--m-bounce) both; }
.m-pulse { animation: m-pulse-ring 1.6s ease-out 2; }
.m-slide-right { animation: m-slide-in-right var(--m-base) var(--m-ease) both; }
.m-slide-left { animation: m-slide-in-left var(--m-base) var(--m-ease) both; }

/* 骨架屏微光（若页面自带骨架，叠加流光） */
.skeleton,
[class*="skeleton"] {
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.6) 45%,
    rgba(255, 255, 255, 0) 70%
  );
  background-size: 200% 100%;
  animation: m-shimmer 1.25s linear infinite;
}

/* 加购飞入的小图 */
.m-fly {
  position: fixed;
  z-index: 999;
  border-radius: 14px;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 10px 24px -10px rgba(26, 29, 33, 0.5);
  will-change: transform, opacity;
}
.m-fly img { width: 100%; height: 100%; object-fit: cover; }

/* 成功页对勾描边 */
.m-check path {
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  animation: m-check-draw 0.5s 0.12s var(--m-ease) forwards;
}

/* Toast 更轻快 */
[class*="toast"] {
  transition: opacity 0.22s var(--m-ease), transform 0.28s var(--m-bounce) !important;
}

/* 弹层遮罩淡入 */
[class*="mask"],
[class*="overlay"],
[class*="scrim"] {
  transition: opacity var(--m-base) var(--m-ease), backdrop-filter var(--m-base) var(--m-ease);
}

/* 门店端新单卡入场 */
.st-order {
  animation: m-slide-in-right 0.34s var(--m-ease) both;
}
/* 注意：不要用 [class*="modal"] / [class*="dialog"] 这类宽选择器做动画——
   会误命中 body.modal-open 之类的宿主，动画残留的 transform 会让 body 变成
   fixed 包含块，弹层遮罩变成整页高、弹窗按钮掉出视口（已踩坑，勿回退）。 */

/* ---------- 无障碍：尊重系统减少动态效果 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}