/* linyi-ui/ui-motion-skill：按压 60ms，反馈 200ms，面板 400ms，毛毛虫标签 350ms。 */
:root {
  --motion-press: 60ms;
  --motion-small: 200ms;
  --motion-panel: 400ms;
  --motion-exit: 200ms;
  --motion-page: 500ms;
  --motion-segment: 350ms;
  --motion-stagger: 40ms;
  --motion-out: cubic-bezier(0, 0, .2, 1);
  --motion-in: cubic-bezier(.4, 0, 1, 1);
  --motion-both: cubic-bezier(.4, 0, .2, 1);
}
html { scrollbar-gutter: stable; }
body.motion-modal-open, body.motion-modal-leaving { overflow: hidden; }
button, .button, .text-link, .nav-list a, .topbar-avatar, .profile {
  transition: transform var(--motion-small) var(--motion-both), opacity var(--motion-small) var(--motion-out);
}
button:not(:disabled):active, a.button:active, a.text-link:active, .nav-list a:active, .topbar-avatar:active, .profile:active {
  transform: scale(.97);
  transition-duration: var(--motion-press);
}
button:disabled { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover { transform: translateY(-1px) scale(1.02); }
  .icon-button:not(:disabled):hover, .search-button:hover { transform: translateY(-1px); }
  .nav-list a:hover, .sidebar-help:hover { transform: translateX(2px); }
  .text-link:hover { transform: translateX(2px); }
  .survivor-card:not(:disabled):hover, .map-place:not(:disabled):hover { transform: translateY(-2px); }
  button:not(:disabled):active, a.button:active, a.text-link:active, .nav-list a:active { transform: scale(.97); }
}
.module-card, .map-place { transition: transform var(--motion-small) var(--motion-out); }
.module-detail { animation: none; }
.module-open > svg { transform: rotate(0deg); transition: transform var(--motion-small) var(--motion-both); }
.module-open[aria-expanded=true] > svg { transform: rotate(-90deg); }
.module-open:hover > svg { transform: translateX(3px); }
.module-open[aria-expanded=true]:hover > svg { transform: translateY(-2px) rotate(-90deg); }
.segmented { position: relative; isolation: isolate; }
.segmented button { position: relative; z-index: 1; }
.segmented button[aria-pressed=true] { background: transparent; box-shadow: none; }
.segment-indicator {
  position: absolute; z-index: 0; pointer-events: none; transform-origin: left center;
  background: #fff; border-radius: 6px; box-shadow: 0 2px 7px #4f153415;
}
.survivor-card.active, .map-place.active { box-shadow: 0 4px 12px #a64e7112; }
/* 对话框保留原生焦点限制，背景退后仅使用 transform，不影响固定导航。 */
#main, .login-layout { transition: transform var(--motion-panel) var(--motion-both); transform-origin: center 30vh; }
.motion-modal-open #main, .motion-modal-open .login-layout { transform: scale(.985); }
dialog::backdrop { animation: motion-backdrop-in var(--motion-panel) var(--motion-out); }
dialog.motion-closing::backdrop { animation: motion-backdrop-out var(--motion-exit) var(--motion-in) forwards; }
@keyframes motion-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes motion-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
[data-motion-feedback] { position: relative; color: transparent !important; }
button[aria-busy=true]:disabled { opacity: 1; cursor: progress; }
[data-motion-feedback] > :not(.motion-feedback) { opacity: 0; }
.motion-feedback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--feedback-color, var(--red)); pointer-events: none; white-space: nowrap; gap: 7px;
  font-size: inherit; padding: inherit;
}
[data-motion-feedback=busy] .motion-feedback::before {
  content: ''; width: 10px; height: 10px; border: 1.5px solid currentColor;
  border-right-color: transparent; border-radius: 50%; flex: none;
  animation: motion-wait 650ms var(--motion-both) infinite;
}
@keyframes motion-wait { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 767px) {
  button, .text-link { min-width: 44px; min-height: 44px; }
  .sidebar { transition: transform var(--motion-panel) var(--motion-out); }
  .nav-closing .sidebar { visibility: visible; transform: translateX(-100%); transition-duration: var(--motion-exit); transition-timing-function: var(--motion-in); }
}
@media (pointer: coarse) { button, .text-link { min-width: 44px; min-height: 44px; } }
@media (hover: none) { .module-open:hover > svg { transform: rotate(0deg); } .module-open[aria-expanded=true]:hover > svg { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:not(:disabled):active, a.button:active, a.text-link:active, .nav-list a:active { transform: none; }
  .motion-modal-open #main, .motion-modal-open .login-layout { transform: none; }
  button:not(:disabled):hover, a.button:hover, a.text-link:hover, .nav-list a:hover { transform: none; }
}
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.reduce-motion .motion-modal-open #main, .reduce-motion .motion-modal-open .login-layout { transform: none; }
.reduce-motion button:not(:disabled):active, .reduce-motion a.button:active, .reduce-motion .nav-list a:active { transform: none; }
.reduce-motion .button:hover, .reduce-motion .icon-button:hover, .reduce-motion .text-link:hover, .reduce-motion .nav-list a:hover { transform: none; }
.reduce-motion .map-place:hover, .reduce-motion .survivor-card:hover, .reduce-motion .search-button:hover, .reduce-motion .sidebar-help:hover { transform: none; }
@media (hover: none) {
  .button.primary:not(:disabled):hover { background: var(--red); }
  .button.secondary:not(:disabled):hover { background: #fff; border-color: #e4dfe3; }
  .icon-button:hover { background: none; color: var(--muted); }
  .icon-button[aria-pressed=true]:hover { background: var(--red-soft); color: var(--red); }
}