/* ---------- Base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }

body {
  width:100vw;
  height:100vh;
  background: radial-gradient(circle at 50% 60%, #4a2060, #1a001f 85%);
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  font-family: sans-serif;
}

.scene {
  position: relative;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  padding-bottom:50px;
}

/* ---------- Cauldron ---------- */
.cauldron {
  position: relative;
  width:700px;  /* bigger cauldron */
  height:460px;
  background: #222;
  border-radius: 300px 300px 120px 120px;
  border: 5px solid #111;
  overflow: visible;
}

/* Legs */
.cauldron::before,
.cauldron::after {
  content:"";
  position:absolute;
  bottom:-40px;
  width:60px;
  height:60px;
  background:#222;
  border:5px solid #111;
  border-radius:50%;
  z-index: 1
}
.cauldron::before { left:60px; }
.cauldron::after { right:60px; }

/* ---------- Potion ---------- */
.potion {
  position: absolute;
  bottom:0;
  width:100%;
  height:180px;
  background: radial-gradient(circle at 50% 30%, #9bffb5 0%, #33cc66 80%);
  border-radius: 0 0 120px 120px;
  overflow:hidden;
  box-shadow: 0 0 50px 20px #33cc66;
  animation: potionGlow 2s ease-in-out infinite alternate;
}

/* Bubbles */
.bubble {
  position:absolute;
  bottom:0;
  width:25px;
  height:25px;
  background:#aaffaa;
  border-radius:50%;
  opacity:0.8;
  animation: rise 3s infinite ease-in;
}

.bubble1 { left:20%; animation-delay:0s; }
.bubble2 { left:40%; animation-delay:0.5s; }
.bubble3 { left:60%; animation-delay:1s; }
.bubble4 { left:35%; animation-delay:1.2s; }
.bubble5 { left:55%; animation-delay:0.8s; }

@keyframes rise {
  0% { transform: translateY(0) scale(0.6); opacity:0.8; }
  50% { transform: translateY(-80px) scale(1); opacity:1; }
  100% { transform: translateY(-160px) scale(0.6); opacity:0; }
}

/* Potion glow */
@keyframes potionGlow {
  0% { box-shadow:0 0 50px 20px #33cc66; }
  100% { box-shadow:0 0 80px 30px #33ff88; }
}

/* ---------- Steam ---------- */
.steam {
  position:absolute;
  bottom:380px;
  width:50px;
  height:100px;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 80%);
  border-radius:40% 60% 70% 30% / 40% 50% 50% 60%;
  animation: steamRise 4s infinite;
  opacity:0.6;
  filter: blur(10px);
}
.steam1 { left:25%; animation-delay:0s; }
.steam2 { left:50%; animation-delay:1s; }
.steam3 { left:75%; animation-delay:2s; }

@keyframes steamRise {
  0% { transform: translateY(0) scale(1); opacity:0.5; }
  50% { transform: translateY(-150px) scale(1.3); opacity:0.8; }
  100% { transform: translateY(-300px) scale(1); opacity:0; }
}

/* ---------- Sparkles ---------- */
.sparkle {
  position:absolute;
  width:8px;
  height:8px;
  background:#ffff99;
  border-radius:50%;
  box-shadow:0 0 12px 4px #ffff99;
  animation: sparkle 2s infinite;
}

.s1 { left:15%; bottom:380px; animation-delay:0s; }
.s2 { left:35%; bottom:420px; animation-delay:0.5s; }
.s3 { left:50%; bottom:400px; animation-delay:1s; }
.s4 { left:65%; bottom:390px; animation-delay:1.2s; }
.s5 { left:80%; bottom:430px; animation-delay:0.8s; }

@keyframes sparkle {
  0%,100% { opacity:1; transform: scale(1); }
  50% { opacity:0.2; transform: scale(1.5); }
}