/* ============================================
   ScienBio 赛恩斯生物 - Dynamic Effects
   科技感 · 科研感 · 高级学术
   ============================================ */

/* === Canvas Particle Background === */
.particle-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero .particle-canvas { z-index: 0; }
.hero__inner { z-index: 2; position: relative; }
.hero__visual { z-index: 1; }

/* === Scan Line Effect (科研仪器扫描线) === */
.scan-line {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent 0%, rgba(45,142,237,0.5) 50%, transparent 100%);
  pointer-events: none; animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
  0% { top: 0; opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* === Animated DNA Helix === */
.dna-helix {
  position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
  width: 340px; height: 440px; z-index: 1; pointer-events: none;
  opacity: 0.35;
}
.dna-helix svg { width: 100%; height: 100%; }
.dna-strand-a { animation: dnaRotateA 8s linear infinite; transform-origin: center; }
.dna-strand-b { animation: dnaRotateB 8s linear infinite; transform-origin: center; }
@keyframes dnaRotateA {
  0% { transform: perspective(600px) rotateY(0deg); }
  100% { transform: perspective(600px) rotateY(360deg); }
}
@keyframes dnaRotateB {
  0% { transform: perspective(600px) rotateY(180deg); }
  100% { transform: perspective(600px) rotateY(540deg); }
}
.dna-node { animation: dnaPulse 3s ease-in-out infinite; transform-origin: center; }
@keyframes dnaPulse {
  0%, 100% { opacity: 0.4; r: 3; }
  50% { opacity: 1; r: 5; }
}
.dna-bond { animation: bondPulse 4s ease-in-out infinite; }
@keyframes bondPulse {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.6; }
}

/* === Data Flow Particles (数据流粒子) === */
.data-flow {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.data-particle {
  position: absolute; width: 3px; height: 3px;
  border-radius: 50%; background: rgba(34, 211, 238, 0.6);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.4);
  animation: dataStream linear infinite;
}
@keyframes dataStream {
  0% { transform: translateY(100vh) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-20px) translateX(20px); opacity: 0; }
}

/* === Scroll Reveal === */
.reveal {
  opacity: 0; transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal[data-reveal="left"] { transform: translateX(-40px); }
.reveal[data-reveal="left"].revealed { transform: translateX(0); }
.reveal[data-reveal="right"] { transform: translateX(40px); }
.reveal[data-reveal="right"].revealed { transform: translateX(0); }
.reveal[data-reveal="scale"] { transform: scale(0.9); }
.reveal[data-reveal="scale"].revealed { transform: scale(1); }
.reveal[data-reveal="flip"] { transform: perspective(800px) rotateX(-10deg); }
.reveal[data-reveal="flip"].revealed { transform: perspective(800px) rotateX(0); }

/* Staggered reveal delays */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* === Mouse Glow (鼠标跟随光晕) === */
.mouse-glow {
  position: fixed; width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,142,237,0.06) 0%, transparent 60%);
  pointer-events: none; z-index: 1; transform: translate(-50%, -50%);
  transition: opacity 0.3s ease; opacity: 0;
}
.mouse-glow.active { opacity: 1; }
.section--dark .mouse-glow,
.hero .mouse-glow,
.cta-section .mouse-glow,
.page-header .mouse-glow { opacity: 1; }

/* === Glow Border on Hover (卡片悬停发光边框) === */
.glow-border { position: relative; }
.glow-border::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; background: linear-gradient(135deg, transparent 30%, var(--cat-color, var(--brand)) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.glow-border:hover::after { opacity: 1; }

/* === Animated Gradient Mesh (动态渐变网格) === */
.gradient-mesh {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.gradient-mesh::before {
  content: ''; position: absolute; width: 600px; height: 600px;
  border-radius: 50%; filter: blur(60px);
  background: radial-gradient(circle, rgba(45,142,237,0.12) 0%, transparent 70%);
  animation: meshFloat 20s ease-in-out infinite;
}
.gradient-mesh::after {
  content: ''; position: absolute; right: -100px; bottom: -100px;
  width: 500px; height: 500px; border-radius: 50%; filter: blur(60px);
  background: radial-gradient(circle, rgba(0,184,169,0.08) 0%, transparent 70%);
  animation: meshFloat 25s ease-in-out infinite reverse;
}
@keyframes meshFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, -40px) scale(1.1); }
  66% { transform: translate(-40px, 60px) scale(0.95); }
}

/* === Typing Cursor === */
.typing-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--brand-light); margin-left: 2px;
  vertical-align: text-bottom; animation: cursorBlink 1s step-end infinite;
}
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* === Top Loading Bar (页面切换进度条) === */
.load-bar {
  position: fixed; top: 0; left: 0; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-light) 50%, var(--accent) 100%);
  width: 0; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(45,142,237,0.5);
}
.load-bar.loading { width: 100%; }

/* === Counter Rollup (数字滚动) === */
.counter-rollup {
  font-variant-numeric: tabular-nums;
}

/* === Workflow Step Progress (流程进度线动画) === */
.wf-step__progress {
  position: absolute; top: 24px; left: 50%; height: 2px;
  background: var(--brand); z-index: 0;
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.wf-step.revealed .wf-step__progress { transform: scaleX(1); }

/* === Card Hover Ripple (卡片点击波纹) === */
.ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3);
  transform: scale(0); animation: rippleEffect 0.6s ease-out;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* === Nav Link Active Indicator === */
.nav__link::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--brand);
  border-radius: 1px; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__link:hover::after,
.nav__link.active::after { width: 60%; }

/* === Glassmorphism Enhancement (毛玻璃增强) === */
.glass-card {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(34, 211, 238, 0.2);
  box-shadow: 0 8px 32px rgba(34, 211, 238, 0.08);
}

/* === Grid Background Pattern (科研网格背景) === */
.grid-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 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%);
}

/* === Pulsing Data Point (数据点脉冲) === */
.data-dot {
  position: relative; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brand-light);
  display: inline-block;
}
.data-dot::before {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--brand-light);
  animation: dataPulse 2s ease-out infinite;
}
@keyframes dataPulse {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* === Marquee Scroll (机构名称滚动) === */
.marquee-wrap {
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex; gap: 64px; animation: marqueeScroll 30s linear infinite;
  width: max-content;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* === Shimmer Loading === */
.shimmer {
  background: linear-gradient(90deg, var(--bg-muted) 25%, var(--border-light) 50%, var(--bg-muted) 75%);
  background-size: 200% 100%; animation: shimmerMove 1.5s infinite;
}
@keyframes shimmerMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* === Stat Card Hover Spark === */
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: ''; position: absolute; top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(45,142,237,0.04) 0%, transparent 50%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
.stat-card:hover::after { opacity: 1; }

/* === Tool Card Hover Lift Enhancement === */
.tool-card, .cat-card, .featured-card, .wf-card {
  will-change: transform;
}
.tool-card:hover .tool-card__icon,
.cat-card:hover .cat-card__icon,
.featured-card:hover .featured-card__icon {
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--cat-color, var(--brand)) 25%, transparent);
}

/* === Badge Glow === */
.badge-free, .badge-vip, .badge-provip {
  position: relative; overflow: hidden;
}
.badge-vip::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: badgeShine 3s infinite;
}
@keyframes badgeShine {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

/* === Section Header Underline Animation === */
.section-head h2 {
  position: relative; display: inline-block;
}
.section-head h2::after {
  content: ''; position: absolute; bottom: -8px; left: 50%;
  transform: translateX(-50%); width: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  border-radius: 2px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.section--dark .section-head h2::after {
  background: linear-gradient(90deg, var(--brand-light), var(--accent));
}
.section-head.revealed h2::after { width: 60px; }

/* === Hero Badge Shine === */
.hero__badge {
  position: relative; overflow: hidden;
}
.hero__badge::before {
  content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(45,142,237,0.2), transparent);
  animation: badgeSlide 4s ease-in-out infinite;
}
@keyframes badgeSlide {
  0%, 100% { left: -100%; }
  50% { left: 100%; }
}

/* === Floating Animation for Visual Elements === */
.float-anim { animation: floatGentle 6s ease-in-out infinite; }
@keyframes floatGentle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(2deg); }
}

/* === Oscilloscope Waveform (示波器波形) === */
.oscilloscope {
  position: absolute; bottom: 0; left: 0; right: 0; height: 120px;
  z-index: 0; pointer-events: none; opacity: 0.4;
}
.oscilloscope canvas { width: 100%; height: 100%; }

/* === Hexagonal Molecule Grid (六边形分子网格) === */
.hex-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  opacity: 0.5;
}
.hex-grid svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.hex-cell {
  fill: none; stroke: rgba(34, 211, 238, 0.06);
  stroke-width: 1; transition: stroke 0.4s ease;
}
.section--dark .hex-cell { stroke: rgba(34, 211, 238, 0.08); }
.hex-cell:hover { stroke: rgba(34, 211, 238, 0.3); }
@keyframes hexPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* === Card Light Sweep (卡片光扫) === */
.light-sweep {
  position: relative; overflow: hidden;
}
.light-sweep::before {
  content: ''; position: absolute; top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(45,142,237,0.08) 40%, rgba(45,142,237,0.12) 50%, rgba(45,142,237,0.08) 60%, transparent 100%);
  pointer-events: none; z-index: 1;
  transition: left 0s;
}
.light-sweep:hover::before {
  animation: sweepMove 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes sweepMove {
  0% { left: -150%; }
  100% { left: 150%; }
}

/* === SVG Path Draw Animation (路径绘制动画) === */
.path-draw {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: pathDraw 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes pathDraw {
  to { stroke-dashoffset: 0; }
}

/* === Live Data Ring (实时数据脉冲环) === */
.data-ring {
  position: absolute; border-radius: 50%;
  border: 2px solid var(--brand-light);
  animation: dataRing 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes dataRing {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* === Noise Texture Overlay (噪点纹理) === */
.noise-overlay {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
}

/* === Holographic Shimmer (全息微光) === */
.holo-shimmer {
  position: relative; overflow: hidden;
}
.holo-shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 25%, rgba(45,142,237,0.05) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: holoShimmer 4s linear infinite;
  pointer-events: none;
}
@keyframes holoShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Animated Data Flow SVG (数据流SVG) === */
.flow-svg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.flow-path {
  fill: none; stroke-width: 1.5;
  stroke-dasharray: 8 4;
  animation: flowDash 3s linear infinite;
}
@keyframes flowDash {
  to { stroke-dashoffset: -24; }
}

/* === Molecule Orbital Rings (分子轨道环) === */
.molecule-orbit {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 380px; height: 380px;
  z-index: 1; pointer-events: none;
  opacity: 0.2;
}
.orbit-ring {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%; border: 1px solid rgba(34, 211, 238, 0.15);
  transform: translate(-50%, -50%);
}
.orbit-ring:nth-child(1) { width: 200px; height: 200px; animation: orbitSpin 20s linear infinite; }
.orbit-ring:nth-child(2) { width: 280px; height: 280px; animation: orbitSpin 30s linear infinite reverse; }
.orbit-ring:nth-child(3) { width: 360px; height: 360px; animation: orbitSpin 40s linear infinite; }
.orbit-ring::before {
  content: ''; position: absolute; top: -3px; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-light); box-shadow: 0 0 10px var(--brand-light);
  transform: translateX(-50%);
}
.orbit-ring:nth-child(2)::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.orbit-ring:nth-child(3)::before { background: var(--brand-light); box-shadow: 0 0 8px var(--brand-light); }
@keyframes orbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* === Section Transition Gradient (段落过渡) === */
.section-transition {
  position: relative;
}
.section-transition::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-light), transparent);
  opacity: 0.3; z-index: 1;
}

/* === Typing Terminal Effect (终端打字) === */
.terminal-line {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; color: var(--brand-light);
  opacity: 0.4; white-space: nowrap;
  animation: terminalFlicker 4s ease-in-out infinite;
}
@keyframes terminalFlicker {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.45; }
}

/* === Glassmorphism Panel Enhancement === */
.glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 8px 32px rgba(0, 0, 0, 0.2);
}

/* === Progress Bar Fill (进度条填充动画) === */
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  border-radius: inherit;
  position: relative; overflow: hidden;
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-fill.active { transform: scaleX(1); }
.progress-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: progressShine 2s linear infinite;
}
@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* === Glowing Dot Trail (光点轨迹) === */
.dot-trail {
  position: absolute; pointer-events: none;
}
.dot-trail span {
  position: absolute; width: 4px; height: 4px;
  border-radius: 50%; background: var(--brand-light);
  opacity: 0; animation: trailFade 1.5s ease-out forwards;
}
@keyframes trailFade {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3) translateX(20px); }
}

/* === Enhanced Hero Badge === */
.hero__badge {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.15),
              0 4px 12px rgba(34, 211, 238, 0.1);
}
.hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-light); display: inline-block;
  box-shadow: 0 0 8px var(--brand-light);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 8px var(--brand-light); }
  50% { box-shadow: 0 0 16px var(--brand-light), 0 0 4px var(--brand-light); }
}

/* === Section Dark Border Top === */
.section--dark {
  border-top: 1px solid rgba(34, 211, 238, 0.08);
}

/* === Feature Card Scientific Accent === */
.feature-card {
  position: relative;
}
.feature-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-light), transparent);
  opacity: 0; transition: opacity 0.4s ease;
}
.feature-card:hover::before { opacity: 0.6; }

/* === Stat Counter Scientific Format === */
.stat-card__val {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

/* === CTA Section Glow === */
.cta-section {
  position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,142,237,0.06) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  animation: ctaPulse 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

/* === Page Header Gradient Line === */
.page-header {
  position: relative;
}
.page-header::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-light), transparent);
  opacity: 0.15;
}

/* === Footer Glow Line === */
.footer {
  border-top: 1px solid rgba(34, 211, 238, 0.08);
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .particle-canvas, .data-flow, .scan-line, .gradient-mesh,
  .oscilloscope, .hex-grid, .molecule-orbit, .noise-overlay,
  .flow-svg, .light-sweep::before, .holo-shimmer::after { display: none !important; }
}