/* Interactieve blob- en puntjesachtergrond (class "jn-blobs"), voor de kop van het welkomstpaneel.
   Kopie van het blob-gedeelte uit het justiin.nl child theme (bb-theme-child/custom/custom.css);
   pas wijzigingen daar ook hier toe. Kleuren komen uit de --fl-global-* variabelen (style.css). */

.jn-blobs,
  .jn-dots {
    position: relative;
    overflow: hidden;
  }

  /* de achtergrond wordt in .fl-row-content-wrap geplaatst (niet in de
     row zelf) zodat 'ie boven een eventuele eigen achtergrondkleur van
     die wrap komt te liggen, maar met z-index:-1 nog wel ONDER de
     echte content (tekst/modules) — zie ook .jn-blob-bg hieronder.
     Belangrijk: z-index:0 hier (niet auto) zodat deze wrap zélf een
     stacking context vormt — anders "ontsnapt" de z-index:-1 van
     .jn-blob-bg naar een verder weg gelegen voorouder en verdwijnt
     de achtergrond onzichtbaar naar de achtergrond van de hele pagina. */
  .jn-blobs > .fl-row-content-wrap,
  .jn-dots > .fl-row-content-wrap {
    position: relative;
    z-index: 0;
    overflow: hidden;
  }

  /* jn-blobs--dark / --light / jn-dots--dark / --light zetten hier
     bewust geen achtergrondkleur meer — dat regel je zelf in Beaver
     Builder. Het zijn alleen nog markers die het script leest om het
     thema te forceren; zonder die classes wordt het automatisch
     bepaald op basis van de gemeten achtergrondkleur (zie script). */

  .jn-blob-bg {
    --c-primary: var(--fl-global-primary, #004f43);
    --c-secondary: var(--fl-global-secondairy, #2b6a5b);
    --c-tertiary: var(--fl-global-tertiary, #001c17);
    --c-complementary: var(--fl-global-complementairy, #eb6f4c);
    --c-highlight: var(--fl-global-highlight, #d3d8bb);

    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
  }

  .jn-dots-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
  }
  .jn-blob-bg--dark .jn-dots-canvas { mix-blend-mode: screen; }

  .jn-blob {
    position: absolute;
    will-change: transform;
  }

  .jn-blob__inner {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    filter: blur(min(6vw, 46px));
    mix-blend-mode: multiply;
    opacity: 0.85;
    transform: translate(-50%, -50%);
    animation: jn-drift var(--drift-dur, 10s) ease-in-out infinite alternate,
               jn-pulse var(--pulse-dur, 6.5s) ease-in-out infinite;
  }
  .jn-blob-bg--dark .jn-blob__inner { mix-blend-mode: screen; }

  @keyframes jn-drift {
    from { transform: translate(-50%, -50%) translate(0, 0); }
    to   { transform: translate(-50%, -50%) translate(var(--dx, 6vw), var(--dy, -5vw)); }
  }
  @keyframes jn-pulse {
    0%, 100% { scale: 1; }
    50%      { scale: 1.2; }
  }

  .jn-blob--1 { left: 12%; top: 18%; }
  .jn-blob--1 .jn-blob__inner {
    width: clamp(220px, 28vw, 420px);
    height: clamp(220px, 28vw, 420px);
    background: radial-gradient(circle at 38% 35%, var(--c-primary), transparent 72%);
    --dx: 7vw; --dy: -5vw; --drift-dur: 9s; --pulse-dur: 5.5s;
  }

  .jn-blob--2 { left: 82%; top: 10%; }
  .jn-blob--2 .jn-blob__inner {
    width: clamp(200px, 24vw, 380px);
    height: clamp(200px, 24vw, 380px);
    background: radial-gradient(circle at 40% 40%, var(--c-complementary), transparent 72%);
    --dx: -6vw; --dy: 6vw; --drift-dur: 11s; --pulse-dur: 7s;
    opacity: 0.72;
  }

  .jn-blob--3 { left: 78%; top: 82%; }
  .jn-blob--3 .jn-blob__inner {
    width: clamp(240px, 30vw, 440px);
    height: clamp(240px, 30vw, 440px);
    background: radial-gradient(circle at 35% 35%, var(--c-secondary), transparent 72%);
    --dx: -7vw; --dy: -6vw; --drift-dur: 12.5s; --pulse-dur: 8s;
  }

  .jn-blob--4 { left: 18%; top: 84%; }
  .jn-blob--4 .jn-blob__inner {
    width: clamp(180px, 22vw, 340px);
    height: clamp(180px, 22vw, 340px);
    background: radial-gradient(circle at 40% 40%, var(--c-highlight), transparent 72%);
    --dx: 6vw; --dy: 5vw; --drift-dur: 7.5s; --pulse-dur: 4.5s;
    opacity: 0.95;
  }

  .jn-blob--5 { left: 48%; top: 48%; }
  .jn-blob--5 .jn-blob__inner {
    width: clamp(160px, 20vw, 300px);
    height: clamp(160px, 20vw, 300px);
    background: radial-gradient(circle at 40% 40%, var(--c-primary), transparent 72%);
    --dx: -5vw; --dy: 7vw; --drift-dur: 10.5s; --pulse-dur: 6s;
    opacity: 0.62;
  }

  /* optionele kleurvarianten: class jn-blobs--warm / jn-blobs--koel náást jn-blobs op de row */
  .jn-blobs--warm .jn-blob--1 .jn-blob__inner,
  .jn-blobs--warm .jn-blob--5 .jn-blob__inner { background: radial-gradient(circle at 38% 35%, var(--c-complementary), transparent 72%); }
  .jn-blobs--koel .jn-blob--2 .jn-blob__inner { background: radial-gradient(circle at 40% 40%, var(--c-secondary), transparent 72%); }

  @media (prefers-reduced-motion: reduce) {
    .jn-blob__inner { animation: none !important; }
  }
/* Vastpakken (dashboard-blobs.js, 29-10-2026): tijdens het slepen een grijphandje en geen tekstselectie */
html.jn-grijpt,
html.jn-grijpt * {
  cursor: grabbing !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}