/* Raptool blob buttons: the one place for the colour-blob button look.
   Light background: <a class="rt-blob">            (the "Book a meeting" look: blue, purple, pink, teal)
   Dark background:  <a class="rt-blob dark">       (the "Explore the rAppstore" look: blue, purple, pink, orange)
   Small button:     add "sm" (a pill with the label and a small white arrow circle)
   Markup: <a class="rt-blob"><span class="bb" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
             [<span class="ic">svg</span>] <span class="tx"><b>Title</b>[<small>Line</small>]</span>
             <span class="ar" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6"/></svg></span></a> */
.rt-blob{position:relative;display:flex;align-items:center;gap:16px;overflow:hidden;isolation:isolate;padding:20px 22px;border:0;border-radius:22px;color:#fff!important;text-decoration:none!important;background:#1b1530;box-shadow:0 24px 50px -24px rgba(90,50,200,.7);cursor:pointer;font:inherit;text-align:left;text-shadow:0 1px 10px rgba(0,0,0,.25);transition:transform .25s,box-shadow .25s}
.rt-blob:hover{transform:translateY(-3px);box-shadow:0 30px 60px -24px rgba(90,50,200,.85)}
.rt-blob[disabled]{opacity:.65;cursor:default;transform:none}
.rt-blob .bb{position:absolute;inset:-40%;z-index:-1;filter:blur(28px);opacity:.95;pointer-events:none}
.rt-blob .bb i{position:absolute;width:55%;height:70%;border-radius:50%;mix-blend-mode:screen;animation:rtbb 16s ease-in-out infinite alternate}
.rt-blob .bb i:nth-child(1){left:5%;top:20%;background:#4c6bff;animation-duration:13s}
.rt-blob .bb i:nth-child(2){left:35%;top:10%;background:#a24bff;animation-duration:17s;animation-direction:alternate-reverse}
.rt-blob .bb i:nth-child(3){left:55%;top:30%;background:#ff5f9e;animation-duration:15s}
.rt-blob .bb i:nth-child(4){left:20%;top:45%;background:#21c9c0;animation-duration:19s;animation-direction:alternate-reverse}
@keyframes rtbb{0%{transform:translate(-15%,5%) scale(.9)}50%{transform:translate(25%,-10%) scale(1.15)}100%{transform:translate(50%,8%) scale(1)}}
.rt-blob .ic{flex:none;width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.rt-blob .ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rt-blob .tx{flex:1;min-width:0}
.rt-blob .tx b{display:block;font-size:20px;font-weight:700;line-height:1.2}
.rt-blob .tx small{display:block;margin-top:3px;font-size:14.5px;opacity:.9}
.rt-blob .ar{flex:none;width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center;transition:transform .25s}
.rt-blob .ar svg{width:18px;height:18px;fill:none;stroke:#1b1530;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rt-blob:hover .ar{transform:translateX(3px)}

/* dark background: the rAppstore look */
.rt-blob.dark{background:#1c1450;box-shadow:0 16px 40px -18px rgba(124,92,255,.45);text-shadow:0 1px 10px rgba(0,0,0,.4)}
.rt-blob.dark:hover{box-shadow:0 18px 44px -14px rgba(124,92,255,.55)}
.rt-blob.dark .bb{inset:0;filter:blur(18px) saturate(1.35);opacity:1}
.rt-blob.dark .bb i{width:60%;height:auto;aspect-ratio:1;opacity:.95;animation:rtbd-morph 5.5s ease-in-out infinite alternate,rtbd-hue 8s ease-in-out infinite alternate}
.rt-blob.dark .bb i:nth-child(1){left:-12%;top:-80%;background:radial-gradient(circle at 40% 40%,#4285f4,#4285f400 70%);animation-duration:5s,7s}
.rt-blob.dark .bb i:nth-child(2){left:22%;top:-40%;background:radial-gradient(circle at 50% 50%,#a142f4,#a142f400 70%);animation-duration:6.5s,9s;animation-direction:alternate-reverse,alternate}
.rt-blob.dark .bb i:nth-child(3){left:48%;top:-90%;background:radial-gradient(circle at 50% 50%,#f442a1,#f442a100 70%);animation-duration:4.5s,6s}
.rt-blob.dark .bb i:nth-child(4){left:68%;top:-30%;background:radial-gradient(circle at 50% 50%,#ff6a3d,#ffb35c00 72%);animation-duration:6s,8s;animation-direction:alternate-reverse,alternate-reverse}
@keyframes rtbd-morph{0%{border-radius:42% 58% 63% 37%/45% 38% 62% 55%;transform:translate(0,0) scale(1)}33%{border-radius:63% 37% 41% 59%/56% 61% 39% 44%;transform:translate(14%,10%) scale(1.25)}66%{border-radius:36% 64% 57% 43%/62% 42% 58% 38%;transform:translate(-10%,18%) scale(.85)}100%{border-radius:55% 45% 38% 62%/40% 57% 43% 60%;transform:translate(8%,-6%) scale(1.1)}}
@keyframes rtbd-hue{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(40deg)}}

/* small: a pill with the label and a small arrow circle */
.rt-blob.sm{display:inline-flex;gap:12px;padding:8px 8px 8px 22px;min-height:50px;border-radius:999px}
.rt-blob.sm .tx b{font-size:16px}
.rt-blob.sm .ar{width:34px;height:34px}
.rt-blob.sm .ar svg{width:15px;height:15px}
.rt-blob.sm .bb{filter:blur(16px)}

@media(prefers-reduced-motion:reduce){.rt-blob .bb i{animation:none}}