/* Lava Lamp Background - Smooth, Random, Stretchy */

:root {
  /* Day mode (default) */
  --lava-bg: linear-gradient(180deg, #f8f0f3 0%, #f0e6f0 50%, #e8f0f8 100%);
  --blob-1-color: radial-gradient(ellipse at 30% 20%, #ff7a7e, #fd9fef);
  --blob-2-color: radial-gradient(ellipse at 70% 80%, #78ede0, #fdb6d3);
  --blob-3-color: radial-gradient(ellipse at 50% 50%, #e279c2, #fef0b0);
  --blob-4-color: radial-gradient(ellipse at 40% 60%, #ffdca8, #fc9680);
  --blob-5-color: radial-gradient(ellipse at 60% 40%, #dab3fc, #7eb5fc);
  --blob-6-color: radial-gradient(ellipse at 50% 30%, #fac0b4, #ffb8ff);
  --topo-grid-line: rgba(77, 45, 48, 0.13);
}

[data-theme="night"] {
  --lava-bg: linear-gradient(180deg, #1a1425 0%, #2d1f3d 50%, #3d2848 100%);
  --blob-1-color: radial-gradient(ellipse at 30% 20%, #ff5a5e, #fd7fdf);
  --blob-2-color: radial-gradient(ellipse at 70% 80%, #58cdc0, #fd96c3);
  --blob-3-color: radial-gradient(ellipse at 50% 50%, #c259a2, #fef090);
  --blob-4-color: radial-gradient(ellipse at 40% 60%, #ffbc88, #fc7660);
  --blob-5-color: radial-gradient(ellipse at 60% 40%, #ca93fc, #6ea5fc);
  --blob-6-color: radial-gradient(ellipse at 50% 30%, #faa094, #ff98ff);
  --topo-grid-line: rgba(218, 178, 206, 0.28);
}

.lava-lamp {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: var(--lava-bg);
  transition: background 0.5s ease;
}

.lava-lamp::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.65;
  background:
    linear-gradient(var(--topo-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--topo-grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 0;
}

/* Lava blobs with stretch and morph */
.lava-blob {
  position: absolute;
  filter: blur(15px);
  opacity: 0.75;
  animation: 
    lava-rise var(--rise-duration) cubic-bezier(0.4, 0, 0.2, 1) infinite,
    lava-drift var(--drift-duration) ease-in-out infinite,
    lava-morph var(--morph-duration) ease-in-out infinite,
    lava-stretch var(--stretch-duration) ease-in-out infinite;
  animation-delay: 
    var(--rise-delay),
    var(--drift-delay),
    var(--morph-delay),
    var(--stretch-delay);
  mix-blend-mode: soft-light;
  will-change: transform, border-radius;
  z-index: 1;
}

/* Individual blobs with unique properties */
.blob-1 {
  width: 380px;
  height: 340px;
  background: var(--blob-1-color);
  left: 3%;
  bottom: -180px;
  --rise-duration: 24s;
  --rise-delay: 0s;
  --drift-duration: 18s;
  --drift-delay: 0s;
  --morph-duration: 12s;
  --morph-delay: 0s;
  --stretch-duration: 15s;
  --stretch-delay: 0s;
}

.blob-2 {
  width: 320px;
  height: 280px;
  background: var(--blob-2-color);
  left: 28%;
  bottom: -220px;
  --rise-duration: 28s;
  --rise-delay: -8s;
  --drift-duration: 22s;
  --drift-delay: -5s;
  --morph-duration: 14s;
  --morph-delay: -3s;
  --stretch-duration: 18s;
  --stretch-delay: -6s;
}

.blob-3 {
  width: 420px;
  height: 380px;
  background: var(--blob-3-color);
  right: 5%;
  bottom: -280px;
  --rise-duration: 32s;
  --rise-delay: -16s;
  --drift-duration: 20s;
  --drift-delay: -10s;
  --morph-duration: 16s;
  --morph-delay: -6s;
  --stretch-duration: 21s;
  --stretch-delay: -12s;
}

.blob-4 {
  width: 260px;
  height: 300px;
  background: var(--blob-4-color);
  left: 52%;
  bottom: -140px;
  --rise-duration: 20s;
  --rise-delay: -4s;
  --drift-duration: 16s;
  --drift-delay: -2s;
  --morph-duration: 10s;
  --morph-delay: -1s;
  --stretch-duration: 13s;
  --stretch-delay: -3s;
}

.blob-5 {
  width: 360px;
  height: 320px;
  background: var(--blob-5-color);
  right: -2%;
  bottom: -200px;
  --rise-duration: 26s;
  --rise-delay: -12s;
  --drift-duration: 24s;
  --drift-delay: -8s;
  --morph-duration: 15s;
  --morph-delay: -5s;
  --stretch-duration: 19s;
  --stretch-delay: -9s;
}

.blob-6 {
  width: 240px;
  height: 260px;
  background: var(--blob-6-color);
  left: -2%;
  bottom: -120px;
  --rise-duration: 22s;
  --rise-delay: -20s;
  --drift-duration: 19s;
  --drift-delay: -14s;
  --morph-duration: 13s;
  --morph-delay: -8s;
  --stretch-duration: 17s;
  --stretch-delay: -15s;
}

/* Rise animation - smooth bottom to top */
@keyframes lava-rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  5% {
    opacity: 0.6;
  }
  15% {
    opacity: 0.85;
  }
  85% {
    opacity: 0.85;
  }
  95% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-130vh);
    opacity: 0;
  }
}

/* Drift animation - random horizontal movement */
@keyframes lava-drift {
  0%, 100% {
    margin-left: 0;
  }
  15% {
    margin-left: 30px;
  }
  35% {
    margin-left: -20px;
  }
  55% {
    margin-left: 40px;
  }
  75% {
    margin-left: -30px;
  }
}

/* Morph animation - organic shape changes */
@keyframes lava-morph {
  0%, 100% {
    border-radius: 60% 40% 70% 30% / 40% 60% 30% 70%;
  }
  20% {
    border-radius: 40% 60% 30% 70% / 60% 40% 70% 30%;
  }
  40% {
    border-radius: 50% 50% 40% 60% / 50% 50% 60% 40%;
  }
  60% {
    border-radius: 70% 30% 50% 50% / 30% 70% 50% 50%;
  }
  80% {
    border-radius: 40% 60% 70% 30% / 60% 40% 30% 70%;
  }
}

/* Stretch animation - squash and stretch */
@keyframes lava-stretch {
  0%, 100% {
    transform: scaleX(1) scaleY(1) rotate(0deg);
  }
  25% {
    transform: scaleX(1.15) scaleY(0.85) rotate(5deg);
  }
  50% {
    transform: scaleX(0.9) scaleY(1.1) rotate(-3deg);
  }
  75% {
    transform: scaleX(1.1) scaleY(0.9) rotate(8deg);
  }
}

#simple-lava,
.lava-lamp canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1 !important;
}