/* ============================================================
   glow.css — 光感动效样式
   ============================================================ */

/* === 1. Cursor-following glow === */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
  background: radial-gradient(
    600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(139, 92, 246, 0.07),
    rgba(99, 102, 241, 0.03) 40%,
    transparent 70%
  );
  transition: opacity 0.3s;
}

/* Hide glow when not on home */
body:has(#home-view:not(.active)) .cursor-glow {
  opacity: 0;
}

/* === 2. Card spotlight hover === */
.card-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  background: radial-gradient(
    250px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(139, 92, 246, 0.12),
    transparent 70%
  );
}

/* Spotlight border glow on cards */
.feature-card,
.featured-card,
.example-card {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

.feature-card:hover,
.featured-card:hover,
.example-card:hover {
  border-color: rgba(139, 92, 246, 0.3) !important;
  box-shadow: 
    0 0 0 1px rgba(139, 92, 246, 0.1),
    0 8px 32px rgba(139, 92, 246, 0.1),
    inset 0 0 80px rgba(139, 92, 246, 0.03) !important;
}

/* === 3. Touch ripple (mobile) === */
.touch-ripple {
  position: fixed;
  width: 0; height: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
  animation: ripple-expand 0.8s ease-out forwards;
  transform: translate(-50%, -50%);
}

@keyframes ripple-expand {
  0% {
    width: 0; height: 0;
    opacity: 0.6;
  }
  100% {
    width: 300px; height: 300px;
    opacity: 0;
  }
}

/* === 4. Ambient orbs (hero section) === */
.ambient-orb {
  position: absolute;
  width: var(--orb-size, 200px);
  height: var(--orb-size, 200px);
  left: var(--orb-x, 50%);
  top: var(--orb-y, 50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0;
  background: hsla(var(--orb-color, 139, 92%, 63%), 0.15);
  animation: orb-float 12s ease-in-out infinite, orb-fade-in 2s ease forwards;
  animation-delay: var(--orb-delay, 0s), var(--orb-delay, 0s);
}

@keyframes orb-float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30px, -40px) scale(1.1);
  }
  50% {
    transform: translate(-20px, 20px) scale(0.9);
  }
  75% {
    transform: translate(40px, 30px) scale(1.05);
  }
}

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

/* === 5. Hero section glow enhancements === */
.hero-title .gradient-text {
  text-shadow: 0 0 40px rgba(139, 92, 246, 0.3), 0 0 80px rgba(99, 102, 241, 0.15);
}

.hero-badge {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.1), inset 0 0 20px rgba(139, 92, 246, 0.05);
}

/* === 6. Section title glow on scroll-in === */
.section-title {
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #8b5cf6, transparent);
  border-radius: 2px;
  opacity: 0.6;
}

/* === 7. CTA card glow === */
.cta-card {
  position: relative;
  overflow: hidden;
}

.cta-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(139, 92, 246, 0.06) 60deg,
    transparent 120deg,
    rgba(99, 102, 241, 0.04) 180deg,
    transparent 240deg,
    rgba(139, 92, 246, 0.06) 300deg,
    transparent 360deg
  );
  animation: cta-rotate 8s linear infinite;
  pointer-events: none;
}

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

/* === 8. Nav logo glow === */
.nav-logo .logo-icon {
  text-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
  transition: text-shadow 0.3s ease;
}

.nav-logo:hover .logo-icon {
  text-shadow: 0 0 20px rgba(139, 92, 246, 0.8), 0 0 40px rgba(139, 92, 246, 0.4);
}

/* === Mobile adjustments === */
@media (max-width: 768px) {
  .cursor-glow {
    background: radial-gradient(
      400px circle at var(--glow-x, 50%) var(--glow-y, 30%),
      rgba(139, 92, 246, 0.05),
      transparent 60%
    );
  }
  
  .ambient-orb {
    filter: blur(60px);
  }
}

/* === Reduce motion for accessibility === */
@media (prefers-reduced-motion: reduce) {
  .ambient-orb,
  .cta-card::before {
    animation: none;
  }
  .cursor-glow {
    display: none;
  }
}