/* ============================================================
   Ambience: the colour blend glowing behind the whole app.
   Four soft light-blooms drift slowly over a deep base, with a fine
   film grain and a vignette on top. Pick the blend in Settings →
   Appearance → Background ([data-ambience] on <html>); motion follows
   "Animated background" and Reduce motion.
   ============================================================ */
:root, :root[data-ambience="nebula"] { --amb-1: #7c3aed; --amb-2: #db2777; --amb-3: #4338ca; --amb-4: #0e7490; --amb-base: #08070e; }
:root[data-ambience="aurora"] { --amb-1: #0d9488; --amb-2: #7c3aed; --amb-3: #15803d; --amb-4: #0369a1; --amb-base: #050b0d; }
:root[data-ambience="ember"] { --amb-1: #ea580c; --amb-2: #be123c; --amb-3: #6d28d9; --amb-4: #b45309; --amb-base: #0c0707; }
:root[data-ambience="abyss"] { --amb-1: #1d4ed8; --amb-2: #0891b2; --amb-3: #3730a3; --amb-4: #0f766e; --amb-base: #04070f; }
:root[data-ambience="synthwave"] { --amb-1: #db2777; --amb-2: #7c3aed; --amb-3: #f59e0b; --amb-4: #2563eb; --amb-base: #0b0611; }
:root[data-ambience="mono"] { --amb-1: #3f3f46; --amb-2: #52525b; --amb-3: #27272a; --amb-4: #3f3f46; --amb-base: #08080a; }

html { background: var(--amb-base, var(--bg)); }
body { background: transparent; }

/* the blend: oversized so the drift never shows an edge */
body::before {
  content: ''; position: fixed; inset: -14vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46vmax 40vmax at 14% 10%, color-mix(in srgb, var(--amb-1) 60%, transparent), transparent 70%),
    radial-gradient(42vmax 36vmax at 90% 16%, color-mix(in srgb, var(--amb-2) 48%, transparent), transparent 70%),
    radial-gradient(52vmax 44vmax at 72% 94%, color-mix(in srgb, var(--amb-3) 54%, transparent), transparent 72%),
    radial-gradient(38vmax 34vmax at 16% 86%, color-mix(in srgb, var(--amb-4) 42%, transparent), transparent 70%),
    radial-gradient(34vmax 30vmax at 52% 46%, color-mix(in srgb, var(--amb-1) 20%, transparent), transparent 72%);
  will-change: transform;
  animation: amb-drift 46s ease-in-out infinite alternate;
}
/* film grain + vignette, so the colour reads as light, not as a flat fill */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 50% 30%, transparent 55%, rgba(0, 0, 0, .55) 100%);
  opacity: .55; mix-blend-mode: soft-light;
}
@keyframes amb-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(4vmax, -3vmax, 0) rotate(9deg) scale(1.07); }
  100% { transform: translate3d(-3vmax, 3vmax, 0) rotate(-7deg) scale(1.03); }
}
:root[data-ambient-motion="off"] body::before, :root[data-reduce-motion="true"] body::before { animation: none; }
@media (prefers-reduced-motion: reduce) { :root:not([data-reduce-motion="false"]) body::before { animation: none; } }

/* light theme: the same blends as soft pastel light on a pale base */
:root[data-theme="light"] { --amb-base: #f3f1fb; }
:root[data-theme="light"] body::before { opacity: .42; filter: saturate(.9) brightness(1.25); }
:root[data-theme="light"] body::after {
  opacity: .35;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .35 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="light"][data-ambience="mono"] body::before { opacity: .25; }

/* the picker in Settings → Appearance */
.amb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-bottom: 6px; }
.amb-card { display: flex; flex-direction: column; gap: 9px; padding: 8px 8px 10px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.amb-card:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.amb-card.on { border-color: var(--accent); box-shadow: var(--ring); color: var(--text); }
.amb-card > span:last-child { padding: 0 4px; }
.amb-preview { display: block; height: 62px; border-radius: var(--r); background:
  radial-gradient(70% 90% at 15% 15%, var(--a1), transparent 70%),
  radial-gradient(70% 90% at 90% 25%, var(--a2), transparent 70%),
  radial-gradient(80% 90% at 65% 100%, var(--a3), transparent 72%), #0b0a12;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
:root[data-theme="light"] .amb-preview { background:
  radial-gradient(70% 90% at 15% 15%, color-mix(in srgb, var(--a1) 45%, transparent), transparent 70%),
  radial-gradient(70% 90% at 90% 25%, color-mix(in srgb, var(--a2) 45%, transparent), transparent 70%),
  radial-gradient(80% 90% at 65% 100%, color-mix(in srgb, var(--a3) 45%, transparent), transparent 72%), #f6f4fc; }