/* 全站动画过渡：页面切换、弹层、菜单、提示和面板切换。
   只动透明度和小位移，时长 150–250ms；系统开启「减少动态效果」时全部变为瞬时。
   各页面在其他样式表之前引入本文件，同优先级的页面规则可以覆盖这里。 */
:root {
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-stagger: 30ms;
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  interpolate-size: allow-keywords;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0s;
    --motion-base: 0s;
    --motion-stagger: 0s;
  }
}

@keyframes fv-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fv-rise-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
@keyframes fv-drop-in {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}
@keyframes fv-toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}

/* 整页跳转（例如单独打开的工坊页回到社区）在支持的浏览器里淡入淡出。 */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-base);
}

/* 社区单页切换：新内容逐块上浮淡入。载入提示延迟出现，快速加载时不会闪一下。 */
#app > * {
  animation: fv-rise-in var(--motion-base) var(--motion-ease) backwards;
}
#app > :nth-child(2) {
  animation-delay: var(--motion-stagger);
}
#app > :nth-child(3) {
  animation-delay: calc(var(--motion-stagger) * 2);
}
#app > :nth-child(4) {
  animation-delay: calc(var(--motion-stagger) * 3);
}
#app > :nth-child(n + 5) {
  animation-delay: calc(var(--motion-stagger) * 4);
}
#app > .loading {
  animation: fv-fade-in var(--motion-base) ease 300ms backwards;
}
/* 同一页面内重新渲染（如投票页切换一览／1点ずつ）时不再整页上浮，只让变化的面板淡入。 */
#app[data-motion='quiet'] > :not(.loading) {
  animation: none;
}
#vote-panel > * {
  animation: fv-rise-in var(--motion-base) var(--motion-ease) backwards;
}
/* 手机端投票页底部有 position: fixed 的按钮条，位移会让它跟着跳，这里只淡入。 */
#app > :is(.vote-stage, :has(.vote-stage)),
#vote-panel > :is(.vote-stage, :has(.vote-stage)) {
  animation-name: fv-fade-in;
}
#workshop-container:not([hidden]) {
  animation: fv-fade-in var(--motion-base) var(--motion-ease);
}

/* 工坊：切换产品类型、实景摄影棚和左右面板标签时淡入。 */
#badge-workspace:not([hidden]),
#acrylic-frame:not([hidden]),
#liquid-frame:not([hidden]),
#plush-frame:not([hidden]),
#studio-frame:not([hidden]),
[role='tabpanel']:not([hidden]) {
  animation: fv-fade-in var(--motion-base) var(--motion-ease);
}

/* 弹窗：打开时轻微上浮放大，关闭时淡出；不支持 @starting-style 的浏览器直接显示。 */
dialog {
  --fv-dialog-from: translateY(10px) scale(0.985);
  opacity: 0;
  transform: var(--fv-dialog-from);
  transition:
    opacity var(--motion-fast) var(--motion-ease-in),
    transform var(--motion-fast) var(--motion-ease-in),
    overlay var(--motion-fast) allow-discrete,
    display var(--motion-fast) allow-discrete;
}
dialog[open] {
  opacity: 1;
  transform: none;
  transition-duration: var(--motion-base);
  transition-timing-function: var(--motion-ease);
}
@starting-style {
  dialog[open] {
    opacity: 0;
    transform: var(--fv-dialog-from);
  }
}
dialog::backdrop {
  opacity: 0;
  transition:
    opacity var(--motion-fast) var(--motion-ease-in),
    overlay var(--motion-fast) allow-discrete,
    display var(--motion-fast) allow-discrete;
}
dialog[open]::backdrop {
  opacity: 1;
  transition-duration: var(--motion-base);
}
@starting-style {
  dialog[open]::backdrop {
    opacity: 0;
  }
}
/* 全屏登录页只淡入淡出。 */
dialog.login-screen {
  --fv-dialog-from: none;
}

/* 头像、通知菜单 */
.pop:not([hidden]) {
  transform-origin: top right;
  animation: fv-drop-in var(--motion-fast) var(--motion-ease);
}
/* 社区底部提示（显示时由 display: none 切换为 block） */
#notice {
  animation: fv-toast-in var(--motion-base) var(--motion-ease);
}

/* 折叠面板展开收起（Chrome 131+ 等支持 ::details-content 的浏览器）。 */
@supports selector(::details-content) {
  details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition:
      block-size var(--motion-base) var(--motion-ease),
      content-visibility var(--motion-base) allow-discrete;
  }
  details[open]::details-content {
    block-size: auto;
  }
}

/* 链接和控件的悬停、选中状态渐变。:where() 不加优先级，页面里已有的 transition 照常生效。 */
:where(a, button, summary, select, input, textarea, [role='tab']) {
  transition:
    color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    box-shadow var(--motion-fast) ease;
}