/* 全站 Motion Tokens + 点击反馈 */
:root {
  --motion-press-scale: 0.97;
  --motion-press-ms: 120ms;
  --motion-release-ms: 180ms;
  --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-spring: cubic-bezier(0.03, 0.98, 0.52, 0.99);
  --motion-stagger-step: 40ms;
  --motion-section-ms: 320ms;
}

.interactive-press,
button:not(:disabled),
.btn:not(:disabled),
.nav-item,
.icon-btn:not(:disabled),
.quiz-opt:not(:disabled),
.match-item:not(:disabled),
.ind-tab,
.ind-filter-tab,
.theme-swatch,
.map-skin-opt,
.tutor-skin-opt,
.tutor-orbit-chip,
.sidebar-dock-btn,
.chat-mode-btn,
.tutor-thread-tab,
.demo-voice-chip,
.phone-voice-item,
.rel-chip,
.map-lesson-link,
.kb-view-btn,
.board-outline-item.is-clickable,
.read-group-close,
.read-session-close,
.btn-expand-detail,
.faq-card,
.news-cat-tab {
  transition: transform var(--motion-press-ms) var(--motion-ease-out),
    box-shadow var(--motion-release-ms) ease,
    border-color 0.15s ease;
}

.interactive-press:active:not(:disabled),
button:active:not(:disabled),
.btn:active:not(:disabled),
.nav-item:active,
.icon-btn:active:not(:disabled),
.quiz-opt:active:not(:disabled),
.theme-swatch:active,
.map-skin-opt:active,
.tutor-skin-opt:active,
.kb-view-btn:active,
.board-outline-item.is-clickable:active,
.btn-expand-detail:active,
.faq-card:active,
.news-cat-tab:active {
  transform: scale(var(--motion-press-scale));
}

.board-outline-item.is-clickable.feedback-pressed {
  animation: outlineTabFlash 0.28s var(--motion-ease-out);
}

@keyframes outlineTabFlash {
  0% { background: transparent; }
  45% { background: color-mix(in srgb, var(--accent) 18%, transparent); }
  100% { background: transparent; }
}

.feedback-pressed {
  animation: feedbackFlash 0.22s var(--motion-ease-out);
}

@keyframes feedbackFlash {
  0% { filter: brightness(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  40% { filter: brightness(1.08); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
  100% { filter: brightness(1); box-shadow: none; }
}

.feedback-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  transform: scale(0);
  animation: feedbackRipple 0.45s var(--motion-ease-out) forwards;
}

@keyframes feedbackRipple {
  to { transform: scale(2.8); opacity: 0; }
}

html.reduce-motion .interactive-press:active,
html.reduce-motion button:active,
html.reduce-motion .btn:active,
html.reduce-motion .nav-item:active {
  transform: none;
}

html.reduce-motion .feedback-pressed,
html.reduce-motion .feedback-ripple {
  animation: none !important;
}

html.reduce-motion .section-enter,
html.reduce-motion .kb-peek-enter {
  animation: none !important;
}

html.motion-off .feedback-pressed,
html.motion-off .feedback-ripple,
html.motion-off .stagger-in {
  animation: none !important;
}

html.motion-off .interactive-press:active,
html.motion-off button:active {
  transform: none;
}

html.motion-expressive .quiz-opt.correct {
  animation: pgCheckPop 0.4s var(--motion-ease-spring);
}

@keyframes pgCheckPop {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.ind-tab.active,
.ind-filter-tab.active {
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.ind-filter-tab:active,
.ind-tab:active {
  transform: scale(0.98);
}
