/* ============== LavaOrb ============== */

.lava-orb {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  /* keep child filter operating on a self-contained area */
  isolation: isolate;
}

.lava-filter {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.lava-stage {
  position: absolute;
  inset: 0;
}

.lava-blob {
  position: absolute;
  background: radial-gradient(circle at 35% 35%, var(--accent) 0%, var(--accent-hover) 55%, transparent 78%);
  border-radius: 50%;
  opacity: 0.7;
  will-change: transform, border-radius;
}

/* Each blob has its own footprint, drift path, morph timing, and offset */
.lava-b1 {
  width: 70%; height: 70%;
  top: 8%; left: 15%;
  animation:
    lavaDrift1 38s ease-in-out infinite,
    lavaMorph  24s ease-in-out infinite;
}
.lava-b2 {
  width: 52%; height: 52%;
  top: 38%; left: 2%;
  animation:
    lavaDrift2 46s ease-in-out infinite,
    lavaMorph  28s ease-in-out infinite -8s;
}
.lava-b3 {
  width: 46%; height: 46%;
  top: 0%; left: 52%;
  animation:
    lavaDrift3 42s ease-in-out infinite,
    lavaMorph  32s ease-in-out infinite -14s;
}
.lava-b4 {
  width: 36%; height: 36%;
  top: 48%; left: 48%;
  animation:
    lavaDrift4 52s ease-in-out infinite,
    lavaMorph  36s ease-in-out infinite -4s;
}

/* Organic 4-point drift paths — each blob travels a different shape, more subtle */
@keyframes lavaDrift1 {
  0%, 100% { transform: translate(0%, 0%)    scale(1); }
  25%      { transform: translate(8%, -10%)  scale(1.06); }
  50%      { transform: translate(-6%, 12%)  scale(0.95); }
  75%      { transform: translate(10%, 8%)   scale(1.03); }
}
@keyframes lavaDrift2 {
  0%, 100% { transform: translate(0%, 0%)    scale(1); }
  30%      { transform: translate(12%, 6%)   scale(0.94); }
  60%      { transform: translate(-4%, -12%) scale(1.1); }
  85%      { transform: translate(9%, -4%)   scale(0.97); }
}
@keyframes lavaDrift3 {
  0%, 100% { transform: translate(0%, 0%)    scale(1); }
  20%      { transform: translate(-9%, 10%)  scale(1.05); }
  55%      { transform: translate(4%, 14%)   scale(1.12); }
  80%      { transform: translate(-12%, -3%) scale(0.94); }
}
@keyframes lavaDrift4 {
  0%, 100% { transform: translate(0%, 0%)    scale(1); }
  35%      { transform: translate(-11%, -7%) scale(1.15); }
  70%      { transform: translate(10%, -12%) scale(0.9); }
}

/* Border-radius morphing — gentler wobble */
@keyframes lavaMorph {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  25%      { border-radius: 56% 44% 49% 51% / 52% 47% 53% 48%; }
  50%      { border-radius: 47% 53% 54% 46% / 45% 53% 47% 55%; }
  75%      { border-radius: 52% 48% 45% 55% / 54% 46% 54% 46%; }
}

@media (prefers-reduced-motion: reduce) {
  .lava-blob { animation: none; }
}