/* ============================================
   Rime Blob - Animated Gooey Shape (ported from Axium)
   ============================================ */

.rime-blob {
  --rb-c1: #34e0f0;
  --rb-c2: #b400ff;
  --rb-shadow: rgba(255, 115, 0, 0.705);
  --rb-o1: rgba(255, 123, 0, 0.699);
  --rb-o2: rgba(255, 136, 0, 0.89);
  --rb-speed: 3s;
  display: flex;
  justify-content: center;
  width: 100%;
}

.rime-blob .rime-blob-shape {
  background-image: linear-gradient(120deg, var(--rb-c1) 0%, var(--rb-c2) 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  animation: rb-morph var(--rb-speed) linear infinite;
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
  position: relative;
}

.rime-blob .rime-blob-shape:before,
.rime-blob .rime-blob-shape:after {
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 5px 5px 89px var(--rb-shadow);
  will-change: border-radius, transform, opacity;
  animation-delay: 200ms;
  background-image: linear-gradient(
    120deg,
    var(--rb-o1) 0%,
    var(--rb-o2) 100%
  );
}

.rime-blob .rime-blob-shape:before {
  animation: rb-morph var(--rb-speed) linear infinite;
  opacity: 0.21;
  animation-duration: calc(var(--rb-speed) / 2);
}

@keyframes rb-morph {
  0%, 100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  34% {
    border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
  }
  50% {
    opacity: 0.89;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
  }
}