/**
 * Landing Page Enhanced Visual Effects
 * Additional premium effects for the landing page
 */

/* ========================================
   Hero Section Enhancements
   ======================================== */

/* Enhanced Hero Background with Floating Orbs */
.hero-full {
  position: relative;
}

.hero-full::before {
  content: '';
  position: absolute;
  inset: 0;
  /* 克制：降低不透明度，让底层背景透出 */
  opacity: 0.8;
  background:
    radial-gradient(1200px 800px at 20% 30%, rgba(99, 102, 241, 0.07), transparent 60%),
    radial-gradient(1000px 700px at 80% 20%, rgba(168, 85, 247, 0.05), transparent 55%),
    radial-gradient(900px 600px at 60% 80%, rgba(236, 72, 153, 0.04), transparent 50%);
  pointer-events: none;
  z-index: -1;
  animation: heroBgPulse 12s ease-in-out infinite;
}

@keyframes heroBgPulse {
  0%, 100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.02);
  }
}

/* Floating Orbs - Premium Effect */
.hero-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.32;
  animation: heroOrbFloat var(--duration, 20s) ease-in-out infinite;
}

.hero-orb-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.28), transparent 68%);
  top: -12%;
  left: -5%;
  --duration: 25s;
}

.hero-orb-2 {
  width: 440px;
  height: 440px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.22), transparent 68%);
  top: 42%;
  right: -8%;
  --duration: 30s;
  animation-delay: -8s;
}

.hero-orb-3 {
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.18), transparent 68%);
  bottom: 12%;
  left: 18%;
  --duration: 22s;
  animation-delay: -15s;
}

@keyframes heroOrbFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -14px) scale(1.03);
  }
  66% {
    transform: translate(-14px, 12px) scale(0.98);
  }
}

/* Hero Content Enhanced */
.hero-content {
  position: relative;
  z-index: 3;
}

.hero-headline {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f8fafc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 80px rgba(99, 102, 241, 0.3);
  animation: headlineGlow 4s ease-in-out infinite;
}

@keyframes headlineGlow {
  0%, 100% {
    filter: drop-shadow(0 0 30px rgba(99, 102, 241, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 50px rgba(168, 85, 247, 0.4));
  }
}

/* Enhanced Upload Button */
.hero-upload {
  position: relative;
  background: linear-gradient(135deg, 
    rgba(15, 23, 42, 0.8) 0%, 
    rgba(15, 23, 42, 0.6) 100%
  );
  border: 2px dashed rgba(99, 102, 241, 0.3);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-upload::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
  background-size: 300% 100%;
  animation: borderRotate 4s linear infinite;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  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.3s ease;
}

.hero-upload:hover::before {
  opacity: 1;
}

.hero-upload:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 30px 60px rgba(99, 102, 241, 0.2),
    0 0 0 1px rgba(99, 102, 241, 0.1);
}

@keyframes borderRotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Upload Icon Animation */
.upload-icon {
  animation: uploadIconFloat 3s ease-in-out infinite;
}

@keyframes uploadIconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* ========================================
   Feature Cards Enhanced
   ======================================== */

.features-section .feature-card {
  position: relative;
  overflow: visible; /* 光效可溢出，避免 hover 时被裁切割裂 */
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.features-section .feature-card::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.features-section .feature-card:hover::before {
  opacity: 1;
}

.features-section .feature-card:hover {
  transform: translateY(-8px) perspective(1000px) rotateX(2deg);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.2),
    0 0 40px rgba(99, 102, 241, 0.1);
}

.feature-icon {
  position: relative;
  transition: all 0.3s ease;
}

.feature-icon::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-card:hover .feature-icon::after {
  opacity: 1;
}

/* Highlight Card Special Effect */
.feature-card-highlight {
  position: relative;
}

.feature-card-highlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    rgba(129, 140, 248, 0.1) 0%, 
    transparent 50%,
    rgba(168, 85, 247, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.feature-card-highlight:hover::after {
  opacity: 1;
}

/* ========================================
   Stats Section Enhanced
   ======================================== */

.stat-item {
  position: relative;
  overflow: hidden;
}

.stat-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, #a855f7, transparent);
  animation: statLineSweep 3s ease-in-out infinite;
}

@keyframes statLineSweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.stat-number {
  animation: statNumberPulse 2s ease-in-out infinite;
}

@keyframes statNumberPulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.4));
  }
}

/* ========================================
   CTA Section Enhanced
   ======================================== */

.cta-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  background-size: 200% 200%;
  animation: ctaGradient 4s ease infinite;
}

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

.cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.cta-btn:hover::before {
  left: 100%;
}

.cta-btn:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 20px 50px rgba(99, 102, 241, 0.4),
    0 0 60px rgba(168, 85, 247, 0.2);
}

/* ========================================
   Compare Section Enhanced
   ======================================== */

.orbvop-compare-panel {
  position: relative;
}

.orbvop-compare-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.05) 0%, 
    transparent 50%
  );
  pointer-events: none;
}

.audio-card {
  position: relative;
  overflow: hidden;
}

.audio-card::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.audio-card:hover::before {
  opacity: 1;
}

/* Wave Bars Animation */
.wave-bar {
  animation: waveBar 1s ease-in-out infinite;
}

.wave-bar:nth-child(2) { animation-delay: 0.1s; }
.wave-bar:nth-child(3) { animation-delay: 0.2s; }
.wave-bar:nth-child(4) { animation-delay: 0.3s; }
.wave-bar:nth-child(5) { animation-delay: 0.4s; }
.wave-bar:nth-child(6) { animation-delay: 0.5s; }
.wave-bar:nth-child(7) { animation-delay: 0.6s; }

@keyframes waveBar {
  0%, 100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

/* ========================================
   Language Pills Enhanced
   ======================================== */

.orbvop-lang-pill {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.orbvop-lang-pill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.orbvop-lang-pill:hover::before {
  left: 100%;
}

.orbvop-lang-pill:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}

.orbvop-lang-pill.active {
  animation: activePillPulse 2s ease-in-out infinite;
}

@keyframes activePillPulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
  }
}

/* ========================================
   Trend Cards Enhanced
   ======================================== */

.trend-card {
  position: relative;
  overflow: hidden;
}

.trend-card::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.trend-card:hover::before {
  opacity: 1;
}

.trend-card:hover {
  transform: translateY(-6px) perspective(1000px) rotateX(1deg);
}

.trend-icon {
  transition: all 0.3s ease;
}

.trend-card:hover .trend-icon {
  transform: scale(1.15) rotate(10deg);
}

/* ========================================
   Success Cards Enhanced
   ======================================== */

.success-card {
  position: relative;
  overflow: hidden;
}

.success-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6366f1, #a855f7, transparent);
  animation: successLineSweep 3s ease-in-out infinite;
}

@keyframes successLineSweep {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.success-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* ========================================
   Growth Calculator Enhanced
   ======================================== */

.growth-calculator {
  position: relative;
}

.growth-calculator::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899, #6366f1);
  background-size: 300% 100%;
  animation: growthBorderRotate 5s linear infinite;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.32;
}

@keyframes growthBorderRotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.growth-result-value {
  animation: resultGlow 2s ease-in-out infinite;
}

@keyframes resultGlow {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 30px rgba(168, 85, 247, 0.5));
  }
}

/* ========================================
   Demo Section Enhanced
   ======================================== */

.video-screen {
  position: relative;
  overflow: hidden;
}

.video-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(99, 102, 241, 0.1) 0%, 
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 1;
}

.video-screen:hover::before {
  opacity: 1;
}

.play-btn-main {
  position: relative;
  overflow: hidden;
}

.play-btn-main::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-btn-main:hover::after {
  opacity: 1;
}

.play-btn-main:hover {
  transform: scale(1.15);
  box-shadow: 
    0 20px 40px rgba(99, 102, 241, 0.3),
    0 0 60px rgba(168, 85, 247, 0.2);
}

/* ========================================
   Scroll Hint Animation
   ======================================== */

.scroll-hint {
  animation: scrollHintBounce 2s ease-in-out infinite;
}

@keyframes scrollHintBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-50%) translateY(10px);
    opacity: 1;
  }
}

/* ========================================
   Section Transitions
   ======================================== */

.lp-section {
  position: relative;
  /* 独立 stacking context：与 landing.css 的 isolation: isolate 协作，
     锁住 ::before / ::after 上的 z-index: -1 装饰层到 section 背景之下，
     避免溢出后盖在卡片 / 文字之上 */
  isolation: isolate;
}

.lp-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(99, 102, 241, 0.3), 
    rgba(168, 85, 247, 0.3), 
    transparent
  );
  opacity: 0.5;
}

/* ========================================
   Aurora Background for Landing
   ======================================== */

.landing-page .app-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-page .app-ambient::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: 
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, 0.08), transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(168, 85, 247, 0.06), transparent 50%),
    radial-gradient(ellipse 70% 45% at 50% 80%, rgba(236, 72, 153, 0.04), transparent 50%);
  animation: landingAurora 20s ease-in-out infinite;
}

@keyframes landingAurora {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(2%, 2%) rotate(2deg);
  }
  66% {
    transform: translate(-1%, 3%) rotate(-1deg);
  }
}

/* ========================================
   Responsive Enhancements
   ======================================== */

@media (max-width: 768px) {
  .hero-headline {
    font-size: clamp(28px, 7vw, 42px);
  }
  
  .feature-card:hover,
  .trend-card:hover,
  .success-card:hover {
    transform: translateY(-4px);
  }
  
  .stat-item:hover {
    transform: translateY(-4px);
  }
}

/* ========================================
   Reduced Motion Support
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-full::before,
  .hero-headline,
  .hero-upload::before,
  .upload-icon,
  .stat-item::after,
  .stat-number,
  .cta-btn,
  .cta-btn::before,
  .wave-bar,
  .orbvop-lang-pill.active,
  .growth-calculator::before,
  .growth-result-value,
  .scroll-hint,
  .landing-page .app-ambient::before {
    animation: none !important;
  }
  
  .hero-upload:hover,
  .feature-card:hover,
  .trend-card:hover,
  .success-card:hover,
  .stat-item:hover,
  .cta-btn:hover {
    transform: none;
  }
}