/* 标题从左侧划出 */
.title-slide {
    opacity: 0;
    transform: translateX(-100px); /* 初始在左侧隐藏 */
    transition: all 0.8s ease-out;
}

.title-slide.visible {
    opacity: 1;
    transform: translateX(0); /* 滑出到正常位置 */
}

/* 内容从下面划出 */
.content-slide {
    opacity: 0;
    transform: translateY(50px); /* 初始在下方隐藏 */
    transition: all 0.8s ease-out;
}

.content-slide.visible {
    opacity: 1;
    transform: translateY(0); /* 滑出到正常位置 */
}

/* 延迟效果 */
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
		
		
/* 动画基础类 */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  opacity: 0; /* 默认隐藏，动画完成后显示 */
}

/* 延迟类 */
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* 动画持续时间 */
.duration-fast { animation-duration: 0.5s; }
.duration-normal { animation-duration: 1s; }
.duration-slow { animation-duration: 1.5s; }

/* 动画次数 */
.animation-once { animation-iteration-count: 1; }
.animation-twice { animation-iteration-count: 2; }
.animation-infinite { animation-iteration-count: infinite; }

/* ============================================
  淡入效果
============================================ */

/* 淡入 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

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

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

/* 向左淡入 */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInLeft { animation-name: fadeInLeft; }

/* 向右淡入 */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fadeInRight { animation-name: fadeInRight; }

/* ============================================
  飞入效果（更强烈的移动效果）
============================================ */

/* 向上飞入 */
@keyframes flyInUp {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.flyInUp { animation-name: flyInUp; }

/* 向下飞入 */
@keyframes flyInDown {
  from {
    opacity: 0;
    transform: translateY(-100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.flyInDown { animation-name: flyInDown; }

/* 向左飞入 */
@keyframes flyInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.flyInLeft { animation-name: flyInLeft; }

/* 向右飞入 */
@keyframes flyInRight {
  from {
    opacity: 0;
    transform: translateX(100px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.flyInRight { animation-name: flyInRight; }

/* ============================================
  滑入效果（无缩放）
============================================ */

/* 向上滑入 */
@keyframes slideInUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.slideInUp {
  animation-name: slideInUp;
  opacity: 1 !important; /* 滑入不需要控制透明度 */
}

/* 向下滑入 */
@keyframes slideInDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
.slideInDown {
  animation-name: slideInDown;
  opacity: 1 !important;
}

/* 向左滑入 */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
.slideInLeft {
  animation-name: slideInLeft;
  opacity: 1 !important;
}

/* 向右滑入 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.slideInRight {
  animation-name: slideInRight;
  opacity: 1 !important;
}

/* ============================================
  缩放效果
============================================ */

/* 放大进入 */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.zoomIn { animation-name: zoomIn; }

/* 缩小进入 */
@keyframes zoomOutIn {
  from {
    opacity: 0;
    transform: scale(1.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.zoomOutIn { animation-name: zoomOutIn; }

/* 弹性缩放 */
@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);
  }
}
.bounceIn { animation-name: bounceIn; }

/* ============================================
  旋转效果
============================================ */

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

/* Y轴旋转 */
@keyframes rotateInY {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0);
  }
}
.rotateInY { animation-name: rotateInY; }

/* X轴旋转 */
@keyframes rotateInX {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0);
  }
}
.rotateInX { animation-name: rotateInX; }

/* ============================================
  翻转效果
============================================ */

/* 翻转进入 */
@keyframes flipInX {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateX(90deg);
  }
  40% {
    transform: perspective(1000px) rotateX(-10deg);
  }
  70% {
    transform: perspective(1000px) rotateX(10deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateX(0);
  }
}
.flipInX { 
  animation-name: flipInX;
  backface-visibility: visible !important;
}

/* Y轴翻转 */
@keyframes flipInY {
  from {
    opacity: 0;
    transform: perspective(1000px) rotateY(90deg);
  }
  40% {
    transform: perspective(1000px) rotateY(-10deg);
  }
  70% {
    transform: perspective(1000px) rotateY(10deg);
  }
  to {
    opacity: 1;
    transform: perspective(1000px) rotateY(0);
  }
}
.flipInY { 
  animation-name: flipInY;
  backface-visibility: visible !important;
}

/* ============================================
  特殊效果
============================================ */

/* 弹跳进入 */
@keyframes bounceInUp {
  0% {
    opacity: 0;
    transform: translateY(300px);
  }
  60% {
    opacity: 1;
    transform: translateY(-20px);
  }
  80% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}
.bounceInUp { animation-name: bounceInUp; }

/* 光晕效果 */
@keyframes lightSpeedIn {
  from {
    opacity: 0;
    transform: translateX(100%) skewX(-30deg);
  }
  60% {
    opacity: 1;
    transform: skewX(20deg);
  }
  80% {
    transform: skewX(-5deg);
  }
  to {
    transform: translateX(0);
  }
}
.lightSpeedIn { animation-name: lightSpeedIn; }

/* 滚动进入 */
@keyframes rollIn {
  from {
    opacity: 0;
    transform: translateX(-100%) rotate(-120deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) rotate(0);
  }
}
.rollIn { animation-name: rollIn; }

/* 摇摆进入 */
@keyframes swingIn {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.swingIn {
  animation-name: swingIn;
  transform-origin: top center;
  opacity: 1 !important;
}

/* ============================================
  组合效果
============================================ */

/* 淡入+向上移动 */
.combo-fade-up {
  animation: fadeIn 0.8s ease-out, fadeInUp 0.8s ease-out;
}

/* 淡入+缩放 */
.combo-fade-zoom {
  animation: fadeIn 0.8s ease-out, zoomIn 0.8s ease-out;
}

/* 滑入+淡入 */
.combo-slide-fade {
  animation: slideInUp 0.8s ease-out, fadeIn 0.8s ease-out;
}

/* ============================================
  实用类
============================================ */

/* 动画完成后显示 */
.animated-show {
  opacity: 1 !important;
}

/* 动画触发类 - 用于滚动触发动画 */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.8s ease-out;
}

.animate-on-scroll.animate-visible {
  opacity: 1;
  transform: translateY(0) !important;
}

/* 页面加载时的初始化隐藏 */
.init-hidden {
  opacity: 0;
}