/* ============================================================
   合因科技 · 官网设计系统  —  动效层 (Animations)
   ============================================================ */

/* ---------- 关键帧 ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatY-slow { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes gradPan { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes spinSlow { to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { transform: scale(.85); opacity: .55; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes growBar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes blink { 0%,100%{ opacity:1;} 50%{ opacity:.25;} }
@keyframes arrowNudge { 0%,100% { transform: translateX(0); opacity: .75; } 50% { transform: translateX(4px); opacity: 1; } }
@keyframes auroraDrift { from { transform: translate(-6%, -4%) scale(1); } to { transform: translate(6%, 5%) scale(1.15); } }

/* ---------- 滚动揭示 (IntersectionObserver 触发) ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-r { opacity: 0; transform: translateX(32px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }
.reveal-zoom { opacity: 0; transform: scale(.94); filter: blur(6px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), filter .7s var(--ease-out); }
.reveal-zoom.in { opacity: 1; transform: none; filter: none; }

/* 子元素逐个进场 */
.stagger > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1){ transition-delay: .04s; }
.stagger.in > *:nth-child(2){ transition-delay: .10s; }
.stagger.in > *:nth-child(3){ transition-delay: .16s; }
.stagger.in > *:nth-child(4){ transition-delay: .22s; }
.stagger.in > *:nth-child(5){ transition-delay: .28s; }
.stagger.in > *:nth-child(6){ transition-delay: .34s; }
.stagger.in > *:nth-child(7){ transition-delay: .40s; }
.stagger.in > *:nth-child(8){ transition-delay: .46s; }
.stagger.in > *:nth-child(9){ transition-delay: .52s; }

/* ---------- 进度条柱动画 ---------- */
.mk-bars span::after { transform-origin: bottom; }
.in .mk-bars span::after { animation: growBar .9s var(--ease-out) both; }
.in .mk-bars span:nth-child(2)::after{ animation-delay:.08s;}
.in .mk-bars span:nth-child(3)::after{ animation-delay:.16s;}
.in .mk-bars span:nth-child(4)::after{ animation-delay:.24s;}
.in .mk-bars span:nth-child(5)::after{ animation-delay:.32s;}
.in .mk-bars span:nth-child(6)::after{ animation-delay:.40s;}
.in .mk-bars span:nth-child(7)::after{ animation-delay:.48s;}

/* ---------- 进场首屏 ---------- */
.hero h1, .hero .lead, .hero-cta, .hero-meta { opacity: 0; animation: fadeUp .8s var(--ease-out) forwards; }
.hero h1 { animation-delay: .05s; }
.hero .lead { animation-delay: .18s; }
.hero-cta { animation-delay: .30s; }
.hero-meta { animation-delay: .42s; }
.hero-visual { opacity: 0; animation: fadeUp 1s var(--ease-out) .3s forwards; }
.hero .eyebrow { opacity: 0; animation: fadeIn .6s var(--ease-out) forwards; }

/* ---------- 光泽扫过 ---------- */
.sheen { position: relative; overflow: hidden; }
.sheen::after { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: var(--grad-sheen); transform: translateX(-150%); }
.sheen:hover::after { animation: shimmer 1.1s var(--ease); }

/* ---------- 脉冲点 ---------- */
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--c-mint); display: inline-block; }
.live-dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--c-mint); animation: pulseRing 1.8s var(--ease-out) infinite; }

/* ---------- 跑马灯 ---------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee 32s linear infinite; padding: 6px 0; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- 渐变文字呼吸 ---------- */
.grad-anim { background: linear-gradient(100deg, #1A6BFF, #18C6E6, #6E62F5, #1A6BFF); background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: gradPan 8s var(--ease-in-out) infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-l, .reveal-r, .reveal-zoom, .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; }
  .hero h1, .hero .lead, .hero-cta, .hero-meta, .hero-visual, .hero .eyebrow { opacity: 1 !important; animation: none !important; }
  .flow-arrow .icon, .flow-arrow [data-lucide], .cta-band::after, .btn--grad { animation: none !important; }
}