/* ============================================================
   m3-motion.css — 涟漪 / 错峰入场辅助 / 会话过渡 (第六章)
   ============================================================ */

/* 6.5 涟漪: pointerdown 起点扩散, 450ms 后销毁
   颜色用 currentColor —— 深底按钮上泛白、浅底实心按钮上泛深, 两边都看得见 */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  --ripple-peak: 0.22;
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 5;                 /* 盖在状态层 ::after 之上 */
  animation: m3-ripple 450ms var(--ease-entrance) forwards;
}
@keyframes m3-ripple {
  0%   { transform: scale(0); opacity: var(--ripple-peak, 0.22); }
  100% { transform: scale(1); opacity: 0; }
}

/* 顶部标题轻微淡入 (页面初次挂载) */
@keyframes m3-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.appbar__title { animation: m3-fade-in 320ms var(--ease-entrance) both; }
.toolbar { animation: m3-fade-in 360ms var(--ease-entrance) 40ms both; }

/* 抽屉内容区块依次淡入 (stagger 由 JS 设置 delay) */
.drawer__body > * {
  opacity: 0;
  transform: translateY(8px);
}
.drawer.is-open .drawer__body > * {
  animation: m3-sheet-item 320ms var(--ease-emphasized-decel) both;
}
@keyframes m3-sheet-item {
  to { opacity: 1; transform: translateY(0); }
}

/* 推荐层出现 */
.suggest:not([hidden]) {
  animation: m3-suggest-in 200ms var(--ease-emphasized-decel) both;
}
@keyframes m3-suggest-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}