/* ============================================================
   M2 — Hero pattern library (5 CSS-based patterns)
   public/css/hero-patterns.css — included after tokens.css
   The agent's `media.hero_pattern` maps to one of these classes.
   ============================================================ */

.hero-bg-gradient { background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%); }

.hero-bg-particles {
  background:
    radial-gradient(circle at 20% 30%, var(--accent-dim) 0%, transparent 25%),
    radial-gradient(circle at 80% 70%, var(--purple) 0%, transparent 25%),
    radial-gradient(circle at 50% 50%, var(--info-dim) 0%, transparent 35%),
    var(--bg-card);
}

.hero-bg-waves {
  background:
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 24px,
      var(--accent-dim) 24px, var(--accent-dim) 25px),
    var(--bg-card);
}

.hero-bg-grid {
  background-image:
    linear-gradient(var(--accent-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-dim) 1px, transparent 1px);
  background-size: 32px 32px;
  background-color: var(--bg-card);
}

.hero-bg-orbit {
  background:
    radial-gradient(circle at 70% 50%, transparent 0%, var(--bg-card) 60%),
    conic-gradient(from 0deg at 70% 50%,
      var(--accent-dim),
      transparent 30%,
      var(--purple) 60%,
      transparent 90%);
  background-color: var(--bg-card);
}

/* Inline pattern overlays (apply on top of .hero-band) */
.hero-band.pattern-particles::before {
  background-image:
    radial-gradient(circle at 20% 30%, var(--accent-dim) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, var(--purple) 0%, transparent 30%);
}
.hero-band.pattern-waves::before {
  background:
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 20px,
      var(--accent-dim) 20px, var(--accent-dim) 21px);
}
.hero-band.pattern-grid::before {
  background-image:
    linear-gradient(var(--accent-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-dim) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hero-band.pattern-orbit::before {
  background:
    radial-gradient(circle at 70% 50%, transparent 0%, var(--bg-card) 60%),
    conic-gradient(from 0deg at 70% 50%, var(--accent-dim), transparent 30%, var(--purple) 60%, transparent 90%);
}

/* Map media.hero_pattern string → class */
.hero-pattern-gradient  { /* default gradient — no extra class needed */ }
.hero-pattern-particles { /* applied via .pattern-particles on .hero-band */ }
.hero-pattern-waves     { /* applied via .pattern-waves on .hero-band */ }
.hero-pattern-grid      { /* applied via .pattern-grid on .hero-band */ }
.hero-pattern-orbit     { /* applied via .pattern-orbit on .hero-band */ }