/* ============================================================
   BEAMCOVE — ink background  ·  reusable, GPU-light
   ============================================================
   Two soft pastel blobs drift and clash; where they overlap they
   MULTIPLY into a new hue (default pastel blue + yellow → soft green),
   for an "ink-in-water / shore" feel.

   USAGE — wrap any content; recolor with 3 vars:
     <div class="ink-bg" style="--ink-a:#a7c8f2; --ink-b:#f6e6a8; --ink-base:#f4f6f6;">
       <span class="ink-blob ink-blob--a"></span>
       <span class="ink-blob ink-blob--b"></span>
       <div class="ink-bg__content"> … </div>
     </div>

   PERFORMANCE
   - Exactly two layers, animated on transform only (compositor-friendly).
   - Softness comes mostly from radial-gradient falloff + one modest blur.
   - No JS. Honors prefers-reduced-motion (blobs freeze, mix stays).

   PRESETS — add a class for ready-made combos:
     .ink-bg--shore  blue + yellow  → green   (default)
     .ink-bg--reef   teal + yellow  → bright green
     .ink-bg--dusk   coral + blue   → mauve
     .ink-bg--calm   teal + sky     → tonal
   ============================================================ */

.ink-bg {
  --ink-base: var(--tide-50, #f4f6f6);
  --ink-a: #a7c8f2;          /* pastel blue   */
  --ink-b: #f6e6a8;          /* pastel yellow */
  --ink-blur: 40px;
  --ink-size: 78%;           /* blob diameter relative to container */
  --ink-speed: 19s;

  position: relative;
  overflow: hidden;
  isolation: isolate;        /* keep blend modes inside this box */
  background: var(--ink-base);
}

.ink-blob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ink-size);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(var(--ink-blur));
  mix-blend-mode: multiply;  /* pastel blue × pastel yellow = soft green */
  pointer-events: none;
  will-change: transform;
  z-index: 0;
}

.ink-blob--a {
  background: radial-gradient(circle at 50% 50%,
              var(--ink-a) 0%,
              color-mix(in srgb, var(--ink-a) 55%, transparent) 42%,
              transparent 68%);
  animation: ink-drift-a var(--ink-speed) var(--ease-wave, ease-in-out) infinite alternate;
}
.ink-blob--b {
  background: radial-gradient(circle at 50% 50%,
              var(--ink-b) 0%,
              color-mix(in srgb, var(--ink-b) 55%, transparent) 42%,
              transparent 68%);
  animation: ink-drift-b calc(var(--ink-speed) * 1.18) var(--ease-wave, ease-in-out) infinite alternate;
}

/* Content rides above the ink */
.ink-bg__content { position: relative; z-index: 1; }

/* Drift paths — blobs glide on opposite sides of the canvas and kiss at
   the midpoint, but never fully eclipse each other. The minimum center-to-
   center distance at any keyframe is ~56% of container width (≥ one blob
   radius), so each blob always keeps ≥ 50% of its body outside the other.
   translate(-50%,-50%) centers; the second translate is the drift offset. */
@keyframes ink-drift-a {
  0%   { transform: translate(-50%, -50%) translate(-38%, -22%) scale(1.05); }
  50%  { transform: translate(-50%, -50%) translate(22%,   8%)  scale(0.94); }
  100% { transform: translate(-50%, -50%) translate(28%,  -18%) scale(1.08); }
}
@keyframes ink-drift-b {
  0%   { transform: translate(-50%, -50%) translate(38%,  24%)  scale(1.0);  }
  50%  { transform: translate(-50%, -50%) translate(-28%, -18%) scale(1.12); }
  100% { transform: translate(-50%, -50%) translate(-34%,  20%) scale(0.92); }
}

/* ---------- Presets ---------- */
.ink-bg--shore { --ink-a: #a7c8f2; --ink-b: #f6e6a8; --ink-base: #f6f8f9; } /* blue + yellow → green */
.ink-bg--reef  { --ink-a: #9fd9d4; --ink-b: #f3e39a; --ink-base: #f5f8f7; } /* teal + yellow → bright green */
.ink-bg--dusk  { --ink-a: #f3b9a6; --ink-b: #b7c6ef; --ink-base: #f8f6f6; } /* coral + blue → mauve */
.ink-bg--calm  { --ink-a: #9ccfd6; --ink-b: #bcd6f0; --ink-base: #f4f7f8; } /* teal + sky → tonal */

/* On a darker base, use screen so light pastels stay luminous */
.ink-bg--on-dark {
  --ink-base: var(--harbor-900, #0d2f38);
}
.ink-bg--on-dark .ink-blob { mix-blend-mode: screen; }

@media (prefers-reduced-motion: reduce) {
  .ink-blob { animation: none; }
  /* freeze near the mid-point so the color mix is still visible */
  .ink-blob--a { transform: translate(-50%, -50%) translate(22%, 8%) scale(0.96); }
  .ink-blob--b { transform: translate(-50%, -50%) translate(-28%, -18%) scale(1.1); }
}