/**
 * Page Designer — Gooey Block
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 2.9.980)
 *
 * 20 decorative animated gooey/blob graphics, native CSS-only (no JS runtime,
 * no SMIL). Each preset is selected via [data-pd-goo-style="N"] on the stage.
 *
 * STRICT ISOLATION
 * ----------------
 *   - All classes: pd-blk-goo-*
 *   - All custom props: --pd-blk-goo-*
 *   - Root data-attr: data-pd-block="gooey"; preset data-attr: data-pd-goo-style
 *   - Goo SVG filter id is per-instance (g{UID}) — set inline at drop time.
 *
 * RESOURCE FRIENDLY
 * -----------------
 *   - content-visibility: auto      → browser skips offscreen rendering
 *   - contain: layout paint          → isolated repaint region
 *   - prefers-reduced-motion         → all animations pause
 *   - Pure CSS @keyframes (no SMIL)  → uniform Speed control via --pd-blk-goo-speed
 *   - will-change only on actively transforming groups
 *   - Goo feGaussianBlur + feColorMatrix is CPU-bound; instances are small
 *     (default 120×120) and the filter is contained inside the SVG bbox.
 *
 * UNIT SCALE
 * ----------
 *   The SVG presets use viewBox="0 0 200 200" and scale natively. The 5 div-
 *   based CSS presets (1, 7, 10, 14, 16) use --u (= size/200) to scale the
 *   original loaders.html pixel values without rewriting the keyframes.
 */

/* ============================================================
   ROOT + STAGE
   ============================================================ */

[data-pd-block="gooey"] {
    /* Defaults declared on root so panel-written inline styles on the
       root override them via cascade. Stage inherits via CSS custom
       property inheritance.                                              */
    --pd-blk-goo-color: #0a0a0a;
    --pd-blk-goo-size: 120px;
    --pd-blk-goo-speed: 1;

    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 80px;
    width: 100%;
    box-sizing: border-box;
}

.pd-blk-goo-stage {
    /* --u is a local convenience var (size/200) used only by the 5
       div-based CSS presets to scale the original 200×200 pixel
       coordinates. Not user-tunable.                                     */
    --u: calc(var(--pd-blk-goo-size) / 200);

    width: var(--pd-blk-goo-size);
    height: var(--pd-blk-goo-size);
    color: var(--pd-blk-goo-color);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Paint isolation only — safe. We previously also used
       `content-visibility: auto`, but its viewport-relevance heuristic
       gets fooled inside the GrapesJS canvas iframe and on offscreen
       panel tiles, parking `animation-play-state: paused` indefinitely.
       Removed v1.0.1.                                                    */
    contain: layout paint;
}

.pd-blk-goo-stage svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Indicator inherits color from stage via currentColor. */
.pd-blk-goo-stage svg [fill="currentColor"],
.pd-blk-goo-stage svg [stroke="currentColor"] {
    /* explicit no-op — documents that we route color via attribute fill="currentColor" */
}

/* ============================================================
   ACCESSIBILITY NOTE
   ============================================================
   v1.0.0 shipped with a `@media (prefers-reduced-motion: reduce)`
   block that paused all gooey animations. Removed v1.0.2 because:
     1. It paused the editor canvas + panel tiles for any user whose
        OS reports reduce-motion, blocking the editor's preview job.
     2. The gooey animations are small (≤120 px), slow (3–7 s),
        decorative, and contained — they fall outside the motion
        types prefers-reduced-motion is designed to mitigate
        (parallax, large translations, rapid flashes).
   End users who genuinely need stillness can override on their site
   via `.pd-blk-goo-ind, .pd-blk-goo-stage * { animation: none }`.
   ============================================================ */

/* ============================================================
   CSS-DIV PRESETS (1, 7, 10, 14, 16)
   --u scaling preserves original loaders.html math.
   ============================================================ */

/* 01 MORPH — blob slow-shifts its border-radius */
[data-pd-goo-style="1"]  .pd-blk-goo-ind {
    width:  calc(92 * var(--u));
    height: calc(92 * var(--u));
    background: currentColor;
    border-radius: 62% 38% 33% 67% / 60% 32% 68% 40%;
    animation: pd-blk-goo-k1 calc(7s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
    will-change: transform, border-radius;
}
@keyframes pd-blk-goo-k1 {
    0%, 100% { border-radius: 62% 38% 33% 67% / 60% 32% 68% 40%; transform: rotate(0deg); }
    25%      { border-radius: 30% 70% 60% 40% / 50% 60% 30% 60%; }
    50%      { border-radius: 50% 50% 70% 30% / 40% 70% 50% 60%; transform: rotate(180deg); }
    75%      { border-radius: 70% 30% 50% 50% / 60% 40% 70% 30%; }
}

/* 07 BREATHE — scale + rotate + morph */
[data-pd-goo-style="7"]  .pd-blk-goo-ind {
    width:  calc(90 * var(--u));
    height: calc(90 * var(--u));
    background: currentColor;
    border-radius: 42% 58% 65% 35% / 58% 38% 62% 42%;
    animation: pd-blk-goo-k7 calc(4.2s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
    will-change: transform, border-radius;
}
@keyframes pd-blk-goo-k7 {
    0%, 100% { transform: scale(0.7)  rotate(0deg);   border-radius: 42% 58% 65% 35% / 58% 38% 62% 42%; }
    50%      { transform: scale(1.05) rotate(180deg); border-radius: 65% 35% 38% 62% / 32% 58% 42% 68%; }
}

/* 10 THROB — heart-like double-beat */
[data-pd-goo-style="10"] .pd-blk-goo-ind {
    width:  calc(70 * var(--u));
    height: calc(70 * var(--u));
    background: currentColor;
    border-radius: 50%;
    animation: pd-blk-goo-k10 calc(1.4s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
    will-change: transform, border-radius;
}
@keyframes pd-blk-goo-k10 {
    0%, 100% { transform: scale(0.78); border-radius: 50%; }
    18%      { transform: scale(1.0);  border-radius: 48% 52% 50% 50% / 55% 55% 45% 45%; }
    32%      { transform: scale(0.88); }
    50%      { transform: scale(1.15); border-radius: 50%; }
    70%      { transform: scale(0.85); }
}

/* 14 BOUNCE — fall + squash + rise */
[data-pd-goo-style="14"] .pd-blk-goo-ind {
    width:  calc(56 * var(--u));
    height: calc(56 * var(--u));
    border-radius: 50%;
    background: currentColor;
    animation: pd-blk-goo-k14 calc(1.6s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.5,.05,.5,.95) infinite;
    will-change: transform, border-radius;
}
@keyframes pd-blk-goo-k14 {
    0%   { transform: translateY(calc(-55 * var(--u))) scaleX(0.92) scaleY(1.08); border-radius: 50%; }
    45%  { transform: translateY(calc( 45 * var(--u))) scaleX(1.00) scaleY(1.00); border-radius: 50%; }
    52%  { transform: translateY(calc( 50 * var(--u))) scaleX(1.30) scaleY(0.50);
           border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; }
    60%  { transform: translateY(calc( 45 * var(--u))) scaleX(1.00) scaleY(1.00); border-radius: 50%; }
    100% { transform: translateY(calc(-55 * var(--u))) scaleX(0.92) scaleY(1.08); border-radius: 50%; }
}

/* 16 POP — grow → pop → reappear */
[data-pd-goo-style="16"] .pd-blk-goo-ind {
    width:  calc(28 * var(--u));
    height: calc(28 * var(--u));
    background: currentColor;
    border-radius: 50%;
    animation: pd-blk-goo-k16 calc(1.8s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.55,.02,.4,1.05) infinite;
    will-change: transform, border-radius, opacity;
}
@keyframes pd-blk-goo-k16 {
    0%   { transform: scale(0.25); border-radius: 50%; opacity: 0; }
    12%  { opacity: 1; }
    70%  { transform: scale(2.6);  border-radius: 48% 52% 45% 55% / 50% 55% 45% 50%; opacity: 1; }
    74%  { transform: scale(2.8);  opacity: 1; }
    77%  { transform: scale(0.25); opacity: 0; }
    100% { transform: scale(0.25); opacity: 0; }
}

/* ============================================================
   SVG PRESETS (2-6, 8-9, 11-13, 15, 17-20)
   All keyframes operate on viewBox 200×200 coords — SVG handles scaling
   to the stage size automatically. Goo filter is per-instance inline.
   ============================================================ */

/* 02 COLLIDE — two blobs pass through each other */
[data-pd-goo-style="2"] .pd-blk-goo-c1 {
    animation: pd-blk-goo-k2a calc(3.2s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="2"] .pd-blk-goo-c2 {
    animation: pd-blk-goo-k2b calc(3.2s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k2a { 0%, 100% { cx: 55;  } 50% { cx: 145; } }
@keyframes pd-blk-goo-k2b { 0%, 100% { cx: 145; } 50% { cx: 55;  } }

/* 03 ORBIT — center blob + 3 satellites rotating */
[data-pd-goo-style="3"] .pd-blk-goo-rot {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: pd-blk-goo-spin360 calc(4s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}

/* 04 SPLIT — mitosis split & merge */
[data-pd-goo-style="4"] .pd-blk-goo-c1 {
    animation: pd-blk-goo-k4a calc(3.4s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="4"] .pd-blk-goo-c2 {
    animation: pd-blk-goo-k4b calc(3.4s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k4a {
    0%   { cx: 100; }
    40%  { cx: 58;  }
    85%  { cx: 100; }
    100% { cx: 100; }
}
@keyframes pd-blk-goo-k4b {
    0%   { cx: 100; }
    40%  { cx: 142; }
    85%  { cx: 100; }
    100% { cx: 100; }
}

/* 05 WAVE — 5 blobs pulsing in sequence */
[data-pd-goo-style="5"] .pd-blk-goo-w {
    animation: pd-blk-goo-kwave calc(1.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="5"] .pd-blk-goo-w1 { animation-delay: 0s; }
[data-pd-goo-style="5"] .pd-blk-goo-w2 { animation-delay: calc(0.2s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="5"] .pd-blk-goo-w3 { animation-delay: calc(0.4s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="5"] .pd-blk-goo-w4 { animation-delay: calc(0.6s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="5"] .pd-blk-goo-w5 { animation-delay: calc(0.8s / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-kwave { 0%, 100% { r: 11; } 50% { r: 22; } }

/* 06 LAVA — blob shuttles between top/bottom reservoirs */
[data-pd-goo-style="6"] .pd-blk-goo-l {
    animation:
        pd-blk-goo-k6cy calc(5.2s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.4,0,.6,1) infinite,
        pd-blk-goo-k6r  calc(5.2s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k6cy {
    0%   { cy: 160; }
    50%  { cy: 40;  }
    100% { cy: 160; }
}
@keyframes pd-blk-goo-k6r {
    0%   { r: 18; }
    25%  { r: 22; }
    50%  { r: 18; }
    75%  { r: 14; }
    100% { r: 18; }
}

/* 08 BLOOM — path morphs from point to full and back */
[data-pd-goo-style="8"] .pd-blk-goo-p {
    animation: pd-blk-goo-k8 calc(3.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k8 {
    0%   { d: path('M 100 100 C 100 100, 100 100, 100 100 C 100 100, 100 100, 100 100 C 100 100, 100 100, 100 100 C 100 100, 100 100, 100 100 Z'); }
    25%  { d: path('M 100 60 C 122 60, 140 78, 140 100 C 140 122, 122 140, 100 140 C 78 140, 60 122, 60 100 C 60 78, 78 60, 100 60 Z'); }
    50%  { d: path('M 95 30 C 148 34, 168 62, 158 110 C 164 152, 130 170, 100 170 C 64 168, 32 142, 30 102 C 30 66, 50 28, 95 30 Z'); }
    75%  { d: path('M 100 60 C 122 60, 140 78, 140 100 C 140 122, 122 140, 100 140 C 78 140, 60 122, 60 100 C 60 78, 78 60, 100 60 Z'); }
    100% { d: path('M 100 100 C 100 100, 100 100, 100 100 C 100 100, 100 100, 100 100 C 100 100, 100 100, 100 100 C 100 100, 100 100, 100 100 Z'); }
}

/* 09 YIN — two interlocking lobes rotating */
[data-pd-goo-style="9"] .pd-blk-goo-rot {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: pd-blk-goo-spin360 calc(4.5s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}

/* 11 DROP — droplet falls into puddle, resets */
[data-pd-goo-style="11"] .pd-blk-goo-d {
    animation:
        pd-blk-goo-k11cy calc(2.4s / var(--pd-blk-goo-speed, 1)) linear infinite,
        pd-blk-goo-k11r  calc(2.4s / var(--pd-blk-goo-speed, 1)) linear infinite;
}
@keyframes pd-blk-goo-k11cy {
    0%   { cy: 40;  }
    15%  { cy: 40;  }
    55%  { cy: 172; }
    95%  { cy: 172; }
    100% { cy: 40;  }
}
@keyframes pd-blk-goo-k11r {
    0%   { r: 0;  }
    18%  { r: 14; }
    50%  { r: 14; }
    85%  { r: 14; }
    95%  { r: 0;  }
    100% { r: 0;  }
}

/* 12 TUMBLE — rotating pill that swaps long/short axis */
[data-pd-goo-style="12"] .pd-blk-goo-e {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation:
        pd-blk-goo-spin360 calc(3.8s / var(--pd-blk-goo-speed, 1)) linear infinite,
        pd-blk-goo-k12rx   calc(3.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite,
        pd-blk-goo-k12ry   calc(3.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
    will-change: transform;
}
@keyframes pd-blk-goo-k12rx { 0% { rx: 42; } 25% { rx: 28; } 50% { rx: 42; } 75% { rx: 56; } 100% { rx: 42; } }
@keyframes pd-blk-goo-k12ry { 0% { ry: 22; } 25% { ry: 36; } 50% { ry: 22; } 75% { ry: 14; } 100% { ry: 22; } }

/* 13 SWARM — 5 small drifting blobs that merge when close */
[data-pd-goo-style="13"] .pd-blk-goo-s1 { animation: pd-blk-goo-k13a calc(5.4s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
[data-pd-goo-style="13"] .pd-blk-goo-s2 { animation: pd-blk-goo-k13b calc(4.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
[data-pd-goo-style="13"] .pd-blk-goo-s3 { animation: pd-blk-goo-k13c calc(6.0s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
[data-pd-goo-style="13"] .pd-blk-goo-s4 { animation: pd-blk-goo-k13d calc(5.2s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
[data-pd-goo-style="13"] .pd-blk-goo-s5 { animation: pd-blk-goo-k13e calc(4.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
@keyframes pd-blk-goo-k13a { 0%, 100% { cx: 70;  cy: 80;  } 33% { cx: 130; cy: 110; } 66% { cx: 90;  cy: 130; } }
@keyframes pd-blk-goo-k13b { 0%, 100% { cx: 120; cy: 120; } 33% { cx: 80;  cy: 90;  } 66% { cx: 130; cy: 70;  } }
@keyframes pd-blk-goo-k13c { 0%, 100% { cx: 80;  cy: 115; } 33% { cx: 130; cy: 130; } 66% { cx: 110; cy: 75;  } }
@keyframes pd-blk-goo-k13d { 0%, 100% { cx: 110; cy: 70;  } 33% { cx: 75;  cy: 115; } 66% { cx: 125; cy: 120; } }
@keyframes pd-blk-goo-k13e { 0%, 100% { cx: 100; cy: 100; } 33% { cx: 120; cy: 75;  } 66% { cx: 85;  cy: 125; } }

/* 15 HALO — 8 blobs in a ring, sequential radius pulse, group rotates */
[data-pd-goo-style="15"] .pd-blk-goo-rot {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: pd-blk-goo-spin360 calc(6s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}
[data-pd-goo-style="15"] .pd-blk-goo-h {
    animation: pd-blk-goo-khpulse calc(1.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="15"] .pd-blk-goo-h1 { animation-delay: 0s; }
[data-pd-goo-style="15"] .pd-blk-goo-h2 { animation-delay: calc(0.2s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="15"] .pd-blk-goo-h3 { animation-delay: calc(0.4s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="15"] .pd-blk-goo-h4 { animation-delay: calc(0.6s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="15"] .pd-blk-goo-h5 { animation-delay: calc(0.8s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="15"] .pd-blk-goo-h6 { animation-delay: calc(1.0s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="15"] .pd-blk-goo-h7 { animation-delay: calc(1.2s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="15"] .pd-blk-goo-h8 { animation-delay: calc(1.4s / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-khpulse { 0%, 100% { r: 9; } 50% { r: 18; } }

/* 17 WORM — base bar with two traveling blobs above & below */
[data-pd-goo-style="17"] .pd-blk-goo-w1 {
    animation:
        pd-blk-goo-k17ax calc(2.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite,
        pd-blk-goo-k17ay calc(2.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="17"] .pd-blk-goo-w2 {
    animation:
        pd-blk-goo-k17bx calc(2.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite,
        pd-blk-goo-k17by calc(2.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k17ax { 0%, 100% { cx: 50;  } 50% { cx: 150; } }
@keyframes pd-blk-goo-k17ay { 0%, 100% { cy: 85;  } 50% { cy: 115; } }
@keyframes pd-blk-goo-k17bx { 0%, 100% { cx: 150; } 50% { cx: 50;  } }
@keyframes pd-blk-goo-k17by { 0%, 100% { cy: 115; } 50% { cy: 85;  } }

/* 18 RIPPLE — pulsing core + 3 outward stroke rings */
[data-pd-goo-style="18"] .pd-blk-goo-rng {
    animation:
        pd-blk-goo-k18r  calc(2.4s / var(--pd-blk-goo-speed, 1)) linear infinite,
        pd-blk-goo-k18o  calc(2.4s / var(--pd-blk-goo-speed, 1)) linear infinite,
        pd-blk-goo-k18sw calc(2.4s / var(--pd-blk-goo-speed, 1)) linear infinite;
}
[data-pd-goo-style="18"] .pd-blk-goo-rng1 { animation-delay: 0s; }
[data-pd-goo-style="18"] .pd-blk-goo-rng2 { animation-delay: calc(0.8s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="18"] .pd-blk-goo-rng3 { animation-delay: calc(1.6s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="18"] .pd-blk-goo-core {
    animation: pd-blk-goo-k18core calc(2.4s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k18r    { 0% { r: 20; } 100% { r: 78; } }
@keyframes pd-blk-goo-k18o    { 0% { opacity: 0.7; } 100% { opacity: 0; } }
@keyframes pd-blk-goo-k18sw   { 0% { stroke-width: 3; } 100% { stroke-width: 0.5; } }
@keyframes pd-blk-goo-k18core { 0%, 100% { r: 20; } 50% { r: 26; } }

/* 19 CRAWLER — 3 connected blobs caterpillar-walking */
[data-pd-goo-style="19"] .pd-blk-goo-cr1 { animation: pd-blk-goo-k19a calc(1.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
[data-pd-goo-style="19"] .pd-blk-goo-cr2 { animation: pd-blk-goo-k19b calc(1.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
[data-pd-goo-style="19"] .pd-blk-goo-cr3 { animation: pd-blk-goo-k19c calc(1.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite; }
@keyframes pd-blk-goo-k19a {
    0%   { cy: 100; }
    18%  { cy: 78;  }
    36%  { cy: 100; }
    60%  { cy: 100; }
    85%  { cy: 100; }
    100% { cy: 100; }
}
@keyframes pd-blk-goo-k19b {
    0%   { cy: 100; }
    18%  { cy: 100; }
    36%  { cy: 100; }
    55%  { cy: 78;  }
    78%  { cy: 100; }
    100% { cy: 100; }
}
@keyframes pd-blk-goo-k19c {
    0%   { cy: 100; }
    18%  { cy: 100; }
    36%  { cy: 100; }
    60%  { cy: 100; }
    82%  { cy: 78;  }
    100% { cy: 100; }
}

/* 20 DRIP — drop hangs, stretches, falls, resets */
[data-pd-goo-style="20"] .pd-blk-goo-dp {
    animation:
        pd-blk-goo-k20r  calc(2.6s / var(--pd-blk-goo-speed, 1)) linear infinite,
        pd-blk-goo-k20cy calc(2.6s / var(--pd-blk-goo-speed, 1)) linear infinite;
}
@keyframes pd-blk-goo-k20r {
    0%   { r: 0;  }
    10%  { r: 7;  }
    30%  { r: 13; }
    50%  { r: 13; }
    70%  { r: 13; }
    85%  { r: 0;  }
    100% { r: 0;  }
}
@keyframes pd-blk-goo-k20cy {
    0%   { cy: 40;  }
    10%  { cy: 46;  }
    30%  { cy: 55;  }
    50%  { cy: 58;  }
    78%  { cy: 180; }
    85%  { cy: 180; }
    100% { cy: 40;  }
}

/* Shared spin keyframe used by orbit/yin/halo/tumble rotations. */
@keyframes pd-blk-goo-spin360 {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   v1.1.0 — SECOND WAVE PRESETS (21-40)
   All keyframes operate on viewBox 0 0 200 200 coordinates.
   ============================================================ */

/* 21 PENDULUM */
[data-pd-goo-style="21"] .pd-blk-goo-pend {
    transform-box: view-box;
    transform-origin: 100px 30px;
    animation: pd-blk-goo-k21 calc(2.4s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
    will-change: transform;
}
@keyframes pd-blk-goo-k21 {
    0%, 100% { transform: rotate(-35deg); }
    50%      { transform: rotate( 35deg); }
}

/* 22 SPIRAL — uses shared .pd-blk-goo-rot pattern (same as orbit/yin/halo) */
[data-pd-goo-style="22"] .pd-blk-goo-rot {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: pd-blk-goo-spin360 calc(5s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}

/* 23 VORTEX — group rotates fast, blobs pulse in/out of phase */
[data-pd-goo-style="23"] .pd-blk-goo-rot {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: pd-blk-goo-spin360 calc(3s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}
[data-pd-goo-style="23"] .pd-blk-goo-vx {
    animation: pd-blk-goo-k23r calc(1.4s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="23"] .pd-blk-goo-vx1 { animation-delay: 0s; }
[data-pd-goo-style="23"] .pd-blk-goo-vx2 { animation-delay: calc(-0.23s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="23"] .pd-blk-goo-vx3 { animation-delay: calc(-0.46s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="23"] .pd-blk-goo-vx4 { animation-delay: calc(-0.69s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="23"] .pd-blk-goo-vx5 { animation-delay: calc(-0.92s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="23"] .pd-blk-goo-vx6 { animation-delay: calc(-1.15s / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-k23r { 0%, 100% { r: 11; } 50% { r: 4; } }

/* 24 HEARTBEAT — pulse travels L→R, r beats twice per traversal */
[data-pd-goo-style="24"] .pd-blk-goo-hb {
    animation:
        pd-blk-goo-k24cx calc(2.4s / var(--pd-blk-goo-speed, 1)) linear infinite,
        pd-blk-goo-k24r  calc(0.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k24cx { 0% { cx: 20; } 100% { cx: 180; } }
@keyframes pd-blk-goo-k24r  { 0%, 100% { r: 8; } 35% { r: 18; } 50% { r: 9; } 65% { r: 14; } }

/* 25 MARQUEE — continuous left→right train */
[data-pd-goo-style="25"] .pd-blk-goo-mq {
    animation: pd-blk-goo-k25 calc(3.5s / var(--pd-blk-goo-speed, 1)) linear infinite;
}
[data-pd-goo-style="25"] .pd-blk-goo-mq1 { animation-delay: 0s; }
[data-pd-goo-style="25"] .pd-blk-goo-mq2 { animation-delay: calc(-0.875s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="25"] .pd-blk-goo-mq3 { animation-delay: calc(-1.75s  / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="25"] .pd-blk-goo-mq4 { animation-delay: calc(-2.625s / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-k25 { 0% { cx: -20; } 100% { cx: 220; } }

/* 26 CASCADE — 3 drops fall + reset, staggered */
[data-pd-goo-style="26"] .pd-blk-goo-cs {
    animation: pd-blk-goo-k26 calc(2s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.55,0,.85,.55) infinite;
}
[data-pd-goo-style="26"] .pd-blk-goo-cs1 { animation-delay: 0s; }
[data-pd-goo-style="26"] .pd-blk-goo-cs2 { animation-delay: calc(-0.65s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="26"] .pd-blk-goo-cs3 { animation-delay: calc(-1.3s  / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-k26 {
    0%   { cy: 30;  r: 9; }
    80%  { cy: 165; r: 10; }
    85%  { cy: 168; r: 10; }
    90%  { cy: 30;  r: 0; }
    100% { cy: 30;  r: 9; }
}

/* 27 DANCE — figure-8 (2:1 Lissajous), two blobs in inverse phase */
[data-pd-goo-style="27"] .pd-blk-goo-dn1 {
    animation:
        pd-blk-goo-k27ax calc(3.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite,
        pd-blk-goo-k27ay calc(1.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="27"] .pd-blk-goo-dn2 {
    animation:
        pd-blk-goo-k27bx calc(3.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite,
        pd-blk-goo-k27by calc(1.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k27ax { 0%, 100% { cx: 60;  } 50% { cx: 140; } }
@keyframes pd-blk-goo-k27ay { 0%, 100% { cy: 70;  } 50% { cy: 130; } }
@keyframes pd-blk-goo-k27bx { 0%, 100% { cx: 140; } 50% { cx: 60;  } }
@keyframes pd-blk-goo-k27by { 0%, 100% { cy: 130; } 50% { cy: 70;  } }

/* 28 WIGGLE — single jelly blob: morphing border-radius + soft jiggle */
[data-pd-goo-style="28"] .pd-blk-goo-ind {
    width:  calc(86 * var(--u));
    height: calc(86 * var(--u));
    background: currentColor;
    border-radius: 50%;
    animation: pd-blk-goo-k28 calc(3s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
    will-change: transform, border-radius;
}
@keyframes pd-blk-goo-k28 {
    0%, 100% { border-radius: 50%; transform: translate(0, 0) scale(1); }
    20%      { border-radius: 60% 40% 55% 45% / 60% 50% 50% 40%; transform: translate(calc(2 * var(--u)), calc(-1 * var(--u))) scale(1.02); }
    40%      { border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; transform: translate(calc(-2 * var(--u)), calc(2 * var(--u))) scale(0.98); }
    60%      { border-radius: 55% 45% 60% 40% / 45% 60% 40% 55%; transform: translate(calc(1 * var(--u)), calc(1 * var(--u))) scale(1.03); }
    80%      { border-radius: 40% 60% 45% 55% / 50% 55% 50% 45%; transform: translate(calc(-1 * var(--u)), calc(-2 * var(--u))) scale(0.99); }
}

/* 29 COMET — sweeping arc, head + 3 fading trails with negative delays */
[data-pd-goo-style="29"] .pd-blk-goo-cm {
    animation:
        pd-blk-goo-k29cx calc(2.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite,
        pd-blk-goo-k29cy calc(2.8s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="29"] .pd-blk-goo-cm-h  { animation-delay: 0s; }
[data-pd-goo-style="29"] .pd-blk-goo-cm-t1 { animation-delay: calc(-0.06s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="29"] .pd-blk-goo-cm-t2 { animation-delay: calc(-0.12s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="29"] .pd-blk-goo-cm-t3 { animation-delay: calc(-0.18s / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-k29cx { 0%, 100% { cx: 30;  } 50% { cx: 170; } }
@keyframes pd-blk-goo-k29cy { 0%, 100% { cy: 60;  } 50% { cy: 140; } }

/* 30 SNAKE — 6 blobs in a horizontal chain, cy waves with phase stagger */
[data-pd-goo-style="30"] .pd-blk-goo-sn {
    animation: pd-blk-goo-k30 calc(1.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="30"] .pd-blk-goo-sn1 { animation-delay: 0s; }
[data-pd-goo-style="30"] .pd-blk-goo-sn2 { animation-delay: calc(-0.12s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="30"] .pd-blk-goo-sn3 { animation-delay: calc(-0.24s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="30"] .pd-blk-goo-sn4 { animation-delay: calc(-0.36s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="30"] .pd-blk-goo-sn5 { animation-delay: calc(-0.48s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="30"] .pd-blk-goo-sn6 { animation-delay: calc(-0.6s  / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-k30 { 0%, 100% { cy: 80; } 50% { cy: 120; } }

/* 31 DNA — two columns of dots, cx oscillates in inverse phase per column */
[data-pd-goo-style="31"] .pd-blk-goo-dna-a {
    animation: pd-blk-goo-k31a calc(2.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="31"] .pd-blk-goo-dna-b {
    animation: pd-blk-goo-k31b calc(2.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
[data-pd-goo-style="31"] .pd-blk-goo-dna-y1 { animation-delay: 0s; }
[data-pd-goo-style="31"] .pd-blk-goo-dna-y2 { animation-delay: calc(-0.13s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="31"] .pd-blk-goo-dna-y3 { animation-delay: calc(-0.26s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="31"] .pd-blk-goo-dna-y4 { animation-delay: calc(-0.39s / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-k31a { 0%, 100% { cx: 70;  } 50% { cx: 130; } }
@keyframes pd-blk-goo-k31b { 0%, 100% { cx: 130; } 50% { cx: 70;  } }

/* 32 FOUNTAIN — 5 particles arc up & out from centre bottom */
[data-pd-goo-style="32"] .pd-blk-goo-ft {
    animation: pd-blk-goo-k32 calc(2.4s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.4,.2,.6,.95) infinite;
}
[data-pd-goo-style="32"] .pd-blk-goo-ft1 {
    animation-name: pd-blk-goo-k32a;
    animation-delay: 0s;
}
[data-pd-goo-style="32"] .pd-blk-goo-ft2 {
    animation-name: pd-blk-goo-k32b;
    animation-delay: calc(-0.4s / var(--pd-blk-goo-speed, 1));
}
[data-pd-goo-style="32"] .pd-blk-goo-ft3 {
    animation-name: pd-blk-goo-k32c;
    animation-delay: calc(-0.8s / var(--pd-blk-goo-speed, 1));
}
[data-pd-goo-style="32"] .pd-blk-goo-ft4 {
    animation-name: pd-blk-goo-k32d;
    animation-delay: calc(-1.2s / var(--pd-blk-goo-speed, 1));
}
[data-pd-goo-style="32"] .pd-blk-goo-ft5 {
    animation-name: pd-blk-goo-k32e;
    animation-delay: calc(-1.6s / var(--pd-blk-goo-speed, 1));
}
@keyframes pd-blk-goo-k32a { 0%, 100% { cy: 170; cx: 100; r: 0; } 8% { r: 6; } 50% { cy: 40;  cx: 100; r: 6; } 80% { cy: 175; cx: 100; r: 0; } }
@keyframes pd-blk-goo-k32b { 0%, 100% { cy: 170; cx: 100; r: 0; } 8% { r: 6; } 50% { cy: 55;  cx: 65;  r: 6; } 80% { cy: 175; cx: 50;  r: 0; } }
@keyframes pd-blk-goo-k32c { 0%, 100% { cy: 170; cx: 100; r: 0; } 8% { r: 6; } 50% { cy: 55;  cx: 135; r: 6; } 80% { cy: 175; cx: 150; r: 0; } }
@keyframes pd-blk-goo-k32d { 0%, 100% { cy: 170; cx: 100; r: 0; } 8% { r: 6; } 50% { cy: 75;  cx: 50;  r: 6; } 80% { cy: 175; cx: 30;  r: 0; } }
@keyframes pd-blk-goo-k32e { 0%, 100% { cy: 170; cx: 100; r: 0; } 8% { r: 6; } 50% { cy: 75;  cx: 150; r: 6; } 80% { cy: 175; cx: 170; r: 0; } }

/* 33 ATOM — 3 electrons orbit on a 4-point ellipse approximation each */
[data-pd-goo-style="33"] .pd-blk-goo-at-orb1,
[data-pd-goo-style="33"] .pd-blk-goo-at-orb2,
[data-pd-goo-style="33"] .pd-blk-goo-at-orb3 {
    transform-box: view-box;
    transform-origin: 100px 100px;
    will-change: transform;
}
[data-pd-goo-style="33"] .pd-blk-goo-at-orb1 {
    animation: pd-blk-goo-spin360 calc(2.4s / var(--pd-blk-goo-speed, 1)) linear infinite;
}
[data-pd-goo-style="33"] .pd-blk-goo-at-orb2 {
    animation: pd-blk-goo-k33ccw calc(3s / var(--pd-blk-goo-speed, 1)) linear infinite;
}
[data-pd-goo-style="33"] .pd-blk-goo-at-orb3 {
    animation: pd-blk-goo-spin360 calc(3.6s / var(--pd-blk-goo-speed, 1)) linear infinite;
}
@keyframes pd-blk-goo-k33ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* 34 MAGNET — attract+repel on the centre line */
[data-pd-goo-style="34"] .pd-blk-goo-mg1 {
    animation: pd-blk-goo-k34a calc(2.8s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.6,0,.4,1) infinite;
}
[data-pd-goo-style="34"] .pd-blk-goo-mg2 {
    animation: pd-blk-goo-k34b calc(2.8s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes pd-blk-goo-k34a {
    0%   { cx: 40;  }
    40%  { cx: 88;  }
    50%  { cx: 92;  }
    60%  { cx: 36;  }
    100% { cx: 40;  }
}
@keyframes pd-blk-goo-k34b {
    0%   { cx: 160; }
    40%  { cx: 112; }
    50%  { cx: 108; }
    60%  { cx: 164; }
    100% { cx: 160; }
}

/* 35 BOOMERANG — out, return, opposite side, return */
[data-pd-goo-style="35"] .pd-blk-goo-bm {
    animation: pd-blk-goo-k35 calc(3.2s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k35 {
    0%   { cx: 100; cy: 100; }
    25%  { cx: 168; cy: 70;  }
    50%  { cx: 100; cy: 100; }
    75%  { cx: 32;  cy: 130; }
    100% { cx: 100; cy: 100; }
}

/* 36 RAINDROPS — 4 staggered drops fall off-screen */
[data-pd-goo-style="36"] .pd-blk-goo-rd {
    animation: pd-blk-goo-k36 calc(1.6s / var(--pd-blk-goo-speed, 1)) cubic-bezier(.55,0,.85,.55) infinite;
}
[data-pd-goo-style="36"] .pd-blk-goo-rd1 { animation-delay: 0s; }
[data-pd-goo-style="36"] .pd-blk-goo-rd2 { animation-delay: calc(-0.4s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="36"] .pd-blk-goo-rd3 { animation-delay: calc(-0.8s / var(--pd-blk-goo-speed, 1)); }
[data-pd-goo-style="36"] .pd-blk-goo-rd4 { animation-delay: calc(-1.2s / var(--pd-blk-goo-speed, 1)); }
@keyframes pd-blk-goo-k36 {
    0%   { cy: -10; }
    100% { cy: 215; }
}

/* 37 LIGHTHOUSE — beam rotates clockwise around centre */
[data-pd-goo-style="37"] .pd-blk-goo-rot {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: pd-blk-goo-spin360 calc(3.6s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}

/* 38 RING LOADER — open-arc ring rotates */
[data-pd-goo-style="38"] .pd-blk-goo-rl {
    transform-box: view-box;
    transform-origin: 100px 100px;
    animation: pd-blk-goo-spin360 calc(1.2s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}

/* 39 INFINITY — figure-8 path (2:1 Lissajous) */
[data-pd-goo-style="39"] .pd-blk-goo-if {
    animation:
        pd-blk-goo-k39cx calc(3.2s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite,
        pd-blk-goo-k39cy calc(1.6s / var(--pd-blk-goo-speed, 1)) ease-in-out infinite;
}
@keyframes pd-blk-goo-k39cx { 0%, 100% { cx: 40;  } 50% { cx: 160; } }
@keyframes pd-blk-goo-k39cy { 0%, 100% { cy: 100; } 50% { cy: 130; } }

/* 40 GEAR MESH — two ringed gears, opposite directions */
[data-pd-goo-style="40"] .pd-blk-goo-gr1 {
    transform-box: view-box;
    transform-origin: 70px 100px;
    animation: pd-blk-goo-spin360 calc(4s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}
[data-pd-goo-style="40"] .pd-blk-goo-gr2 {
    transform-box: view-box;
    transform-origin: 130px 100px;
    animation: pd-blk-goo-k33ccw calc(4s / var(--pd-blk-goo-speed, 1)) linear infinite;
    will-change: transform;
}

/* ============================================================
   GRAPHIC ROTATION & ANGLE
   ============================================================
   Three independent transforms compose on the inner stage:
     1. STATIC ANGLE — `--pd-blk-goo-angle` (default 0deg) sets a
        fixed rotation. Always applied; cheap.
     2. ANIMATED SPIN — when data-pd-goo-rotate="cw" or "ccw" is
        present on the root, the stage animates a full revolution
        starting *from* the static angle (baked into the keyframe
        via var()), so the two controls coexist without one
        overriding the other.
   The block container itself never rotates — only the inner stage.
   Inner SVG <g> rotators (orbit/yin/halo/tumble) compose on top
   because they target their own children with their own
   transform-origin.
   ============================================================ */

.pd-blk-goo-stage {
    /* Static angle is always the active transform when no animation
       runs. When an animation IS running, its keyframes override
       this property — and they bake the angle in as their start
       point, so visual continuity is preserved.                     */
    transform: rotate(var(--pd-blk-goo-angle, 0deg));
}

[data-pd-block="gooey"][data-pd-goo-rotate="cw"]  .pd-blk-goo-stage {
    animation: pd-blk-goo-rotate-cw  var(--pd-blk-goo-rotate-dur, 10s) linear infinite;
}
[data-pd-block="gooey"][data-pd-goo-rotate="ccw"] .pd-blk-goo-stage {
    animation: pd-blk-goo-rotate-ccw var(--pd-blk-goo-rotate-dur, 10s) linear infinite;
}

@keyframes pd-blk-goo-rotate-cw {
    from { transform: rotate(var(--pd-blk-goo-angle, 0deg)); }
    to   { transform: rotate(calc(var(--pd-blk-goo-angle, 0deg) + 360deg)); }
}
@keyframes pd-blk-goo-rotate-ccw {
    from { transform: rotate(var(--pd-blk-goo-angle, 0deg)); }
    to   { transform: rotate(calc(var(--pd-blk-goo-angle, 0deg) - 360deg)); }
}