/* ============================================================
 *  wallpaper.css — metaball cloud
 *
 *  Solid-color blobs drift, scale, and rotate slowly inside
 *  a container that runs them through an SVG "goo" filter
 *  (gaussian blur + alpha threshold). When blobs come near
 *  each other they visually merge and pull apart, like a
 *  morphing 3D cloud.
 * ============================================================ */

.wallpaper {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--bg-base);
  transition: background 0.6s ease;
}

/* dark mode: navy-tinted veil keeps the scene cool & atmospheric */
html[data-theme="dark"] .wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%,
      rgba(10, 18, 50, 0) 0%,
      rgba(6, 10, 28, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}

.goo-defs {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  overflow: hidden;
}

.blobs {
  position: absolute;
  inset: 0;
  filter: url(#wp-goo-light);
  -webkit-filter: url(#wp-goo-light);
  pointer-events: none;
}

html[data-theme="dark"] .blobs {
  filter: url(#wp-goo-dark);
  -webkit-filter: url(#wp-goo-dark);
}

.blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  display: block;
}

/* ----- colors per theme -----
 *  Light: warm pastel cluster on cream.
 *  Dark: cool violet/indigo cluster on near-black.
 * --------------------------------------------- */
html[data-theme="light"] .blob--1  { background: #ffb5d2; }
html[data-theme="light"] .blob--2  { background: #bcc7ff; }
html[data-theme="light"] .blob--3  { background: #ffc8a3; }
html[data-theme="light"] .blob--4  { background: #b6f0d8; }
html[data-theme="light"] .blob--5  { background: #f6b6ff; }
html[data-theme="light"] .blob--6  { background: #ffe6a8; }
html[data-theme="light"] .blob--7  { background: #a5e0ff; }
html[data-theme="light"] .blob--8  { background: #ffb39c; }
html[data-theme="light"] .blob--9  { background: #d6b5ff; }
html[data-theme="light"] .blob--10 { background: #ffd1c2; }
html[data-theme="light"] .blob--11 { background: #b6e8ff; }
html[data-theme="light"] .blob--12 { background: #f0c8ff; }

html[data-theme="dark"] .blob--1  { background: #1f3878; }
html[data-theme="dark"] .blob--2  { background: #16306b; }
html[data-theme="dark"] .blob--3  { background: #243f88; }
html[data-theme="dark"] .blob--4  { background: #182c64; }
html[data-theme="dark"] .blob--5  { background: #2a4496; }
html[data-theme="dark"] .blob--6  { background: #1c356f; }
html[data-theme="dark"] .blob--7  { background: #233d82; }
html[data-theme="dark"] .blob--8  { background: #142855; }
html[data-theme="dark"] .blob--9  { background: #20407a; }
html[data-theme="dark"] .blob--10 { background: #16315e; }
html[data-theme="dark"] .blob--11 { background: #1d3a85; }
html[data-theme="dark"] .blob--12 { background: #28489a; }

/* ----- positions, sizes, animations -----
 *  Solid blobs (no individual blur) — the goo filter on the
 *  wrapper handles edge softening and merging.
 * --------------------------------------------- */
.blob--1  {
  width: 22vw; height: 22vw;
  top: 8%;  left: 6%;
  animation: cloud1 28s ease-in-out infinite;
}
.blob--2  {
  width: 28vw; height: 28vw;
  top: 4%;  left: 30%;
  animation: cloud2 36s ease-in-out infinite;
}
.blob--3  {
  width: 18vw; height: 18vw;
  top: 18%; left: 58%;
  animation: cloud3 32s ease-in-out infinite;
}
.blob--4  {
  width: 24vw; height: 24vw;
  top: -4%; right: 4%;
  animation: cloud4 30s ease-in-out infinite;
}
.blob--5  {
  width: 20vw; height: 20vw;
  top: 36%; left: 12%;
  animation: cloud5 38s ease-in-out infinite;
}
.blob--6  {
  width: 26vw; height: 26vw;
  top: 42%; left: 44%;
  animation: cloud6 34s ease-in-out infinite;
}
.blob--7  {
  width: 16vw; height: 16vw;
  top: 50%; right: 14%;
  animation: cloud7 26s ease-in-out infinite;
}
.blob--8  {
  width: 22vw; height: 22vw;
  bottom: 6%; left: 4%;
  animation: cloud8 40s ease-in-out infinite;
}
.blob--9  {
  width: 18vw; height: 18vw;
  bottom: 12%; left: 36%;
  animation: cloud9 30s ease-in-out infinite;
}
.blob--10 {
  width: 24vw; height: 24vw;
  bottom: -2%; left: 60%;
  animation: cloud10 36s ease-in-out infinite;
}
.blob--11 {
  width: 14vw; height: 14vw;
  bottom: 22%; right: 4%;
  animation: cloud11 24s ease-in-out infinite;
}
.blob--12 {
  width: 12vw; height: 12vw;
  top: 24%;  left: 78%;
  animation: cloud12 22s ease-in-out infinite;
}

/* ----- meandering drift paths ------------------------------
 *  Each cloud follows a 4-point loop with non-uniform scale
 *  (squish/stretch) and slight rotation, so the surface flexes
 *  as it moves. Start === end keeps the loop seamless.
 * ----------------------------------------------------------- */
@keyframes cloud1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  25%      { transform: translate(6vw, 4vh) rotate(8deg) scale(1.18, 0.92); }
  50%      { transform: translate(9vw, -3vh) rotate(-6deg) scale(0.94, 1.16); }
  75%      { transform: translate(3vw, 6vh) rotate(12deg) scale(1.08, 1.04); }
}
@keyframes cloud2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  33%      { transform: translate(-5vw, 3vh) rotate(-10deg) scale(0.9, 1.14); }
  66%      { transform: translate(-3vw, -4vh) rotate(6deg) scale(1.15, 0.94); }
}
@keyframes cloud3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  20%      { transform: translate(4vw, 5vh) rotate(14deg) scale(1.22, 0.9); }
  55%      { transform: translate(-2vw, 8vh) rotate(-8deg) scale(0.92, 1.18); }
  80%      { transform: translate(5vw, 3vh) rotate(10deg) scale(1.1, 1.02); }
}
@keyframes cloud4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  30%      { transform: translate(-3vw, 6vh) rotate(-12deg) scale(1.12, 0.96); }
  60%      { transform: translate(-6vw, 2vh) rotate(7deg) scale(0.95, 1.1); }
  85%      { transform: translate(-1vw, 5vh) rotate(-4deg) scale(1.06, 1.05); }
}
@keyframes cloud5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  25%      { transform: translate(7vw, -3vh) rotate(10deg) scale(1.08, 1.04); }
  50%      { transform: translate(5vw, -6vh) rotate(-8deg) scale(0.94, 1.18); }
  75%      { transform: translate(-2vw, -2vh) rotate(14deg) scale(1.16, 0.9); }
}
@keyframes cloud6 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  33%      { transform: translate(-5vw, 4vh) rotate(-9deg) scale(0.92, 1.1); }
  66%      { transform: translate(-2vw, -3vh) rotate(11deg) scale(1.14, 0.96); }
}
@keyframes cloud7 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  25%      { transform: translate(-4vw, -5vh) rotate(13deg) scale(1.22, 0.92); }
  55%      { transform: translate(-7vw, -8vh) rotate(-6deg) scale(0.94, 1.2); }
  80%      { transform: translate(-3vw, -2vh) rotate(8deg) scale(1.08, 1.02); }
}
@keyframes cloud8 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  30%      { transform: translate(5vw, -4vh) rotate(-11deg) scale(1.15, 0.95); }
  65%      { transform: translate(2vw, -7vh) rotate(7deg) scale(0.92, 1.16); }
}
@keyframes cloud9 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  25%      { transform: translate(-2vw, -5vh) rotate(9deg) scale(0.9, 1.14); }
  50%      { transform: translate(-4vw, -2vh) rotate(-12deg) scale(1.16, 0.92); }
  75%      { transform: translate(1vw, -6vh) rotate(5deg) scale(1.04, 1.06); }
}
@keyframes cloud10 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  33%      { transform: translate(-6vw, -3vh) rotate(-10deg) scale(1.12, 0.96); }
  66%      { transform: translate(-4vw, 2vh) rotate(8deg) scale(0.94, 1.12); }
}
@keyframes cloud11 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  20%      { transform: translate(3vw, -6vh) rotate(15deg) scale(1.25, 0.88); }
  55%      { transform: translate(-2vw, -9vh) rotate(-9deg) scale(0.9, 1.22); }
  80%      { transform: translate(4vw, -4vh) rotate(11deg) scale(1.12, 0.98); }
}
@keyframes cloud12 {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1, 1); }
  30%      { transform: translate(-6vw, 4vh) rotate(-13deg) scale(0.88, 1.2); }
  60%      { transform: translate(-4vw, 7vh) rotate(8deg) scale(1.16, 0.94); }
  85%      { transform: translate(-1vw, 3vh) rotate(-5deg) scale(1.05, 1.04); }
}

/* ----- noise grain ----- */
.wallpaper-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.12;
  pointer-events: none;
}