/* ==========================================================================
   动效系统：关键帧与过渡工具
   目标：丝滑、有层次、有反馈；全部可通过 prefers-reduced-motion 关闭。
   ========================================================================== */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rise-in-lg {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slide-out-right {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(32px); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes modal-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

@keyframes pop-in {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -320px 0; }
  100% { background-position: 320px 0; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@keyframes progress-bar {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes count-glow {
  0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  100% { box-shadow: 0 0 0 12px rgba(99, 102, 241, 0); }
}

@keyframes bounce-in-up {
  0% { opacity: 0; transform: translateY(20px) scale(0.96); }
  55% { opacity: 1; transform: translateY(-3px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes draw-line {
  from { stroke-dashoffset: var(--dash, 1000); }
  to { stroke-dashoffset: 0; }
}

@keyframes grow-bar {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes ring-spin {
  to { transform: rotate(360deg); }
}

@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes gradient-pan {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- 过渡工具 ---------- */
.anim-fade { animation: fade-in var(--dur-normal) var(--ease-out) both; }
.anim-rise { animation: rise-in var(--dur-slow) var(--ease-out) both; }
.anim-rise-lg { animation: rise-in-lg var(--dur-slower) var(--ease-out) both; }
.anim-slide-right { animation: slide-in-right var(--dur-slow) var(--ease-out) both; }
.anim-pop { animation: pop-in var(--dur-slow) var(--ease-spring) both; }
.anim-bounce-up { animation: bounce-in-up var(--dur-slower) var(--ease-spring) both; }
.anim-float { animation: float-soft 4s var(--ease-in-out) infinite; }

/* 列表逐项入场：由 JS 设置 --i 索引 */
.stagger > * {
  animation: rise-in var(--dur-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

/* ---------- 页面切换 ---------- */
.page-enter {
  animation: rise-in var(--dur-slow) var(--ease-out) both;
}

.page-exit {
  animation: fade-out var(--dur-fast) var(--ease-out) both;
}

/* 支持 View Transitions 的浏览器使用更顺滑的原生过渡 */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: fade-out 140ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: rise-in 260ms var(--ease-out) both;
}

/* ---------- 悬浮/按压反馈 ---------- */
.lift {
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}

.lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.pressable {
  transition: transform var(--dur-fast) var(--ease-spring);
}

.pressable:active {
  transform: scale(0.97);
}

/* 卡片入场：先渲染占位，再动画进入 */
.reveal {
  opacity: 0;
  transform: translateY(10px);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}