:root {
  --cook-step: 5s;
  --cook-cycle: 25s;
}

.art-panel {
  background: linear-gradient(180deg, #2a1810 0%, #f5ead8 12%, #faf3e8 100%);
  padding: 4rem 1.25rem 5rem;
  scroll-margin-top: 0;
}

.art-panel-inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.art-panel-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9a5808;
  margin-bottom: 0.35rem;
}

.art-panel-title {
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #3d2210;
  margin-bottom: 0.5rem;
}

.art-panel-desc {
  color: #5c4030;
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}

.back-to-hero {
  display: inline-block;
  margin-top: 1.25rem;
  color: #9a5808;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(154, 88, 8, 0.3);
}

.back-to-hero:hover {
  color: #c47a18;
}

.cook-tag {
  position: absolute;
  display: inline-block;
  padding: 3px 8px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: #3d2210;
  white-space: nowrap;
  pointer-events: none;
  z-index: 15;
  background: rgba(255, 251, 245, 0.97);
  border: 1px solid rgba(107, 68, 35, 0.45);
  border-radius: 999px;
  box-shadow:
    0 2px 6px rgba(61, 34, 16, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.cook-tag::before {
  content: "";
  position: absolute;
  background: #6b4423;
}

.cook-tag-right {
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
}

.cook-tag-right::before {
  display: none;
}

.cook-tag-right::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: #6b4423;
  transform: translateY(-50%);
}

.cook-tag-kadai {
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
}

.cook-tag-mini {
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
}

.serve-chutney.mint .cook-tag {
  color: #1e4a14;
  background: rgba(232, 248, 224, 0.98);
  border-color: rgba(74, 154, 50, 0.6);
}

.serve-chutney.mint .cook-tag::before,
.serve-chutney-bowl.mint .cook-tag::before {
  top: 100%;
  bottom: auto;
  left: 50%;
  width: 1px;
  height: 10px;
  margin-top: 3px;
  transform: translateX(-50%);
  background: #4a9a32;
}

.serve-chutney.tamarind .cook-tag {
  color: #5a140e;
  background: rgba(255, 232, 226, 0.98);
  border-color: rgba(200, 56, 40, 0.6);
}

.serve-chutney.tamarind .cook-tag::before,
.serve-chutney-bowl.tamarind .cook-tag::before {
  top: 100%;
  bottom: auto;
  left: 50%;
  width: 1px;
  height: 10px;
  margin-top: 3px;
  transform: translateX(-50%);
  background: #c83828;
}

.dough-ball .cook-tag {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.cone .cook-tag {
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}

.samosa-raw .cook-tag,
.samosa-frying .cook-tag {
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
}

.serve-plate .cook-tag {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
}

.cooking-illustration {
  margin-bottom: 2.5rem;
}

.cooking-title {
  font-size: 1.35rem;
  color: #3d2210;
  margin-bottom: 0.25rem;
}

.cooking-subtitle {
  color: #7a5640;
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
}

.cooking-frame {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
}

.cooking-viewport {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 320px;
  margin: 0 auto;
  border-radius: 18px;
  background: linear-gradient(165deg, #fff9f0 0%, #f3e4cc 55%, #e8d0ad 100%);
  border: 1px solid rgba(200, 134, 26, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 14px 36px rgba(61, 34, 16, 0.1);
  overflow: hidden;
}

.cook-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.frame-knead  { animation: cook-frame-1 var(--cook-cycle) linear infinite; }
.frame-fill   { animation: cook-frame-2 var(--cook-cycle) linear infinite; }
.frame-fold   { animation: cook-frame-3 var(--cook-cycle) linear infinite; }
.frame-fry    { animation: cook-frame-4 var(--cook-cycle) linear infinite; }
.frame-serve  { animation: cook-frame-5 var(--cook-cycle) linear infinite; }

@keyframes cook-frame-1 {
  0%, 2%    { opacity: 1; }
  18%, 100% { opacity: 0; }
}

@keyframes cook-frame-2 {
  0%, 18%   { opacity: 0; }
  20%, 22%  { opacity: 1; }
  38%, 100% { opacity: 0; }
}

@keyframes cook-frame-3 {
  0%, 38%   { opacity: 0; }
  40%, 42%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}

@keyframes cook-frame-4 {
  0%, 58%   { opacity: 0; }
  60%, 62%  { opacity: 1; }
  78%, 100% { opacity: 0; }
}

@keyframes cook-frame-5 {
  0%, 78%   { opacity: 0; }
  80%, 82%  { opacity: 1; }
  98%, 100% { opacity: 0; }
}

.step-caption {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 20;
}

.step-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5c3010;
  opacity: 0;
  white-space: nowrap;
}

.t1 { animation: step-label-1 var(--cook-cycle) linear infinite; }
.t2 { animation: step-label-2 var(--cook-cycle) linear infinite; }
.t3 { animation: step-label-3 var(--cook-cycle) linear infinite; }
.t4 { animation: step-label-4 var(--cook-cycle) linear infinite; }
.t5 { animation: step-label-5 var(--cook-cycle) linear infinite; }

@keyframes step-label-1 {
  0%, 2%    { opacity: 1; }
  18%, 100% { opacity: 0; }
}

@keyframes step-label-2 {
  0%, 18%   { opacity: 0; }
  20%, 38%  { opacity: 1; }
  40%, 100% { opacity: 0; }
}

@keyframes step-label-3 {
  0%, 38%   { opacity: 0; }
  40%, 58%  { opacity: 1; }
  60%, 100% { opacity: 0; }
}

@keyframes step-label-4 {
  0%, 58%   { opacity: 0; }
  60%, 78%  { opacity: 1; }
  80%, 100% { opacity: 0; }
}

@keyframes step-label-5 {
  0%, 78%   { opacity: 0; }
  80%, 98%  { opacity: 1; }
  100%      { opacity: 0; }
}

.step-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 0.85rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(200, 134, 26, 0.25);
}

.dot.d1 { animation: dot-1 var(--cook-cycle) linear infinite; }
.dot.d2 { animation: dot-2 var(--cook-cycle) linear infinite; }
.dot.d3 { animation: dot-3 var(--cook-cycle) linear infinite; }
.dot.d4 { animation: dot-4 var(--cook-cycle) linear infinite; }
.dot.d5 { animation: dot-5 var(--cook-cycle) linear infinite; }

@keyframes dot-active {
  0%, 100% { background: rgba(200, 134, 26, 0.25); transform: scale(1); }
  5%, 15%  { background: #c8861a; transform: scale(1.25); }
}

@keyframes dot-1 { 0%, 18% { background: #c8861a; transform: scale(1.2); } 20%, 100% { background: rgba(200,134,26,0.25); transform: scale(1); } }
@keyframes dot-2 { 0%, 18% { background: rgba(200,134,26,0.25); } 20%, 38% { background: #c8861a; transform: scale(1.2); } 40%, 100% { background: rgba(200,134,26,0.25); transform: scale(1); } }
@keyframes dot-3 { 0%, 38% { background: rgba(200,134,26,0.25); } 40%, 58% { background: #c8861a; transform: scale(1.2); } 60%, 100% { background: rgba(200,134,26,0.25); transform: scale(1); } }
@keyframes dot-4 { 0%, 58% { background: rgba(200,134,26,0.25); } 60%, 78% { background: #c8861a; transform: scale(1.2); } 80%, 100% { background: rgba(200,134,26,0.25); transform: scale(1); } }
@keyframes dot-5 { 0%, 78% { background: rgba(200,134,26,0.25); } 80%, 98% { background: #c8861a; transform: scale(1.2); } 100% { background: rgba(200,134,26,0.25); transform: scale(1); } }

/* Shared board */
.board {
  position: absolute;
  bottom: 28%;
  left: 50%;
  width: 220px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(180deg, #c9a06a, #8f6538);
  box-shadow: 0 8px 16px rgba(80, 50, 20, 0.18);
}

/* Step 1 — Knead */
.dough-ball {
  position: absolute;
  bottom: 36%;
  left: 50%;
  width: 72px;
  height: 52px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6e8, #edd9b8 55%, #d4b88a);
  box-shadow: inset 0 -6px 10px rgba(120, 80, 40, 0.15);
  animation: dough-knead var(--cook-step) ease-in-out infinite;
}

@keyframes dough-knead {
  0%, 100% { transform: translateX(-50%) scale(1, 1); }
  25%      { transform: translateX(-50%) scale(1.12, 0.88); }
  50%      { transform: translateX(-50%) scale(0.92, 1.08); }
  75%      { transform: translateX(-50%) scale(1.06, 0.94); }
}

.rolling-pin {
  position: absolute;
  bottom: 48%;
  left: 50%;
  width: 120px;
  height: 16px;
  margin-left: -60px;
  border-radius: 999px;
  background: linear-gradient(180deg, #e8cdb0, #b8895c);
  transform-origin: center;
  animation: pin-roll var(--cook-step) ease-in-out infinite;
}

@keyframes pin-roll {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(8deg) translateY(6px); }
}

.hand {
  position: absolute;
  width: 36px;
  height: 22px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #f0c4a0, #d99a72);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

.hand-left {
  bottom: 42%;
  left: 32%;
  animation: hand-press-left var(--cook-step) ease-in-out infinite;
}

.hand-right {
  bottom: 44%;
  right: 30%;
  animation: hand-press-right var(--cook-step) ease-in-out infinite;
}

@keyframes hand-press-left {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

@keyframes hand-press-right {
  0%, 100% { transform: translateY(8px); }
  50%      { transform: translateY(0); }
}

.flour {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

.f1 { bottom: 34%; left: 38%; animation: flour-drift var(--cook-step) linear infinite; }
.f2 { bottom: 36%; left: 55%; animation: flour-drift var(--cook-step) 0.4s linear infinite; }
.f3 { bottom: 33%; left: 48%; animation: flour-drift var(--cook-step) 0.8s linear infinite; }

@keyframes flour-drift {
  0%   { opacity: 0; transform: translateY(0); }
  30%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-24px); }
}

/* Step 2 — Fill */
.wrapper {
  position: absolute;
  bottom: 36%;
  left: 42%;
  width: 90px;
  height: 50px;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #f5e8d4, #e2cfa8);
  transform: rotate(-12deg);
}

.cone {
  position: absolute;
  bottom: 38%;
  left: 44%;
  width: 0;
  height: 0;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-bottom: 70px solid #eddaba;
  transform: rotate(-12deg);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.08));
}

.filling-bowl {
  position: absolute;
  bottom: 30%;
  right: 18%;
  width: 64px;
  height: 36px;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #e8d5bc, #c9a882);
}

.filling-mix {
  position: absolute;
  top: -8px;
  left: 6%;
  width: 88%;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #e8c878, #c49a3a 60%, #8a6520);
}

.spoon {
  position: absolute;
  bottom: 44%;
  right: 28%;
  width: 8px;
  height: 52px;
  border-radius: 4px;
  background: linear-gradient(90deg, #b8895c, #ddb892);
  transform-origin: bottom center;
  animation: spoon-scoop var(--cook-step) ease-in-out infinite;
}

.spoon::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -6px;
  width: 20px;
  height: 14px;
  border-radius: 50% 50% 40% 40%;
  background: #c9a882;
}

@keyframes spoon-scoop {
  0%, 100% { transform: rotate(-20deg); }
  40%      { transform: rotate(35deg) translate(-20px, 10px); }
  60%      { transform: rotate(35deg) translate(-20px, 10px); }
}

.filling-scoop {
  position: absolute;
  bottom: 52%;
  left: 46%;
  width: 22px;
  height: 16px;
  border-radius: 40%;
  background: radial-gradient(circle, #e8c878, #a67a28);
  opacity: 0;
  animation: scoop-drop var(--cook-step) ease-in-out infinite;
}

@keyframes scoop-drop {
  0%, 35%  { opacity: 0; transform: translateY(-10px); }
  45%, 55% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 1; transform: translateY(8px); }
}

/* Step 3 — Fold */
.samosa-raw {
  position: absolute;
  bottom: 38%;
  left: 50%;
  width: 80px;
  height: 96px;
  transform: translateX(-50%) rotate(-4deg);
}

.samosa-raw-body {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 92% 88%, 50% 100%, 8% 88%);
  background: linear-gradient(155deg, #f5e6c8, #ddb878 50%, #c49a48);
  animation: samosa-close var(--cook-step) ease-in-out infinite;
}

.samosa-raw-crimp {
  position: absolute;
  bottom: 10%;
  left: 10%;
  width: 80%;
  height: 12%;
  border-radius: 0 0 40% 40%;
  background: repeating-linear-gradient(90deg, #a86412 0 3px, #c8861a 3px 7px);
  opacity: 0;
  animation: crimp-show var(--cook-step) ease-in-out infinite;
}

@keyframes samosa-close {
  0%, 30%  { clip-path: polygon(50% 0%, 92% 88%, 50% 100%, 8% 88%); }
  60%, 100% { clip-path: polygon(50% 0%, 88% 82%, 50% 96%, 12% 82%); }
}

@keyframes crimp-show {
  0%, 50%  { opacity: 0; }
  65%, 100% { opacity: 0.9; }
}

.pinch-line {
  position: absolute;
  bottom: 42%;
  left: 50%;
  width: 2px;
  height: 0;
  background: rgba(120, 70, 20, 0.5);
  transform: translateX(-50%);
  animation: pinch-seal var(--cook-step) ease-in-out infinite;
}

@keyframes pinch-seal {
  0%, 40%  { height: 0; opacity: 0; }
  55%, 100% { height: 48px; opacity: 1; }
}

.finger {
  position: absolute;
  bottom: 48%;
  left: 52%;
  width: 14px;
  height: 36px;
  border-radius: 40%;
  background: linear-gradient(180deg, #f0c4a0, #d99a72);
  transform: rotate(12deg);
  opacity: 0;
  animation: finger-pinch var(--cook-step) ease-in-out infinite;
}

@keyframes finger-pinch {
  0%, 45%  { opacity: 0; transform: rotate(12deg) translateY(10px); }
  55%, 75% { opacity: 1; transform: rotate(12deg) translateY(0); }
  100%     { opacity: 0; transform: rotate(12deg) translateY(6px); }
}

/* Step 4 — Fry */
.stove {
  position: absolute;
  bottom: 18%;
  left: 50%;
  width: 180px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 6px;
  background: linear-gradient(180deg, #555, #333);
}

.kadai {
  position: absolute;
  bottom: 26%;
  left: 50%;
  width: 140px;
  height: 70px;
  transform: translateX(-50%);
}

.kadai-rim {
  position: absolute;
  inset: 0;
  border-radius: 0 0 50% 50%;
  background: linear-gradient(180deg, #3a3a3a, #1a1a1a);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.kadai-rim::before,
.kadai-rim::after {
  content: "";
  position: absolute;
  top: 28%;
  width: 24px;
  height: 8px;
  border-radius: 4px;
  background: #2a2a2a;
}

.kadai-rim::before { left: -18px; }
.kadai-rim::after  { right: -18px; }

.oil {
  position: absolute;
  top: 18%;
  left: 8%;
  width: 84%;
  height: 58%;
  border-radius: 0 0 50% 50%;
  background: radial-gradient(ellipse at 50% 30%, #f0c040, #d4920a 55%, #a86a08);
  animation: oil-shimmer var(--cook-step) ease-in-out infinite;
}

@keyframes oil-shimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}

.bubble {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 220, 100, 0.35);
  animation: bubble-pop 1.2s ease-in infinite;
}

.b1 { bottom: 38%; left: 42%; }
.b2 { bottom: 42%; left: 52%; animation-delay: 0.3s; }
.b3 { bottom: 36%; left: 58%; animation-delay: 0.6s; }
.b4 { bottom: 44%; left: 46%; animation-delay: 0.9s; width: 6px; height: 6px; }
.b5 { bottom: 40%; left: 50%; animation-delay: 0.15s; width: 5px; height: 5px; }

@keyframes bubble-pop {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  30%  { opacity: 0.9; }
  100% { transform: translateY(-18px) scale(1.1); opacity: 0; }
}

.samosa-frying {
  position: absolute;
  bottom: 44%;
  left: 50%;
  width: 44px;
  height: 54px;
  margin-left: -22px;
  clip-path: polygon(50% 0%, 92% 88%, 50% 100%, 8% 88%);
  background: linear-gradient(155deg, #ffe08a, #c47a18);
  animation: fry-golden var(--cook-step) ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

@keyframes fry-golden {
  0%, 20%  { background: linear-gradient(155deg, #f5e6c8, #ddb878); transform: translateY(6px); }
  60%, 100% { background: linear-gradient(155deg, #ffe08a, #a85a08); transform: translateY(-4px); }
}

.fry-steam span {
  position: absolute;
  bottom: 58%;
  width: 10px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  filter: blur(3px);
  animation: fry-steam-rise 1.4s ease-in-out infinite;
}

.fry-steam span:nth-child(1) { left: 46%; }
.fry-steam span:nth-child(2) { left: 50%; animation-delay: 0.4s; }
.fry-steam span:nth-child(3) { left: 54%; animation-delay: 0.8s; }

@keyframes fry-steam-rise {
  0%   { opacity: 0; transform: translateY(0); }
  40%  { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-20px); }
}

.slotted-spoon {
  position: absolute;
  bottom: 50%;
  right: 22%;
  width: 6px;
  height: 70px;
  border-radius: 4px;
  background: linear-gradient(90deg, #999, #ccc);
  transform: rotate(-15deg);
  opacity: 0;
  animation: spoon-lift var(--cook-step) ease-in-out infinite;
}

.slotted-spoon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -10px;
  width: 26px;
  height: 16px;
  border-radius: 40% 40% 0 0;
  background: #bbb;
}

@keyframes spoon-lift {
  0%, 70%  { opacity: 0; transform: rotate(-15deg) translateY(20px); }
  85%, 100% { opacity: 1; transform: rotate(-25deg) translateY(-8px); }
}

/* Heat shimmer above kadai */
.fry-heat {
  position: absolute;
  bottom: 52%;
  left: 50%;
  width: 120px;
  height: 36px;
  transform: translateX(-50%);
  pointer-events: none;
}

.heat-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 200, 80, 0.35) 25%,
    rgba(255, 240, 180, 0.5) 50%,
    rgba(255, 200, 80, 0.35) 75%,
    transparent 100%
  );
  filter: blur(2px);
  animation: heat-rise var(--cook-step) ease-in-out infinite;
}

.heat-wave.h1 {
  bottom: 0;
}

.heat-wave.h2 {
  bottom: 12px;
  opacity: 0.75;
  animation-delay: 0.35s;
}

.heat-wave.h3 {
  bottom: 24px;
  opacity: 0.55;
  animation-delay: 0.7s;
}

@keyframes heat-rise {
  0%, 100% {
    transform: translateY(0) scaleX(0.92);
    opacity: 0.35;
  }
  50% {
    transform: translateY(-10px) scaleX(1.08);
    opacity: 0.85;
  }
}

/* Step 5 — Serve (matches Panel 1 plate & chutney) */
.serve-table {
  position: absolute;
  bottom: 22%;
  left: 50%;
  width: 200px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #8f6538, #6b4520);
}

.serve-plate {
  position: absolute;
  bottom: 24%;
  left: 50%;
  width: 168px;
  height: 88px;
  transform: translateX(-50%);
}

.serve-plate-shadow {
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 72%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(92, 48, 24, 0.16), transparent 70%);
}

.serve-plate-base {
  position: absolute;
  bottom: 14%;
  left: 0;
  width: 100%;
  height: 36%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 35%, #fffdf8 0%, #faf6ef 50%, #ebe3d6 100%);
  box-shadow:
    0 4px 12px rgba(92, 48, 24, 0.12),
    inset 0 -3px 8px rgba(92, 48, 24, 0.05);
}

.serve-plate-rim {
  position: absolute;
  bottom: 16%;
  left: -2%;
  width: 104%;
  height: 40%;
  border-radius: 50%;
  border: 2px solid #f0e8dc;
  pointer-events: none;
}

.serve-plate-ring {
  position: absolute;
  bottom: 18%;
  left: 8%;
  width: 84%;
  height: 28%;
  border-radius: 50%;
  border: 1px solid rgba(200, 190, 175, 0.55);
  pointer-events: none;
}

.serve-samosa {
  position: absolute;
  clip-path: polygon(50% 0%, 92% 88%, 50% 100%, 8% 88%);
  background: linear-gradient(160deg, #e8b050 0%, #d89840 25%, #b87830 50%, #8f5820 100%);
  filter: drop-shadow(0 3px 6px rgba(92, 48, 24, 0.15));
  z-index: 2;
}

.ss1 { width: 36px; height: 44px; bottom: 30%; left: 38%; transform: rotate(-8deg); animation-delay: 0.1s; }
.ss2 { width: 34px; height: 42px; bottom: 28%; left: 48%; transform: rotate(4deg); animation-delay: 0.25s; }
.ss3 { width: 32px; height: 40px; bottom: 26%; left: 56%; transform: rotate(14deg); animation-delay: 0.4s; }

.serve-bitten {
  z-index: 3;
  clip-path: polygon(50% 0%, 66% 20%, 74% 32%, 92% 88%, 50% 100%, 8% 88%);
}

.serve-bitten .serve-fill {
  position: absolute;
  inset: 16% 18% 22% 18%;
  clip-path: polygon(50% 10%, 78% 72%, 50% 84%, 22% 72%);
  background: radial-gradient(circle at 40% 45%, #f0dc78, #d4a838 60%, #b88828);
  z-index: 1;
}

.serve-chutney-bowl {
  position: absolute;
  width: 34px;
  height: 32px;
  bottom: 32%;
  z-index: 4;
  filter: drop-shadow(0 2px 4px rgba(92, 48, 24, 0.12));
}

.serve-chutney-bowl.mint {
  left: 16%;
}

.serve-chutney-bowl.tamarind {
  right: 16%;
}

.serve-bowl-plate {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #faf6ef;
  box-shadow: 0 2px 4px rgba(92, 48, 24, 0.1);
}

.serve-katori {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 28px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 0 0 14px 14px;
  background: #faf6ef;
  border: 1px solid #e8dfd0;
  border-top: none;
  overflow: hidden;
}

.serve-sauce {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 24px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 24px 24px 0 0;
}

.serve-chutney-bowl.mint .serve-sauce {
  background: linear-gradient(180deg, #9fdc78 0%, #4a9a32 55%, #2d6a1e 100%);
}

.serve-chutney-bowl.tamarind .serve-sauce {
  background: linear-gradient(180deg, #f08060 0%, #c83828 55%, #8a1a12 100%);
}

.serve-chutney-bowl .cook-tag {
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
}

.serve-samosa {
  animation: serve-pop var(--cook-step) ease-out infinite;
}

.ss1 { animation-name: serve-pop-1; }
.ss2 { animation-name: serve-pop-2; }
.ss3 { animation-name: serve-pop-3; }

@keyframes serve-pop {
  0%, 15%  { opacity: 0; transform: scale(0.5) translateY(20px); }
  35%, 100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes serve-pop-1 {
  0%, 15%  { opacity: 0; transform: rotate(-8deg) scale(0.5) translateY(20px); }
  35%, 100% { opacity: 1; transform: rotate(-8deg) scale(1) translateY(0); }
}

@keyframes serve-pop-2 {
  0%, 25%  { opacity: 0; transform: rotate(4deg) scale(0.5) translateY(20px); }
  45%, 100% { opacity: 1; transform: rotate(4deg) scale(1) translateY(0); }
}

@keyframes serve-pop-3 {
  0%, 35%  { opacity: 0; transform: rotate(14deg) scale(0.5) translateY(20px); }
  55%, 100% { opacity: 1; transform: rotate(14deg) scale(1) translateY(0); }
}

.serve-steam span {
  position: absolute;
  bottom: 52%;
  width: 8px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 240, 200, 0.4);
  filter: blur(3px);
  animation: fry-steam-rise 1.6s ease-in-out infinite;
}

.serve-steam span:nth-child(1) { left: 44%; }
.serve-steam span:nth-child(2) { left: 50%; animation-delay: 0.5s; }
.serve-steam span:nth-child(3) { left: 56%; animation-delay: 1s; }

@media (max-width: 480px) {
  .cooking-viewport {
    height: 280px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cook-frame,
  .step-text,
  .dot,
  .dough-ball,
  .rolling-pin,
  .hand-left,
  .hand-right,
  .flour,
  .spoon,
  .filling-scoop,
  .samosa-raw-body,
  .samosa-raw-crimp,
  .pinch-line,
  .finger,
  .oil,
  .bubble,
  .samosa-frying,
  .fry-steam span,
  .slotted-spoon,
  .heat-wave,
  .serve-samosa {
    animation: none !important;
  }

  .frame-knead  { opacity: 1; }
  .frame-fill,
  .frame-fold,
  .frame-fry,
  .frame-serve  { opacity: 0; }

  .t1 { opacity: 1; }
  .t2, .t3, .t4, .t5 { opacity: 0; }

  .dot.d1 { background: #c8861a; }
}