/* ==========================================
   ARTISANAL TOPPINGS - 100% PURE CSS ART
   Chashu, Tamago, Narutomaki, Nori, Scallions
   ========================================== */

.topping-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 25;
  pointer-events: none;
}

/* Common Topping Entry Animation & Transition */
.topping-item {
  position: absolute;
  pointer-events: auto;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.65));
}

.topping-item:hover {
  transform: scale(1.06) translateY(-4px) !important;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.85));
  z-index: 50;
}

/* Universal Hidden Utility Class */
.hidden {
  opacity: 0 !important;
  transform: scale(0.6) translateY(20px) !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: all 0.3s ease !important;
}

/* ==========================================
   1. CHASHU PORK BELLY SLICES
   ========================================== */
.chashu-slice {
  width: 155px;
  height: 115px;
  border-radius: 55% 45% 50% 50% / 60% 50% 50% 40%;
  background: 
    radial-gradient(ellipse at 70% 30%, var(--chashu-sear-1) 0%, transparent 40%),
    radial-gradient(ellipse at 30% 70%, var(--chashu-sear-2) 0%, transparent 35%),
    radial-gradient(circle at 45% 45%, var(--chashu-fat-1) 0%, var(--chashu-fat-2) 18%, transparent 20%),
    linear-gradient(135deg, var(--chashu-meat-1) 0%, var(--chashu-meat-2) 60%, var(--chashu-sear-1) 100%);
  box-shadow: 
    inset 0 0 10px rgba(0, 0, 0, 0.85),
    inset 0 3px 6px rgba(255, 230, 200, 0.4);
  border: 2px solid rgba(60, 20, 10, 0.6);
  position: absolute;
}

.chashu-slice::before {
  content: "";
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: inherit;
  border: 5px solid var(--chashu-fat-1);
  opacity: 0.75;
  mask-image: radial-gradient(circle, transparent 65%, black 70%);
  -webkit-mask-image: radial-gradient(circle, transparent 65%, black 70%);
}

.chashu-slice.one {
  top: 15%;
  left: 8%;
  transform: rotate(-22deg);
}

.chashu-slice.two {
  top: 10%;
  left: 25%;
  transform: rotate(-4deg);
}

/* ==========================================
   2. AJITSUKE TAMAGO (RAMEN EGG HALF)
   ========================================== */
.ramen-egg {
  width: 105px;
  height: 130px;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: linear-gradient(
    145deg,
    var(--egg-white-1) 0%,
    var(--egg-white-2) 70%,
    var(--egg-white-soy) 100%
  );
  box-shadow: 
    inset 0 3px 6px rgba(255, 255, 255, 0.9),
    inset 0 -6px 14px rgba(100, 60, 30, 0.7),
    0 8px 16px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 22%;
  right: 12%;
  transform: rotate(32deg);
  overflow: hidden;
}

.ramen-egg::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: inherit;
  border: 4px solid var(--egg-white-soy);
  opacity: 0.85;
}

.egg-yolk {
  width: 68px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    var(--yolk-outer) 0%,
    var(--yolk-mid) 45%,
    var(--yolk-center) 85%
  );
  box-shadow: 
    inset 0 3px 6px rgba(255, 255, 255, 0.8),
    inset 0 -4px 10px rgba(180, 20, 0, 0.6),
    0 4px 8px rgba(90, 40, 10, 0.4);
  position: relative;
}

.egg-yolk::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 20%;
  width: 20px;
  height: 12px;
  border-radius: 50%;
  background: var(--yolk-gloss);
  transform: rotate(-25deg);
  filter: blur(0.5px);
}

/* ==========================================
   3. NARUTOMAKI (PINK SWIRL FISH CAKE)
   ========================================== */
.narutomaki {
  width: 74px;
  height: 74px;
  clip-path: polygon(
    50% 0%, 58% 4%, 65% 1%, 72% 7%, 80% 6%, 85% 14%, 93% 16%, 94% 25%, 100% 30%, 
    97% 39%, 100% 48%, 95% 57%, 97% 66%, 90% 73%, 90% 82%, 81% 86%, 78% 95%, 
    68% 95%, 63% 100%, 54% 97%, 46% 100%, 38% 95%, 29% 96%, 23% 88%, 14% 86%, 
    12% 77%, 4% 72%, 6% 62%, 0% 53%, 4% 44%, 1% 35%, 8% 28%, 7% 18%, 17% 14%, 
    21% 5%, 31% 6%, 37% 0%, 45% 3%
  );
  background: linear-gradient(135deg, var(--naruto-white-1) 0%, var(--naruto-white-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 26%;
  left: 44%;
  transform: rotate(10deg);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8);
}

.naruto-swirl {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--naruto-pink-1) 0deg 90deg,
    transparent 90deg 180deg
  );
  mask-image: radial-gradient(circle, transparent 20%, black 25%, black 65%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, transparent 20%, black 25%, black 65%, transparent 70%);
}

/* ==========================================
   4. NORI (CRISP ROASTED SEAWEED SHEET)
   ========================================== */
.nori-sheet {
  width: 95px;
  height: 135px;
  background-color: var(--nori-1);
  background-image: 
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 4px,
      rgba(255, 255, 255, 0.05) 5px
    ),
    linear-gradient(
      135deg,
      var(--nori-highlight) 0%,
      var(--nori-1) 40%,
      var(--nori-2) 100%
    );
  border-radius: 4px;
  position: absolute;
  top: 2%;
  right: 25%;
  transform: rotate(-15deg) skewY(6deg);
  box-shadow: 
    -6px 10px 20px rgba(0, 0, 0, 0.75),
    inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.nori-sheet::before {
  content: "";
  position: absolute;
  top: 0; left: 45%;
  width: 2px;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 2px 0 4px rgba(255, 255, 255, 0.1);
}

/* ==========================================
   5. MENMA (SEASONED BAMBOO SHOOTS)
   ========================================== */
.menma-group {
  position: absolute;
  top: 50%;
  left: 22%;
  width: 90px;
  height: 50px;
  transform: rotate(-12deg);
}

.menma-strip {
  position: absolute;
  width: 75px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(
    90deg,
    var(--menma-1) 0%,
    var(--menma-highlight) 30%,
    var(--menma-2) 100%
  );
  box-shadow: 
    0 3px 6px rgba(0, 0, 0, 0.55),
    inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.menma-strip.m1 { top: 0; left: 0; transform: rotate(5deg); }
.menma-strip.m2 { top: 10px; left: 8px; transform: rotate(-8deg); }
.menma-strip.m3 { top: 20px; left: 3px; transform: rotate(10deg); }

/* ==========================================
   6. SCALLION RINGS (GREEN ONIONS)
   ========================================== */
.scallion-cluster {
  position: absolute;
  top: 42%;
  left: 42%;
  width: 100px;
  height: 75px;
  z-index: 30;
}

.scallion-ring {
  position: absolute;
  width: 18px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--scallion-white) 0%,
    var(--scallion-green-light) 40%,
    var(--scallion-green-mid) 70%,
    var(--scallion-green-dark) 100%
  );
  border: 2px solid var(--scallion-green-dark);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.scallion-ring.c1 { top: 8px; left: 12px; transform: rotate(15deg); }
.scallion-ring.c2 { top: 20px; left: 35px; transform: rotate(-25deg) scale(1.1); }
.scallion-ring.c3 { top: 35px; left: 16px; transform: rotate(40deg) scale(0.9); }
.scallion-ring.c4 { top: 14px; left: 58px; transform: rotate(-10deg); }
.scallion-ring.c5 { top: 38px; left: 48px; transform: rotate(30deg) scale(1.2); }

/* ==========================================
   7. SPICY MAYU / CHILI OIL DRIZZLE
   ========================================== */
.chili-drizzle {
  position: absolute;
  top: 25%;
  left: 28%;
  width: 130px;
  height: 80px;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 60, 0, 0.75) 0%,
    rgba(200, 20, 0, 0.4) 50%,
    transparent 75%
  );
  filter: blur(4px);
  mix-blend-mode: color-dodge;
  pointer-events: none;
  opacity: 0.85;
  transition: all 0.3s ease;
}