/* ========== 增强版页面元素进入动画 ========== */

/* 流畅淡入动画 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(5px);
  }
  60% {
    opacity: 0.8;
    transform: translateY(10px) scale(0.98);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* 左侧卡片从下往上淡入动画 */
@keyframes slideInUpFade {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 磁性吸附动画 */
@keyframes magneticEntry {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(45deg);
    filter: blur(8px);
  }
  30% {
    opacity: 0.3;
    transform: translateY(20px) rotateX(20deg);
    filter: blur(4px);
  }
  70% {
    opacity: 0.8;
    transform: translateY(-5px) rotateX(-5deg);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0);
  }
}

/* 弹性进入动画 */
@keyframes elasticEntry {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-10deg);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1) rotate(5deg);
  }
  75% {
    opacity: 0.9;
    transform: scale(0.95) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@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 zoomIn {
  0% {
    opacity: 0;
    transform: scale(0.5) rotate(180deg);
    filter: blur(10px);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1) rotate(90deg);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes zoomInRotate {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-180deg);
    filter: hue-rotate(180deg) blur(8px);
  }
  30% {
    opacity: 0.4;
    transform: scale(0.8) rotate(-90deg);
    filter: hue-rotate(90deg) blur(4px);
  }
  70% {
    opacity: 0.8;
    transform: scale(1.05) rotate(10deg);
    filter: hue-rotate(20deg) blur(1px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: hue-rotate(0deg) blur(0);
  }
}

/* 螺旋进入动画 */
@keyframes spiralIn {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(720deg) translateY(100px);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.8) rotate(360deg) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
  }
}

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

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 翻转动画 */
@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(400px) rotateX(-90deg);
  }
  40% {
    transform: perspective(400px) rotateX(-20deg);
  }
  60% {
    transform: perspective(400px) rotateX(10deg);
  }
  80% {
    transform: perspective(400px) rotateX(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateX(0deg);
  }
}

@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(400px) rotateY(-90deg);
  }
  40% {
    transform: perspective(400px) rotateY(-20deg);
  }
  60% {
    transform: perspective(400px) rotateY(10deg);
  }
  80% {
    transform: perspective(400px) rotateY(-5deg);
  }
  to {
    opacity: 1;
    transform: perspective(400px) rotateY(0deg);
  }
}

/* 增强动画类 */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateY(50px) scale(0.9);
  filter: blur(5px);
}

.animate-on-scroll.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.fade-in {
  animation: fadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.fade-in-up {
  animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.fade-in-down {
  animation: fadeInDown 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.fade-in-left {
  animation: fadeInLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.fade-in-right {
  animation: fadeInRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.zoom-in {
  animation: zoomIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.zoom-in-rotate {
  animation: zoomInRotate 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.bounce-in {
  animation: bounceIn 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.slide-in-up {
  animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.slide-in-left {
  animation: slideInLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.slide-in-right {
  animation: slideInRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.flip-in-x {
  animation: flipInX 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.flip-in-y {
  animation: flipInY 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 新增动画类 */
.magnetic-entry {
  animation: magneticEntry 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.elastic-entry {
  animation: elasticEntry 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.spiral-in {
  animation: spiralIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 组合动画类 */
.combo-fade-zoom {
  animation: 
    fadeIn 1s ease-out forwards,
    zoomIn 1s ease-out forwards;
}

.combo-slide-rotate {
  animation: 
    slideInUp 1s ease-out forwards,
    zoomInRotate 1.2s ease-out 0.3s forwards;
}

/* 简化延迟动画系统 */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* 波浪式延迟 */
.wave-delay:nth-child(odd) { animation-delay: calc(var(--index, 0) * 0.1s); }
.wave-delay:nth-child(even) { animation-delay: calc(var(--index, 0) * 0.15s); }

/* ========== 增强版Hover动画效果 ========== */

/* 简化波纹效果 - 已禁用复杂动画 */
.ripple-effect {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ripple-effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* 简化磁性悬浮效果 */
.magnetic-hover {
  transition: all 0.3s ease;
  transform-origin: center;
}

.magnetic-hover:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 简化光晕效果 */
.glow-effect {
  position: relative;
  transition: all 0.3s ease;
}

.glow-effect:hover {
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}



/* 增强弹性悬浮效果 */
.elastic-hover {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center bottom;
}

.elastic-hover:hover {
  transform: translateY(-20px) scale(1.08) rotateX(5deg);
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.3)) brightness(1.1);
  animation: elasticFloat 2s ease-in-out infinite;
}

@keyframes elasticFloat {
  0%, 100% {
    transform: translateY(-20px) scale(1.08) rotateX(5deg);
  }
  50% {
    transform: translateY(-25px) scale(1.1) rotateX(8deg);
  }
}

/* 液体变形效果 */
.liquid-hover {
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 15px;
}

.liquid-hover:hover {
  border-radius: 30px 10px 25px 15px;
  transform: scale(1.05) rotate(2deg);
  animation: liquidMorph 3s ease-in-out infinite;
}

@keyframes liquidMorph {
  0%, 100% {
    border-radius: 30px 10px 25px 15px;
  }
  25% {
    border-radius: 10px 30px 15px 25px;
  }
  50% {
    border-radius: 25px 15px 30px 10px;
  }
  75% {
    border-radius: 15px 25px 10px 30px;
  }
}

/* 3D翻转效果 */
.flip-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease-in-out;
}

.flip-3d:hover {
  transform: rotateY(180deg);
}

/* 摇摆动画已移除 */

/* 增强脉冲效果 */
@keyframes pulse-glow {
  0% {
    box-shadow: 
      0 0 0 0 rgba(0, 123, 255, 0.8),
      0 0 0 0 rgba(255, 0, 255, 0.6),
      0 0 0 0 rgba(0, 255, 255, 0.4);
  }
  30% {
    box-shadow: 
      0 0 0 15px rgba(0, 123, 255, 0.4),
      0 0 0 25px rgba(255, 0, 255, 0.2),
      0 0 0 35px rgba(0, 255, 255, 0.1);
  }
  70% {
    box-shadow: 
      0 0 0 25px rgba(0, 123, 255, 0.1),
      0 0 0 35px rgba(255, 0, 255, 0.05),
      0 0 0 45px rgba(0, 255, 255, 0);
  }
  100% {
    box-shadow: 
      0 0 0 0 rgba(0, 123, 255, 0),
      0 0 0 0 rgba(255, 0, 255, 0),
      0 0 0 0 rgba(0, 255, 255, 0);
  }
}

.pulse-hover:hover {
  animation: pulse-glow 2s infinite, pulse-scale 2s ease-in-out infinite;
}

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

/* 心跳效果 */
.heartbeat-hover:hover {
  animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

/* 渐变边框动画 */
.gradient-border {
  position: relative;
  background: linear-gradient(45deg, #007bff, #00ff00, #ffff00, #ff00ff);
  background-size: 400% 400%;
  animation: gradient-shift 3s ease infinite;
  padding: 2px;
  border-radius: inherit;
}

.gradient-border:hover {
  animation-duration: 0.5s;
}

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

/* ========== 增强滚动动画系统 ========== */

/* 视差滚动效果 - 保持禁用以避免背景分离 */
.parallax-element {
  transform: none !important;
}

/* 增强滚动淡入 */
.scroll-fade {
  opacity: 0;
  transform: translateY(80px) scale(0.9);
  filter: blur(8px);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-fade.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 滚动缩放增强 */
.scroll-scale {
  transform: scale(0.6) rotate(10deg);
  opacity: 0;
  filter: blur(5px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-scale.visible {
  transform: scale(1) rotate(0deg);
  opacity: 1;
  filter: blur(0);
}

/* 滚动旋转增强 */
.scroll-rotate {
  transform: rotate(-30deg) scale(0.8);
  opacity: 0;
  filter: blur(6px);
  transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-rotate.visible {
  transform: rotate(0deg) scale(1);
  opacity: 1;
  filter: blur(0);
}

/* 滚动滑入效果 */
.scroll-slide-left {
  opacity: 0;
  transform: translateX(-100px) rotateY(45deg);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-slide-left.visible {
  opacity: 1;
  transform: translateX(0) rotateY(0deg);
}

.scroll-slide-right {
  opacity: 0;
  transform: translateX(100px) rotateY(-45deg);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-slide-right.visible {
  opacity: 1;
  transform: translateX(0) rotateY(0deg);
}

/* 滚动弹跳效果 */
.scroll-bounce {
  opacity: 0;
  transform: translateY(100px) scale(0.3);
  transition: all 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.scroll-bounce.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 滚动翻转效果 */
.scroll-flip {
  opacity: 0;
  transform: perspective(1000px) rotateX(90deg);
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-flip.visible {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg);
}

/* 滚动展开效果 */
.scroll-unfold {
  opacity: 0;
  transform: scaleY(0) rotateX(90deg);
  transform-origin: top;
  transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-unfold.visible {
  opacity: 1;
  transform: scaleY(1) rotateX(0deg);
}

/* 左侧卡片从下往上淡入动画类 */
.slide-in-up-fade {
  animation: slideInUpFade 0.8s ease-out forwards;
}