/* ===================================================================
   全局 iOS 风格过渡动画
   - 跨文档页面切换：新页从右侧淡入，旧页轻微左移淡出
   - 首屏内容入场、列表逐条 stagger、卡片点按回弹
   =================================================================== */
:root {
  --ios-ease: cubic-bezier(.32, .72, 0, 1);
  --ios-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- 跨文档视图过渡（Chromium 126+ 生效） ---------- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: iosPageOut .30s var(--ios-ease) both;
}
::view-transition-new(root) {
  animation: iosPageIn .42s var(--ios-ease) both;
}

@keyframes iosPageOut {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: .35; transform: translateX(-7%) scale(.985); }
}
@keyframes iosPageIn {
  from { opacity: 0; transform: translateX(9%) scale(.99); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ---------- 不支持视图过渡时：首屏入场 ---------- */
@supports not (view-transition-name: root) {
  .wrap,
  .composer,
  .login-card {
    animation: iosEnter .44s var(--ios-ease-out) both;
  }
}
@keyframes iosEnter {
  from { opacity: 0; transform: translateY(12px) scale(.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 列表逐条入场 ---------- */
@keyframes iosRowIn {
  from { opacity: 0; transform: translateY(14px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.card,
.row,
.adm-card {
  animation: iosRowIn .46s var(--ios-ease-out) both;
}
.card:nth-child(1), .row:nth-child(1), .adm-card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2), .row:nth-child(2), .adm-card:nth-child(2) { animation-delay: 28ms; }
.card:nth-child(3), .row:nth-child(3), .adm-card:nth-child(3) { animation-delay: 56ms; }
.card:nth-child(4), .row:nth-child(4), .adm-card:nth-child(4) { animation-delay: 84ms; }
.card:nth-child(5), .row:nth-child(5), .adm-card:nth-child(5) { animation-delay: 112ms; }
.card:nth-child(6), .row:nth-child(6), .adm-card:nth-child(6) { animation-delay: 140ms; }
.card:nth-child(7), .row:nth-child(7), .adm-card:nth-child(7) { animation-delay: 168ms; }
.card:nth-child(8), .row:nth-child(8), .adm-card:nth-child(8) { animation-delay: 196ms; }
.card:nth-child(n+9), .row:nth-child(n+9), .adm-card:nth-child(n+9) { animation-delay: 210ms; }

/* ---------- 卡片 / 行 点按回弹 ---------- */
.card,
.adm-card,
.row {
  transition: transform .22s var(--ios-ease-out), box-shadow .22s var(--ios-ease-out);
}
.card:active,
.adm-card:active {
  transform: scale(.986);
  box-shadow: 0 2px 10px rgba(20, 40, 80, .1);
}
.row:active { transform: scale(.994); }

/* ---------- 导航 / 工具栏按钮点按 ---------- */
.topnav a:active,
.tool:active,
.filters button:active,
.tabs button:active {
  transform: scale(.96);
  transition: transform .16s var(--ios-ease-out);
}

/* ---------- 输入栏聚焦轻微抬起 ---------- */
.composer:focus-within {
  transform: translateY(-1px);
  transition: transform .26s var(--ios-ease-out);
}

/* ---------- 弹层 / 面板统一入场曲线 ---------- */
.toast.show,
.sheet,
.menu {
  animation: iosPop .30s var(--ios-ease-out) both;
}
@keyframes iosPop {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- 滚动惯性 ---------- */
.wrap,
.feed,
.admin-list,
.tg-list {
  -webkit-overflow-scrolling: touch;
}

/* ---------- tab 滑动指示滑块 ---------- */
.tabs {
  position: relative;
}
.tabs .tab-slider {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 0;
  border-radius: 7px;
  background: var(--card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
  transition: transform .32s var(--ios-ease-out), width .32s var(--ios-ease-out);
  z-index: 0;
  pointer-events: none;
}
.tab {
  position: relative;
  z-index: 1;
}

/* ---------- 按钮点击涟漪 ---------- */
.solid-btn,
.ghost-btn {
  position: relative;
  overflow: hidden;
}
.solid-btn::after,
.ghost-btn::after {
  content: '';
  position: absolute;
  left: var(--rx, 50%);
  top: var(--ry, 50%);
  width: 8px;
  height: 8px;
  margin-left: -4px;
  margin-top: -4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
}
.solid-btn.ripple::after,
.ghost-btn.ripple::after {
  animation: ripple .55s var(--ios-ease-out) forwards;
}
.solid-btn::after {
  background: rgba(255, 255, 255, .38);
}
.ghost-btn::after {
  background: var(--blue);
  opacity: .18;
}
@keyframes ripple {
  to { transform: scale(34); opacity: 0; }
}

/* ---------- 卡片滚动进入视口淡入 ---------- */
.thread,
.card,
.reply,
.adm-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s var(--ios-ease-out), transform .5s var(--ios-ease-out),
              box-shadow .22s var(--ios-ease-out);
}
.thread.in,
.card.in,
.reply.in,
.adm-card.in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 桌面 hover 抬起 ---------- */
@media (hover: hover) and (pointer: fine) {
  .thread:hover,
  .card:hover,
  .reply:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(10, 40, 90, .12);
  }
}

/* ---------- 列表追加项（发布后的新卡片）入场 ---------- */
@keyframes rowInsert {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.thread.insert {
  animation: rowInsert .5s var(--ios-ease-out) both;
}

/* ---------- 无障碍：减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}