/* 确保所有动画元素初始状态都是隐藏的 */
.animate-on-scroll {
  opacity: 0;
}

/* 渐显向上动画 */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.4s ease-out forwards;
}

/* 动画延迟 - 保持原设置 */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }
.delay-4 { animation-delay: 0.7s; }
.delay-5 { animation-delay: 0.9s; }
.delay-6 { animation-delay: 1.1s; }
.delay-7 { animation-delay: 1.3s; }
.delay-8 { animation-delay: 1.5s; }

/* 向上淡入关键帧 */
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 初始隐藏状态 - 修复：排除所有特定动画类，避免冲突 */
.animate-on-scroll:not(.scale-fade-in):not(.slide-in-left):not(.slide-in-right):not(.fade-in-down):not(.rotate-3d):not(.flip-3d):not(.spin-3d):not(.card-tilt-in-left):not(.text-zoom-in-right):not(.rotate-3d-full) {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.animate-on-scroll.visible:not(.scale-fade-in):not(.slide-in-left):not(.slide-in-right):not(.fade-in-down):not(.rotate-3d):not(.flip-3d):not(.spin-3d):not(.card-tilt-in-left):not(.text-zoom-in-right):not(.rotate-3d-full) {
  opacity: 1;
  transform: translateY(0);
}

/* 向左滑入动画 - 修改为更慢的动画 */
.slide-in-left {
  opacity: 0 !important;
  transform: translateX(-300px) !important;
  transition: all 0.8s ease-out;
  animation: none !important; /* 确保没有其他动画干扰 */
}

.slide-in-left.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* 为slide-in-left添加延迟类支持 */
.slide-in-left.delay-1 { transition-delay: 0.6s; }

.slide-in-left.delay-2 { transition-delay: 0.8s; }

.slide-in-left.delay-3 { transition-delay: 1.0s; }

.slide-in-left.delay-4 { transition-delay: 1.0s; }

.slide-in-left.delay-5 { transition-delay: 1.2s; }

/* 重置延迟 - 当不可见时移除延迟 */
.slide-in-left:not(.visible) {
  transition-delay: 0s !important;
}

/* 向右滑入动画 - 保持原速度 */
.slide-in-right {
  opacity: 0 !important;
  transform: translateX(300px) !important;
  transition: all 0.8s ease-out;
  animation: none !important; /* 确保没有其他动画干扰 */
}

.slide-in-right.visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* 为slide-in-left添加延迟类支持 */
.slide-in-right.delay-1 { transition-delay: 0.6s; }

.slide-in-right.delay-2 { transition-delay: 0.8s; }

.slide-in-right.delay-3 { transition-delay: 1.0s; }

.slide-in-right.delay-4 { transition-delay: 1.0s; }

.slide-in-right.delay-5 { transition-delay: 1.2s; }

/* 重置延迟 - 当不可见时移除延迟 */
.slide-in-right:not(.visible) {
  transition-delay: 0s !important;
}

/* 修复:给 scale-fade-in 元素单独设置,避免继承 translateY */
.scale-fade-in {
  opacity: 0;
  transform: scale(0.8);
  animation: scaleFadeIn 1.6s ease forwards;
  animation-play-state: paused;
}

/* 当父容器可见时,启动动画 */
.animate-on-scroll.visible .scale-fade-in {
  animation-play-state: running;
}

/* 当父容器不可见时,重置动画 */
.animate-on-scroll:not(.visible) .scale-fade-in {
  animation-play-state: paused;
  opacity: 0;
  transform: scale(0.8);
}

@keyframes scaleFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 首页所有元素统一,延迟0.3秒后开始1.6s动画 */
.home-content .scale-fade-in {
  animation-delay: 0.15s;
}

/* 为不同的p元素添加不同的延迟 */
.home-content p.scale-fade-in:nth-of-type(1) {
  animation-delay: 0.45s; /* 第一个p元素延迟0.45秒 */
}

.home-content p.scale-fade-in:nth-of-type(2) {
  animation-delay: 0.75s; /* 第二个p元素延迟0.75秒 */
}

.home-content p.scale-fade-in:nth-of-type(3) {
  animation-delay: 1.05s; /* 第三个p元素延迟1.05秒 */
}

/* 装饰线条也使用相同的0.3秒延迟 */
.home-content .decor-line.scale-fade-in {
  animation-delay: 0.15s;
}

/* 装饰线条使用相同的从中间放大效果 */
.decor-line.scale-fade-in {
  opacity: 0;
  transform: scale(0.8);
  animation: scaleFadeIn 1.6s ease forwards;
  animation-play-state: paused;
}

.animate-on-scroll.visible .decor-line.scale-fade-in {
  animation-play-state: running;
}

.animate-on-scroll:not(.visible) .decor-line.scale-fade-in {
  animation-play-state: paused;
  opacity: 0;
  transform: scale(0.8);
}

/* 向下滑入动画 */
.fade-in-down {
  opacity: 0 !important;
  transform: translateY(-40px) !important;
  transition: all 0.8s ease-out;
  animation: none !important;
}

.fade-in-down.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.fade-in-down:not(.visible) {
  transition-delay: 0s !important;
}

.scale-out {
  opacity: 0 !important;
  transform: scale(0.3) !important;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: none !important;
}

.scale-out.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.scale-out:not(.visible) {
  transition-delay: 0s !important;
}

/* ========== 图片专用 3D 旋转特效 ========== */
/* 图片3D旋转容器 */
img.image-3d-rotate,
.image-3d-rotate img {
  opacity: 0 !important;
  transform: perspective(1000px) rotateY(-90deg) scale(1.4) !important;
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: 0.3s;
  transform-origin: center;
  border-radius: 8px;
  animation: none !important;
}

/* 图片3D旋转显示状态 */
img.image-3d-rotate.visible,
.image-3d-rotate.visible img {
  opacity: 1 !important;
  transform: perspective(1000px) rotateY(0deg) scale(1) !important;
}

/* 重置图片3D旋转延迟 */
img.image-3d-rotate:not(.visible),
.image-3d-rotate:not(.visible) img {
  transition-delay: 0s !important;
}

/* 图片悬浮3D效果 */
img.image-3d-rotate:hover,
.image-3d-rotate img:hover {
  transform: perspective(1000px) rotateY(5deg) rotateX(5deg) scale(1.05) !important;
  transition-delay: 0s !important;
}

/* ========== Navbar 延迟淡入特效 - 等待加载完成后触发 ========== */
.navbar {
  opacity: 0;
  transform: translateY(-20px);
  /* 移除自动动画，等待JavaScript触发 */
}

/* 只有当添加了 navbar-loaded 类后才开始动画 */
.navbar.navbar-loaded {
  animation: navbarFadeIn 1.2s ease-out forwards;
  animation-delay: 0.3s; /* 延迟0.3秒开始 */
}

@keyframes navbarFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 为navbar子元素添加渐进淡入效果 - 同样等待触发 */
.navbar .logo-section {
  opacity: 0;
}

.navbar.navbar-loaded .logo-section {
  animation: fadeInElement 0.8s ease-out forwards;
  animation-delay: 0.6s; /* logo先出现 */
}

.navbar .nav-links {
  opacity: 0;
}

.navbar.navbar-loaded .nav-links {
  animation: fadeInElement 0.8s ease-out forwards;
  animation-delay: 0.8s; /* 导航菜单稍后出现 */
}

.navbar .right-section {
  opacity: 0;
}

.navbar.navbar-loaded .right-section {
  animation: fadeInElement 0.8s ease-out forwards;
  animation-delay: 1.0s; /* 右侧区域最后出现 */
}

@keyframes fadeInElement {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 导航项目逐个淡入效果 */
.nav-links .nav-item {
  opacity: 0;
}

.navbar.navbar-loaded .nav-links .nav-item {
  animation: fadeInElement 0.6s ease-out forwards;
}

.navbar.navbar-loaded .nav-links .nav-item:nth-child(1) { animation-delay: 0.9s; }
.navbar.navbar-loaded .nav-links .nav-item:nth-child(2) { animation-delay: 1.0s; }
.navbar.navbar-loaded .nav-links .nav-item:nth-child(3) { animation-delay: 1.1s; }
.navbar.navbar-loaded .nav-links .nav-item:nth-child(4) { animation-delay: 1.2s; }

/* 右侧元素逐个淡入 */
.right-section .login-btn {
  opacity: 0;
}

.navbar.navbar-loaded .right-section .login-btn {
  animation: fadeInElement 0.6s ease-out forwards;
  animation-delay: 1.1s;
}

.right-section .language-switch {
  opacity: 0;
}

.navbar.navbar-loaded .right-section .language-switch {
  animation: fadeInElement 0.6s ease-out forwards;
  animation-delay: 1.2s;
}

.right-section .hamburger {
  opacity: 0;
}

.navbar.navbar-loaded .right-section .hamburger {
  animation: fadeInElement 0.6s ease-out forwards;
  animation-delay: 1.2s;
}

/* 使用伪元素来创建渐变覆盖层 */
.home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0; /* 初始透明 */
    z-index: 1;
    transition: opacity 0.8s ease-in-out; /* 2秒渐变过渡 */
}

/* 当添加loaded类时，渐变开始显示 */
.home.gradient-loaded::before {
    opacity: 1;
    transition-delay: 0.2s; /* 延迟0.5秒开始 */
}

/* 确保home-content在渐变层之上 */
.home-content {
    position: relative;
    z-index: 2;
}

/* 如果你想要更慢的渐变效果，可以使用这个版本 */
.home.slow-gradient::before {
    transition: opacity 3s ease-in-out;
    transition-delay: 1s; /* 延迟1秒开始，持续3秒 */
}

/* 加载完成后显示 */
.social-sidebar.social-loaded {
  opacity: 1;
  visibility: visible;
}

/* 可选：添加延迟效果，让每个图标依次出现 */
.social-sidebar.social-loaded .social-icon:nth-child(1) {
  animation: slideInLeft 0.6s ease 0.2s both;
}

.social-sidebar.social-loaded .social-icon:nth-child(2) {
  animation: slideInLeft 0.6s ease 0.4s both;
}

.social-sidebar.social-loaded .social-icon:nth-child(3) {
  animation: slideInLeft 0.6s ease 0.6s both;
}

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

/* 加载完成后显示 */
.page-indicator.indicator-loaded {
  opacity: 1;
}

/* 可选：添加每个点的依次出现效果 */
.page-indicator.indicator-loaded .page-dot {
  animation: fadeInUp 0.5s ease both;
}

.page-indicator.indicator-loaded .page-dot:nth-child(1) {
  animation-delay: 0.1s;
}

.page-indicator.indicator-loaded .page-dot:nth-child(2) {
  animation-delay: 0.2s;
}

.page-indicator.indicator-loaded .page-dot:nth-child(3) {
  animation-delay: 0.3s;
}

.page-indicator.indicator-loaded .page-dot:nth-child(4) {
  animation-delay: 0.4s;
}

/* ========== 使命愿景价值观卡片特效 - 从左边倾斜进入 ========== */

/* 使命卡片初始状态 - 从上面下来 */
.mission-section .mission-card {
  opacity: 0;
  transform: translateY(-15px) scale(0.98);
  transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 卡片内容（文字）初始状态 - 从下面上来 */
.mission-section .mission-content {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 图片初始状态 - 从上面下来 */
.mission-section .mission-card img {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 如果没有 visible 类，确保卡片仍然可见（备用方案） */
.mission-card {
  opacity: 1;
  transform: none;
  transition: all 0.3s ease;
}

.mission-content {
  opacity: 1;
  transform: none;
  transition: all 0.3s ease;
}

/* 当父容器可见时，第一个卡片进入 */
.mission-section.visible .mission-card:nth-child(1) {
  transition-delay: 0.2s;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.mission-section.visible .mission-card:nth-child(1) img {
  transition-delay: 0.3s;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.mission-section.visible .mission-card:nth-child(1) .mission-content {
  transition-delay: 0.5s;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 当父容器可见时，第二个卡片进入 */
.mission-section.visible .mission-card:nth-child(2) {
  transition-delay: 0.4s;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.mission-section.visible .mission-card:nth-child(2) img {
  transition-delay: 0.5s;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.mission-section.visible .mission-card:nth-child(2) .mission-content {
  transition-delay: 0.7s;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* 当父容器可见时，第三个卡片进入 */
.mission-section.visible .mission-card:nth-child(3) {
  transition-delay: 0.6s;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

.mission-section.visible .mission-card:nth-child(3) img {
  transition-delay: 0.7s;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.mission-section.visible .mission-card:nth-child(3) .mission-content {
  transition-delay: 0.9s;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.location-info,
.map-container {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

/* 当 contact-loaded 类加到 wrapper 上时，让内部内容显示 */
.location-section.contact-loaded .location-info,
.location-section.contact-loaded .map-container {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0s;
}

/* 非加载状态下的复位 */
.location-section:not(.contact-loaded) .location-info,
.location-section:not(.contact-loaded) .map-container {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.3s ease-out;
    transition-delay: 0s;
}