/* ===========================================================
   Ilish Polao — HTML + CSS, with a small JS loop that scatters
   the rice-grain and fried-crust texture (see index.html).
   =========================================================== */

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

html, body { width: 100%; height: 100%; background: #0c0d0e; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
}

/* -----------------------------------------------------------
   STAGE
----------------------------------------------------------- */
.scene {
  position: relative;
  width: min(92vw, 640px);
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.65);
  background-color: #232527;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,0.05), transparent 40%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.04), transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(0,0,0,0.5), transparent 45%),
    radial-gradient(circle at 75% 75%, rgba(0,0,0,0.45), transparent 40%),
    radial-gradient(circle at 50% 50%, #3a3c3e, #17181a 85%);
}

/* -----------------------------------------------------------
   SMALL METAL BOWL OF CHUTNEY
----------------------------------------------------------- */
.bowl { position: absolute; top: 15%; left: 46%; width: 17%; aspect-ratio: 1/1; z-index: 2; }

.bowl-rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfcfd2, #8d8d90 40%, #4b4b4d 70%, #2a2a2b 100%);
  box-shadow: 0 6px 14px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(0,0,0,0.25);
}

.chutney {
  position: absolute; top: 20%; left: 14%; width: 72%; height: 72%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #9a3a20, #6f2312 55%, #4a160a 100%);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.6), inset 0 -2px 3px rgba(255,150,80,0.15);
}

.chili-garnish {
  position: absolute; top: 30%; left: 30%; width: 34%; height: 22%;
  background: linear-gradient(120deg, #3d7a2c, #6ea83f);
  border-radius: 50% / 60% 60% 40% 40%;
  transform: rotate(-25deg);
}

/* -----------------------------------------------------------
   FISH-SHAPED PLATTER
   Every child below is positioned as a % of this box, which
   matches the SVG's 300x460 viewBox 1:1.
----------------------------------------------------------- */
.platter {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 58%;
  aspect-ratio: 300 / 460;
  z-index: 3;
  animation: settle 6s ease-in-out infinite;
  container-type: inline-size;
}

.platter-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 460px;
  transform-origin: 0 0;
  /* scales the fixed 300x460 path space to fill the responsive .platter box */
  transform: scale(calc(100cqw / 300px));

  background: radial-gradient(circle at 35% 25%, #2e3d49 0%, #abb1b6 45%, #57636d 100%);

  clip-path: path("M150 10 C185 14 215 35 228 70 C238 100 246 140 246 185 C246 230 236 270 218 300 C205 325 195 350 185 372 C175 390 165 400 150 405 C135 400 125 390 115 372 C105 350 95 325 82 300 C64 270 54 230 54 185 C54 140 62 100 72 70 C85 35 115 14 150 10 Z M244 118 C268 128 288 140 294 152 C270 158 248 162 234 166 C238 148 240 132 244 118 Z M56 118 C32 128 12 140 6 152 C30 158 52 162 66 166 C62 148 60 132 56 118 Z M118 378 C108 398 88 412 66 442 L150 414 L234 442 C212 412 192 398 182 378 C172 392 162 398 150 398 C138 398 128 392 118 378 Z");
}


.platter-gill {
  position: absolute;
  top: 13%;
  left: 36%;
  width: 27%;
  height: 4%;
  border-bottom: 1.5px solid rgba(0,0,0,0.4);
  border-radius: 50%;
  z-index: 4;
}

/* -----------------------------------------------------------
   RICE MOUND — base gradient + JS-scattered grains
----------------------------------------------------------- */
.rice-mound {
  position: absolute;
  left: 23.3%;
  top: 8%;
  width: 51.3%;
  height: 65.2%;
  border-radius: 40%;
  overflow: hidden;
  z-index: 4;
  background:
    radial-gradient(ellipse at 30% 22%, rgba(255,232,185,0.55), transparent 55%),
    radial-gradient(ellipse at 72% 78%, rgba(60,34,8,0.55), transparent 60%),
    #b6822f;
  box-shadow:
    inset 0 10px 25px rgba(0,0,0,0.45),
    inset 0 -6px 18px rgba(255,210,140,0.12);
}




/* one grain, positioned in JS via left/top/transform */
.grain {
  position: absolute;
  border-radius: 40%;
  opacity: 0.85;
}

/* -----------------------------------------------------------
   GARNISH: cinnamon quill, bay leaves, chilies
----------------------------------------------------------- */
.cinnamon {
  position: absolute; top: 62%; left: 40%; width: 13%; height: 4.4%;
  transform: rotate(-20deg);
  z-index: 6;
}
.cinnamon::before {
  content: "";
  position: absolute; inset: 0; border-radius: 40%;
  background: linear-gradient(100deg, #8a5330 0%, #6b3d22 45%, #4a2814 100%);
  box-shadow: inset 0 -2px 3px rgba(0,0,0,0.45), inset 0 2px 2px rgba(255,200,150,0.25), 0 2px 4px rgba(0,0,0,0.4);
}
.cinnamon::after {
  content: "";
  position: absolute; top: 30%; left: 6%; width: 88%; height: 22%;
  border-radius: 50%;
  border-top: 1px solid rgba(0,0,0,0.35);
}
.cinnamon i { position: absolute; top: 18%; width: 15%; height: 64%; border-radius: 50%; background: radial-gradient(ellipse at center, #2c1608, #4a2814 80%); }
.cinnamon i:first-child { left: -2%; }
.cinnamon i:last-child { right: -2%; }

.bay-leaf {
  position: absolute; width: 14%; height: 5%; top: 60%; left: 50%;
 
  background: linear-gradient(100deg, #55702f, #2e4419);
  border-radius: 0% 60% 0% 60%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  z-index: 6;
}
.bay-leaf::after {
  content: ""; position: absolute; top: 60%; left: 6%; width: 88%; height: 1px;
  background: rgba(0,0,0,0.35); transform: translateY(-50%) rotate(-4deg);
}
.b1 { top: 13%; right: 9%; transform: rotate(-30deg); }
.b2 { top: 49%; left: 34%; transform: rotate(15deg); }

.chili {
  position: absolute; width: 4.5%; height: 14%;
  background: linear-gradient(160deg, #6fa83f 0%, #3d6b23 70%, #2b4a18 100%);
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  box-shadow: 0 3px 5px rgba(0,0,0,0.4);
  z-index: 7;
}
.chili::before {
  content: ""; position: absolute; top: -14%; left: 30%; width: 40%; height: 20%;
  background: #4a7c33; border-radius: 30%;
}
.r-chili-1 { top: 9%;  left: 33%; transform: rotate(12deg); }
.r-chili-2 { top: 58%; left: 60%; transform: rotate(20deg); height: 11%; }

/* -----------------------------------------------------------
   THE FRIED HILSA PIECE — one, centered on the rice
----------------------------------------------------------- */
.fish-piece {
  position: absolute;
  top: 26%;
  left: 27%;
  width: 46%;
  height: 38%;
  z-index: 8;
  transform: rotate(-6deg);
}

.fish-crust-wrapper {
  position: absolute;
  width: 196px;
  height: 146px;
  background: #2f1a09; /* border color */
  clip-path: path("M 10.35 8.37 C 18.24 18.76, 91.43 126.47, 90.40 113.25 C 91.75 121.08, 141.71 119.17, 148.76 94.74 C 165.73 63.18, 145.40 36.17, 133.81 33.05 L 10.35 8.37 Z");
}

.fish-crust {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 170px;
  height: 130px;
  overflow: hidden;
  z-index: 1;

  background: radial-gradient(
    ellipse at 30% 25%,
    #c98121 0%,
    #c07a2a 30%,
    #924a0b 62%,
    #8a460f 100%
  );

  box-shadow:
    inset 0 -10px 16px rgba(0,0,0,0.55),
    inset 0 6px 10px rgba(255,210,140,0.3),
    0 12px 20px rgba(0,0,0,0.5);

  clip-path: path("M 14.33 15.94 C 15.81 37.10 85.58 122.00 88.51 112.12 C 89.75 119.30 136.03 117.55 142.54 95.13 C 158.28 66.19 139.44 41.43 128.71 38.56 C 123.05 28.14 10.00 8.00 14.33 15.94 Z");
}

/* thin cracks where the crust breaks, showing pale flesh beneath */
.fish-crack {
  position: absolute;
  height: 3px;
  border-radius: 3px;
     
  background: linear-gradient(90deg, transparent, #f2e6c8 25%, #e9d8ad 70%, transparent);
  z-index: 2;
}
.fish-crack.c1 { top: 38%; left: 24%; width: 34%; transform: rotate(6deg); }
.fish-crack.c2 { top: 58%; left: 44%; width: 22%; transform: rotate(-10deg); height: 2px; }

.fish-tummy{
 position: absolute;
 top:17%;
 left: 32%;
 z-index: 2;
  width: 40px;
      height: 40px;
      border: 2px solid rgb(0, 0, 0);
      background:
    radial-gradient(ellipse at 30% 22%, rgba(255,232,185,0.55), transparent 55%),
    radial-gradient(ellipse at 72% 78%, rgba(60,34,8,0.55), transparent 60%),
    #b6822f;
      border-radius: 4% 96% 45% 55% / 4% 45% 55% 96%;
}

.fishbone {
  position: absolute;
  top: 83px;
  left: 85px;
  z-index: 30;
  width: 60px;
  height: 2px; /* একটি নির্দিষ্ট হাইট দিন */
  background-color: darkslategrey;
  transform: rotate(32deg);
}

/* -----------------------------------------------------------
   STEAM
----------------------------------------------------------- */
.steam-wrap {
  position: absolute;
  top: 12%;
  left: 32%;
  width: 40%;
  height: 12%;
  z-index: 9;
}

.steam {
  position: absolute;
  bottom: 0;
  width: 10px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.835), rgba(255,255,255,0));
  filter: blur(3px);
  opacity: 0;
  transform-origin: bottom center;
  animation: rise 3.6s ease-in infinite;
}
.steam.s1 { left: 10%; animation-delay: 0s; }
.steam.s2 { left: 45%; animation-delay: 1.1s; }
.steam.s3 { left: 78%; animation-delay: 2.2s; }

@keyframes rise {
  0%   { opacity: 0;    transform: translateY(0) scaleX(1) rotate(0deg); }
  15%  { opacity: 0.55; }
  50%  { opacity: 0.35; transform: translateY(-34px) scaleX(1.3) rotate(4deg); }
  100% { opacity: 0;    transform: translateY(-70px) scaleX(1.6) rotate(-4deg); }
}

@keyframes settle {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50%      { transform: translate(-50%, -51%) rotate(-3.4deg); }
}

@media (max-width: 420px) { .scene { width: 96vw; } }