/* ===========================================
 * Gradient Mesh Animation System
 * ===========================================
 * Animated gradient mesh backgrounds with configurable colors.
 * Uses GPU-accelerated properties (background-position only).
 * Respects prefers-reduced-motion for accessibility.
 *
 * Usage:
 *   <div class="gradient-mesh gradient-mesh--blue">
 *     Content here
 *   </div>
 *
 * Color themes:
 *   gradient-mesh--blue    (Primary blue palette)
 *   gradient-mesh--green   (Success green palette)
 *   gradient-mesh--purple  (Premium purple palette)
 *   gradient-mesh--gold    (Warm gold palette)
 *   gradient-mesh--navy    (Dark navy palette)
 *   gradient-mesh--neutral (Subtle gray palette)
 *
 * Full-stack by Optymizer | https://optymizer.com
 */

/* CSS Custom Properties for gradient mesh colors */
:root {
  --mesh-color-1: var(--color-primary-50, #EBF5FF);
  --mesh-color-2: var(--color-primary-100, #CCE5FF);
  --mesh-color-3: var(--color-primary-200, #99CCFF);
  --mesh-stop-1: 0%;
  --mesh-stop-2: 50%;
  --mesh-stop-3: 100%;
}

/* ===========================================
 * Base gradient mesh
 * ===========================================*/

.gradient-mesh {
  background:
    radial-gradient(
      ellipse at 20% 50%,
      var(--mesh-color-1) var(--mesh-stop-1),
      transparent var(--mesh-stop-2)
    ),
    radial-gradient(
      ellipse at 80% 20%,
      var(--mesh-color-2) var(--mesh-stop-1),
      transparent var(--mesh-stop-2)
    ),
    radial-gradient(
      ellipse at 60% 80%,
      var(--mesh-color-3) var(--mesh-stop-1),
      transparent var(--mesh-stop-3)
    ),
    linear-gradient(
      135deg,
      var(--mesh-color-1) 0%,
      var(--mesh-color-2) 50%,
      var(--mesh-color-3) 100%
    );
  background-size: 200% 200%;
  animation: gradient-mesh-shift 15s var(--ease-smooth, ease) infinite;
  will-change: background-position;
}

/* ===========================================
 * Gradient Mesh Keyframes
 * ===========================================*/

@keyframes gradient-mesh-shift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%;
  }
  33% {
    background-position: 50% 50%, 0% 50%, 100% 0%, 50% 0%;
  }
  66% {
    background-position: 100% 0%, 50% 100%, 0% 50%, 100% 50%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%;
  }
}

/* ===========================================
 * Color Themes
 * ===========================================*/

/* Blue (Primary) */
.gradient-mesh--blue {
  --mesh-color-1: #EBF5FF;
  --mesh-color-2: #CCE5FF;
  --mesh-color-3: #E0F0FF;
}

/* Green (Success) */
.gradient-mesh--green {
  --mesh-color-1: #ECFDF5;
  --mesh-color-2: #D1FAE5;
  --mesh-color-3: #E0FFF0;
}

/* Purple (Premium) */
.gradient-mesh--purple {
  --mesh-color-1: #F5F3FF;
  --mesh-color-2: #EDE9FE;
  --mesh-color-3: #F0EBFF;
}

/* Gold (Warm) */
.gradient-mesh--gold {
  --mesh-color-1: #FFFBEB;
  --mesh-color-2: #FEF3C7;
  --mesh-color-3: #FFF8E0;
}

/* Navy (Dark) */
.gradient-mesh--navy {
  --mesh-color-1: #0A2540;
  --mesh-color-2: #0D3356;
  --mesh-color-3: #112D4E;
}

/* Neutral (Subtle) */
.gradient-mesh--neutral {
  --mesh-color-1: #F9FAFB;
  --mesh-color-2: #F3F4F6;
  --mesh-color-3: #F5F6F8;
}

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

@media (prefers-reduced-motion: reduce) {
  .gradient-mesh {
    animation: none;
    will-change: auto;
    background-size: 100% 100%;
  }
}

/* ===========================================
 * LIGHT-MODE OVERRIDES (OPT-144)
 * :root is now light-default (OPT-143 convention flip).
 * Blue/green/purple/gold/neutral themes are already
 * light-colored and render fine on white backgrounds.
 *
 * Navy is the only problem: #0A2540 mesh on a white
 * canvas creates a jarring dark blob. Replace with
 * neutral light colors in light mode and restore in dark.
 * =========================================== */

/* Navy: replace dark colors with neutral light tones by default */
.gradient-mesh--navy {
  --mesh-color-1: #f0f4f8;
  --mesh-color-2: #e2e8f0;
  --mesh-color-3: #edf2f7;
}

/* Restore original dark navy mesh in dark mode */
html.dark .gradient-mesh--navy {
  --mesh-color-1: #0A2540;
  --mesh-color-2: #0D3356;
  --mesh-color-3: #112D4E;
}