/* Gooey buttons: SVG goo filter + a hidden label that rises out of the button on hover and stays joined to it by a neck of goo.
   Markup: <span class="gooey-btn"> <a|button class="…">Text</a> <span class="gooey-btn__label" aria-hidden="true">Label</span> </span>
   Needs the inline <svg class="gooey-filter"> with #gooey once on the page. The buttons inside must be fully opaque and have no box-shadow. */
.gooey-filter { position: absolute; width: 0; height: 0; overflow: hidden; }

.gooey-btn { --gl-h: 36px; --gl-gap: 6px; --gl-room: calc(var(--gl-h) + var(--gl-gap)); position: relative; display: block; padding-top: var(--gl-room); margin-top: calc(var(--gl-room) * -1); filter: url(#gooey); pointer-events: none; }
.gooey-btn > a, .gooey-btn > button { position: relative; z-index: 1; display: block; pointer-events: auto; box-shadow: none; }
.gooey-btn__label { position: absolute; z-index: 0; left: 50%; top: calc(var(--gl-room) + var(--bk-space-1)); height: var(--gl-h); padding: 0 var(--bk-space-4); display: flex; align-items: center; white-space: nowrap; border-radius: var(--bk-radius-pill); background: var(--bk-accent); color: var(--bk-on-accent); font-family: var(--bk-font-body); font-weight: 800; font-size: var(--bk-text-sm); transform: translate(-50%, 0); transition: transform .5s cubic-bezier(.34, 1.3, .64, 1); pointer-events: none; }
.gooey-btn > :is(a, button):is(:hover, :focus-visible) ~ .gooey-btn__label { transform: translate(-50%, calc((var(--gl-h) + var(--gl-gap) + var(--bk-space-1)) * -1)); }
.gooey-btn__label--cream { background: var(--bk-cream-100); }
.gooey-btn__label--green { background: var(--bk-green); }   /* matches the BEKIFFT button, which turns green on hover */
@media (prefers-reduced-motion: reduce) { .gooey-btn__label { transition: none; } }