/**
 * 动画库 - 为网站区块添加生动的动画效果
 * 使用 Intersection Observer API 在元素进入视口时触发动画
 */

/* ============================================
   基础动画定义
   ============================================ */

/* 1. 淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 2. 从上方淡入并滑入 */
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 3. 从下方淡入并滑入 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 4. 从左方滑入 */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 5. 从右方滑入 */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 7. 轻微弹跳缩放进入 */
@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);
  }
}

/* 8. 旋转淡入 */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-10deg) scale(0.8);
  }

  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

/* 9. 左右晃动 */
@keyframes wiggle {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

/* 10. 脉搏效果 */
@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* 11. 上升并淡入 */
@keyframes floatUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 12. 扩展进入（宽度） */
@keyframes expandWidth {
  from {
    opacity: 0;
    max-width: 0;
  }

  to {
    opacity: 1;
    max-width: 100%;
  }
}

/* 13. 数字计数器效果 */
@keyframes countUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 14. 下拉菜单显示 */
@keyframes slideDownOpen {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }

  to {
    opacity: 1;
    max-height: 500px;
    overflow: visible;
  }
}

/* 15. 震动动画 */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-3px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(3px);
  }
}

/* 16. 轻微旋转动画 */
@keyframes gentleRotate {
  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }

  75% {
    transform: rotate(-2deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

/* 17. 淡入配合轻微旋转 */
@keyframes fadeInGentleRotate {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }

  25% {
    opacity: 0.5;
    transform: rotate(2deg);
  }

  50% {
    opacity: 0.75;
    transform: rotate(0deg);
  }

  75% {
    opacity: 0.9;
    transform: rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

/* ============================================
   动画应用类
   ============================================ */

/* 基础设置 */
.animate {
  animation-fill-mode: both;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
}

/* 快速动画 */
.animate-fast {
  animation-fill-mode: both;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
}

/* 缓慢动画 */
.animate-slow {
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-timing-function: ease-out;
}

/* 延迟动画 */
.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;
}

.animate-delay-6 {
  animation-delay: 0.6s;
}

/* 动画类型 */
.fade-in {
  animation-name: fadeIn;
}

.slide-in-down {
  animation-name: slideInDown;
}

.slide-in-up {
  animation-name: slideInUp;
}

.slide-in-left {
  animation-name: slideInLeft;
}

.slide-in-right {
  animation-name: slideInRight;
}

.scale-in {
  animation-name: scaleIn;
}

.bounce-in {
  animation-name: bounceIn;
}

.rotate-in {
  animation-name: rotateIn;
}

.float-up {
  animation-name: floatUp;
}

/* 连续动画 */
.wiggle {
  animation-name: wiggle;
  animation-duration: 0.6s;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.pulse {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.pulse:hover {
  animation: none;
}

/* ============================================
   区块级动画
   ============================================ */

/* Section 进入动画 */
section.animate-section {
  opacity: 0;
}

section.animate-section.in-view {
  animation: fadeIn 0.8s ease-out forwards;
}

/* 卡片网格动画 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.card-grid .card,
.card-grid .feature-card,
.card-grid .service-card,
.card-grid .marketing-item,
.features-grid .feature-card,
.seo-services-grid .service-card,
.recommend-items .recommend-item,
.teaching-items .teaching-process {
  opacity: 0;
}

.card-grid .card.in-view,
.card-grid .feature-card.in-view,
.card-grid .service-card.in-view,
.card-grid .marketing-item.in-view,
.features-grid .feature-card.in-view,
.seo-services-grid .service-card.in-view,
.recommend-items .recommend-item.in-view,
.teaching-items .teaching-process.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

/* 为网格中的卡片添加级联延迟 */
.card-grid .card:nth-child(1),
.card-grid .feature-card:nth-child(1),
.card-grid .service-card:nth-child(1),
.card-grid .marketing-item:nth-child(1),
.features-grid .feature-card:nth-child(1),
.seo-services-grid .service-card:nth-child(1),
.recommend-items .recommend-item:nth-child(1),
.teaching-items .teaching-process:nth-child(1) {
  animation-delay: 0s !important;
}

.card-grid .card:nth-child(2),
.card-grid .feature-card:nth-child(2),
.card-grid .service-card:nth-child(2),
.card-grid .marketing-item:nth-child(2),
.features-grid .feature-card:nth-child(2),
.seo-services-grid .service-card:nth-child(2),
.recommend-items .recommend-item:nth-child(2),
.teaching-items .teaching-process:nth-child(2) {
  animation-delay: 0.1s !important;
}

.card-grid .card:nth-child(3),
.card-grid .feature-card:nth-child(3),
.card-grid .service-card:nth-child(3),
.card-grid .marketing-item:nth-child(3),
.features-grid .feature-card:nth-child(3),
.seo-services-grid .service-card:nth-child(3),
.recommend-items .recommend-item:nth-child(3),
.teaching-items .teaching-process:nth-child(3) {
  animation-delay: 0.2s !important;
}

.card-grid .card:nth-child(4),
.card-grid .feature-card:nth-child(4),
.card-grid .service-card:nth-child(4),
.card-grid .marketing-item:nth-child(4),
.features-grid .feature-card:nth-child(4),
.seo-services-grid .service-card:nth-child(4),
.recommend-items .recommend-item:nth-child(4),
.teaching-items .teaching-process:nth-child(4) {
  animation-delay: 0.3s !important;
}

.card-grid .card:nth-child(5),
.card-grid .feature-card:nth-child(5),
.card-grid .service-card:nth-child(5),
.card-grid .marketing-item:nth-child(5),
.seo-services-grid .service-card:nth-child(5),
.recommend-items .recommend-item:nth-child(5),
.teaching-items .teaching-process:nth-child(5) {
  animation-delay: 0.4s !important;
}

.card-grid .card:nth-child(6),
.card-grid .feature-card:nth-child(6),
.card-grid .service-card:nth-child(6),
.card-grid .marketing-item:nth-child(6),
.seo-services-grid .service-card:nth-child(6),
.recommend-items .recommend-item:nth-child(6),
.teaching-items .teaching-process:nth-child(6) {
  animation-delay: 0.5s !important;
}

/* 标题动画 */
h1,
.section-title,
.Pagination-section-title {
  opacity: 0;
}

h1.in-view,
.section-title.in-view,
.Pagination-section-title.in-view {
  animation: slideInDown 0.6s ease-out forwards;
}

/* 描述文本动画 */
.section-subtitle {
  opacity: 0;
}

.section-subtitle.in-view {
  animation: fadeIn 0.6s ease-out forwards;
  animation-delay: 0.15s;
}

/* CTA 按钮动画 */
.btn-cta,
.page-cta-btn,
.cta-button {
  opacity: 0;
  transition: all 0.3s ease;
}

.btn-cta.in-view,
.page-cta-btn.in-view,
.cta-button.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

.page-cta-btn:hover,
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 图片动画 */
img.animate-img {
  opacity: 0;
}

img.animate-img.in-view {
  animation: scaleIn 0.6s ease-out forwards;
}

/* SEO 项目动画 */
.seo-items {
  opacity: 0;
}

.seo-items.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

.seo-item {
  opacity: 0;
}

.seo-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.seo-item:nth-child(3).in-view {
  animation-delay: 0s;
}

.seo-item:nth-child(4).in-view {
  animation-delay: 0.1s;
}

.seo-item:nth-child(5).in-view {
  animation-delay: 0.2s;
}

.seo-item:nth-child(6).in-view {
  animation-delay: 0.3s;
}

.seo-item:nth-child(7).in-view {
  animation-delay: 0.4s;
}

/* GEO 项目动画 */
.what-geo-items {
  opacity: 0;
}

.what-geo-items.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

.what-geo-item {
  opacity: 0;
}

.what-geo-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.what-geo-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.what-geo-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.what-geo-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

/* 流程步骤动画 */
.process-steps {
  opacity: 0;
}

.process-steps.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

.process-step {
  opacity: 0;
}

.process-step.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

/* 步骤连接线动画 - 较慢的动画 */
.step-connector-line {
  opacity: 0;
}

.step-connector-line.in-view {
  animation: fadeIn 1.8s ease-out forwards;
}

.process-step:nth-of-type(1).in-view {
  animation-delay: 0s;
}

.process-step:nth-of-type(2).in-view {
  animation-delay: 0.1s;
}

.process-step:nth-of-type(3).in-view {
  animation-delay: 0.2s;
}

.process-step:nth-of-type(4).in-view {
  animation-delay: 0.3s;
}

.process-step:nth-of-type(5).in-view {
  animation-delay: 0.4s;
}

.process-step:nth-of-type(6).in-view {
  animation-delay: 0.5s;
}

.process-step:nth-of-type(7).in-view {
  animation-delay: 0.6s;
}

.process-step:nth-of-type(8).in-view {
  animation-delay: 0.7s;
}

/* 流程流程动画 */
.flow-steps {
  opacity: 1;
}

.flow-steps.in-view {
  opacity: 1;
}

.flow-step {
  opacity: 0;
}

.flow-step.in-view {
  animation: slideInDown 0.6s ease-out forwards;
}

/* 流程连接器动画 - 较慢的动画 */
.flow-connector {
  opacity: 0;
}

.flow-connector.in-view {
  animation: fadeIn 1.8s ease-out forwards;
}

/* 流程连接器依序显示 - flow-connector-1 到 4 */
.flow-connector-1.in-view {
  animation-delay: 0s;
}

.flow-connector-2.in-view {
  animation-delay: 0.3s;
}

.flow-connector-3.in-view {
  animation-delay: 0.6s;
}

.flow-connector-4.in-view {
  animation-delay: 0.9s;
}

/* 流程步骤依序显示 - 5个步骤（奇数位置） */
.flow-step:nth-child(1).in-view {
  animation-delay: 0s;
}

.flow-step:nth-child(3).in-view {
  animation-delay: 0.15s;
}

.flow-step:nth-child(5).in-view {
  animation-delay: 0.3s;
}

.flow-step:nth-child(7).in-view {
  animation-delay: 0.45s;
}

.flow-step:nth-child(9).in-view {
  animation-delay: 0.6s;
}

/* 视频项目动画 */
.video-items {
  opacity: 0;
}

.video-items.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

.video-item {
  opacity: 0;
}

.video-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.video-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.video-item:nth-child(2).in-view {
  animation-delay: 0.2s;
}

.video-item:nth-child(3).in-view {
  animation-delay: 0.4s;
}

/* 营销右侧区块动画 */
.marketing-right {
  opacity: 0;
}

.marketing-right.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

.marketing-box-top {
  opacity: 0;
}

.marketing-box-top.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

.marketing-box-bottom {
  opacity: 0;
}

.marketing-box-bottom.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

.box-decoration {
  opacity: 0;
}

.box-decoration.in-view {
  animation: slideInRight 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

/* 描述容器动画 */
.des-container {
  opacity: 0;
}

.des-container.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* 概念项目动画 */
.concept-items {
  opacity: 0;
}

.concept-items.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

.concept-item {
  opacity: 0;
}

.concept-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.concept-item:nth-of-type(1).in-view {
  animation-delay: 0s;
}

.concept-item:nth-of-type(2).in-view {
  animation-delay: 0.1s;
}

.concept-item:nth-of-type(3).in-view {
  animation-delay: 0.2s;
}

.concept-item:nth-of-type(4).in-view {
  animation-delay: 0.3s;
}

.concept-item:nth-of-type(5).in-view {
  animation-delay: 0.4s;
}

/* 管理项目动画 */
.management-items {
  /* 不添加动画，保留原本排列 */
}

.management-item {
  opacity: 0;
}

.management-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.management-item:nth-of-type(1).in-view {
  animation-delay: 0s;
}

.management-item:nth-of-type(2).in-view {
  animation-delay: 0.1s;
}

.management-item:nth-of-type(3).in-view {
  animation-delay: 0.2s;
}

.management-item:nth-of-type(4).in-view {
  animation-delay: 0.3s;
}

.management-item:nth-of-type(5).in-view {
  animation-delay: 0.4s;
}

/* 技能容器动画 - 按 1-5 依序显示 */
.skills-container {
  /* 不添加动画，保留原本排列 */
}

.skill-item {
  opacity: 0;
}

.skill-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

/* 技能项目 1-5 依序显示 */
.skills-item-1 {
  opacity: 0;
}

.skills-item-1.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0s;
}

.skills-item-2 {
  opacity: 0;
}

.skills-item-2.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.1s;
}

.skills-item-3 {
  opacity: 0;
}

.skills-item-3.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.2s;
}

.skills-item-4 {
  opacity: 0;
}

.skills-item-4.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.3s;
}

.skills-item-5 {
  opacity: 0;
}

.skills-item-5.in-view {
  animation: slideInUp 0.6s ease-out forwards;
  animation-delay: 0.4s;
}

/* 费用项目动画 */
.cost-items {
  opacity: 0;
}

.cost-items.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

.cost-item {
  opacity: 0;
}

.cost-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.cost-item:nth-of-type(1).in-view {
  animation-delay: 0s;
}

.cost-item:nth-of-type(2).in-view {
  animation-delay: 0.1s;
}

.cost-item:nth-of-type(3).in-view {
  animation-delay: 0.2s;
}

.cost-item:nth-of-type(4).in-view {
  animation-delay: 0.3s;
}

.cost-item:nth-of-type(5).in-view {
  animation-delay: 0.4s;
}

/* WAGI 描述区块动画 */
.wagi-des-section {
  opacity: 0;
}

.wagi-des-section.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Des Items 动画 - 4个项目依序显示 */
.des-items {
  opacity: 0;
}

.des-items.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.des-items:nth-of-type(1).in-view {
  animation-delay: 0s;
}

.des-items:nth-of-type(2).in-view {
  animation-delay: 0.15s;
}

.des-items:nth-of-type(3).in-view {
  animation-delay: 0.3s;
}

.des-items:nth-of-type(4).in-view {
  animation-delay: 0.45s;
}

/* AIO Marketing Items 动画 - 4个项目依序显示 */
.aio-marketing-item {
  opacity: 0;
}

.aio-marketing-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.aio-marketing-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.aio-marketing-item:nth-child(2).in-view {
  animation-delay: 0.15s;
}

.aio-marketing-item:nth-child(3).in-view {
  animation-delay: 0.3s;
}

.aio-marketing-item:nth-child(4).in-view {
  animation-delay: 0.45s;
}

/* Compare Container 动画 */
.compare-container {
  opacity: 0;
}

.compare-container.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Key Features Container 动画 */
.key-features-container {
  opacity: 0;
}

.key-features-container.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Todo Items 动画 - 6个项目依序显示 */
.todo-item {
  opacity: 0;
}

.todo-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.todo-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.todo-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.todo-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

.todo-item:nth-child(4).in-view {
  animation-delay: 0.3s;
}

.todo-item:nth-child(5).in-view {
  animation-delay: 0.4s;
}

.todo-item:nth-child(6).in-view {
  animation-delay: 0.5s;
}

/* SEO Image 动画 - 只淡入，位置不变 */
.seo-image {
  opacity: 0;
}

.seo-image.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Strategy Left 动画 - 从左边滑入 */
.strategy-left {
  opacity: 0;
}

.strategy-left.in-view {
  animation: slideInLeft 0.6s ease-out forwards;
}

/* Strategy Right 动画 - 从右边滑入 */
.strategy-right {
  opacity: 0;
}

.strategy-right.in-view {
  animation: slideInRight 0.6s ease-out forwards;
}

/* Section Contact Wagi 动画 - 淡入 */
.section-contact-wagi {
  opacity: 0;
}

.section-contact-wagi.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Pricing Item 动画 - 从下往上滑入（依序显示3个项目） */
.pricing-item {
  opacity: 0;
}

.pricing-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.pricing-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.pricing-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.pricing-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

/* 列表项目动画 */
.step-item,
.platform-icon {
  opacity: 0;
}

.step-item.in-view,
.platform-icon.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.step-item:nth-child(1).in-view,
.platform-icon:nth-child(1).in-view {
  animation-delay: 0s;
}

.step-item:nth-child(2).in-view,
.platform-icon:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.step-item:nth-child(3).in-view,
.platform-icon:nth-child(3).in-view {
  animation-delay: 0.2s;
}

.step-item:nth-child(4).in-view,
.platform-icon:nth-child(4).in-view {
  animation-delay: 0.3s;
}

.step-item:nth-child(5).in-view,
.platform-icon:nth-child(5).in-view {
  animation-delay: 0.4s;
}

/* What Items 动画 */
.what-items {
  opacity: 0;
}

.what-items.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Photography Items 动画 - 依序显示 */
.photography-item {
  opacity: 0;
}

.photography-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.photography-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.photography-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.photography-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

.photography-item:nth-child(4).in-view {
  animation-delay: 0.3s;
}

.photography-item:nth-child(5).in-view {
  animation-delay: 0.4s;
}

/* Brand Video Content 动画 */
.brand-video-content {
  opacity: 0;
}

.brand-video-content.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* CIS Items 动画 - 4个项目依序显示 */
.cis-item {
  opacity: 0;
}

.cis-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.cis-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.cis-item:nth-child(2).in-view {
  animation-delay: 0.15s;
}

.cis-item:nth-child(3).in-view {
  animation-delay: 0.3s;
}

.cis-item:nth-child(4).in-view {
  animation-delay: 0.45s;
}

/* KOL Items 动画 - 4个项目依序显示 */
.kol-item {
  opacity: 0;
}

.kol-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.kol-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.kol-item:nth-child(2).in-view {
  animation-delay: 0.15s;
}

.kol-item:nth-child(3).in-view {
  animation-delay: 0.3s;
}

.kol-item:nth-child(4).in-view {
  animation-delay: 0.45s;
}

/* Columnist Items 动画 - 7个项目依序显示 */
.columnist-item {
  opacity: 0;
}

.columnist-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.columnist-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.columnist-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.columnist-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

.columnist-item:nth-child(4).in-view {
  animation-delay: 0.3s;
}

.columnist-item:nth-child(5).in-view {
  animation-delay: 0.4s;
}

.columnist-item:nth-child(6).in-view {
  animation-delay: 0.5s;
}

.columnist-item:nth-child(7).in-view {
  animation-delay: 0.6s;
}

/* Forum Items 动画 - 5个项目依序显示 */
.forum-item {
  opacity: 0;
}

.forum-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.forum-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.forum-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.forum-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

.forum-item:nth-child(4).in-view {
  animation-delay: 0.3s;
}

.forum-item:nth-child(5).in-view {
  animation-delay: 0.4s;
}

/* Media Items 动画 - 7个项目依序显示 */
.media-item {
  opacity: 0;
}

.media-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.media-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.media-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.media-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

.media-item:nth-child(4).in-view {
  animation-delay: 0.3s;
}

.media-item:nth-child(5).in-view {
  animation-delay: 0.4s;
}

.media-item:nth-child(6).in-view {
  animation-delay: 0.5s;
}

.media-item:nth-child(7).in-view {
  animation-delay: 0.6s;
}

/* Geo Description Item 动画 - 3个项目依序显示 */
.geo-description-item {
  opacity: 0;
}

.geo-description-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.geo-description-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.geo-description-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.geo-description-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

/* Strategy Item 动画 - 3个项目依序显示 */
.strategy-item {
  opacity: 0;
}

.strategy-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.strategy-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.strategy-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.strategy-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

/* Geo Benefit Item 动画 - 3个项目依序显示 */
.geo-benefit-item {
  opacity: 0;
}

.geo-benefit-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.geo-benefit-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.geo-benefit-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.geo-benefit-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

/* Advantage Item 动画 - 4个项目依序显示 */
.advantage-item {
  opacity: 0;
}

.advantage-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.advantage-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.advantage-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.advantage-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

.advantage-item:nth-child(4).in-view {
  animation-delay: 0.3s;
}

/* Enhanced Item 动画 - 3个项目依序显示 */
.enhanced-item {
  opacity: 0;
}

.enhanced-item.in-view {
  animation: slideInUp 0.6s ease-out forwards;
}

.enhanced-item:nth-child(1).in-view {
  animation-delay: 0s;
}

.enhanced-item:nth-child(2).in-view {
  animation-delay: 0.1s;
}

.enhanced-item:nth-child(3).in-view {
  animation-delay: 0.2s;
}

/* Wagi Improving 动画 - 淡入 */
.wagi-improving {
  opacity: 0;
}

.wagi-improving.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* AIO Img Section 动画 - 淡入 */
.aio-img-section {
  opacity: 0;
}

.aio-img-section.in-view {
  animation: fadeIn 0.6s ease-out forwards;
}

/* Idea Build 动画 - 淡入配合轻微旋转（延迟出现） */
.idea-buld {
  opacity: 0;
}

.idea-buld.in-view {
  animation: fadeInGentleRotate 0.8s ease-in-out forwards;
  animation-delay: 0.8s;
}

/* ============================================
   响应式设置
   ============================================ */

@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  /* 移动设备上减少动画延迟 */
  .card-grid .card:nth-child(n),
  .features-grid .feature-card:nth-child(n),
  .seo-services-grid .service-card:nth-child(n) {
    animation-delay: 0 !important;
  }
}

/* ============================================
   禁用动画选项（用户偏好）
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}