/* ============================================================
   CloudEngine - 关键帧动效
   ============================================================ */

@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}

@keyframes float-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes glow-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes grid-flow {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, 40px); }
}

@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes scroll-indicator {
  0% { transform: translateY(0); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

/* —— 滚动触发基础类 —— */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: all 0.8s var(--ease-out); }
.reveal-left.in-view { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: all 0.8s var(--ease-out); }
.reveal-right.in-view { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: all 0.8s var(--ease-out); }
.reveal-scale.in-view { opacity: 1; transform: scale(1); }

/* —— 延迟工具 —— */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }

/* —— 动效工具类 —— */
.animate-float { animation: float-up 4s ease-in-out infinite; }
.animate-glow { animation: glow-breathe 4s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }
.animate-fade-in { animation: fade-in 1s var(--ease-out) both; }
.animate-fade-in-up { animation: fade-in-up 1s var(--ease-out) both; }
.animate-scale-in { animation: scale-in 0.8s var(--ease-out) both; }

/* —— 网格背景 —— */
.grid-bg {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
  background-image:
    linear-gradient(rgba(0, 212, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}

/* —— 光晕 —— */
.glow-orb {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
  animation: glow-breathe 6s ease-in-out infinite;
}
.glow-orb-1 { width: 400px; height: 400px; background: rgba(0, 102, 255, 0.3); top: -100px; left: -100px; }
.glow-orb-2 { width: 500px; height: 500px; background: rgba(124, 58, 237, 0.25); bottom: -150px; right: -150px; animation-delay: 2s; }
.glow-orb-3 { width: 300px; height: 300px; background: rgba(0, 212, 255, 0.2); top: 40%; right: 20%; animation-delay: 4s; }

/* —— 滚动指示 —— */
.scroll-indicator {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 44px; border: 2px solid var(--color-border-strong); border-radius: 14px;
  display: flex; justify-content: center;
}
.scroll-indicator::before {
  content: ''; width: 4px; height: 8px; border-radius: 2px; background: var(--color-accent);
  margin-top: 6px; animation: scroll-indicator 1.8s infinite;
}

/* —— 打字机光标 —— */
.typing-cursor { display: inline-block; width: 3px; height: 1em; background: var(--color-accent); margin-left: 4px; vertical-align: text-bottom; animation: blink 1s infinite; }

/* —— 数字滚动 —— */
.counter { display: inline-block; font-variant-numeric: tabular-nums; }

/* —— 3D 倾斜容器 —— */
.tilt-card { transform-style: preserve-3d; transition: transform 0.2s var(--ease-out); will-change: transform; }
.tilt-card-inner { transform: translateZ(40px); }

/* —— 加载占位 —— */
.skeleton { background: linear-gradient(90deg, var(--color-bg-card) 25%, var(--color-bg-card-hover) 50%, var(--color-bg-card) 75%); background-size: 200% 100%; animation: gradient-shift 1.5s infinite; border-radius: var(--radius-md); }

/* —— 减少动效偏好 —— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
}