/**
 * ============================================================
 * 江苏志博电气 — 动画与交互效果
 * Zhibo Electric — Animations & Interactions
 * ============================================================
 *
 * 本文件包含：
 * 1. 加载闪屏动画              12. 按钮加载旋转器
 * 2. 阅读进度条                13. 浮动动画
 * 3. 光标光晕                  14. 发光脉冲
 * 4. 按钮水波纹                15. 渐变位移动画
 * 5. 模糊加载图片              16. 抖动效果（表单错误）
 * 6. 视差滚动                  17. 成功对勾动画
 * 7. 3D 倾斜卡片               18. Hero 轮播
 * 8. 滚动显示动画              19. Ken Burns 效果
 * 9. 首屏入场动画              20. 滚动指示器
 * 10. 数字计数器弹跳            21. 浮动装饰元素
 * 11. 筛选动画                 22. 各种微交互动画
 */

/* ============================================================
   动画 CSS 变量
   ============================================================ */
:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);       /* 弹性缓动 */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1.2);      /* 弹跳缓动 */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);             /* 平滑缓动 */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);          /* 指数衰减 */
  --splash-duration: 0.8s;                                   /* 闪屏动画时长 */
  --stagger-base: 80ms;                                      /* 交错延迟基数 */
}

/* ============================================================
   加载闪屏 (LOADING SPLASH SCREEN)
   页面加载时的品牌展示动画 — 深色背景 + 粒子 + 光环 + Logo + 进度条
   ============================================================ */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;                       /* 最高层级，覆盖所有内容 */
  background: radial-gradient(ellipse at center, #0D1525 0%, #050810 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  contain: layout style paint;         /* 性能优化：限制重绘范围 */
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              opacity 0.25s ease;
}

/* 隐藏状态：向上滑出 */
.splash-screen.hide {
  transform: translateY(-105%);
  opacity: 0;
  pointer-events: none;
}

/* ── 能量粒子（4个）── */
.splash-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sp {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(0,128,255,0.6);
  opacity: 0;
  will-change: transform, opacity;     /* 性能优化：提示浏览器 */
  animation: particleFloat 2.5s ease-in-out infinite;
}

/* 粒子位置和延迟（每个粒子不同的起始时间和位置） */
.sp-1 { left: 18%; top: 55%; animation-delay: 0s; }
.sp-2 { left: 35%; top: 35%; animation-delay: 0.5s; }
.sp-3 { left: 60%; top: 65%; animation-delay: 1.0s; }
.sp-4 { left: 78%; top: 40%; animation-delay: 0.7s; }
/* 多余的粒子隐藏（减少 DOM 开销） */
.sp-5, .sp-6, .sp-7, .sp-8 { display: none; }

/* 粒子上浮 + 渐隐 */
@keyframes particleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0); }
  25%  { opacity: 0.7; }
  60%  { opacity: 0.2; }
  100% { opacity: 0; transform: translateY(-80px) scale(1.2); }
}

/* ── 同心扩散光环（2个）── */
.splash-rings {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(0,128,255,0.2);
  will-change: transform, opacity;
  animation: ringExpand 2.2s cubic-bezier(0.16,1,0.3,1) infinite;
}

.r1 { width: 70px; height: 70px; animation-delay: 0s; }
.r2 { width: 105px; height: 105px; animation-delay: 0.55s; }
.r3 { display: none; }                /* 多余光环隐藏 */

/* 光环扩散动画：从小到大 + 渐隐 */
@keyframes ringExpand {
  0%   { transform: scale(0.5); opacity: 0.7; }
  100% { transform: scale(3.5); opacity: 0; }
}

/* ── Logo 容器 ── */
.splash-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* Logo 光晕（径向渐变脉冲） */
.splash-logo-glow {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,128,255,0.3) 0%, transparent 70%);
  will-change: transform, opacity;
  animation: glowPulse 1.8s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50%      { transform: scale(1.4); opacity: 0.12; }
}

/* Logo 图片 */
.splash-logo {
  width: 80px;
  height: 80px;
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
  animation: logoEntry 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

.splash-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);    /* Logo 反白 */
}

/* Logo 入场：旋转 + 缩放 */
@keyframes logoEntry {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ── 品牌名称 ── */
.splash-brand {
  margin-top: 2rem;
  text-align: center;
  z-index: 1;
  animation: brandSlideUp 0.7s 0.4s var(--ease-spring) both;
}

.splash-brand-line {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.08em;
}

.splash-brand-sub {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 品牌名从下方滑入 */
@keyframes brandSlideUp {
  0%   { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* ── 底部进度条 ── */
.splash-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.05);
  z-index: 2;
}

.splash-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0055EE, #0080FF, #00C896);
  transition: width 0.3s ease-out;
}

/* ============================================================
   阅读进度条 (READING PROGRESS BAR)
   页面顶部的细条，随滚动增加
   ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #0055EE, #0080FF, #00C896);
  z-index: calc(var(--z-header) + 10);  /* 在页头上方 */
  width: 0;
  transition: width 50ms linear;
  will-change: width;
  box-shadow: 0 0 8px rgba(0,85,238,0.3);
}

/* ============================================================
   光标光晕 (CURSOR GLOW)
   跟随鼠标的大型半透明光晕，增加沉浸感（仅桌面端）
   ============================================================ */
.cursor-glow {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,85,238,0.08) 0%, rgba(0,85,238,0.03) 35%, transparent 70%);
  pointer-events: none;                /* 不拦截鼠标事件 */
  z-index: 0;
  transform: translate(-50%, -50%);    /* 以光标为中心 */
  transition: opacity 0.3s ease;
  will-change: left, top;
}

/* ============================================================
   按钮水波纹 (BUTTON RIPPLE)
   点击按钮时从点击位置扩散的水波效果
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;                    /* 限制水波溢出 */
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ============================================================
   模糊加载图片 (BLUR-UP IMAGE LOADING)
   图片加载前显示模糊版本，加载完成后清晰显示
   ============================================================ */
img[loading="lazy"],
.blur-load {
  filter: blur(12px) grayscale(20%);    /* 初始模糊 + 轻微去色 */
  transform: scale(1.03);               /* 补偿模糊边缘 */
  transition: filter 0.6s ease, transform 0.6s ease;
}

img[loading="lazy"].loaded,
.blur-load.loaded {
  filter: blur(0) grayscale(0);         /* 加载完成后清晰 */
  transform: scale(1);
}

/* ============================================================
   视差滚动 (PARALLAX)
   元素随滚动以不同速度移动
   ============================================================ */
[data-parallax] {
  will-change: transform;
}

/* ============================================================
   3D 倾斜卡片 (3D TILT CARD)
   随鼠标位置产生 3D 旋转效果
   ============================================================ */
.tilt-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.1s ease-out;
  will-change: transform;
}

/* 光泽反射层 */
.tilt-card-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255, 255, 255, 0.25) 0%,
    transparent 60%
  );
  z-index: 2;
}

.tilt-card:hover .tilt-card-shine {
  opacity: 1;
}

/* ============================================================
   发光边框输入框 (GLOW BORDER ON FOCUS)
   ============================================================ */
.glow-input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15),
              0 0 20px rgba(0, 102, 204, 0.08) !important;
  outline: none;
}

/* ============================================================
   浮动标签 (FLOATING LABEL)
   输入框聚焦时标签上移缩小的效果
   ============================================================ */
.float-label-group {
  position: relative;
}

.float-label-group label {
  position: absolute;
  left: 1rem;
  top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  pointer-events: none;                /* 不拦截点击（传递到输入框） */
  transition: all 0.2s var(--ease-smooth);
  background: transparent;
  padding: 0 0.25rem;
  transform-origin: left top;
}

/* 聚焦或已填写时标签浮动 */
.float-label-group input:focus ~ label,
.float-label-group textarea:focus ~ label,
.float-label-group input.has-value ~ label,
.float-label-group textarea.has-value ~ label,
.float-label-group select:focus ~ label,
.float-label-group select.has-value ~ label {
  transform: translateY(-1.4rem) scale(0.8);
  color: var(--color-primary);
  font-weight: 600;
}

/* ============================================================
   滚动显示动画 (SCROLL REVEAL)
   元素进入视口时从透明+位移变为可见+原位
   ============================================================ */

/* 基础向上滑入 */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 交错延迟（子元素依次出现，最多15个） */
.reveal-stagger > *:nth-child(1)  { transition-delay: 0ms; }
.reveal-stagger > *:nth-child(2)  { transition-delay: 60ms; }
.reveal-stagger > *:nth-child(3)  { transition-delay: 120ms; }
.reveal-stagger > *:nth-child(4)  { transition-delay: 180ms; }
.reveal-stagger > *:nth-child(5)  { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(6)  { transition-delay: 300ms; }
.reveal-stagger > *:nth-child(7)  { transition-delay: 360ms; }
.reveal-stagger > *:nth-child(8)  { transition-delay: 420ms; }
.reveal-stagger > *:nth-child(9)  { transition-delay: 480ms; }
.reveal-stagger > *:nth-child(10) { transition-delay: 540ms; }
.reveal-stagger > *:nth-child(11) { transition-delay: 600ms; }
.reveal-stagger > *:nth-child(12) { transition-delay: 660ms; }
.reveal-stagger > *:nth-child(13) { transition-delay: 720ms; }
.reveal-stagger > *:nth-child(14) { transition-delay: 780ms; }
.reveal-stagger > *:nth-child(15) { transition-delay: 840ms; }

/* 从左侧滑入 */
.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}

/* 从右侧滑入 */
.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}

.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* 缩放显示（从小到大） */
.reveal-scale {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s var(--ease-smooth),
              transform 0.6s var(--ease-spring);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   首屏入场动画 (ABOVE-FOLD STAGGERED ENTRY)
   页面加载时首屏元素依次出现（不需要滚动触发）
   ============================================================ */
.enter-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  animation: enterUp 0.6s var(--ease-smooth) forwards;
}

.enter-stagger > *:nth-child(1)  { animation-delay: 0.3s; }
.enter-stagger > *:nth-child(2)  { animation-delay: 0.4s; }
.enter-stagger > *:nth-child(3)  { animation-delay: 0.5s; }
.enter-stagger > *:nth-child(4)  { animation-delay: 0.6s; }
.enter-stagger > *:nth-child(5)  { animation-delay: 0.7s; }
.enter-stagger > *:nth-child(6)  { animation-delay: 0.8s; }

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

/* ============================================================
   HERO 文字动画 (HERO TEXT ANIMATION)
   Hero 轮播切换时文字逐条滑入
   ============================================================ */
.hero-content h2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-smooth) 0.2s,
              transform 0.6s var(--ease-smooth) 0.2s;
}

.hero-content p {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-smooth) 0.35s,
              transform 0.6s var(--ease-smooth) 0.35s;
}

.hero-content .btn {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s var(--ease-smooth) 0.5s,
              transform 0.6s var(--ease-smooth) 0.5s;
}

/* 激活时全部显示 */
.hero-slide.active .hero-content h2,
.hero-slide.active .hero-content p,
.hero-slide.active .hero-content .btn {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HERO 视差背景 (HERO PARALLAX BG)
   ============================================================ */
.hero-bg {
  will-change: transform;
}

.hero-slide.active .hero-bg {
  transition: transform 0.1s ease-out;
}

/* ============================================================
   分类卡片图标旋转 (CATEGORY CARD ICON SPIN)
   ============================================================ */
.category-card .category-icon {
  transition: transform 0.4s var(--ease-spring);
}

.category-card:hover .category-icon {
  transform: rotate(360deg) scale(1.1);  /* 悬停时旋转一圈 */
}

/* ============================================================
   特色卡片图标动画 (FEATURE CARD ICON REVEAL)
   ============================================================ */
.feature-card .feature-icon {
  transition: transform 0.5s var(--ease-spring),
              color 0.3s ease;
}

.feature-card:hover .feature-icon {
  transform: scale(1.2);
  color: var(--color-secondary);
}

/* ============================================================
   数字计数器弹跳 (BOUNCE COUNTER)
   计数完成时的弹跳效果
   ============================================================ */
.counter {
  font-variant-numeric: tabular-nums;  /* 等宽数字 */
}

.counter.bounce {
  animation: counterBounce 0.4s var(--ease-bounce);
}

@keyframes counterBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); color: var(--color-secondary); }
  100% { transform: scale(1); }
}

/* ============================================================
   产品筛选动画 (FILTER SHUFFLE)
   产品切换分类时的出入动画
   ============================================================ */
.product-card.filter-enter {
  animation: filterIn 0.4s var(--ease-spring) forwards;
}

.product-card.filter-exit {
  animation: filterOut 0.3s ease forwards;
}

@keyframes filterIn {
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes filterOut {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* ============================================================
   弹窗弹簧动画 (MODAL SPRING)
   ============================================================ */
.modal-overlay.open .modal {
  animation: modalSpring 0.5s var(--ease-spring) forwards;
}

@keyframes modalSpring {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.02); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 关闭动画 */
.modal-overlay.closing .modal {
  animation: modalSpringOut 0.25s ease forwards;
}

@keyframes modalSpringOut {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.9); opacity: 0; }
}

/* ============================================================
   时间轴绘制动画 (TIMELINE DRAW)
   竖线从上到下逐渐显示
   ============================================================ */
.timeline::before {
  clip-path: inset(0 0 100% 0);        /* 初始完全隐藏 */
  transition: clip-path 1.5s var(--ease-out-expo);
}

.timeline.drawn::before {
  clip-path: inset(0 0 0 0);           /* 完全显示 */
}

/* 时间轴圆点脉冲动画 */
.timeline-dot {
  transition: transform 0.3s var(--ease-spring),
              box-shadow 0.3s ease;
}

.timeline-item.visible .timeline-dot {
  animation: dotPulse 0.6s var(--ease-spring) forwards;
}

@keyframes dotPulse {
  0% { transform: translateX(-50%) scale(0.5); box-shadow: 0 0 0 0 rgba(0,102,204,0.4); }
  60% { transform: translateX(-50%) scale(1.4); box-shadow: 0 0 0 12px rgba(0,102,204,0); }
  100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 0 4px var(--color-primary-light); }
}

/* ============================================================
   证书卡片翻转 (CERTIFICATION CARD FLIP)
   3D 翻转效果
   ============================================================ */
.cert-card-flip {
  perspective: 800px;
}

.cert-card-flip .cert-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s var(--ease-smooth);
  transform-style: preserve-3d;
}

/* 悬停时翻转 180 度 */
.cert-card-flip:hover .cert-card-inner {
  transform: rotateY(180deg);
}

.cert-card-front,
.cert-card-back {
  backface-visibility: hidden;         /* 隐藏背面 */
  border-radius: var(--card-radius);
}

.cert-card-front {
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

/* 背面：深色渐变 + 白色文字 */
.cert-card-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-dark));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  transform: rotateY(180deg);          /* 初始翻转 */
}

.cert-card-back h4 {
  color: #fff;
  margin-bottom: 0.5rem;
}

.cert-card-back p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
}

/* ============================================================
   横幅粒子 Canvas (BANNER PARTICLES)
   页面横幅上的粒子动画画布
   ============================================================ */
.particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ============================================================
   彩色纸屑 (CONFETTI)
   提交成功后飘落的庆祝效果
   ============================================================ */
.confetti-piece {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  animation: confettiFall 1.5s ease-out forwards;
}

@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg) scale(0); opacity: 0; }
}

/* ============================================================
   WHATSAPP 脉冲 (WHATSAPP PULSE)
   ============================================================ */
.btn-whatsapp.pulse-whatsapp {
  animation: whatsappPulse 2.5s ease-in-out infinite;
}

@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
}

/* ============================================================
   按钮加载旋转器 (BUTTON LOADING SPINNER)
   ============================================================ */
.btn-loading {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-loading .spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinnerRotate 0.6s linear infinite;
}

@keyframes spinnerRotate {
  to { transform: rotate(360deg); }
}

/* ============================================================
   浮动动画 (FLOAT ANIMATION)
   元素缓慢上下浮动
   ============================================================ */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

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

.float-delayed {
  animation: float 5s ease-in-out 1.5s infinite;
}

/* ============================================================
   发光脉冲 (GLOW PULSE)
   ============================================================ */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 102, 204, 0.2); }
  50% { box-shadow: 0 0 20px rgba(0, 102, 204, 0.4); }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ── CTA 按钮悬停脉冲 ── */
.pulse-on-hover:hover {
  animation: ctaPulse 1.5s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,85,238,0.4); }
  50% { box-shadow: 0 0 0 16px rgba(0,85,238,0); }
}

/* ── 扩展首屏入场到 8 个子元素 ── */
.enter-stagger > *:nth-child(7) { animation-delay: 0.9s; }
.enter-stagger > *:nth-child(8) { animation-delay: 1.0s; }

/* ── 区块入场动画（首屏以下的区块）── */
.section.animate-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.section.animate-in.section-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   渐变位移动画 (GRADIENT SHIFT)
   用于页面横幅和 CTA 按钮的背景动效
   ============================================================ */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

/* ============================================================
   抖动效果 (SHAKE) — 表单验证错误
   ============================================================ */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.5s ease;
}

/* ============================================================
   成功对勾动画 (SUCCESS CHECKMARK)
   SVG 描边绘制动画
   ============================================================ */
.success-checkmark {
  animation: checkDraw 0.6s var(--ease-smooth) forwards;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}

@keyframes checkDraw {
  to { stroke-dashoffset: 0; }
}

/* ============================================================
   导航链接悬停动画 (NAV LINK BOUNCE)
   ============================================================ */
.header-nav a {
  transition: transform 0.2s var(--ease-spring);
}

.header-nav a:hover {
  transform: translateY(-2px);
}

/* ============================================================
   语言切换器悬停 (LANG SWITCH HOVER)
   ============================================================ */
.lang-switch a {
  transition: transform 0.2s var(--ease-spring),
              background-color var(--transition-fast);
}

.lang-switch a:hover {
  transform: scale(1.08);
}

/* ============================================================
   LOGO 悬停效果 (LOGO HOVER)
   ============================================================ */
.header-logo {
  transition: transform 0.3s var(--ease-spring);
}

.header-logo:hover {
  transform: scale(1.03);
}

/* ============================================================
   页脚链接悬停 (FOOTER LINK HOVER)
   ============================================================ */
.footer-col a {
  transition: color var(--transition-fast),
              transform 0.2s var(--ease-spring),
              padding-left 0.2s ease;
}

.footer-col a:hover {
  transform: translateX(4px);
}

/* ============================================================
   统计卡片悬停 (CARD STAT HOVER)
   ============================================================ */
.stat-card {
  transition: transform 0.3s var(--ease-spring);
}

.stat-card:hover {
  transform: translateY(-6px);
}

.stat-card:hover .stat-number {
  animation: counterBounce 0.4s var(--ease-bounce);
}

/* ============================================================
   HERO 轮播增强 (HERO CAROUSEL ENHANCED)
   ============================================================ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
}

/* 每张幻灯片绝对定位，默认透明+微缩放 */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1s ease, transform 1.2s ease;
  display: flex;
  align-items: center;
}

/* 当前激活的幻灯片 */
.hero-slide.active {
  opacity: 1;
  transform: scale(1);
}

.hero-slide .hero-bg {
  position: absolute;
  inset: 0;
}

.hero-slide .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 深色叠加层（保护文字可读性） */
.hero-slide .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(15, 26, 46, 0.78) 0%,
    rgba(15, 26, 46, 0.4) 50%,
    rgba(0, 102, 204, 0.2) 100%
  );
}

/* Hero 内容定位 */
.hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  max-width: 700px;
}

.hero-content h2 {
  font-size: clamp(2rem, 6vw, 3.75rem);
  margin-bottom: 1rem;
  line-height: 1.15;
}

.hero-content p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  opacity: 0.9;
  margin-bottom: 2rem;
}

/* ── Hero 指示圆点 ── */
.hero-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.75rem;
  z-index: 2;
}

.hero-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
}

.hero-dot.active {
  background: #fff;
  border-color: #fff;
  transform: scale(1.3);
}

.hero-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

/* ── Hero 左右箭头 ── */
.hero-arrows {
  position: absolute;
  top: 50%;
  left: 2rem;
  right: 2rem;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;               /* 容器不拦截事件 */
}

.hero-arrow {
  pointer-events: auto;               /* 箭头可点击 */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s var(--ease-spring);
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.hero-arrow svg {
  width: 24px;
  height: 24px;
}

/* ============================================================
   统计数据栏 (STATS SECTION)
   ============================================================ */
.stats-bar {
  background: var(--color-surface);
  padding: 3rem 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 2;
}

/* ============================================================
   区块背景色变体 (SECTION BACKGROUNDS)
   ============================================================ */
.section-white { background: var(--color-surface); }
.section-gray  { background: var(--color-bg); }
.section-dark  { background: var(--color-dark); color: #fff; }

/* ============================================================
   倾斜装饰 (SKEW / DECORATIVE)
   ============================================================ */
.section-skew {
  position: relative;
}

.section-skew::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--color-bg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);
}

/* ============================================================
   滚动触发高亮条 (SCROLL-TRIGGERED HIGHLIGHT BAR)
   ============================================================ */
@keyframes highlightBar {
  0% { width: 0; left: 0; }
  50% { width: 100%; left: 0; }
  100% { width: 0; left: 100%; }
}

/* ============================================================
   KEN BURNS 效果 — Hero 背景缓慢电影级缩放
   ============================================================ */
@keyframes kenBurns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.hero-slide.active .hero-bg img {
  animation: kenBurns 8s ease-out forwards;
}

/* ============================================================
   渐变位移动画（用于按钮等背景）(GRADIENT SHIFT)
   ============================================================ */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================================
   更多滚动显示变体 (NEW SCROLL REVEAL VARIANTS)
   ============================================================ */

/* 模糊显示：元素从模糊变为清晰 */
.reveal-blur {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(8px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1),
              transform 0.8s cubic-bezier(0.16,1,0.3,1),
              filter 0.8s cubic-bezier(0.16,1,0.3,1);
}

.reveal-blur.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 3D 翻转显示 */
.reveal-rotate {
  opacity: 0;
  transform: perspective(800px) rotateX(12deg) translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.reveal-rotate.visible {
  opacity: 1;
  transform: perspective(800px) rotateX(0) translateY(0);
}

/* 裁剪擦除显示（从下往上揭示） */
.reveal-clip {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition: opacity 0.3s ease,
              clip-path 0.8s cubic-bezier(0.16,1,0.3,1);
}

.reveal-clip.visible {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   浮动动画变体 (FLOATING ANIMATIONS)
   ============================================================ */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }    /* 慢速大振幅 */
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }     /* 中速中振幅 */
}

@keyframes borderGlow {
  0%, 100% { border-color: var(--color-border); }
  50% { border-color: rgba(0,85,238,0.3); }
}

/* ============================================================
   HERO 文字入场动画 — 电影级收紧字间距
   ============================================================ */
.hero-slide.active .hero-content h2 {
  animation: heroTextIn 0.8s 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes heroTextIn {
  0% { opacity: 0; transform: translateY(30px); letter-spacing: 0.04em; }
  100% { opacity: 1; transform: translateY(0); letter-spacing: -0.02em; }
}

/* ============================================================
   电影级动画套件 (CINEMATIC ANIMATION SUITE)
   一套完整的微交互动画工具类
   ============================================================ */

/* ── 闪光/骨架加载 ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg,
    var(--color-border-light) 25%,
    var(--color-surface) 37%,
    var(--color-border-light) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

/* ── 脉冲光环 ── */
@keyframes pulseRing {
  0% { box-shadow: 0 0 0 0 rgba(0,85,238,0.4); }
  70% { box-shadow: 0 0 0 18px rgba(0,85,238,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,85,238,0); }
}

.animate-pulse-ring {
  animation: pulseRing 2.2s ease-out infinite;
}

/* ── 弹入动画 ── */
@keyframes bounceIn {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.08); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

.animate-bounce-in {
  animation: bounceIn 0.7s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── 摆动（吸引注意力）── */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

.animate-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

.animate-wiggle-infinite {
  animation: wiggle 0.5s ease-in-out infinite;
  animation-delay: 3s;
}

/* ── 心跳 ── */
@keyframes heartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.15); }
  28% { transform: scale(1); }
  42% { transform: scale(1.12); }
  56% { transform: scale(1); }
}

.animate-heartbeat {
  animation: heartbeat 1.8s ease-in-out infinite;
}

/* ── 果冻抖动 ── */
@keyframes jello {
  0%, 100% { transform: skewX(0) skewY(0); }
  12.5% { transform: skewX(-2deg) skewY(-1deg); }
  25% { transform: skewX(1.5deg) skewY(0.5deg); }
  37.5% { transform: skewX(-1deg) skewY(-0.5deg); }
  50% { transform: skewX(0.5deg) skewY(0); }
  62.5% { transform: skewX(0); }
}

.animate-jello {
  animation: jello 0.8s ease both;
}

/* ── 钟摆 ── */
@keyframes swing {
  20% { transform: rotate(8deg); }
  40% { transform: rotate(-6deg); }
  60% { transform: rotate(3deg); }
  80% { transform: rotate(-2deg); }
  100% { transform: rotate(0); }
}

.animate-swing {
  transform-origin: top center;
  animation: swing 0.8s ease both;
}

/* ── 闪烁 ── */
@keyframes flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

.animate-flash {
  animation: flash 1.5s ease-in-out 2;
}

/* ── 上滑淡入 ── */
@keyframes slideUpFade {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  animation: slideUpFade 0.6s cubic-bezier(0.16,1,0.3,1) both;
}

/* ── 从右侧滑入 ── */
@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── 缩放弹出 ── */
@keyframes scalePop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.animate-scale-pop {
  animation: scalePop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ── 慢速旋转（装饰用）── */
@keyframes rotateSlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

/* ── 快速旋转（加载器用）── */
.animate-spin {
  animation: spinnerRotate 0.8s linear infinite;
}

/* ============================================================
   滚动指示器 (SCROLL-DOWN INDICATOR)
   Hero 区域底部的"向下滚动"提示
   ============================================================ */
@keyframes scrollDown {
  0% { opacity: 1; transform: translateY(0); }
  75% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 0; transform: translateY(16px); }
}

.scroll-indicator {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.scroll-indicator span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
}

/* 鼠标外形 */
.scroll-indicator .scroll-mouse {
  width: 26px;
  height: 40px;
  border: 2px solid rgba(255,255,255,0.5);
  border-radius: 14px;
  position: relative;
}

/* 滚轮圆点（上下移动） */
.scroll-indicator .scroll-dot {
  width: 5px;
  height: 5px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollDown 1.8s ease-in-out infinite;
}

/* ============================================================
   浮动装饰元素 (FLOATING DECORATIVE ELEMENTS)
   半透明光球，用于背景装饰
   ============================================================ */
.float-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.float-orb--1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(0,85,238,0.08) 0%, transparent 70%);
  animation: float-slow 8s ease-in-out infinite;
}

.float-orb--2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(0,200,150,0.07) 0%, transparent 70%);
  animation: float-slow 6s ease-in-out 2s infinite;
}

.float-orb--3 {
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
  animation: float-medium 5s ease-in-out 1s infinite;
}

/* ============================================================
   区块波浪分隔 (SECTION WAVE DIVIDER)
   ============================================================ */
.section-wave {
  position: relative;
}

.section-wave::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: var(--color-bg);
  clip-path: ellipse(55% 100% at 50% 100%);  /* 椭圆裁剪 */
  transform: translateY(50%);
  z-index: 1;
}

/* 反向波浪（顶部） */
.section-wave-reverse::after {
  clip-path: ellipse(55% 100% at 50% 0%);
  top: 0; bottom: auto;
  transform: translateY(-50%);
}

/* ============================================================
   悬停发光轨迹 (HOVER GLOW TRAIL) — 卡片用
   ============================================================ */
.glow-on-hover {
  position: relative;
  overflow: hidden;
}

.glow-on-hover::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-primary));
  background-size: 300% 300%;
  animation: gradientShift 4s ease infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.glow-on-hover:hover::before {
  opacity: 1;                          /* 悬停时显示发光边框 */
}

/* ============================================================
   交错卡片入场（扩展至 20 个子元素）
   ============================================================ */
.stagger-20 > *:nth-child(1)  { animation-delay: 0ms; }
.stagger-20 > *:nth-child(2)  { animation-delay: 50ms; }
.stagger-20 > *:nth-child(3)  { animation-delay: 100ms; }
.stagger-20 > *:nth-child(4)  { animation-delay: 150ms; }
.stagger-20 > *:nth-child(5)  { animation-delay: 200ms; }
.stagger-20 > *:nth-child(6)  { animation-delay: 250ms; }
.stagger-20 > *:nth-child(7)  { animation-delay: 300ms; }
.stagger-20 > *:nth-child(8)  { animation-delay: 350ms; }
.stagger-20 > *:nth-child(9)  { animation-delay: 400ms; }
.stagger-20 > *:nth-child(10) { animation-delay: 450ms; }
.stagger-20 > *:nth-child(11) { animation-delay: 500ms; }
.stagger-20 > *:nth-child(12) { animation-delay: 550ms; }
.stagger-20 > *:nth-child(13) { animation-delay: 600ms; }
.stagger-20 > *:nth-child(14) { animation-delay: 650ms; }
.stagger-20 > *:nth-child(15) { animation-delay: 700ms; }
.stagger-20 > *:nth-child(16) { animation-delay: 750ms; }
.stagger-20 > *:nth-child(17) { animation-delay: 800ms; }
.stagger-20 > *:nth-child(18) { animation-delay: 850ms; }
.stagger-20 > *:nth-child(19) { animation-delay: 900ms; }
.stagger-20 > *:nth-child(20) { animation-delay: 950ms; }

/* ============================================================
   文字逐字显示 (TEXT REVEAL) — 标题用
   每个字符依次从下方滑入
   ============================================================ */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: textRevealChar 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}

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

/* ============================================================
   骨架卡片 (SKELETON CARD PATTERN)
   内容加载中的占位动画
   ============================================================ */
@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-bg-alt) 25%, #E8ECF2 50%, var(--color-bg-alt) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ============================================================
   闪烁圆点 (BLINKING DOT) — 在线状态指示
   ============================================================ */
@keyframes blinkDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.blink-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  animation: blinkDot 1.5s ease-in-out infinite;
}

/* ============================================================
   绘制圆形 (DRAW CIRCLE) — SVG 轮廓动画
   ============================================================ */
@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}

.draw-circle {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawCircle 2s ease forwards;
}

/* ============================================================
   数字翻牌动画 (NUMBER TICKER FLIP)
   ============================================================ */
@keyframes tickerFlip {
  0% { transform: rotateX(90deg); opacity: 0; }
  60% { transform: rotateX(-10deg); opacity: 1; }
  100% { transform: rotateX(0); opacity: 1; }
}

.ticker-flip {
  display: inline-block;
  animation: tickerFlip 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* ============================================================
   磁性悬停 (MAGNETIC HOVER) — 元素向光标微移
   ============================================================ */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}

/* ============================================================
   星光轨迹 (SPARKLE TRAIL) — CTA 按钮装饰
   ============================================================ */
@keyframes sparkle {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(1) rotate(180deg); opacity: 0; }
}

.sparkle {
  position: absolute;
  width: 6px; height: 6px;
  pointer-events: none;
  z-index: 5;
}

.sparkle::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--color-primary);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);  /* 星形裁剪 */
  animation: sparkle 0.8s ease-out forwards;
}

/* ============================================================
   故障文字效果 (GLITCH TEXT EFFECT)
   ============================================================ */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 2px); }
  100% { transform: translate(0); }
}

.glitch-text {
  position: relative;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);            /* 从 data-text 属性获取文字 */
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
}

/* 悬停时显示青色和品红色重影 */
.glitch-text:hover::before {
  color: #0ff;
  animation: glitch 0.3s ease infinite;
  opacity: 0.7;
  z-index: -1;
}

.glitch-text:hover::after {
  color: #f0f;
  animation: glitch 0.3s ease 0.1s infinite reverse;
  opacity: 0.7;
  z-index: -2;
}

/* ============================================================
   悬停上浮 + 深度阴影 (HOVER LIFT WITH SHADOW DEPTH)
   ============================================================ */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.35s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* ============================================================
   滚动显示交错延迟（扩展至 20 个子元素）
   ============================================================ */
.reveal-stagger > *:nth-child(16) { transition-delay: 900ms; }
.reveal-stagger > *:nth-child(17) { transition-delay: 960ms; }
.reveal-stagger > *:nth-child(18) { transition-delay: 1020ms; }
.reveal-stagger > *:nth-child(19) { transition-delay: 1080ms; }
.reveal-stagger > *:nth-child(20) { transition-delay: 1140ms; }