/* ═══════════════════════════════════════════════════════════
   PREMIUM SITE CONCEPT — Gradient Mesh Background
   Pure CSS animated gradient mesh. No JavaScript required.
   
   Usage: Add class "bg-gradient-mesh" to any section.
   Colors are driven by CSS custom properties from the 
   design system, so it automatically matches brand colors.
   ═══════════════════════════════════════════════════════════ */

.bg-gradient-mesh {
  position: relative;
  overflow: hidden;
}

.bg-gradient-mesh::before {
  content: '';
  position: absolute;
  inset: -50%;
  z-index: 0;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 20% 50%, var(--accent, #3f93b8) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, var(--primary, #21405d) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 80%, var(--accent, #3f93b8) 0%, transparent 40%),
    radial-gradient(ellipse at 70% 60%, var(--primary, #21405d) 0%, transparent 45%);
  opacity: 0.12;
  animation: meshMove 20s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Ensure content stays above the gradient */
.bg-gradient-mesh > * {
  position: relative;
  z-index: 1;
}

@keyframes meshMove {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
  }
  25% {
    transform: translate(-5%, 3%) rotate(1deg);
  }
  50% {
    transform: translate(3%, -5%) rotate(-1deg);
  }
  75% {
    transform: translate(-3%, 2%) rotate(0.5deg);
  }
  100% {
    transform: translate(5%, -3%) rotate(-0.5deg);
  }
}

/* ── Variant: Higher opacity for dark sections ────────────── */
.section--dark .bg-gradient-mesh::before,
.bg-gradient-mesh--vivid::before {
  opacity: 0.2;
}

/* ── Variant: Warm mesh (for editorial/warm templates) ───── */
.bg-gradient-mesh--warm::before {
  background:
    radial-gradient(ellipse at 25% 40%, var(--accent, #b8956a) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 30%, var(--primary, #2a2520) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 75%, var(--accent, #b8956a) 0%, transparent 40%),
    radial-gradient(ellipse at 60% 50%, var(--primary, #2a2520) 0%, transparent 45%);
}

/* ── Variant: Aurora (for nordic/cool templates) ─────────── */
.bg-gradient-mesh--aurora::before {
  background:
    radial-gradient(ellipse at 30% 30%, #4facfe 0%, transparent 50%),
    radial-gradient(ellipse at 70% 40%, #00f2fe 0%, transparent 50%),
    radial-gradient(ellipse at 50% 70%, #43e97b 0%, transparent 40%),
    radial-gradient(ellipse at 80% 80%, #4facfe 0%, transparent 45%);
  animation: meshMove 25s ease-in-out infinite alternate;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bg-gradient-mesh::before {
    animation: none;
  }
}