/* ==================== 丰富的动画和视觉效果库 ==================== */

/* 1. 全局动画变量 */
:root {
  /* 动画时长 */
  --animation-fast: 200ms;
  --animation-normal: 300ms;
  --animation-slow: 500ms;
  --animation-slower: 800ms;

  /* 缓动函数 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* 渐变背景 */
  --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --gradient-6: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
  --gradient-7: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --gradient-8: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

/* 2. 关键帧动画定义 */

/* 弹跳进入动画 */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

/* 淡入向上滑动 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入向下滑动 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 淡入左侧滑动 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 淡入右侧滑动 */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 缩放进入 */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 旋转进入 */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: rotate(0);
  }
}

/* 脉冲动画 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* 摇摆动画 */
@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* 呼吸动画 */
@keyframes breathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* 光晕效果 */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.6);
  }
}

/* 液体流动效果 */
@keyframes liquid {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

/* 浮动动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* 无限旋转 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 弹跳 */
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translateY(0);
  }
  40%, 43% {
    transform: translateY(-30px);
  }
  70% {
    transform: translateY(-15px);
  }
  90% {
    transform: translateY(-4px);
  }
}

/* 3. 通用动画类 */

/* 进入动画 */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-fade-in-down {
  animation: fadeInDown 0.6s ease-out;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.6s ease-out;
}

.animate-fade-in-right {
  animation: fadeInRight 0.6s ease-out;
}

.animate-bounce-in {
  animation: bounceIn 0.8s var(--ease-bounce);
}

.animate-scale-in {
  animation: scaleIn 0.5s ease-out;
}

.animate-rotate-in {
  animation: rotateIn 0.6s ease-out;
}

/* 持续动画 */
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-breathe {
  animation: breathe 3s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-spin {
  animation: spin 2s linear infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

/* 4. 悬停效果 */

/* 3D卡片悬浮 */
.hover-3d {
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.hover-3d:hover {
  transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
}

/* 磁性吸引 */
.hover-magnetic {
  transition: transform 0.3s var(--ease-out-back);
}

.hover-magnetic:hover {
  transform: scale(1.1);
}

/* 发光边框 */
.hover-glow {
  transition: all 0.3s ease-out;
  position: relative;
}

.hover-glow:hover {
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}

/* 液体按钮 */
.hover-liquid {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.hover-liquid::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.hover-liquid:hover::before {
  width: 300px;
  height: 300px;
}

/* 波纹效果 */
.hover-ripple {
  position: relative;
  overflow: hidden;
}

.hover-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.hover-ripple:hover::after {
  width: 400px;
  height: 400px;
}

/* 5. 导航栏动画增强 */

nav {
  position: relative;
  overflow: hidden;
}

nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.8s;
}

nav:hover::before {
  left: 100%;
}

/* 导航链接悬停效果 */
nav a {
  position: relative;
  overflow: hidden;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-gradient);
  transition: width 0.3s var(--ease-out-expo);
}

nav a:hover::after {
  width: 100%;
}

/* 6. 卡片动画增强 */

.modern-card {
  transition: all 0.3s var(--ease-out-back);
  position: relative;
  overflow: hidden;
}

.modern-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  transform: rotate(45deg);
}

.modern-card:hover::before {
  opacity: 1;
}

.modern-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* 7. 按钮动画增强 */

.modern-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s var(--ease-out-back);
}

.modern-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease-out;
}

.modern-btn:hover::before {
  left: 100%;
}

.modern-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modern-btn:active {
  transform: translateY(0);
}

/* 8. 表单元素动画 */

.modern-input {
  transition: all 0.3s ease-out;
}

.modern-input:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
}

/* 输入框标签动画 */
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

.floating-label {
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-tertiary);
  transition: all 0.3s ease-out;
  pointer-events: none;
}

.modern-input:focus + .floating-label,
.modern-input:not(:placeholder-shown) + .floating-label {
  top: -10px;
  left: 10px;
  font-size: 12px;
  color: var(--primary-color);
  background: var(--bg-primary);
  padding: 0 4px;
}

/* 9. 背景动画效果 */

/* 动态渐变背景 */
.animated-gradient {
  background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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

/* 粒子背景 */
.particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

.particle {
  position: absolute;
  background: rgba(99, 102, 241, 0.5);
  border-radius: 50%;
  pointer-events: none;
}

@keyframes particleFloat {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

/* 10. 滚动动画 */

.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 11. 页面加载动画 */

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out;
}

.page-loader.hide {
  opacity: 0;
  pointer-events: none;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* 12. 文字动画 */

/* 打字机效果 */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  50% { border-color: transparent }
}

.typewriter {
  overflow: hidden;
  border-right: 2px solid var(--primary-color);
  white-space: nowrap;
  animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

/* 文字渐变效果 */
.gradient-text {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 13. 视差效果 */

.parallax {
  transform: translateZ(0);
  transition: transform 0.1s ease-out;
}

/* 14. 交互反馈 */

.ripple-effect {
  position: relative;
  overflow: hidden;
}

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

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* 15. 工具提示动画 */

.tooltip {
  position: relative;
}

.tooltip::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s ease-out;
  pointer-events: none;
  z-index: 1000;
}

.tooltip:hover::before {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}

/* 16. 响应式动画调整 */

@media (max-width: 768px) {
  /* 移动端减少动画复杂度 */
  .hover-3d:hover {
    transform: translateY(-5px);
  }

  .modern-card:hover {
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* 为偏好减少动画的用户禁用动画 */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 17. 暗色模式动画调整 */

[data-theme="dark"] .particles .particle {
  background: rgba(139, 92, 246, 0.3);
}

[data-theme="dark"] .tooltip::before {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
}

/* 18. 特殊效果 */

/* 霓虹效果 */
.neon-glow {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
  animation: neon-pulse 2s ease-in-out infinite;
}

@keyframes neon-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* 故障效果 */
.glitch {
  position: relative;
  color: var(--text-primary);
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.5s infinite;
  color: #00ffff;
  z-index: -1;
}

.glitch::after {
  animation: glitch-2 0.5s infinite;
  color: #ff00ff;
  z-index: -2;
}

@keyframes glitch-1 {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(20% 0 30% 0);
    transform: translate(-2px, 2px);
  }
  40% {
    clip-path: inset(50% 0 20% 0);
    transform: translate(2px, -2px);
  }
  60% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(-2px, 1px);
  }
  80% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(1px, -1px);
  }
}

@keyframes glitch-2 {
  0%, 100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(2px, -1px);
  }
  40% {
    clip-path: inset(20% 0 50% 0);
    transform: translate(-2px, 1px);
  }
  60% {
    clip-path: inset(30% 0 40% 0);
    transform: translate(1px, -2px);
  }
  80% {
    clip-path: inset(5% 0 80% 0);
    transform: translate(-1px, 2px);
  }
}