/* =========================================================
   Life OS — background.css
   Built-in animated background (light + dark), your own
   images with a smooth fade, and the soft readability overlay.
   ========================================================= */
:root {
  --bg-overlay: 0.4;
  --g1: #fbf7f2; --g2: #eef3fb; --g3: #f5eff9; --g4: #eef7f1;
  --blob1: #f4ad8f; --blob2: #93bdf4; --blob3: #c6a6ef; --blob4: #9fd9b8;
  --blob-alpha: 0.6;
}
:root[data-theme="dark"] {
  --g1: #131316; --g2: #161a26; --g3: #1c1526; --g4: #111d1b;
  --blob1: #7a3f62; --blob2: #24508c; --blob3: #4a3487; --blob4: #1d6b5a;
  --blob-alpha: 0.5;
}

#bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#app { position: relative; z-index: 1; }

/* Built-in: slow drifting gradient + soft floating shapes */
.bg-builtin {
  position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease);
  background: linear-gradient(125deg, var(--g1), var(--g2), var(--g3), var(--g4), var(--g1));
  background-size: 400% 400%;
  animation: bgDrift 90s ease-in-out infinite alternate;
}
@keyframes bgDrift { 0% { background-position: 0% 30%; } 100% { background-position: 100% 70%; } }
.bg-blob {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--blob-alpha);
  will-change: transform;
}
.bg-blob.b1 { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: var(--blob1); animation: float1 70s ease-in-out infinite alternate; }
.bg-blob.b2 { width: 40vmax; height: 40vmax; right: -10vmax; top: 10vh; background: var(--blob2); animation: float2 85s ease-in-out infinite alternate; }
.bg-blob.b3 { width: 38vmax; height: 38vmax; left: 25vw; bottom: -18vmax; background: var(--blob3); animation: float3 95s ease-in-out infinite alternate; }
.bg-blob.b4 { width: 26vmax; height: 26vmax; left: 8vw; bottom: 8vh; background: var(--blob4); animation: float1 110s ease-in-out infinite alternate-reverse; }
@keyframes float1 { to { transform: translate(18vw, 12vh) scale(1.15); } }
@keyframes float2 { to { transform: translate(-16vw, 20vh) scale(0.9); } }
@keyframes float3 { to { transform: translate(-10vw, -14vh) scale(1.1); } }

/* Your images */
.bg-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.6s ease;
}
.bg-img.show { opacity: 1; }

/* Soft overlay (strength set in Settings) */
.bg-overlay { position: absolute; inset: 0; background: var(--bg); opacity: var(--bg-overlay); transition: background-color 0.4s var(--ease); }

/* Which layers are on */
html.bg-mode-builtin .bg-builtin { opacity: 1; }
html.bg-mode-builtin .bg-overlay { opacity: calc(var(--bg-overlay) * 0.45); }   /* built-in is already soft */
html.bg-mode-plain #bg { display: none; }

/* Let the background show through the app (panels and cards stay solid) */
html:not(.bg-mode-plain) body { background: var(--bg); }
html:not(.bg-mode-plain) .sidebar {
  background: color-mix(in srgb, var(--bg-soft) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
html:not(.bg-mode-plain) .cal-month, html:not(.bg-mode-plain) .cal-tl,
html:not(.bg-mode-plain) .search-box { background: color-mix(in srgb, var(--panel) 88%, transparent); }
@media (max-width: 768px) {
  html:not(.bg-mode-plain) .sidebar { background: color-mix(in srgb, var(--bg-soft) 94%, transparent); }
}

/* Settings: background picker */
.set-row[hidden] { display: none; }
.bg-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 6px 0 8px; }
.bg-thumb {
  position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--hover) center / cover no-repeat; padding: 0;
}
.bg-thumb.active { border-color: var(--accent); }
.bg-thumb-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; line-height: 20px; cursor: pointer; opacity: 0;
  transition: opacity var(--dur);
}
.bg-thumb:hover .bg-thumb-remove, .bg-thumb-remove:focus-visible { opacity: 1; }
@media (hover: none) { .bg-thumb-remove { opacity: 1; } }
.bg-add {
  aspect-ratio: 16 / 10; border-radius: 8px; border: 1px dashed var(--border); background: transparent;
  color: var(--text-muted); cursor: pointer; font-size: 0.78rem;
}
.bg-add:hover { background: var(--hover); color: var(--text); }