/* 动画和特效样式 */

/* ========== 基础动画 ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 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.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

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

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

/* ========== 旋转动画 ========== */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate-slow {
  animation: rotate 20s linear infinite;
}

.rotate-fast {
  animation: rotate 10s linear infinite;
}

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

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

/* ========== 渐变流动 ========== */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.gradient-animated {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* ========== 闪烁效果 ========== */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ========== 3D翻转 ========== */
@keyframes flip3D {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

.flip3d {
  animation: flip3D 6s linear infinite;
  transform-style: preserve-3d;
}

/* ========== 弹性弹入 ========== */
@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);
  }
}

.bounce-in {
  animation: bounceIn 0.6s ease;
}

/* ========== 滑入动画类 ========== */
.fade-in-up {
  animation: fadeInUp 0.8s ease both;
}

.fade-in-down {
  animation: fadeInDown 0.8s ease both;
}

.fade-in-left {
  animation: fadeInLeft 0.8s ease both;
}

.fade-in-right {
  animation: fadeInRight 0.8s ease both;
}

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

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

/* ========== 滚动触发动画 ========== */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ========== 悬停3D效果 ========== */
.card-3d {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.card-3d:hover {
  transform: rotateY(5deg) rotateX(5deg) scale(1.02);
}

/* ========== 光效 ========== */
@keyframes lightSweep {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

.light-sweep {
  position: relative;
  overflow: hidden;
}

.light-sweep::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: translateX(-100%) skewX(-15deg);
  transition: transform 0.6s;
}

.light-sweep:hover::before {
  animation: lightSweep 0.6s ease;
}

/* ========== 粒子背景效果 ========== */
.particles-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: float 15s infinite ease-in-out;
}

/* ========== 加载动画 ========== */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

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

@keyframes blink {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: var(--primary-blue);
  }
}

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