:root {
  --motion-quick: 120ms;
  --motion-ui: 180ms;
  --motion-panel: 240ms;
  --motion-out: cubic-bezier(.2, .75, .25, 1);
}

@keyframes mcjf-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes mcjf-reveal {
  from { opacity: 0; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mcjf-panel-in {
  from { opacity: 0; translate: 0 5px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes mcjf-press-content {
  from { opacity: .5; scale: .9; }
  to { opacity: 1; scale: 1; }
}
@keyframes mcjf-wait-dot {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--motion-ui);
    animation-timing-function: var(--motion-out);
  }
}

:is(.btn, .btn-sm, .iconbtn, .send, .send-button, .modelbtn, .voicepill, .new-chat, .work-file-card) {
  transition-property: background-color, border-color, color, box-shadow, opacity, scale;
  transition-duration: var(--motion-quick);
  transition-timing-function: var(--motion-out);
}
:is(.btn, .btn-sm, .iconbtn, .send, .send-button, .modelbtn, .voicepill, .new-chat, .work-file-card):hover {
  transform: none;
}
:is(button, a):is(.btn, .btn-sm, .iconbtn, .send, .send-button, .modelbtn, .voicepill, .new-chat, .work-file-card):not(:disabled):not([aria-disabled="true"]):active {
  transform: none;
  scale: .975;
}

:is(.toast, #toast, #jumpToast, #wallTag) {
  transition-duration: var(--motion-ui);
  transition-timing-function: var(--motion-out);
}

.mega,
.menu,
.sitemenu,
.cands {
  transition-property: opacity, transform, visibility;
  transition-duration: var(--motion-ui);
  transition-timing-function: var(--motion-out);
}
#histPop.open { animation: mcjf-panel-in var(--motion-ui) var(--motion-out); }

:is(.modal-overlay.show, #switchModal.on, #saveModal.on, .lb.on, #ipbox.on, #nodebox.on, #dlbox.on, #mcjfCookieModal.on .cm-mask) {
  animation: mcjf-appear var(--motion-ui) var(--motion-out);
}
:is(.modal-overlay.show > .modal-box, #switchModal.on > .smbox, #saveModal.on > .smbox, #ipbox.on > .sheet, #nodebox.on > .sheet, #dlbox.on > .sheet, #mcjfCookieModal.on .cm-box, dialog[open]) {
  animation: mcjf-panel-in var(--motion-panel) var(--motion-out);
}

@supports (transition-behavior: allow-discrete) {
  :is(.modal-overlay, #switchModal, #saveModal) {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-ui) var(--motion-out), display var(--motion-ui) allow-discrete;
  }
  :is(.modal-overlay.show, #switchModal.on, #saveModal.on) {
    opacity: 1;
    pointer-events: auto;
    animation: none;
  }
  @starting-style {
    :is(.modal-overlay.show, #switchModal.on, #saveModal.on) { opacity: 0; }
  }
}

/* Keep larger, already readable surfaces static. Animate newly revealed content. */
html[data-mcjf-ui="home"] :is(.clock i, .hero-orbits .orbit-trace) { animation: none; }
html[data-mcjf-ui="home"] .post .cover img { transition-duration: var(--motion-panel); }
html[data-mcjf-ui="home"] #mcjf-district .portal {
  transition-duration: var(--motion-ui);
  transition-timing-function: var(--motion-out);
}
:is(html[data-mcjf-ui="home"] .post, html[data-mcjf-ui="forum"] .layout .post, html[data-mcjf-ui="games"] .game-hero):hover {
  transform: none;
}
html[data-mcjf-ui="forum"] main,
html[data-mcjf-motion="search"] main,
html[data-mcjf-motion="quota"] :is(header, .hero, .note, .actions) {
  animation: none;
}
html[data-mcjf-motion="search"] :is(.bl, .bl.isvideo) {
  animation: none;
  transform: none;
  transition: opacity 360ms var(--motion-out);
}
html[data-mcjf-motion="search"] :is(.scrollhint, .peek-inner) svg { animation: none; }
html[data-mcjf-motion="quota"] .bar i { transition: width var(--motion-panel) var(--motion-out); }
html[data-mcjf-motion="quota"] :is(.qcard, .banner),
html[data-mcjf-motion="media"] .grid > .card,
html[data-mcjf-motion="help"] .pane.on {
  animation: mcjf-reveal var(--motion-ui) var(--motion-out);
}
html[data-mcjf-motion="login"] .split:not(.shake),
html[data-mcjf-motion="help"] .wrap,
html[data-mcjf-motion="account"] .phone { animation: none; }

html[data-mcjf-motion="chat"] {
  --motion-sidebar: 220ms;
}
html[data-mcjf-motion="chat"] main {
  scroll-behavior: auto;
}
html[data-mcjf-motion="chat"] main:focus { outline: none; }
html[data-mcjf-motion="chat"] .sidebar {
  transition-duration: var(--motion-sidebar);
  transition-timing-function: var(--motion-out);
}
html[data-mcjf-motion="chat"] .side-backdrop { transition-duration: var(--motion-ui); }
html[data-mcjf-motion="chat"] .composer {
  transition: border-color var(--motion-quick) ease, box-shadow var(--motion-ui) var(--motion-out);
}
html[data-mcjf-motion="chat"] .composer:focus-within {
  transform: none;
  box-shadow: 0 0 0 2px rgba(255, 106, 32, .08);
}
html[data-mcjf-motion="chat"] :is(.hero, .msg, .work-trace details, .mode-tag) { animation: none; }
html[data-mcjf-motion="chat"] :is(.msg.is-new, .thread.is-changing, .ans.stream-start) {
  animation: mcjf-reveal var(--motion-ui) var(--motion-out);
}
html[data-mcjf-motion="chat"] :is(details.think[open] > .think-body, details.wt-row[open] > .trace-body) {
  animation: mcjf-appear var(--motion-ui) var(--motion-out);
}
html[data-mcjf-motion="chat"] .send svg {
  animation: mcjf-press-content var(--motion-quick) var(--motion-out);
}
html[data-mcjf-motion="chat"] :is(.typing, .thinking-note .tdots) i {
  animation: mcjf-wait-dot 1.35s ease-in-out infinite;
}
html[data-mcjf-motion="chat"] :is(.typing, .thinking-note .tdots) i:nth-child(2) { animation-delay: 130ms; }
html[data-mcjf-motion="chat"] :is(.typing, .thinking-note .tdots) i:nth-child(3) { animation-delay: 260ms; }
html[data-mcjf-motion="chat"] .wt-row.wt-running::after { display: none; }
html[data-mcjf-motion="chat"] .wt-row.wt-running .wt-dot { animation: mcjf-wait-dot 1.5s ease-in-out infinite; }
html[data-mcjf-motion="chat"] .jump-latest {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--glass-strong);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(24, 24, 27, .09);
  cursor: pointer;
  animation: mcjf-reveal var(--motion-ui) var(--motion-out);
}
html[data-mcjf-motion="chat"] .jump-latest[hidden] { display: none; }
html[data-mcjf-motion="chat"] .jump-latest:hover { background: #f4f4f5; }
html[data-mcjf-motion="chat"] .work-files-toggle {
  margin: 8px 0 0;
  padding: 7px 10px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--glass-strong);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color var(--motion-quick) ease;
}
html[data-mcjf-motion="chat"] .work-files-toggle:hover { background: #f4f4f5; }
html[data-mcjf-motion="chat"] .work-files-extra {
  max-height: min(42dvh, 340px);
  margin-top: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  animation: mcjf-reveal var(--motion-ui) var(--motion-out);
}
html[data-mcjf-motion="chat"] .work-files-extra[hidden] { display: none; }
.work-download-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(390px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  border: 1px solid rgba(24, 24, 27, .08);
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 16px 48px rgba(24, 24, 27, .14);
}
.work-download-dialog::backdrop {
  background: rgba(24, 24, 27, .20);
  animation: mcjf-appear var(--motion-ui) var(--motion-out);
}
.work-download-heading { display: flex; align-items: center; gap: 12px; }
.work-download-heading > div { min-width: 0; }
.work-download-icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  height: 42px;
  border-radius: 13px;
  background: #f3f3f5;
  color: #3d4249;
}
.work-download-dialog h2 { font-size: 16px; font-weight: 650; line-height: 1.35; }
.work-download-name {
  margin-top: 3px;
  color: var(--sub);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-download-track {
  position: relative;
  overflow: hidden;
  height: 5px;
  margin-top: 19px;
  border-radius: 999px;
  background: #edeef0;
}
.work-download-dialog progress {
  appearance: none;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: transparent;
}
.work-download-dialog progress::-webkit-progress-bar { background: transparent; }
.work-download-dialog progress::-webkit-progress-value {
  background: #30343a;
  border-radius: 999px;
  transition: width var(--motion-ui) var(--motion-out);
}
.work-download-dialog progress::-moz-progress-bar { background: #30343a; border-radius: 999px; }
.work-download-dialog progress:indeterminate { opacity: 0; }
.work-download-track:has(progress:indeterminate)::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  border-radius: inherit;
  background: #9da2ab;
  animation: mcjf-download-scan 1.15s ease-in-out infinite alternate;
}
@keyframes mcjf-download-scan { to { translate: 212% 0; } }
.work-download-dialog:is([data-state="error"], [data-state="cancelled"]) .work-download-track { display: none; }
.work-download-dialog [hidden] { display: none; }
.work-download-meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-top: 9px; }
.work-download-detail, .work-download-status {
  color: var(--sub);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.work-download-detail { white-space: nowrap; }
.work-download-detail:empty { display: none; }
.work-download-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 14px; }
.work-download-actions button {
  min-height: 36px;
  padding: 6px 13px;
  border: 0;
  border-radius: 999px;
  background: #f3f3f5;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color var(--motion-quick) ease;
}
.work-download-actions button:hover { background: #e9e9ed; }
.work-download-actions #workDownloadRetry,
.work-download-dialog[data-state="complete"] #workDownloadDismiss { background: #27292d; color: #fff; }
.work-download-actions #workDownloadRetry:hover,
.work-download-dialog[data-state="complete"] #workDownloadDismiss:hover { background: #41454c; }
@media (pointer: coarse) {
  html[data-mcjf-motion="chat"] .jump-latest { width: 44px; height: 44px; }
  html[data-mcjf-motion="chat"] .work-files-toggle { min-height: 44px; }
  .work-download-actions button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(button, a):is(.btn, .btn-sm, .iconbtn, .send, .send-button, .modelbtn, .voicepill, .new-chat, .work-file-card):active {
    scale: 1;
  }
  [data-mcjf-reveal] { opacity: 1 !important; translate: none !important; }
}

/* ---------- 滚动渐显 / 分组入场 ----------
   由 site-motion.js 渐进增强：无 JS、不支持 IO 或系统减少动态时，
   元素不会被打上 pending 标记，内容始终完整可见。 */
@keyframes mcjf-reveal-in {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
html.mcjf-reveal-ready [data-mcjf-reveal="pending"] { opacity: 0; }
html.mcjf-reveal-ready [data-mcjf-reveal="in"] {
  animation: mcjf-reveal-in 560ms var(--motion-out) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* ---------- 首页 hero 分级入场（纯 CSS，不依赖 JS） ---------- */
@keyframes mcjf-hero-rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes mcjf-hero-scene {
  from { opacity: 0; scale: .985; }
  to { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-mcjf-ui] { scroll-behavior: smooth; }
  html[data-mcjf-ui="home"] .hero-copy > :not(.stats) {
    animation: mcjf-hero-rise 620ms var(--motion-out) both;
  }
  html[data-mcjf-ui="home"] .hero-copy > :nth-child(1) { animation-delay: 40ms; }
  html[data-mcjf-ui="home"] .hero-copy > :nth-child(2) { animation-delay: 110ms; }
  html[data-mcjf-ui="home"] .hero-copy > :nth-child(3) { animation-delay: 190ms; }
  html[data-mcjf-ui="home"] .hero-copy > :nth-child(4) { animation-delay: 270ms; }
  html[data-mcjf-ui="home"] .hero-scene {
    animation: mcjf-hero-scene 780ms var(--motion-out) 160ms both;
  }
}

/* ---------- 按压微反馈（补充各页已有 hover 过渡） ---------- */
:is(button, a):is(.chip, .go, .idea, .seg button, .tlink, .act, .more, .nav-back, .tab, .tool-entry, .suggestions button, .motion-toggle, .work-toggle):not(:disabled):not([aria-disabled="true"]):active {
  scale: .97;
}
.tab {
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, scale .12s var(--motion-out);
}
#mcjf-district .tool-entry {
  transition: background .25s ease, border-color .25s ease, transform .25s ease, scale .12s var(--motion-out);
}
#mcjf-district .suggestions button {
  transition: color .2s ease, background .2s ease, border-color .2s ease, scale .12s var(--motion-out);
}
@media (prefers-reduced-motion: reduce) {
  :is(button, a):is(.chip, .go, .idea, .seg button, .tlink, .act, .more, .nav-back, .tab, .tool-entry, .suggestions button, .motion-toggle, .work-toggle):active {
    scale: 1;
  }
}