/* ===================================================================
 * 济南合煦智能科技有限公司 — 动画系统
 * 文件：animations.css
 * 说明：滚动入场动画、悬停效果、页面过渡
 * =================================================================== */

/* ===================================================================
 * 1. 滚动入场动画（配合 IntersectionObserver）
 * =================================================================== */
/* --- 初始状态（不可见） --- */
[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: var(--duration-slower);
  transition-timing-function: var(--ease-out);
}

/* --- 可见状态 --- */
[data-animate].visible {
  opacity: 1;
  transform: none !important;
}

/* --- 各方向动画类型 --- */
[data-animate="fade-up"] {
  transform: translateY(30px);
}

[data-animate="fade-down"] {
  transform: translateY(-30px);
}

[data-animate="fade-left"] {
  transform: translateX(30px);
}

[data-animate="fade-right"] {
  transform: translateX(-30px);
}

[data-animate="fade-in"] {
  transform: scale(0.95);
}

[data-animate="zoom-in"] {
  transform: scale(0.8);
}

/* --- 延迟 --- */
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }

/* ===================================================================
 * 2. 粒子/网格背景
 * =================================================================== */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsla(0, 0%, 100%, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, hsla(0, 0%, 100%, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 20%, transparent 70%);
}

.bg-dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(hsla(0, 0%, 100%, 0.08) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent 70%);
}

/* ===================================================================
 * 3. 光效与发光
 * =================================================================== */
.glow-line {
  position: relative;
}

.glow-line::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    hsla(var(--primary-h), var(--primary-s), 60%, 0.5),
    hsla(var(--accent-h), var(--accent-s), 60%, 0.3),
    transparent);
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.glow-orb--primary {
  background: hsla(var(--primary-h), var(--primary-s), 50%, 0.12);
}

.glow-orb--accent {
  background: hsla(var(--accent-h), var(--accent-s), 50%, 0.08);
}

/* ===================================================================
 * 4. 文字效果
 * =================================================================== */
/* --- 渐变文字 --- */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient--warm {
  background: linear-gradient(135deg, var(--warm), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* --- 打字机效果 --- */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--primary);
  animation: typewriter-cursor 0.8s ease-in-out infinite;
}

@keyframes typewriter-cursor {
  0%, 100% { border-color: var(--primary); }
  50% { border-color: transparent; }
}

/* ===================================================================
 * 5. 数字递增动画（配合 JS）
 * =================================================================== */
.counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ===================================================================
 * 6. 通用 Hover 效果
 * =================================================================== */
.hover-lift {
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

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

.hover-scale {
  transition: transform var(--duration-base) var(--ease-out);
}

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

.hover-glow {
  transition: box-shadow var(--duration-base) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow-lg);
}

/* ===================================================================
 * 7. 页面加载过渡
 * =================================================================== */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-1);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-4);
  transition: opacity var(--duration-slow) var(--ease-out);
}

.page-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.page-loader__bar {
  width: 200px;
  height: 2px;
  background: var(--bg-4);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.page-loader__progress {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--radius-full);
  animation: loadProgress 1.5s ease-out forwards;
}

@keyframes loadProgress {
  0% { width: 0%; }
  60% { width: 70%; }
  100% { width: 100%; }
}

/* ===================================================================
 * 8. 无限滚动（合作伙伴 Logo 墙）
 * =================================================================== */
.marquee {
  overflow: hidden;
  position: relative;
}

.marquee::before,
.marquee::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
}

.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--bg-1), transparent);
}

.marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--bg-1), transparent);
}

.marquee__track {
  display: flex;
  gap: var(--space-6);
  animation: marqueeScroll 30s linear infinite;
  width: max-content;
}

.marquee__track:hover {
  animation-play-state: paused;
}

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

.marquee__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 84px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  opacity: 0.65;
  filter: grayscale(0.8) brightness(1.2);
  transition: all var(--duration-base) var(--ease-out);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.marquee__item img {
  max-width: 100%;
  max-height: 100%;
  height: 48px !important;
  width: auto !important;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease-out);
}

.marquee__item:hover {
  opacity: 1;
  filter: grayscale(0) brightness(1.3);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}

.marquee__item:hover img {
  transform: scale(1.06);
}

/* ===================================================================
 * 9. 减少动画偏好
 * =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-animate] {
    opacity: 1;
    transform: none !important;
  }
}

/* --- 呼吸闪烁动画 --- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}