/* AICoE theme-aware decorative background recipes. */
.aicoe-bg {
  --aicoe-bg-position-x: 50%;
  --aicoe-bg-position-y: 35%;
  --aicoe-bg-size: 100%;
  --aicoe-bg-radius: var(--radius-lg);
  --aicoe-bg-surface: var(--bg);
  --aicoe-bg-strength: 18%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--aicoe-bg-radius);
  background-color: var(--aicoe-bg-surface);
  background-repeat: no-repeat;
  background-size: var(--aicoe-bg-size);
  color: var(--text);
}

.aicoe-bg-subtle { --aicoe-bg-strength: 10%; }
.aicoe-bg-strong { --aicoe-bg-strength: 28%; }

.aicoe-bg-ambient {
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--accent) var(--aicoe-bg-strength), transparent) 0, transparent 46%),
    radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--info) var(--aicoe-bg-strength), transparent) 0, transparent 42%);
}

.aicoe-bg-brand-wash {
  background-image: linear-gradient(135deg, var(--accentSurface) 0%, var(--aicoe-bg-surface) 52%, var(--infoSurface) 100%);
}

.aicoe-bg-mesh {
  background-image:
    radial-gradient(circle at 15% 22%, color-mix(in srgb, var(--accent) var(--aicoe-bg-strength), transparent) 0, transparent 34%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--info) var(--aicoe-bg-strength), transparent) 0, transparent 36%),
    radial-gradient(circle at 62% 88%, color-mix(in srgb, var(--warning) var(--aicoe-bg-strength), transparent) 0, transparent 38%);
}

.aicoe-bg-spotlight {
  background-image: radial-gradient(circle at var(--aicoe-bg-position-x) var(--aicoe-bg-position-y), color-mix(in srgb, var(--accent) var(--aicoe-bg-strength), transparent) 0, transparent 48%);
}

.aicoe-bg-warm {
  background-image:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--warning) var(--aicoe-bg-strength), transparent) 0, transparent 46%),
    linear-gradient(145deg, var(--warningSurface), var(--aicoe-bg-surface) 66%);
}

.aicoe-bg-info {
  background-image: linear-gradient(120deg, var(--infoSurface) 0%, var(--aicoe-bg-surface) 58%, color-mix(in srgb, var(--info) var(--aicoe-bg-strength), transparent) 100%);
}

.aicoe-bg-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--borderStrong) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--borderStrong) 55%, transparent) 1px, transparent 1px),
    radial-gradient(circle at var(--aicoe-bg-position-x) var(--aicoe-bg-position-y), color-mix(in srgb, var(--accent) var(--aicoe-bg-strength), transparent), transparent 58%);
  background-size: 24px 24px, 24px 24px, var(--aicoe-bg-size);
}

.aicoe-bg-surface-fade {
  background-image: linear-gradient(180deg, var(--surfaceRaised) 0%, var(--surface) 54%, var(--aicoe-bg-surface) 100%);
}

.aicoe-bg-aurora {
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 12%, color-mix(in oklab, var(--accent) var(--aicoe-bg-strength), transparent) 0, transparent 72%),
    radial-gradient(ellipse 62% 48% at 84% 18%, color-mix(in oklab, var(--violet-500) var(--aicoe-bg-strength), transparent) 0, transparent 70%),
    radial-gradient(ellipse 78% 52% at 54% 100%, color-mix(in oklab, var(--info) var(--aicoe-bg-strength), transparent) 0, transparent 74%);
}

.aicoe-bg-halo {
  background-image:
    radial-gradient(circle at var(--aicoe-bg-position-x) var(--aicoe-bg-position-y), var(--aicoe-bg-surface) 0 17%, transparent 38%),
    conic-gradient(from 210deg at var(--aicoe-bg-position-x) var(--aicoe-bg-position-y) in oklab,
      transparent 0 12%,
      color-mix(in srgb, var(--accent) var(--aicoe-bg-strength), transparent) 25%,
      color-mix(in srgb, var(--info) var(--aicoe-bg-strength), transparent) 44%,
      color-mix(in srgb, var(--violet-500) var(--aicoe-bg-strength), transparent) 64%,
      color-mix(in srgb, var(--warning) var(--aicoe-bg-strength), transparent) 82%,
      transparent 100%);
}

.aicoe-bg-dot-bloom {
  background-image:
    radial-gradient(circle at var(--aicoe-bg-position-x) var(--aicoe-bg-position-y), transparent 0 16%, var(--aicoe-bg-surface) 76%),
    radial-gradient(circle, color-mix(in srgb, var(--accentStrong) 42%, transparent) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--info) var(--aicoe-bg-strength), transparent), transparent 58%);
  background-size: var(--aicoe-bg-size), 18px 18px, var(--aicoe-bg-size);
}

.aicoe-bg-horizon {
  background-image:
    radial-gradient(ellipse 78% 24% at 50% 104%, color-mix(in srgb, var(--accent) 46%, transparent) 0, color-mix(in srgb, var(--info) var(--aicoe-bg-strength), transparent) 42%, transparent 74%),
    linear-gradient(180deg, var(--surfaceRaised) 0%, var(--aicoe-bg-surface) 78%);
}

@media print {
  .aicoe-bg {
    background-color: transparent !important;
    background-image: none !important;
  }
}