/**
 * 页面滚动动画效果
 * 为页面各个部分添加滑入动画，使页面更加生动
 */

/* 基础动画类 - 初始隐藏状态 */
.animate-on-scroll {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

/* 从下方滑入 */
.slide-up {
  transform: translateY(50px);
}

.slide-up.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 从左侧滑入 */
.slide-left {
  transform: translateX(-50px);
}

.slide-left.animated {
  opacity: 1;
  transform: translateX(0);
}

/* 从右侧滑入 */
.slide-right {
  transform: translateX(50px);
}

.slide-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* 淡入效果 */
.fade-in {
  opacity: 0;
}

.fade-in.animated {
  opacity: 1;
}

/* 缩放淡入 */
.scale-in {
  opacity: 0;
  transform: scale(0.9);
}

.scale-in.animated {
  opacity: 1;
  transform: scale(1);
}

/* 延迟动画 */
.delay-100 {
  transition-delay: 0.15s;
}

.delay-200 {
  transition-delay: 0.3s;
}

.delay-300 {
  transition-delay: 0.45s;
}

.delay-400 {
  transition-delay: 0.6s;
}

.delay-500 {
  transition-delay: 0.75s;
}

/* 快速动画 */
.fast {
  transition-duration: 0.7s;
}

/* 慢速动画 */
.slow {
  transition-duration: 1.2s;
}

/* 特定区域动画 */

/* 视频 Banner 区域 */
.vps-hero-banner {
  opacity: 0;
  animation: fadeInScale 1s ease forwards;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 卡片区域 */
.card-section .card-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.card-section .card-item.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 为每个卡片添加延迟 */
.card-section .card-item:nth-child(1) {
  transition-delay: 0.15s;
}

.card-section .card-item:nth-child(2) {
  transition-delay: 0.3s;
}

.card-section .card-item:nth-child(3) {
  transition-delay: 0.45s;
}

.card-section .card-item:nth-child(4) {
  transition-delay: 0.6s;
}

.card-section .card-item:nth-child(5) {
  transition-delay: 0.75s;
}

.card-section .card-item:nth-child(6) {
  transition-delay: 0.9s;
}

/* 服务器选项卡 */
.server-tabs-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.server-tabs-section.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 快捷导航栏 */
.quick-nav-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.quick-nav-section.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 快捷导航按钮依次出现 */
.quick-nav-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.quick-nav-section.animated .quick-nav-item {
  opacity: 1;
  transform: translateY(0);
}

.quick-nav-section.animated .quick-nav-item:nth-child(1) {
  transition-delay: 0.2s;
}

.quick-nav-section.animated .quick-nav-item:nth-child(2) {
  transition-delay: 0.4s;
}

.quick-nav-section.animated .quick-nav-item:nth-child(3) {
  transition-delay: 0.6s;
}

/* Section 标题动画 */
.section-title {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.section-title.animated {
  opacity: 1;
  transform: translateY(0);
}

/* 列表项依次出现 */
.animate-list-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-list-item.animated {
  opacity: 1;
  transform: translateX(0);
}

/* 为列表项添加递增延迟 */
.animate-list-item:nth-child(1) { transition-delay: 0.1s; }
.animate-list-item:nth-child(2) { transition-delay: 0.2s; }
.animate-list-item:nth-child(3) { transition-delay: 0.3s; }
.animate-list-item:nth-child(4) { transition-delay: 0.4s; }
.animate-list-item:nth-child(5) { transition-delay: 0.5s; }
.animate-list-item:nth-child(6) { transition-delay: 0.6s; }
.animate-list-item:nth-child(7) { transition-delay: 0.7s; }
.animate-list-item:nth-child(8) { transition-delay: 0.8s; }

/* 图片淡入 */
.animate-image {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 1s ease, transform 1s ease;
}

.animate-image.animated {
  opacity: 1;
  transform: scale(1);
}

/* 按钮动画 */
.animate-button {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

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

/* 随机方向滑入动画 */
.slide-random {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}

.slide-random.animated {
  opacity: 1;
  transform: translate(0, 0) !important;
}

/* 随机方向变体 */
.slide-random-1 { transform: translate(-40px, -40px); }
.slide-random-2 { transform: translate(40px, -40px); }
.slide-random-3 { transform: translate(-40px, 40px); }
.slide-random-4 { transform: translate(40px, 40px); }
.slide-random-5 { transform: translateX(-50px); }
.slide-random-6 { transform: translateX(50px); }
.slide-random-7 { transform: translateY(-50px); }
.slide-random-8 { transform: translateY(50px); }

/* 移动端优化 - 减少动画效果 */
@media (max-width: 768px) {
  .animate-on-scroll,
  .slide-up,
  .slide-left,
  .slide-right,
  .scale-in {
    transform: none !important;
    opacity: 1 !important;
  }
  
  /* 保留淡入效果 */
  .fade-in {
    opacity: 0;
  }
  
  .fade-in.animated {
    opacity: 1;
  }
}

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