/**
 * Hero Section with Animated Gradients
 * Theme-aware hero sections with product-specific gradients
 * Overrides existing hero-sections.css with theme variables
 */

/* Consolidated theme-based gradient backgrounds - single rule for all themes */
body[data-theme-id] .hero-section {
  background: radial-gradient(1200px 1200px at 30% 40%, var(--grad-1), var(--grad-2) 40%, var(--grad-3) 100%) !important;
  animation: themeHeroShift 10s ease-in-out infinite alternate !important;
}

/* Enhanced animation for theme gradients */
@keyframes themeHeroShift {
  0% {
    background: radial-gradient(1200px 1200px at 25% 35%, var(--grad-1), var(--grad-2) 40%, var(--grad-3) 100%);
  }
  50% {
    background: radial-gradient(1200px 1200px at 70% 60%, var(--grad-2), var(--grad-3) 45%, var(--grad-1) 100%);
  }
  100% {
    background: radial-gradient(1200px 1200px at 45% 20%, var(--grad-3), var(--grad-1) 40%, var(--grad-2) 100%);
  }
}

/* Accent text styling with fallback for accessibility */
.hero-section .accent,
.hero .accent {
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 2px 10px color-mix(in oklab, var(--accent) 45%, transparent) !important;
  
  /* Fallback for browsers that don't support background-clip: text */
  color: var(--accent-hero-text, var(--accent, #007bff)) !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  body[data-theme-id] .hero-section {
    animation: none !important;
    background: linear-gradient(135deg, var(--grad-1), var(--grad-2), var(--grad-3)) !important;
  }
}