/* ==========================================================================
   WUF Design Kit
   Section shapes, patterns and gradients · 25 button designs · 14 hover
   effects (incl. animated borders) · card styles · scroll animations ·
   heading accents · image frames.

   Plain CSS on top of core blocks: everything is a class on a core block,
   so pages keep their look with or without QuickLaunch. Colours follow
   the theme palette (Global Styles), with QuickLaunch variables and
   neutral values as fallbacks for other themes.
   ========================================================================== */

/* Defined again on any element that sets its own palette inline (Studio
   previews), because a custom property is resolved where it is declared:
   declared only on :root, the tokens would keep the root's colours. */
:root,
[style*="--wp--preset--color--primary"] {
  --wuf-k-primary: var(--wp--preset--color--primary, var(--wuf-primary, #2c5e43));
  --wuf-k-secondary: var(--wp--preset--color--secondary, var(--wuf-brand-secondary, #c35b3f));
  --wuf-k-accent: var(--wp--preset--color--accent, var(--wuf-accent, #e9c46a));
  --wuf-k-ink: var(--wp--preset--color--contrast, var(--wuf-secondary, #1f2421));
  --wuf-k-base: var(--wp--preset--color--base, #ffffff);
  --wuf-k-tint: var(--wp--preset--color--tint, #f7f5f0);
  --wuf-k-radius: min(var(--wp--custom--wuf--radius, 12px), 32px);
  --wuf-k-ease: cubic-bezier(.2, .8, .2, 1);

  /* Gradients: brand ones follow the palette; the rest are curated. */
  --wuf-g-brand: linear-gradient(135deg, var(--wuf-k-primary) 0%, color-mix(in srgb, var(--wuf-k-primary) 55%, var(--wuf-k-accent)) 100%);
  --wuf-g-duo: linear-gradient(120deg, var(--wuf-k-primary) 0%, var(--wuf-k-secondary) 100%);
  --wuf-g-glow: linear-gradient(135deg, var(--wuf-k-accent) 0%, var(--wuf-k-secondary) 100%);
  --wuf-g-sunset: linear-gradient(135deg, #ff7a59 0%, #ffb347 100%);
  --wuf-g-ocean: linear-gradient(135deg, #0f6c8d 0%, #34b3c7 100%);
  --wuf-g-meadow: linear-gradient(135deg, #2f7d4f 0%, #9bcf63 100%);
  --wuf-g-candy: linear-gradient(135deg, #ff6fa5 0%, #8f7bff 100%);
  --wuf-g-midnight: linear-gradient(160deg, #1d2333 0%, #3a4466 100%);
  --wuf-g-aurora: linear-gradient(120deg, #6a5cff 0%, #2bc6c6 50%, #b6f36a 100%);
  --wuf-g-soft: linear-gradient(180deg, var(--wuf-k-tint) 0%, color-mix(in srgb, var(--wuf-k-accent) 18%, var(--wuf-k-base)) 100%);

  --wuf-sh: 72px;
}

/* --------------------------------------------------------------------------
   1. Section shapes (top and/or bottom divider), cut with a mask so the
      page or next section shows through. Transparent borders add room.
   -------------------------------------------------------------------------- */
.wuf-shape-sm { --wuf-sh: 40px; }
.wuf-shape-md { --wuf-sh: 72px; }
.wuf-shape-lg { --wuf-sh: 110px; }

[class*="wuf-shape-b-"], [class*="wuf-shape-t-"] {
  --wuf-mask-t: linear-gradient(#000 0 0);
  --wuf-mask-b: linear-gradient(#000 0 0);
  border-top: var(--wuf-sh-t, 0px) solid transparent !important;
  border-bottom: var(--wuf-sh-b, 0px) solid transparent !important;
  -webkit-mask:
    var(--wuf-mask-t) 0 0 / 100% var(--wuf-sh-t, 0px) no-repeat,
    linear-gradient(#000 0 0) 0 var(--wuf-sh-t, 0px) / 100% calc(100% - var(--wuf-sh-t, 0px) - var(--wuf-sh-b, 0px)) no-repeat,
    var(--wuf-mask-b) 0 100% / 100% var(--wuf-sh-b, 0px) no-repeat;
          mask:
    var(--wuf-mask-t) 0 0 / 100% var(--wuf-sh-t, 0px) no-repeat,
    linear-gradient(#000 0 0) 0 var(--wuf-sh-t, 0px) / 100% calc(100% - var(--wuf-sh-t, 0px) - var(--wuf-sh-b, 0px)) no-repeat,
    var(--wuf-mask-b) 0 100% / 100% var(--wuf-sh-b, 0px) no-repeat;
  position: relative;
}
/* Bottom shapes overlap the next section, so its colour fills the cut. */
[class*="wuf-shape-b-"] { margin-block-end: calc(var(--wuf-sh-b, 0px) * -1) !important; z-index: 1; }
[class*="wuf-shape-b-"] + * { border-top: var(--wuf-sh) solid transparent; }
.wuf-shape-sm[class*="wuf-shape-b-"] + * { --wuf-sh: 40px; }
.wuf-shape-md[class*="wuf-shape-b-"] + * { --wuf-sh: 72px; }
.wuf-shape-lg[class*="wuf-shape-b-"] + * { --wuf-sh: 110px; }

/* --------------------------------------------------------------------------
   2. Section backgrounds: gradients and patterns (combinable).
   -------------------------------------------------------------------------- */
[class*="wuf-bg-g-"], [class*="wuf-pattern-"] {
  background-image: var(--wuf-pat, linear-gradient(transparent, transparent)), var(--wuf-grad, linear-gradient(transparent, transparent)) !important;
  background-size: var(--wuf-pat-size, auto), cover;
  background-repeat: repeat, no-repeat;
}
.wuf-bg-g-brand    { --wuf-grad: var(--wuf-g-brand); }
.wuf-bg-g-duo      { --wuf-grad: var(--wuf-g-duo); }
.wuf-bg-g-glow     { --wuf-grad: var(--wuf-g-glow); }
.wuf-bg-g-sunset   { --wuf-grad: var(--wuf-g-sunset); }
.wuf-bg-g-ocean    { --wuf-grad: var(--wuf-g-ocean); }
.wuf-bg-g-meadow   { --wuf-grad: var(--wuf-g-meadow); }
.wuf-bg-g-candy    { --wuf-grad: var(--wuf-g-candy); }
.wuf-bg-g-midnight { --wuf-grad: var(--wuf-g-midnight); }
.wuf-bg-g-aurora   { --wuf-grad: var(--wuf-g-aurora); }
.wuf-bg-g-soft     { --wuf-grad: var(--wuf-g-soft); }
.wuf-bg-g-mesh {
  --wuf-grad:
    radial-gradient(at 12% 18%, color-mix(in srgb, var(--wuf-k-primary) 28%, transparent) 0, transparent 52%),
    radial-gradient(at 88% 12%, color-mix(in srgb, var(--wuf-k-accent) 38%, transparent) 0, transparent 48%),
    radial-gradient(at 70% 92%, color-mix(in srgb, var(--wuf-k-secondary) 24%, transparent) 0, transparent 55%),
    linear-gradient(var(--wuf-k-tint), var(--wuf-k-tint));
}

.wuf-pattern-dots  { --wuf-pat: radial-gradient(color-mix(in srgb, currentColor 14%, transparent) 1.4px, transparent 1.6px); --wuf-pat-size: 22px 22px; }
.wuf-pattern-grid  { --wuf-pat: linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px); --wuf-pat-size: 32px 32px; }
.wuf-pattern-lines { --wuf-pat: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 7%, transparent) 0 2px, transparent 2px 14px); }
.wuf-pattern-paws  { --wuf-pat: var(--wuf-pat-paws-dark); --wuf-pat-size: 64px 64px; }
.wuf-pattern-bones { --wuf-pat: var(--wuf-pat-bones-dark); --wuf-pat-size: 72px 72px; }
.has-base-color.wuf-pattern-paws, .wuf-on-dark.wuf-pattern-paws { --wuf-pat: var(--wuf-pat-paws-light); }
.has-base-color.wuf-pattern-bones, .wuf-on-dark.wuf-pattern-bones { --wuf-pat: var(--wuf-pat-bones-light); }
/* The grid pattern draws two layers: repeat the size for both. */
.wuf-pattern-grid { background-size: 32px 32px, 32px 32px, cover; background-repeat: repeat, repeat, no-repeat; }
.wuf-pattern-grid[class*="wuf-bg-g-"], .wuf-pattern-grid { background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px), var(--wuf-grad, linear-gradient(transparent, transparent)) !important; }

/* --------------------------------------------------------------------------
   3. Buttons: 25 designs
      Specificity: the shared base rule is (0,2,0) via :where(), the same as
      each design rule, so the design (later in the file) always wins, while
      still beating theme.json button styles. (block styles "is-style-wuf-btn-*")
      Colour: .wuf-btn-c-{primary|secondary|accent|ink|light}
      Gradient: .wuf-btn-g-{brand|duo|glow|sunset|ocean|meadow|candy|midnight|aurora}
   -------------------------------------------------------------------------- */
.wp-block-button[class*="is-style-wuf-btn-"] {
  --b-bg: var(--wuf-k-primary);
  --b-fg: var(--wuf-k-base);
  --b-on: var(--wuf-k-primary); /* colour used for text/borders on light designs */
}
.wp-block-button.wuf-btn-c-primary   { --b-bg: var(--wuf-k-primary);   --b-fg: var(--wuf-k-base); --b-on: var(--wuf-k-primary); }
.wp-block-button.wuf-btn-c-secondary { --b-bg: var(--wuf-k-secondary); --b-fg: var(--wuf-k-base); --b-on: var(--wuf-k-secondary); }
.wp-block-button.wuf-btn-c-accent    { --b-bg: var(--wuf-k-accent);    --b-fg: var(--wuf-k-ink);  --b-on: color-mix(in srgb, var(--wuf-k-accent) 55%, var(--wuf-k-ink)); }
.wp-block-button.wuf-btn-c-ink       { --b-bg: var(--wuf-k-ink);       --b-fg: var(--wuf-k-base); --b-on: var(--wuf-k-ink); }
.wp-block-button.wuf-btn-c-light     { --b-bg: var(--wuf-k-base);      --b-fg: var(--wuf-k-ink);  --b-on: var(--wuf-k-base); }
.wp-block-button.wuf-btn-g-brand    { --b-grad: var(--wuf-g-brand);    --b-fg: #fff; }
.wp-block-button.wuf-btn-g-duo      { --b-grad: var(--wuf-g-duo);      --b-fg: #fff; }
.wp-block-button.wuf-btn-g-glow     { --b-grad: var(--wuf-g-glow);     --b-fg: var(--wuf-k-ink); }
.wp-block-button.wuf-btn-g-sunset   { --b-grad: var(--wuf-g-sunset);   --b-fg: #fff; --b-on: #e5603f; }
.wp-block-button.wuf-btn-g-ocean    { --b-grad: var(--wuf-g-ocean);    --b-fg: #fff; --b-on: #0f6c8d; }
.wp-block-button.wuf-btn-g-meadow   { --b-grad: var(--wuf-g-meadow);   --b-fg: #fff; --b-on: #2f7d4f; }
.wp-block-button.wuf-btn-g-candy    { --b-grad: var(--wuf-g-candy);    --b-fg: #fff; --b-on: #c4569b; }
.wp-block-button.wuf-btn-g-midnight { --b-grad: var(--wuf-g-midnight); --b-fg: #fff; --b-on: #2b3350; }
.wp-block-button.wuf-btn-g-aurora   { --b-grad: var(--wuf-g-aurora);   --b-fg: #fff; --b-on: #6a5cff; }

.wp-block-button:where([class*="is-style-wuf-btn-"]) > .wp-block-button__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .9em 1.7em;
  border: 2px solid transparent;
  border-radius: var(--wuf-k-radius);
  background: var(--b-grad, var(--b-bg));
  color: var(--b-fg);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .3s var(--wuf-k-ease), box-shadow .3s var(--wuf-k-ease), background .3s, color .3s, border-color .3s, letter-spacing .3s;
}
.wp-block-button:where([class*="is-style-wuf-btn-"]) > .wp-block-button__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--b-on) 55%, transparent);
  outline-offset: 3px;
}

/* On dark sections and image heroes, light designs use the text colour. */
:is(.has-base-color, .wp-block-cover:not(.is-light)) .wp-block-button[class*="is-style-wuf-btn-"] { --b-on: currentColor; }
:is(.has-base-color, .wp-block-cover:not(.is-light)) .wp-block-button.is-style-wuf-btn-gradient-border > .wp-block-button__link { background: linear-gradient(transparent, transparent) padding-box, var(--b-grad, var(--wuf-g-brand)) border-box; color: inherit; }

/* 1 Solid */
.wp-block-button.is-style-wuf-btn-solid > .wp-block-button__link { box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
/* 2 Pill */
.wp-block-button.is-style-wuf-btn-pill > .wp-block-button__link { border-radius: 999px; padding-inline: 2em; }
/* 3 Sharp */
.wp-block-button.is-style-wuf-btn-sharp > .wp-block-button__link { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .9em; }
/* 4 Outline */
.wp-block-button.is-style-wuf-btn-outline > .wp-block-button__link { background: transparent; color: var(--b-on); border-color: currentColor; }
/* 5 Outline bold */
.wp-block-button.is-style-wuf-btn-outline-bold > .wp-block-button__link { background: transparent; color: var(--b-on); border: 3px solid currentColor; border-radius: 999px; text-transform: uppercase; letter-spacing: .06em; }
/* 6 Ghost */
.wp-block-button.is-style-wuf-btn-ghost > .wp-block-button__link { background: transparent; color: var(--b-on); }
.wp-block-button.is-style-wuf-btn-ghost > .wp-block-button__link:hover { background: color-mix(in srgb, var(--b-on) 10%, transparent); }
/* 7 Soft (tinted) */
.wp-block-button.is-style-wuf-btn-soft > .wp-block-button__link { background: color-mix(in srgb, var(--b-bg) 14%, var(--wuf-k-base)); color: var(--b-on); }
/* 8 Raised (3D press) */
.wp-block-button.is-style-wuf-btn-raised > .wp-block-button__link { box-shadow: 0 6px 0 color-mix(in srgb, var(--b-bg) 70%, #000); transform: translateY(-3px); }
.wp-block-button.is-style-wuf-btn-raised > .wp-block-button__link:active { transform: translateY(3px); box-shadow: 0 0 0 color-mix(in srgb, var(--b-bg) 70%, #000); }
/* 9 Brutal (offset hard shadow) */
.wp-block-button.is-style-wuf-btn-brutal > .wp-block-button__link { border: 2px solid var(--wuf-k-ink); border-radius: 6px; box-shadow: 5px 5px 0 var(--wuf-k-ink); }
.wp-block-button.is-style-wuf-btn-brutal > .wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--wuf-k-ink); }
.wp-block-button.is-style-wuf-btn-brutal > .wp-block-button__link:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--wuf-k-ink); }
/* 10 Glass */
.wp-block-button.is-style-wuf-btn-glass > .wp-block-button__link { background: color-mix(in srgb, var(--wuf-k-base) 18%, transparent); color: inherit; border-color: color-mix(in srgb, currentColor 35%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4); border-radius: 999px; }
/* 11 Gradient (uses the chosen gradient, or the brand gradient) */
.wp-block-button.is-style-wuf-btn-gradient > .wp-block-button__link { background: var(--b-grad, var(--wuf-g-brand)); background-size: 200% 100%; color: var(--b-fg, #fff); border-radius: 999px; }
.wp-block-button.is-style-wuf-btn-gradient > .wp-block-button__link:hover { background-position: 100% 0; }
/* 12 Gradient border */
.wp-block-button.is-style-wuf-btn-gradient-border > .wp-block-button__link { background: linear-gradient(var(--wuf-k-base), var(--wuf-k-base)) padding-box, var(--b-grad, var(--wuf-g-brand)) border-box; color: var(--wuf-k-ink); border: 2px solid transparent; border-radius: 999px; }
/* 13 Neon glow */
.wp-block-button.is-style-wuf-btn-neon > .wp-block-button__link { box-shadow: 0 0 0 1px color-mix(in srgb, var(--b-bg) 60%, transparent), 0 8px 28px -6px var(--b-bg); }
/* 14 Link (text with animated underline) */
.wp-block-button.is-style-wuf-btn-link > .wp-block-button__link { background: none; color: var(--b-on); padding: .3em 0; border: 0; border-radius: 0; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 2px; background-position: 0 100%; background-repeat: no-repeat; }
.wp-block-button.is-style-wuf-btn-link > .wp-block-button__link:hover { background-size: 30% 2px; }
/* 15 Arrow */
.wp-block-button.is-style-wuf-btn-arrow > .wp-block-button__link::after { content: "→"; transition: transform .3s var(--wuf-k-ease); }
.wp-block-button.is-style-wuf-btn-arrow > .wp-block-button__link:hover::after { transform: translateX(5px); }
/* 16 Icon circle */
.wp-block-button.is-style-wuf-btn-icon-circle > .wp-block-button__link { border-radius: 999px; padding: .45em .5em .45em 1.6em; }
.wp-block-button.is-style-wuf-btn-icon-circle > .wp-block-button__link::after { content: "→"; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--b-fg); color: var(--b-bg); transition: transform .35s var(--wuf-k-ease); }
.wp-block-button.is-style-wuf-btn-icon-circle > .wp-block-button__link:hover::after { transform: rotate(-45deg); }
/* 17 Split (label + arrow block) */
.wp-block-button.is-style-wuf-btn-split > .wp-block-button__link { padding: 0 0 0 1.5em; gap: 1.2em; overflow: hidden; }
.wp-block-button.is-style-wuf-btn-split > .wp-block-button__link::after { content: "→"; align-self: stretch; display: grid; place-items: center; padding: 0 1em; background: color-mix(in srgb, var(--b-bg) 75%, #000); transition: padding .3s var(--wuf-k-ease); }
.wp-block-button.is-style-wuf-btn-split > .wp-block-button__link { min-height: 3em; }
.wp-block-button.is-style-wuf-btn-split > .wp-block-button__link:hover::after { padding: 0 1.5em; }
/* 18 Double border */
.wp-block-button.is-style-wuf-btn-double > .wp-block-button__link { box-shadow: 0 0 0 3px var(--wuf-k-base), 0 0 0 5px var(--b-bg); }
/* 19 Elevated */
.wp-block-button.is-style-wuf-btn-elevated > .wp-block-button__link { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--b-bg) 70%, transparent), 0 2px 6px rgb(0 0 0 / .08); }
/* 20 Skew */
.wp-block-button.is-style-wuf-btn-skew > .wp-block-button__link { border-radius: 4px; transform: skewX(-12deg); }
/* 21 Notch (cut corners) */
.wp-block-button.is-style-wuf-btn-notch > .wp-block-button__link { border-radius: 0; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); padding-inline: 2em; }
/* 22 Blob (organic) */
.wp-block-button.is-style-wuf-btn-blob > .wp-block-button__link { border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%; padding: 1em 2.1em; transition: border-radius .6s var(--wuf-k-ease), transform .3s var(--wuf-k-ease); }
.wp-block-button.is-style-wuf-btn-blob > .wp-block-button__link:hover { border-radius: 40% 60% 54% 46% / 46% 60% 40% 54%; }
/* 23 Sticker (playful tilt + white edge) */
.wp-block-button.is-style-wuf-btn-sticker > .wp-block-button__link { border-radius: 14px; transform: rotate(-2deg); border: 3px solid var(--wuf-k-base); box-shadow: 0 6px 16px rgb(0 0 0 / .18); }
.wp-block-button.is-style-wuf-btn-sticker > .wp-block-button__link:hover { transform: rotate(0) scale(1.04); }
/* 24 Pressed (soft neumorphic) */
.wp-block-button.is-style-wuf-btn-pressed > .wp-block-button__link { background: var(--wuf-k-tint); color: var(--b-on); border-radius: 16px; box-shadow: 6px 6px 14px color-mix(in srgb, var(--wuf-k-ink) 14%, transparent), -6px -6px 14px var(--wuf-k-base); }
.wp-block-button.is-style-wuf-btn-pressed > .wp-block-button__link:active { box-shadow: inset 4px 4px 10px color-mix(in srgb, var(--wuf-k-ink) 16%, transparent), inset -4px -4px 10px var(--wuf-k-base); }
/* 25 Stacked (layered offset) */
.wp-block-button.is-style-wuf-btn-stacked > .wp-block-button__link { overflow: visible; }
.wp-block-button.is-style-wuf-btn-stacked > .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--wuf-k-accent); transform: translate(6px, 6px); transition: transform .3s var(--wuf-k-ease); }
.wp-block-button.is-style-wuf-btn-stacked > .wp-block-button__link:hover::before { transform: translate(0, 0); }

/* --------------------------------------------------------------------------
   4. Hover effects: .wp-block-button.wuf-hover-* on the button (works with any design)
   -------------------------------------------------------------------------- */
@property --wuf-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.wp-block-button[class*="wuf-hover-"] > .wp-block-button__link { position: relative; isolation: isolate; }
.wp-block-button.wuf-hover-lift > .wp-block-button__link:hover { transform: translateY(-4px); box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--b-bg, #000) 70%, transparent); }
.wp-block-button.wuf-hover-grow > .wp-block-button__link:hover { transform: scale(1.06); }
.wp-block-button.wuf-hover-glow > .wp-block-button__link:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--b-bg, currentColor) 25%, transparent), 0 10px 30px -6px var(--b-bg, currentColor); }
.wp-block-button.wuf-hover-pulse > .wp-block-button__link:hover { animation: wuf-pulse 1.2s ease-out infinite; }
.wp-block-button.wuf-hover-wobble > .wp-block-button__link:hover { animation: wuf-wobble .6s ease-in-out; }
.wp-block-button.wuf-hover-nudge > .wp-block-button__link::after { transition: transform .3s var(--wuf-k-ease); }
.wp-block-button.wuf-hover-nudge > .wp-block-button__link:hover { letter-spacing: .02em; }
.wp-block-button.wuf-hover-nudge > .wp-block-button__link:hover::after { transform: translateX(6px); }

/* Shine sweep */
.wp-block-button.wuf-hover-shine > .wp-block-button__link { overflow: hidden; }
.wp-block-button.wuf-hover-shine > .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .45) 50%, transparent 70%); transform: translateX(-120%); }
.wp-block-button.wuf-hover-shine > .wp-block-button__link:hover::before { transition: transform .8s var(--wuf-k-ease); transform: translateX(120%); }

/* Fill slide (left to right) and fill up: colour flood behind the label */
.wp-block-button.wuf-hover-fill-slide > .wp-block-button__link, .wp-block-button.wuf-hover-fill-up > .wp-block-button__link { overflow: hidden; }
.wp-block-button.wuf-hover-fill-slide > .wp-block-button__link::before, .wp-block-button.wuf-hover-fill-up > .wp-block-button__link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--b-grad, var(--b-on, var(--wuf-k-primary))); transition: transform .45s var(--wuf-k-ease); }
.wp-block-button.wuf-hover-fill-slide > .wp-block-button__link::before { transform: scaleX(0); transform-origin: left; }
.wp-block-button.wuf-hover-fill-up > .wp-block-button__link::before { transform: scaleY(0); transform-origin: bottom; }
.wp-block-button.wuf-hover-fill-slide > .wp-block-button__link:hover, .wp-block-button.wuf-hover-fill-up > .wp-block-button__link:hover { color: var(--b-fg, #fff); border-color: transparent; }
.wp-block-button.wuf-hover-fill-slide > .wp-block-button__link:hover::before { transform: scaleX(1); }
.wp-block-button.wuf-hover-fill-up > .wp-block-button__link:hover::before { transform: scaleY(1); }

/* Underline grow */
.wp-block-button.wuf-hover-underline > .wp-block-button__link { background-image: linear-gradient(currentColor, currentColor), var(--b-grad, linear-gradient(var(--b-bg, transparent), var(--b-bg, transparent))); background-size: 0 2px, 100% 100%; background-position: 50% calc(100% - .5em), 0 0; background-repeat: no-repeat; }
.wp-block-button.wuf-hover-underline > .wp-block-button__link:hover { background-size: calc(100% - 3.4em) 2px, 100% 100%; }

/* Ring pseudo-element used by the animated borders */
.wp-block-button.wuf-hover-border-draw > .wp-block-button__link::after,
.wp-block-button.wuf-hover-border-spin > .wp-block-button__link::after,
.wp-block-button.wuf-hover-border-march > .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  padding: 2px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* Border draw: four lines draw around the button */
.wp-block-button.wuf-hover-border-draw > .wp-block-button__link::after {
  background:
    linear-gradient(var(--b-on, currentColor), var(--b-on, currentColor)) 0 0 / 0 2px no-repeat,
    linear-gradient(var(--b-on, currentColor), var(--b-on, currentColor)) 100% 0 / 2px 0 no-repeat,
    linear-gradient(var(--b-on, currentColor), var(--b-on, currentColor)) 100% 100% / 0 2px no-repeat,
    linear-gradient(var(--b-on, currentColor), var(--b-on, currentColor)) 0 100% / 2px 0 no-repeat;
  transition: background-size .5s var(--wuf-k-ease);
}
.wp-block-button.wuf-hover-border-draw > .wp-block-button__link:hover::after { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; }

/* Border spin: a rotating gradient ring */
.wp-block-button.wuf-hover-border-spin > .wp-block-button__link::after {
  background: conic-gradient(from var(--wuf-angle), var(--wuf-k-primary), var(--wuf-k-accent), var(--wuf-k-secondary), var(--wuf-k-primary));
  opacity: 0;
  transition: opacity .3s;
  animation: wuf-spin 2.4s linear infinite;
}
.wp-block-button.wuf-hover-border-spin > .wp-block-button__link:hover::after { opacity: 1; }

/* Border march: dashed "marching ants" ring */
.wp-block-button.wuf-hover-border-march > .wp-block-button__link::after {
  background: repeating-linear-gradient(90deg, var(--b-on, currentColor) 0 8px, transparent 8px 14px) 0 0 / 28px 100%;
  opacity: 0;
  transition: opacity .3s;
}
.wp-block-button.wuf-hover-border-march > .wp-block-button__link:hover::after { opacity: 1; animation: wuf-march .6s linear infinite; }

/* Corners: brackets expand into a frame */
.wp-block-button.wuf-hover-corners > .wp-block-button__link::before,
.wp-block-button.wuf-hover-corners > .wp-block-button__link::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
  border: 2px solid var(--b-on, currentColor);
  transition: width .4s var(--wuf-k-ease), height .4s var(--wuf-k-ease);
}
.wp-block-button.wuf-hover-corners > .wp-block-button__link::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.wp-block-button.wuf-hover-corners > .wp-block-button__link::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.wp-block-button.wuf-hover-corners > .wp-block-button__link:hover::before,
.wp-block-button.wuf-hover-corners > .wp-block-button__link:hover::after { width: calc(100% + 12px); height: calc(100% + 12px); }

@keyframes wuf-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--b-bg, currentColor) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes wuf-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-1.5deg); } }
@keyframes wuf-spin { to { --wuf-angle: 360deg; } }
@keyframes wuf-march { to { background-position: 28px 0; } }

/* --------------------------------------------------------------------------
   5. Card styles: .wuf-cards-* on a section styles every card in it
   -------------------------------------------------------------------------- */
.wuf-cards-elevated .is-style-wuf-card { border-color: transparent; box-shadow: 0 18px 40px -24px rgb(0 0 0 / .35), 0 2px 6px rgb(0 0 0 / .05); }
.wuf-cards-bordered .is-style-wuf-card { box-shadow: none; border-width: 2px; }
.wuf-cards-glass .is-style-wuf-card { background: color-mix(in srgb, var(--wuf-k-base) 55%, transparent); border-color: color-mix(in srgb, var(--wuf-k-base) 70%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.wuf-cards-gradient-border .is-style-wuf-card { border: 2px solid transparent; background: linear-gradient(var(--wuf-k-base), var(--wuf-k-base)) padding-box, var(--wuf-g-brand) border-box; }
.wuf-cards-accent-top .is-style-wuf-card { border-top: 5px solid var(--wuf-k-accent); }
.wuf-cards-flat .is-style-wuf-card { border-color: transparent; background: color-mix(in srgb, var(--wuf-k-primary) 6%, var(--wuf-k-base)); }
[class*="wuf-cards-"] .is-style-wuf-card { transition: transform .35s var(--wuf-k-ease), box-shadow .35s var(--wuf-k-ease); }
.wuf-cards-hover-lift .is-style-wuf-card:hover { transform: translateY(-6px); box-shadow: 0 24px 40px -22px rgb(0 0 0 / .4); }
.wuf-cards-hover-lift .is-style-wuf-card img { transition: transform .6s var(--wuf-k-ease); }
.wuf-cards-hover-lift .is-style-wuf-card:hover img { transform: scale(1.05); }
.wuf-cards-hover-lift .is-style-wuf-card .wp-block-image { overflow: hidden; border-radius: min(var(--wuf-k-radius), 32px); }

/* --------------------------------------------------------------------------
   6. Heading accents: .wuf-accent-* on a section
   -------------------------------------------------------------------------- */
.wuf-accent-underline :is(h1, h2)::after { content: ""; display: block; width: 64px; height: 5px; margin-top: .4em; border-radius: 99px; background: var(--wuf-g-brand); }
.wuf-accent-underline :is(h1, h2).has-text-align-center::after { margin-inline: auto; }
.wuf-accent-marker :is(h1, h2) { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--wuf-k-accent) 60%, transparent) 62%, color-mix(in srgb, var(--wuf-k-accent) 60%, transparent) 90%, transparent 90%); display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wuf-accent-gradient :is(h1, h2) { background: var(--wuf-g-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wuf-accent-eyebrow-pill p.has-small-font-size:first-child { display: inline-block; padding: .3em .9em; border-radius: 999px; background: color-mix(in srgb, var(--wuf-k-accent) 35%, transparent); }

/* --------------------------------------------------------------------------
   7. Image frames: .wuf-img-* on a section
   -------------------------------------------------------------------------- */
.wuf-img-blob .wp-block-image img { border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; }
.wuf-img-circle .wp-block-image img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }
.wuf-img-tilt .wp-block-image img { transform: rotate(-2.5deg); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .45); border: 8px solid var(--wuf-k-base); }
.wuf-img-offset .wp-block-image { position: relative; isolation: isolate; }
.wuf-img-offset .wp-block-image::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; z-index: -1; border-radius: min(var(--wuf-k-radius), 32px); background: var(--wuf-k-accent); }
.wuf-img-shadow .wp-block-image img { box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); }

/* --------------------------------------------------------------------------
   8. Scroll animations: .wuf-anim-* on a section. Pure CSS (scroll-driven
      animations); browsers without support simply show the content.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    [class*="wuf-anim-"] > * { animation: linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .wuf-anim-fade-up > * { animation-name: wuf-in-up; }
    .wuf-anim-fade > * { animation-name: wuf-in-fade; }
    .wuf-anim-zoom > * { animation-name: wuf-in-zoom; }
    .wuf-anim-slide-left > * { animation-name: wuf-in-left; }
    .wuf-anim-slide-right > * { animation-name: wuf-in-right; }
    .wuf-anim-stagger .wp-block-column:nth-child(2) { animation-range: entry 12% cover 34%; }
    .wuf-anim-stagger .wp-block-column:nth-child(3) { animation-range: entry 19% cover 40%; }
    .wuf-anim-stagger .wp-block-column:nth-child(4) { animation-range: entry 26% cover 46%; }
    .wuf-anim-stagger .wp-block-column { animation: wuf-in-up linear both; animation-timeline: view(); }
  }
}
@keyframes wuf-in-up { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes wuf-in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wuf-in-zoom { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes wuf-in-left { from { opacity: 0; transform: translateX(-48px); } to { opacity: 1; transform: none; } }
@keyframes wuf-in-right { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }

/* Respect reduced motion everywhere in the kit. */
@media (prefers-reduced-motion: reduce) {
  [class*="wuf-hover-"] > .wp-block-button__link,
  [class*="wuf-hover-"] > .wp-block-button__link::before,
  [class*="wuf-hover-"] > .wp-block-button__link::after,
  [class*="is-style-wuf-btn-"] > .wp-block-button__link { animation: none !important; transition: none !important; }
}
/* Shape dividers: generated from tools/gen-design-kit. Each value is a mask image. */
:root {
  --wuf-shape-b-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V62C1000 124 800 0 600 62S200 124 0 62Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V62C1000 124 800 0 600 62S200 124 0 62Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V56C1100 112 1000 112 900 56S700 0 600 56 400 112 300 56 100 0 0 56Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V56C1100 112 1000 112 900 56S700 0 600 56 400 112 300 56 100 0 0 56Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-slant-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V0L0 120Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-slant-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V0L0 120Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-slant-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V120L0 0Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-slant-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V120L0 0Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V36Q600 204 0 36Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-curve: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V36Q600 204 0 36Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V120Q600 -60 0 120Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V120Q600 -60 0 120Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V24L600 120L0 24Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V24L600 120L0 24Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V100L1150 60 1100 100 1050 60 1000 100 950 60 900 100 850 60 800 100 750 60 700 100 650 60 600 100 550 60 500 100 450 60 400 100 350 60 300 100 250 60 200 100 150 60 100 100 50 60 0 100Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V100L1150 60 1100 100 1050 60 1000 100 950 60 900 100 850 60 800 100 750 60 700 100 650 60 600 100 550 60 500 100 450 60 400 100 350 60 300 100 250 60 200 100 150 60 100 100 50 60 0 100Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-peaks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V84L1050 36 900 96 720 24 540 92 360 40 180 100 0 52Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-peaks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V84L1050 36 900 96 720 24 540 92 360 40 180 100 0 52Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-tilt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V40L0 110Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-tilt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V40L0 110Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-b-blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg%3E%3Cpath d='M0 0H1200V70C1080 120 960 30 820 70S560 120 420 64 160 20 0 80Z'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-shape-t-blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cg transform=%22matrix(1 0 0 -1 0 120)%22%3E%3Cpath d='M0 0H1200V70C1080 120 960 30 820 70S560 120 420 64 160 20 0 80Z'/%3E%3C/g%3E%3C/svg%3E");
}
.wuf-shape-b-wave { --wuf-mask-b: var(--wuf-shape-b-wave); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-wave { --wuf-mask-t: var(--wuf-shape-t-wave); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-waves { --wuf-mask-b: var(--wuf-shape-b-waves); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-waves { --wuf-mask-t: var(--wuf-shape-t-waves); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-slant-l { --wuf-mask-b: var(--wuf-shape-b-slant-l); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-slant-l { --wuf-mask-t: var(--wuf-shape-t-slant-l); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-slant-r { --wuf-mask-b: var(--wuf-shape-b-slant-r); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-slant-r { --wuf-mask-t: var(--wuf-shape-t-slant-r); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-curve { --wuf-mask-b: var(--wuf-shape-b-curve); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-curve { --wuf-mask-t: var(--wuf-shape-t-curve); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-arch { --wuf-mask-b: var(--wuf-shape-b-arch); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-arch { --wuf-mask-t: var(--wuf-shape-t-arch); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-chevron { --wuf-mask-b: var(--wuf-shape-b-chevron); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-chevron { --wuf-mask-t: var(--wuf-shape-t-chevron); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-zigzag { --wuf-mask-b: var(--wuf-shape-b-zigzag); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-zigzag { --wuf-mask-t: var(--wuf-shape-t-zigzag); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-peaks { --wuf-mask-b: var(--wuf-shape-b-peaks); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-peaks { --wuf-mask-t: var(--wuf-shape-t-peaks); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-tilt { --wuf-mask-b: var(--wuf-shape-b-tilt); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-tilt { --wuf-mask-t: var(--wuf-shape-t-tilt); --wuf-sh-t: var(--wuf-sh); }
.wuf-shape-b-blob { --wuf-mask-b: var(--wuf-shape-b-blob); --wuf-sh-b: var(--wuf-sh); }
.wuf-shape-t-blob { --wuf-mask-t: var(--wuf-shape-t-blob); --wuf-sh-t: var(--wuf-sh); }
/* Pet patterns: dark marks on light sections, light marks on dark ones */
:root {
  --wuf-pat-paws-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='rgba(0,0,0,0.07)' transform='rotate(-18 32 32)'%3E%3Cellipse cx='32' cy='40' rx='9' ry='7.5'/%3E%3Cellipse cx='20.5' cy='29' rx='4' ry='5'/%3E%3Cellipse cx='28' cy='23.5' rx='4' ry='5'/%3E%3Cellipse cx='36' cy='23.5' rx='4' ry='5'/%3E%3Cellipse cx='43.5' cy='29' rx='4' ry='5'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-pat-paws-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='rgba(255,255,255,0.10)' transform='rotate(-18 32 32)'%3E%3Cellipse cx='32' cy='40' rx='9' ry='7.5'/%3E%3Cellipse cx='20.5' cy='29' rx='4' ry='5'/%3E%3Cellipse cx='28' cy='23.5' rx='4' ry='5'/%3E%3Cellipse cx='36' cy='23.5' rx='4' ry='5'/%3E%3Cellipse cx='43.5' cy='29' rx='4' ry='5'/%3E%3C/g%3E%3C/svg%3E");
  --wuf-pat-bones-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath fill='rgba(0,0,0,0.06)' transform='rotate(30 36 36)' d='M24 32a5 5 0 1 1-4-8 5 5 0 1 1 8-4c0 1 0 2-1 3h18c-1-1-1-2-1-3a5 5 0 1 1 8 4 5 5 0 1 1-4 8 5 5 0 1 1-4 8c0-1 0-2 1-3H27c1 1 1 2 1 3a5 5 0 1 1-4-8z'/%3E%3C/svg%3E");
  --wuf-pat-bones-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath fill='rgba(255,255,255,0.09)' transform='rotate(30 36 36)' d='M24 32a5 5 0 1 1-4-8 5 5 0 1 1 8-4c0 1 0 2-1 3h18c-1-1-1-2-1-3a5 5 0 1 1 8 4 5 5 0 1 1-4 8 5 5 0 1 1-4 8c0-1 0-2 1-3H27c1 1 1 2 1 3a5 5 0 1 1-4-8z'/%3E%3C/svg%3E");
}