/**
 * Kinetics 弹簧动画库
 * 灵感来源: https://kinetics.colorion.co/ (135 spring-driven interactions)
 * 纯 CSS 弹簧物理动画，GPU 合成，无 layout thrash
 *
 * 核心 spring 曲线:
 *   --spring-bounce     overshoot 回弹 (cubic-bezier 0.34,1.56,0.64,1)
 *   --spring-overshoot  toast 过冲 (cubic-bezier 0.18,1.25,0.4,1)
 *   --spring-damped     临界阻尼 (cubic-bezier 0.16,1,0.3,1)
 *   --spring-glide      滑动缓动 (cubic-bezier 0.65,0,0.35,1)
 *   --spring-snappy     短促弹跳 (cubic-bezier 0.5,1.6,0.4,1)
 */

:root {
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-overshoot: cubic-bezier(0.18, 1.25, 0.4, 1);
  --spring-damped: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-glide: cubic-bezier(0.65, 0, 0.35, 1);
  --spring-snappy: cubic-bezier(0.5, 1.6, 0.4, 1);
  --kinetics-dur-fast: 0.18s;
  --kinetics-dur: 0.35s;
  --kinetics-dur-slow: 0.55s;
}

/* =========================================================================
   1. 入场/出场动画 (card enter / leave spring)
   ========================================================================= */

@keyframes kinetics-pop-in {
  0% { opacity: 0; transform: scale(0.6) translateY(16px); }
  60% { opacity: 1; transform: scale(1.06) translateY(-4px); }
  80% { transform: scale(0.98) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes kinetics-drop-in {
  0% { opacity: 0; transform: scale(0.8) translateY(-24px); }
  55% { opacity: 1; transform: scale(1.04) translateY(6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes kinetics-slide-up {
  0% { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes kinetics-leave-out {
  0% { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(0.82) translateY(12px); }
}

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

.kinetics-pop-in {
  animation: kinetics-pop-in 0.5s var(--spring-bounce) both;
}

.kinetics-drop-in {
  animation: kinetics-drop-in 0.45s var(--spring-bounce) both;
}

.kinetics-slide-up {
  animation: kinetics-slide-up 0.5s var(--spring-damped) both;
}

.kinetics-leave-out {
  animation: kinetics-leave-out 0.3s var(--spring-damped) both;
}

.kinetics-fade-in {
  animation: kinetics-fade-in 0.3s ease both;
}

/* =========================================================================
   2. Toast 过冲 (overshoot then settle)
   ========================================================================= */

@keyframes kinetics-toast-in {
  0% { opacity: 0; transform: translate(-50%, 140%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@keyframes kinetics-toast-out {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 140%) scale(0.92); }
}

.kinetics-toast {
  animation: kinetics-toast-in 0.55s var(--spring-overshoot) both;
}

.kinetics-toast-out {
  animation: kinetics-toast-out 0.3s var(--spring-damped) both;
}

/* =========================================================================
   3. 数字弹跳 (number counter bump)
   ========================================================================= */

@keyframes kinetics-bump {
  0% { transform: scale(1) translateY(0); }
  45% { transform: scale(1.28) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

.kinetics-bump {
  display: inline-block;
  animation: kinetics-bump 0.42s var(--spring-bounce);
}

/* =========================================================================
   4. 按压 / 脉冲 (press / pulse spring)
   ========================================================================= */

.kinetics-press {
  transition: transform var(--kinetics-dur-fast) var(--spring-bounce);
  will-change: transform;
}

.kinetics-press:active {
  transform: scale(0.92);
}

.kinetics-press-lg {
  transition: transform var(--kinetics-dur) var(--spring-bounce);
  will-change: transform;
}

.kinetics-press-lg:active {
  transform: scale(0.88);
}

@keyframes kinetics-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.kinetics-pulse {
  animation: kinetics-pulse 1.4s var(--spring-bounce) infinite;
}

/* =========================================================================
   5. 磁吸按钮 (magnetic item — transform spring on hover/move)
   ========================================================================= */

.kinetics-magnetic {
  transition: transform 0.15s ease-out, transform 0.4s var(--spring-bounce);
  will-change: transform;
}

.kinetics-magnetic.is-dragging {
  transition: none;
}

/* =========================================================================
   6. Tab Pill 滑动 (glide transition)
   ========================================================================= */

.kinetics-glide-x {
  transition: left var(--kinetics-dur-slow) var(--spring-glide),
              width var(--kinetics-dur-slow) var(--spring-glide),
              transform var(--kinetics-dur-slow) var(--spring-glide);
}

.kinetics-glide-bg {
  transition: background-position var(--kinetics-dur-slow) var(--spring-glide);
}

/* =========================================================================
   7. Accordion 弹簧展开 (max-height spring)
   ========================================================================= */

.kinetics-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--spring-damped);
}

.kinetics-accordion-body.is-open {
  max-height: 500px;
}

.kinetics-accordion-chev {
  transition: transform 0.35s var(--spring-bounce);
}

.kinetics-accordion-chev.is-open {
  transform: rotate(180deg);
}

/* =========================================================================
   8. 拖拽回弹 (drag to dismiss snap back)
   ========================================================================= */

.kinetics-draggable {
  transition: transform var(--kinetics-dur) var(--spring-damped),
              opacity var(--kinetics-dur);
  touch-action: none;
  will-change: transform;
}

.kinetics-draggable.is-dragging {
  transition: none;
}

.kinetics-draggable.snap-back {
  transition: transform 0.5s var(--spring-bounce);
}

/* =========================================================================
   9. Ripple 涟漪 (material ripple)
   ========================================================================= */

.kinetics-ripple-host {
  position: relative;
  overflow: hidden;
}

.kinetics-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0);
  animation: kinetics-ripple-out 0.6s ease-out forwards;
  background: rgba(255, 255, 255, 0.4);
}

@keyframes kinetics-ripple-out {
  to { transform: scale(3); opacity: 0; }
}

/* =========================================================================
   10. Hold to Confirm 进度环
   ========================================================================= */

.kinetics-hold-ring {
  stroke-dasharray: 207;
  stroke-dashoffset: 207;
  transition: stroke-dashoffset 0.2s ease-out;
}

.kinetics-hold-ring.is-holding {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s linear;
}

/* =========================================================================
   11. Like Burst 粒子爆发
   ========================================================================= */

@keyframes kinetics-burst {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--burst-x, 0), var(--burst-y, 0)) scale(0); opacity: 0; }
}

.kinetics-particle {
  position: absolute;
  pointer-events: none;
  animation: kinetics-burst 0.6s var(--spring-damped) forwards;
}

/* =========================================================================
   12. Rubber Band 橡皮筋过冲
   ========================================================================= */

.kinetics-rubber {
  transition: transform 0.5s var(--spring-bounce);
}

.kinetics-rubber.is-stretched {
  transition: none;
}

/* =========================================================================
   13. Cursor Trail 光标拖尾
   ========================================================================= */

.kinetics-trail-dot {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  border-radius: 50%;
}

/* =========================================================================
   14. Reveal on Scroll 滚动入场
   ========================================================================= */

.kinetics-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--spring-damped),
              transform 0.6s var(--spring-damped);
  will-change: opacity, transform;
}

.kinetics-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.kinetics-reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.5s var(--spring-damped),
              transform 0.5s var(--spring-bounce);
  will-change: opacity, transform;
}

.kinetics-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* =========================================================================
   15. Flip / Rotate spring (卡片翻转)
   ========================================================================= */

.kinetics-flip {
  transition: transform var(--kinetics-dur-slow) var(--spring-bounce);
  transform-style: preserve-3d;
  will-change: transform;
}

.kinetics-flip.is-flipped {
  transform: rotateY(180deg);
}

/* =========================================================================
   16. Hover lift (悬浮抬起)
   ========================================================================= */

.kinetics-lift {
  transition: transform var(--kinetics-dur) var(--spring-bounce),
              box-shadow var(--kinetics-dur) var(--spring-damped);
  will-change: transform;
}

.kinetics-lift:hover {
  transform: translateY(-4px);
}

.kinetics-lift-lg:hover {
  transform: translateY(-8px) scale(1.02);
}

/* =========================================================================
   17. Stagger 错开入场 (data-kinetics-stagger 控制延迟)
   ========================================================================= */

.kinetics-stagger > * {
  opacity: 0;
  animation: kinetics-drop-in 0.5s var(--spring-bounce) both;
  animation-delay: calc(var(--stagger-i, 0) * 0.06s);
}

/* =========================================================================
   18. Spin spring (加载旋转带弹簧)
   ========================================================================= */

@keyframes kinetics-spin-spring {
  0% { transform: rotate(0deg) scale(0.9); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

.kinetics-spin {
  animation: kinetics-spin-spring 1.2s var(--spring-bounce) infinite;
}

/* =========================================================================
   19. Shake spring (错误抖动)
   ========================================================================= */

@keyframes kinetics-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-2deg); }
  40% { transform: translateX(8px) rotate(2deg); }
  60% { transform: translateX(-6px) rotate(-1deg); }
  80% { transform: translateX(6px) rotate(1deg); }
}

.kinetics-shake {
  animation: kinetics-shake 0.5s var(--spring-bounce);
}

/* =========================================================================
   20. Toggle 弹簧开关
   ========================================================================= */

.kinetics-toggle {
  transition: transform 0.35s var(--spring-bounce),
              background-color 0.3s ease;
  will-change: transform;
}

.kinetics-toggle-knob {
  transition: transform 0.35s var(--spring-bounce);
}

/* =========================================================================
   工具类 (utilities)
   ========================================================================= */

.kinetics-gpu {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.kinetics-no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.kinetics-quiet {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
  .kinetics-ripple {
    background: rgba(255, 255, 255, 0.2);
  }
}

/* 尊重 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .kinetics-pop-in,
  .kinetics-drop-in,
  .kinetics-slide-up,
  .kinetics-leave-out,
  .kinetics-fade-in,
  .kinetics-toast,
  .kinetics-toast-out,
  .kinetics-bump,
  .kinetics-pulse,
  .kinetics-spin,
  .kinetics-shake {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .kinetics-reveal,
  .kinetics-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }

  .kinetics-press:active,
  .kinetics-press-lg:active,
  .kinetics-lift:hover,
  .kinetics-lift-lg:hover {
    transform: none !important;
  }
}