/* ==========================================
   SHOYU BROTH & SUBMERGED WAVEY NOODLES
   100% Pure CSS Liquid Dynamics & Shimmer
   ========================================== */

/* Soup Surface (3D Perspective Oval Opening) */
.soup-surface {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 490px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 45% 40%,
    var(--broth-center) 0%,
    var(--broth-mid) 50%,
    var(--broth-edge) 80%,
    #140601 100%
  );
  box-shadow:
    /* Inner Bowl Wall Rim Shadow */
    inset 0 10px 20px rgba(0, 0, 0, 0.95),
    /* Soup Surface Light Meniscus Reflection */
    inset 0 -4px 12px var(--broth-meniscus);
  overflow: hidden;
  z-index: 15;
  border: 3px solid var(--bowl-rim-gold);
}

/* Translucent Liquid Shimmer Overlay */
.broth-shimmer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(
    ellipse at 35% 30%,
    rgba(255, 230, 180, 0.3) 0%,
    rgba(255, 180, 100, 0.12) 40%,
    transparent 75%
  );
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: liquid-pulse 4s ease-in-out infinite alternate;
}

@keyframes liquid-pulse {
  0% { transform: scale(1) rotate(0deg); opacity: 0.8; }
  100% { transform: scale(1.03) rotate(2deg); opacity: 1; }
}

/* Floating Chili & Black Garlic (Mayu) Oil Beads */
.oil-droplets-container {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 18;
}

.oil-bead {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(255, 140, 40, 0.9) 0%,
    var(--oil-bead-color) 60%,
    rgba(140, 20, 0, 0.95) 100%
  );
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.4),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
  animation: float-bead 6s ease-in-out infinite alternate;
}

.oil-bead.mayu {
  background: radial-gradient(
    circle at 35% 35%,
    rgba(80, 50, 40, 0.9) 0%,
    var(--mayu-oil-color) 70%,
    #0a0503 100%
  );
}

/* Individual Oil Bead Placements */
.bead-1 { top: 25%; left: 22%; width: 20px; height: 15px; animation-delay: 0s; }
.bead-2 { top: 40%; left: 72%; width: 16px; height: 13px; animation-delay: 1.2s; }
.bead-3 { top: 60%; left: 35%; width: 24px; height: 18px; animation-delay: 0.5s; }
.bead-4 { top: 18%; left: 55%; width: 13px; height: 10px; animation-delay: 2.1s; }
.bead-5 { top: 65%; left: 60%; width: 18px; height: 14px; animation-delay: 1.8s; }
.bead-6 { top: 32%; left: 42%; width: 11px; height: 8px; animation-delay: 2.7s; }

@keyframes float-bead {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3px, -3px) scale(1.05); }
  100% { transform: translate(-2px, 2px) scale(0.95); }
}

/* Wavy Submerged Noodles Bed */
.noodles-bed {
  position: absolute;
  top: 10%;
  left: 10%;
  right: 10%;
  bottom: 10%;
  z-index: 16;
  opacity: 0.92;
}

/* Pure CSS Wavy Noodle Strands */
.noodle-strand {
  position: absolute;
  height: 11px;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    #fadc8c 0%,
    #fff2c2 30%,
    #e8c56b 70%,
    #d4ab46 100%
  );
  box-shadow: 
    0 3px 6px rgba(40, 20, 5, 0.6),
    inset 0 2px 3px rgba(255, 255, 255, 0.7);
  opacity: 0.88;
}

.noodle-strand.s1 { top: 30%; left: 15%; width: 240px; transform: rotate(-6deg) skewX(18deg); }
.noodle-strand.s2 { top: 40%; left: 20%; width: 270px; transform: rotate(4deg) skewX(-12deg); }
.noodle-strand.s3 { top: 48%; left: 16%; width: 250px; transform: rotate(-3deg) skewX(8deg); }
.noodle-strand.s4 { top: 56%; left: 22%; width: 220px; transform: rotate(10deg) skewX(-20deg); }
.noodle-strand.s5 { top: 22%; left: 28%; width: 210px; transform: rotate(-12deg) skewX(12deg); }
.noodle-strand.s6 { top: 64%; left: 18%; width: 230px; transform: rotate(-5deg) skewX(-8deg); }