/* ═══ Idli Platter — user component adapted for Nukkad Chat Corner counter ═══ */

.dish--idli {
  --id-clay-rim: #d97706;
  --id-clay-mid: #b45309;
  --id-clay-deep: #78350f;
  --id-clay-pit: #3b1101;
  --id-ceramic-white: #ffffff;
  --id-ceramic-white-shadow: #cbd5e1;
  --id-ceramic-yellow: #facc15;
  --id-ceramic-yellow-shadow: #a16207;
  --id-leaf-high: #4ade80;
  --id-leaf-body: #16a34a;
  --id-leaf-shadow: #14532d;
  --id-leaf-vein: #113f21;
  --id-idli-cream: #fafaf9;
  --id-idli-crease: #e5e5e0;
  --id-idli-grain: #b5b2ad;
  --id-sambar-surface: rgba(249, 115, 22, 0.95);
  --id-sambar-core: #b45309;
  --id-sambar-base: #7c2d12;
  --id-chutney-pulp: #fafaf9;
  --id-chutney-shadow: #cbd5e1;
  --id-chutney-red: #b91c1c;
  --id-chutney-red-base: #5c0606;
  --id-bezier: var(--food-bezier-spring, cubic-bezier(0.25, 1.35, 0.4, 1));
  --id-dur: var(--food-dur, 600ms);
}

.idli-platter-art {
  position: relative;
  width: 360px;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  perspective: var(--food-perspective, 1400px);
}

/* ── Hover parallax (platter + ambient) ── */
.dish--idli:not(.order-card):is(:hover, .is-raised, :focus-within) .idli-platter-art .platter-stage-3d { transform: rotateX(25deg) rotateY(-4deg) translateY(-16px); }
.dish--idli:not(.order-card):is(:hover, .is-raised, :focus-within) .fibrous-banana-leaf-3d { filter: brightness(1.08) saturate(1.12); }
.dish--idli:not(.order-card):is(:hover, .is-raised, :focus-within) .thermal-glow-aura { opacity: 1; transform: scale(1.2); }
.dish--idli:not(.order-card):is(:hover, .is-raised, :focus-within) .floor-shadow-occlusion-dark { transform: scale(0.72); opacity: 0.85; }
.dish--idli:not(.order-card):is(:hover, .is-raised, :focus-within) .floor-shadow-atmospheric-soft { transform: scale(0.82); opacity: 0.35; }
.dish--idli:not(.order-card):is(:hover, .is-raised, :focus-within) .thermal-steam-engine { opacity: 1; transform: translateY(-20px) scale(1.08); }
.dish--idli:not(.order-card):is(:hover, .is-raised, :focus-within) .steam-trail { animation-duration: 1.4s; }

/* ── Ambient lighting ── */
.idli-platter-art .studio-key-ray {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 45% 35%, rgba(255, 184, 77, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

.idli-platter-art .thermal-glow-aura {
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(217, 119, 6, 0.16) 0%, transparent 70%);
  filter: blur(12px);
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  animation: id-aura-pulse 4s ease-in-out infinite alternate;
}

@keyframes id-aura-pulse {
  0% { transform: scale(0.9); opacity: 0.4; }
  100% { transform: scale(1.15); opacity: 0.8; }
}

/* ── Steam engine ── */
.idli-platter-art .thermal-steam-engine {
  position: absolute;
  top: 15px;
  height: 100px;
  width: 140px;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  opacity: 0.45;
  pointer-events: none;
  transition: opacity var(--id-dur) var(--id-bezier), transform var(--id-dur) var(--id-bezier);
}

.idli-platter-art .steam-trail {
  width: 5px;
  height: 100%;
  background: linear-gradient(to top, transparent, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.15) 75%, transparent);
  border-radius: 50%;
  filter: blur(3px);
}

.idli-platter-art .st-1 { animation: id-rising-vapor 2s infinite ease-in-out; }
.idli-platter-art .st-2 { animation: id-rising-vapor 2.5s infinite ease-in-out 0.4s; }
.idli-platter-art .st-3 { animation: id-rising-vapor 1.8s infinite ease-in-out 0.2s; }

@keyframes id-rising-vapor {
  0% { transform: translateY(35px) scaleX(0.7) skewX(0deg); opacity: 0; }
  45% { transform: translateY(6px) scaleX(1.5) skewX(-12deg); opacity: 0.65; }
  100% { transform: translateY(-35px) scaleX(0.4) skewX(12deg); opacity: 0; }
}

/* ── 3D platter stage (scoped to idli) ── */
.idli-platter-art .platter-stage-3d {
  position: relative;
  width: 290px;
  height: 250px;
  z-index: 3;
  transform: rotateX(19deg) rotateY(-1deg);
  transform-style: preserve-3d;
  transition: transform var(--id-dur) var(--id-bezier);
  animation: id-platter-levitation 6s ease-in-out infinite alternate;
}

@keyframes id-platter-levitation {
  0% { transform: rotateX(18deg) rotateY(-1.5deg) translateY(3px); }
  100% { transform: rotateX(21deg) rotateY(-0.5deg) translateY(-5px); }
}

/* ── Terracotta dish ── */
.idli-platter-art .clay-dish-3d {
  position: absolute;
  inset: 0;
  background:
    repeating-conic-gradient(from 0deg, rgba(0, 0, 0, 0.03) 0deg 8deg, transparent 8deg 16deg),
    linear-gradient(135deg, var(--id-clay-rim) 0%, var(--id-clay-mid) 30%, var(--id-clay-deep) 75%, var(--id-clay-pit) 100%);
  border-radius: 50%;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.6), inset 0 -12px 20px rgba(0, 0, 0, 0.45);
  transform-style: preserve-3d;
}

.idli-platter-art .clay-dish-3d::after {
  content: '';
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 200, 120, 0.12) 0%, transparent 55%);
  pointer-events: none;
}

.idli-platter-art .clay-lip-specular {
  position: absolute;
  inset: 3px;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
  border-left: 1.5px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  z-index: 5;
}

.idli-platter-art .clay-internal-wall-shade {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.2) 100%);
  opacity: 0.5;
}

/* ── Banana leaf liner ── */
.idli-platter-art .fibrous-banana-leaf-3d {
  position: absolute;
  top: 9%;
  left: 7%;
  width: 86%;
  height: 78%;
  background:
    radial-gradient(ellipse at 30% 25%, rgba(255, 255, 255, 0.08) 0%, transparent 45%),
    linear-gradient(135deg, var(--id-leaf-high), var(--id-leaf-body) 45%, var(--id-leaf-shadow) 100%);
  border-radius: 50%;
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.45), 0 3px 5px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transform: translateZ(2px);
  transition: filter 0.45s ease;
}

.idli-platter-art .leaf-backbone-spine {
  position: absolute;
  top: 49%;
  left: 0;
  right: 0;
  height: 3.5px;
  background-color: var(--id-leaf-vein);
  opacity: 0.6;
  filter: blur(0.4px);
}

.idli-platter-art .leaf-capillary-ribs {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(15deg, transparent, transparent 14px, rgba(20, 70, 38, 0.14) 15px, transparent 16px),
    repeating-linear-gradient(75deg, transparent, transparent 18px, rgba(17, 63, 33, 0.08) 19px, transparent 20px);
}

/* ── Idli fan cluster ── */
.idli-platter-art .idli-fan-cluster-3d {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transform-style: preserve-3d;
}

.idli-platter-art .porous-idli-3d {
  position: absolute;
  width: 68px;
  height: 64px;
  --vol-wall-h: 10px;
  transform: translateZ(5px);
  transform-style: preserve-3d;
  pointer-events: auto;
  cursor: pointer;
  transition:
    transform var(--id-dur) var(--id-bezier),
    box-shadow var(--id-dur) var(--id-bezier),
    filter 0.35s ease;
}

.idli-platter-art .idli-dome-cap {
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 28%, #ffffff 0%, var(--id-idli-cream) 55%, var(--id-idli-crease) 100%);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.28),
    inset -4px -5px 12px rgba(0, 0, 0, 0.14),
    inset 2px 3px 5px rgba(255, 255, 255, 0.7);
}

.idli-platter-art .idli-dome-cap--sm { transform: scale(0.92); }
.idli-platter-art .idli-dome-cap--md { transform: scale(0.96); }

.idli-platter-art .idli-side-wall {
  background: linear-gradient(to right, var(--id-idli-crease), var(--id-idli-cream) 40%, var(--id-idli-crease));
}

.idli-platter-art .idli-contact-shadow {
  --cast-w: 80%;
  --cast-h: 6px;
  bottom: -2px;
  opacity: 0.4;
}

.idli-platter-art .idli-dome-cap::after {
  content: '';
  position: absolute;
  top: 48%;
  left: 18%;
  right: 18%;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.12) 20%, rgba(0, 0, 0, 0.18) 50%, rgba(0, 0, 0, 0.12) 80%, transparent);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}

.idli-platter-art .porous-idli-3d::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  width: 14px;
  height: 22px;
  margin-left: -7px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.5), transparent);
  border-radius: 50%;
  filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
  z-index: 10;
}

.idli-platter-art .porous-idli-3d::after {
  content: none;
}

/* Individual idli pop on hover */
.idli-platter-art .porous-idli-3d:hover {
  z-index: 20 !important;
  filter: brightness(1.08);
  box-shadow:
    0 22px 32px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(255, 200, 120, 0.25),
    inset -4px -5px 12px rgba(0, 0, 0, 0.14),
    inset 2px 3px 5px rgba(255, 255, 255, 0.85);
}

.idli-platter-art .porous-idli-3d:hover::before {
  opacity: 0.85;
  animation: idli-wisp-rise 1.2s ease-in-out infinite;
}

.idli-platter-art .idli-3d-pos-1:hover { animation: idli-pop-front 0.6s var(--id-bezier) forwards; }
.idli-platter-art .idli-3d-pos-2:hover { animation: idli-pop-back-left 0.6s var(--id-bezier) forwards; }
.idli-platter-art .idli-3d-pos-3:hover { animation: idli-pop-back-center 0.6s var(--id-bezier) forwards; }
.idli-platter-art .idli-3d-pos-4:hover { animation: idli-pop-back-right 0.6s var(--id-bezier) forwards; }

@keyframes idli-pop-front {
  0%   { transform: translateZ(8px) rotate(-14deg) translateY(0) scale(1); }
  45%  { transform: translateZ(28px) rotate(-18deg) translateY(-22px) scale(1.12); }
  100% { transform: translateZ(22px) rotate(-16deg) translateY(-16px) scale(1.08); }
}

@keyframes idli-pop-back-left {
  0%   { transform: translateZ(5px) translateY(0) scale(1); }
  45%  { transform: translateZ(20px) rotate(-8deg) translateY(-18px) scale(1.1); }
  100% { transform: translateZ(16px) rotate(-5deg) translateY(-12px) scale(1.06); }
}

@keyframes idli-pop-back-center {
  0%   { transform: translateZ(5px) translateY(0) scale(1); }
  45%  { transform: translateZ(24px) translateY(-20px) scale(1.11); }
  100% { transform: translateZ(18px) translateY(-14px) scale(1.07); }
}

@keyframes idli-pop-back-right {
  0%   { transform: translateZ(5px) translateY(0) scale(1); }
  45%  { transform: translateZ(20px) rotate(8deg) translateY(-18px) scale(1.1); }
  100% { transform: translateZ(16px) rotate(5deg) translateY(-12px) scale(1.06); }
}

@keyframes idli-wisp-rise {
  0%   { transform: translateY(6px) scaleX(0.8); opacity: 0.3; }
  50%  { transform: translateY(-8px) scaleX(1.2); opacity: 0.7; }
  100% { transform: translateY(-18px) scaleX(0.6); opacity: 0; }
}

.idli-platter-art .idli-grain-noise {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 25% 35%, var(--id-idli-grain) 0.8px, transparent 1.2px),
    radial-gradient(circle at 60% 40%, var(--id-idli-grain) 1px, transparent 1.5px),
    radial-gradient(circle at 45% 75%, var(--id-idli-grain) 1.2px, transparent 1.8px),
    radial-gradient(circle at 72% 22%, var(--id-idli-grain) 0.7px, transparent 1px),
    radial-gradient(circle at 18% 68%, var(--id-idli-grain) 0.9px, transparent 1.3px);
  background-size: 12px 12px, 14px 14px, 16px 16px, 10px 10px, 13px 13px;
  opacity: 0.6;
}

.idli-platter-art .porous-idli-3d:hover .idli-subsurface-glow {
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.45) 0%, transparent 65%);
}

.idli-platter-art .porous-idli-3d:hover .hot-steam-sheen {
  opacity: 1;
  animation: idli-sheen-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes idli-sheen-pulse {
  0%   { opacity: 0.6; }
  100% { opacity: 1; }
}

.idli-platter-art .idli-subsurface-glow {
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.25) 0%, transparent 65%);
  mix-blend-mode: overlay;
}

.idli-platter-art .hot-steam-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at 40% 30%, rgba(255, 255, 255, 0.45) 0%, transparent 50%);
  filter: blur(1px);
}

.idli-platter-art .idli-3d-pos-1 { top: 32%; left: 8%;  z-index: 4; transform: translateZ(8px) rotate(-14deg); }
.idli-platter-art .idli-3d-pos-2 { top: 8%;  left: 18%; z-index: 1; }
.idli-platter-art .idli-3d-pos-3 { top: 4%;  left: 42%; z-index: 2; }
.idli-platter-art .idli-3d-pos-4 { top: 10%; left: 63%; z-index: 1; }

/* ── Katori bowls row ── */
.idli-platter-art .bowls-front-row-3d {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transform-style: preserve-3d;
}

.idli-platter-art .glazed-katori-3d {
  position: absolute;
  border-radius: 50% 50% 46% 46% / 44% 44% 56% 56%;
  overflow: hidden;
  transform: translateZ(12px);
  transform-style: preserve-3d;
  pointer-events: auto;
  cursor: pointer;
  transition:
    transform var(--id-dur) var(--id-bezier),
    box-shadow var(--id-dur) var(--id-bezier),
    filter 0.35s ease;
}

.idli-platter-art .bowl-left-white:hover {
  animation: katori-lift-left 0.55s var(--id-bezier) forwards;
  z-index: 25 !important;
  filter: brightness(1.06);
}

.idli-platter-art .bowl-center-yellow:hover {
  animation: katori-lift-center 0.55s var(--id-bezier) forwards;
  z-index: 26 !important;
  filter: brightness(1.08);
}

.idli-platter-art .bowl-right-sambar:hover {
  animation: katori-lift-sambar 0.55s var(--id-bezier) forwards;
  z-index: 24 !important;
  filter: brightness(1.06);
}

@keyframes katori-lift-left {
  0%   { transform: translateZ(12px) translateY(0) rotate(0deg); }
  45%  { transform: translateZ(26px) translateY(-14px) rotate(-6deg) scale(1.06); }
  100% { transform: translateZ(20px) translateY(-10px) rotate(-3deg) scale(1.03); }
}

@keyframes katori-lift-center {
  0%   { transform: translateZ(12px) translateY(0); }
  45%  { transform: translateZ(30px) translateY(-18px) scale(1.08); }
  100% { transform: translateZ(24px) translateY(-14px) scale(1.05); }
}

@keyframes katori-lift-sambar {
  0%   { transform: translateZ(12px) translateY(0) rotate(0deg); }
  45%  { transform: translateZ(26px) translateY(-14px) rotate(6deg) scale(1.06); }
  100% { transform: translateZ(20px) translateY(-10px) rotate(3deg) scale(1.03); }
}

.idli-platter-art .glazed-katori-3d:hover .liquid-meniscus-glow {
  filter: opacity(1) blur(0.1px);
}

.idli-platter-art .bowl-right-sambar:hover .sambar-oil-horizon {
  animation: sambar-ripple 0.7s ease-in-out infinite alternate;
}

.idli-platter-art .bowl-center-yellow:hover .coconut-shred-fibers {
  animation: chutney-shimmer 0.6s ease-in-out infinite alternate;
}

.idli-platter-art .bowl-left-white:hover .curry-leaf-float {
  animation: leaf-float 0.8s ease-in-out infinite alternate;
}

@keyframes sambar-ripple {
  0%   { transform: scaleX(1) translateY(0); filter: brightness(1); }
  100% { transform: scaleX(1.04) translateY(-1px); filter: brightness(1.12); }
}

@keyframes chutney-shimmer {
  0%   { opacity: 0.85; }
  100% { opacity: 1; transform: scale(1.02); }
}

@keyframes leaf-float {
  0%   { transform: rotate(15deg) translateY(0); }
  100% { transform: rotate(20deg) translateY(-2px); }
}

.idli-platter-art .ceramic-wall-shading {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 40%);
  z-index: 4;
  pointer-events: none;
}

.idli-platter-art .ceramic-rim-thick-lip {
  position: absolute;
  top: -1px;
  width: 100%;
  height: 10px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(226, 232, 240, 0.55) 60%, rgba(148, 163, 184, 0.35));
  border-radius: 50%;
  z-index: 6;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.22),
    inset 0 2px 2px rgba(255, 255, 255, 0.85),
    inset 0 -2px 3px rgba(0, 0, 0, 0.08);
}

.idli-platter-art .glazed-katori-3d::before {
  content: '';
  position: absolute;
  left: 8%;
  bottom: 2px;
  width: 84%;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15), transparent);
  z-index: 1;
  pointer-events: none;
}

.idli-platter-art .yellow-lip-tint {
  background: linear-gradient(to bottom, #fef08a, #ca8a04);
  box-shadow: 0 1.5px 3px rgba(101, 66, 4, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.idli-platter-art .fluid-chamber-3d {
  position: absolute;
  inset: 3px 4px 4px 4px;
  border-radius: 50% 50% 45% 45% / 42% 42% 58% 58%;
  overflow: hidden;
  z-index: 2;
}

.idli-platter-art .liquid-meniscus-glow {
  position: absolute;
  top: 0;
  width: 100%;
  height: 12px;
  border-radius: 50%;
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  z-index: 3;
  pointer-events: none;
}

.idli-platter-art .red-meniscus    { border-top: 1.5px solid #ef4444; filter: opacity(0.65) blur(0.3px); }
.idli-platter-art .white-meniscus  { border-top: 1.5px solid #ffffff; filter: opacity(0.8) blur(0.2px); }
.idli-platter-art .sambar-meniscus {
  border-top: 2px solid #fb923c;
  filter: opacity(0.82) blur(0.3px);
  box-shadow: 0 -1px 3px rgba(249, 115, 22, 0.35);
}

.idli-platter-art .liquid-mass-body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.idli-platter-art .bowl-left-white {
  width: 76px;
  height: 56px;
  bottom: 12%;
  left: 18%;
  z-index: 3;
  background: linear-gradient(to bottom, var(--id-ceramic-white), var(--id-ceramic-white-shadow));
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.08), 0 12px 24px rgba(0, 0, 0, 0.3);
}

.idli-platter-art .red-chutney-core {
  background: radial-gradient(circle at 35% 35%, #ef4444 0%, var(--id-chutney-red) 60%, var(--id-chutney-red-base) 100%);
}

.idli-platter-art .bowl-center-yellow {
  width: 78px;
  height: 58px;
  bottom: 8%;
  left: 45%;
  z-index: 4;
  background: linear-gradient(to bottom, var(--id-ceramic-yellow), var(--id-ceramic-yellow-shadow));
  box-shadow: inset 0 -6px 8px rgba(0, 0, 0, 0.18), 0 14px 28px rgba(0, 0, 0, 0.4);
}

.idli-platter-art .white-chutney-core {
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--id-chutney-pulp) 60%, var(--id-chutney-shadow) 100%);
}

.idli-platter-art .coconut-shred-fibers {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 20% 40%, rgba(0, 0, 0, 0.04) 1px, transparent 1.5px),
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, 0.05) 1px, transparent 2px),
    radial-gradient(circle at 45% 15%, rgba(255, 255, 255, 0.9) 1px, transparent 1.5px);
  background-size: 8px 8px;
}

.idli-platter-art .bowl-right-sambar {
  width: 88px;
  height: 64px;
  top: 24%;
  right: 6%;
  z-index: 2;
  background: linear-gradient(to bottom, var(--id-ceramic-white), var(--id-ceramic-white-shadow));
  box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.08), 0 12px 24px rgba(0, 0, 0, 0.3);
}

.idli-platter-art .sambar-fluid-volume {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.idli-platter-art .sambar-oil-horizon {
  position: absolute;
  top: 0;
  width: 100%;
  height: 14px;
  background-color: var(--id-sambar-surface);
  border-radius: 50%;
  z-index: 3;
  box-shadow: inset 0 -3px 5px var(--id-sambar-base), 0 1.5px 3px rgba(255, 255, 255, 0.7);
  animation: id-fluid-sim 3s ease-in-out infinite alternate;
}

@keyframes id-fluid-sim {
  0% { filter: brightness(0.98) saturate(0.95); }
  100% { filter: brightness(1.04) saturate(1.05); }
}

.idli-platter-art .surface-garnish-stack {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.idli-platter-art .drumstick-cylinder-3d {
  position: absolute;
  width: 18px;
  height: 13px;
  background: linear-gradient(to right, #166534, #14532d 70%, #064e3b 100%);
  border-radius: 3px;
  box-shadow: 1.5px 2.5px 3px rgba(0, 0, 0, 0.35);
  top: 14px;
  left: 24%;
  transform: rotate(14deg);
  overflow: hidden;
}

.idli-platter-art .pulp-core-3d {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 6px;
  height: calc(100% - 2px);
  background-color: #ca8a04;
  border-radius: 50%;
}

.idli-platter-art .sambar-broth-depth {
  position: absolute;
  top: 6px;
  width: 100%;
  height: calc(100% - 6px);
  background: linear-gradient(to top, var(--id-sambar-base) 0%, var(--id-sambar-core) 100%);
  border-radius: 0 0 50% 50% / 0 0 40% 40%;
  z-index: 1;
}

.idli-platter-art .tadka-oil-glaze {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.4);
}

.idli-platter-art .curry-leaf-float {
  position: absolute;
  width: 11px;
  height: 6px;
  background-color: #15803d;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.3);
}

.idli-platter-art .clf-1 { top: 12px; left: 35%; transform: rotate(15deg); }
.idli-platter-art .clf-2 { top: 14px; left: 30%; transform: rotate(-20deg); }

.idli-platter-art .mustard-speck {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  background-color: #020617;
  border-radius: 50%;
  box-shadow: 0 0.5px 1px rgba(255, 255, 255, 0.2);
}

.idli-platter-art .m-1 { top: 8px; left: 52%; }
.idli-platter-art .m-2 { bottom: 18px; right: 38%; }
.idli-platter-art .m-3 { top: 12px; left: 34%; }
.idli-platter-art .m-4 { top: 16px; left: 40%; transform: rotate(10deg); }

.idli-platter-art .charred-chili-flake {
  position: absolute;
  width: 15px;
  height: 5.5px;
  background: linear-gradient(to bottom, #b91c1c, #450a0a);
  border-radius: 1px 50% 50% 1px;
  top: 22px;
  left: 26%;
  transform: rotate(18deg);
  box-shadow: 1px 1.5px 2px rgba(0, 0, 0, 0.4);
}

.idli-platter-art .katori-occlusion-shadow {
  position: absolute;
  bottom: -4px;
  width: 100%;
  height: 10px;
  background: rgba(7, 9, 14, 0.6);
  border-radius: 50%;
  filter: blur(3px);
  z-index: -1;
}

/* ── Floor shadows ── */
.idli-platter-art .floor-shadow-occlusion-dark {
  position: absolute;
  bottom: 15px;
  width: 200px;
  height: 12px;
  background: rgba(45, 23, 16, 0.75);
  border-radius: 50%;
  z-index: 1;
  filter: blur(4px);
  transition: transform var(--id-dur) var(--id-bezier), opacity var(--id-dur) var(--id-bezier);
}

.idli-platter-art .floor-shadow-atmospheric-soft {
  position: absolute;
  bottom: 5px;
  width: 260px;
  height: 26px;
  background: rgba(45, 23, 16, 0.4);
  border-radius: 50%;
  z-index: 0;
  filter: blur(12px);
  transition: transform var(--id-dur) var(--id-bezier), opacity var(--id-dur) var(--id-bezier);
}

/* ── Reduced motion ── */
.motion-reduced .idli-platter-art .porous-idli-3d:hover,
.motion-reduced .idli-platter-art .glazed-katori-3d:hover {
  animation: none;
  transform: translateY(-6px) scale(1.03);
}

.motion-reduced .idli-platter-art .porous-idli-3d:hover::before {
  animation: none;
  opacity: 0.5;
}

.motion-reduced .idli-platter-art .thermal-glow-aura,
.motion-reduced .idli-platter-art .steam-trail,
.motion-reduced .idli-platter-art .platter-stage-3d,
.motion-reduced .idli-platter-art .sambar-oil-horizon {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .idli-platter-art .porous-idli-3d:hover,
  .idli-platter-art .glazed-katori-3d:hover {
    animation: none;
    transform: translateY(-6px) scale(1.03);
  }

  .idli-platter-art .porous-idli-3d:hover::before {
    animation: none;
    opacity: 0.5;
  }

  .idli-platter-art .thermal-glow-aura,
  .idli-platter-art .steam-trail,
  .idli-platter-art .platter-stage-3d,
  .idli-platter-art .sambar-oil-horizon {
    animation: none !important;
  }
}