/* ═══ Pani Puri — isometric 3D cluster ═══ */

.dish--pani-puri {
  --pp-puri-light: #ffe699;
  --pp-puri-body: #f9a825;
  --pp-puri-shadow: #b45309;
  --pp-puri-blister: #c66900;
  --pp-pani-rim: #4ade80;
  --pp-pani-core: #14532d;
  --pp-pani-glow: rgba(60, 208, 112, 0.35);
  --pp-boondi-bead: #ffca28;
  --pp-plate-choco-light: #6d4c41;
  --pp-plate-choco-body: #3e2723;
  --pp-plate-choco-dark: #1a0f0d;
  --pp-bezier: var(--food-bezier-spring);
  --pp-dur: var(--food-dur);
}

.pani-puri-art {
  position: relative;
  width: 360px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  perspective: var(--food-perspective);
}

.pani-puri-stage-3d {
  position: relative;
  width: 240px;
  height: 200px;
  transform-style: preserve-3d;
  animation: food-stage-levitate 7s ease-in-out infinite alternate;
  z-index: 2;
}

.pani-puri-thermal-glow {
  top: 24%;
  width: 200px;
  height: 160px;
}

/* ── Hover lift ── */
.dish--pani-puri:not(.order-card):is(:hover, .is-raised, :focus-within) .chocolate-dish {
  transform: rotateX(28deg) rotateY(-5deg) translateY(-12px);
}

.dish--pani-puri:not(.order-card):is(:hover, .is-raised, :focus-within) .floor-shadow-occlusion,
.dish--pani-puri:not(.order-card):is(:hover, .is-raised, :focus-within) .render-shadow-contact {
  transform: translateX(-50%) scale(0.76);
  opacity: 0.52;
}

.dish--pani-puri:not(.order-card):is(:hover, .is-raised, :focus-within) .floor-shadow-ambient,
.dish--pani-puri:not(.order-card):is(:hover, .is-raised, :focus-within) .render-shadow-ambient {
  transform: translateX(-50%) scale(0.84);
  opacity: 0.28;
}

/* ── Chocolate ceramic dish ── */
.pani-puri-art .chocolate-dish {
  position: relative;
  width: 220px;
  height: 162px;
  margin: 0 auto;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.03) 0deg 12deg, transparent 12deg 24deg),
    linear-gradient(145deg, var(--pp-plate-choco-light), var(--pp-plate-choco-body) 55%, var(--pp-plate-choco-dark));
  border-radius: 50%;
  transform: rotateX(var(--food-rest-tilt-x)) rotateY(var(--food-rest-tilt-y));
  box-shadow:
    0 20px 44px rgba(26, 15, 13, 0.42),
    inset 0 -10px 14px var(--pp-plate-choco-dark),
    inset 0 6px 10px rgba(255, 255, 255, 0.16);
  transition: transform var(--pp-dur) var(--pp-bezier);
  z-index: 2;
}

.pani-puri-art .dish-gloss-rim {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border-top: 2px solid var(--food-rim-highlight);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

/* ── 7-puri cluster ── */
.pani-puri-art .puris-render-cluster {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-style: preserve-3d;
  pointer-events: none;
}

.pani-puri-art .clay-puri-shell {
  position: absolute;
  width: 56px;
  height: 52px;
  border-radius: 50% 50% 46% 46% / 54% 54% 46% 46%;
  background:
    radial-gradient(circle at 34% 24%, var(--pp-puri-light) 0%, var(--pp-puri-body) 52%, var(--pp-puri-shadow) 100%);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.24),
    inset -5px -6px 8px rgba(0, 0, 0, 0.28),
    inset 3px 4px 6px rgba(255, 255, 255, 0.48);
  transform-style: preserve-3d;
  pointer-events: auto;
  cursor: pointer;
  transition:
    transform var(--pp-dur) var(--pp-bezier),
    box-shadow var(--pp-dur) var(--pp-bezier),
    filter var(--pp-dur) ease;
}

.pani-puri-art .clay-puri-shell::before {
  content: '';
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 32%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, rgba(20, 83, 45, 0.85) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 72%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 2;
}

.pani-puri-art .clay-puri-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(circle at 18% 35%, transparent 1px, rgba(198, 105, 0, 0.15) 1.5px, transparent 2.5px),
    radial-gradient(circle at 72% 62%, transparent 1px, rgba(198, 105, 0, 0.12) 1.5px, transparent 2.5px),
    radial-gradient(circle at 48% 78%, transparent 1px, rgba(198, 105, 0, 0.1) 1.5px, transparent 2.5px);
  pointer-events: none;
}

/* Size variation per position */
.pani-puri-art .p-3d-bg-left   { top: 2%;  left: 26%; z-index: 1; transform: scale(0.92) translateZ(2px); }
.pani-puri-art .p-3d-bg-right  { top: 6%;  left: 50%; z-index: 1; transform: scale(0.94) translateZ(4px); }
.pani-puri-art .p-3d-mid-left  { top: 20%; left: 11%; z-index: 2; transform: scale(0.98) translateZ(8px); }
.pani-puri-art .p-3d-center    { top: 22%; left: 38%; z-index: 4; transform: scale(1.05) translateZ(14px); }
.pani-puri-art .p-3d-mid-right { top: 24%; left: 64%; z-index: 2; transform: scale(0.97) translateZ(8px); }
.pani-puri-art .p-3d-fg-left   { bottom: 8%; left: 24%; z-index: 5; transform: scale(1.02) translateZ(18px); }
.pani-puri-art .p-3d-fg-right  { bottom: 4%; left: 51%; z-index: 5; transform: scale(1.04) translateZ(20px); }

/* ── Individual puri pop on hover ── */
.pani-puri-art .clay-puri-shell:hover {
  animation: puri-pop 0.55s var(--pp-bezier) forwards;
  z-index: 20 !important;
  filter: brightness(1.1);
  box-shadow:
    0 22px 32px rgba(0, 0, 0, 0.38),
    0 0 22px var(--pp-pani-glow),
    inset -4px -4px 6px rgba(0, 0, 0, 0.25),
    inset 2px 3px 5px rgba(255, 255, 255, 0.55);
}

.pani-puri-art .p-3d-bg-left:hover   { animation-name: puri-pop-back-left; }
.pani-puri-art .p-3d-bg-right:hover  { animation-name: puri-pop-back-right; }
.pani-puri-art .p-3d-mid-left:hover  { animation-name: puri-pop-mid-left; }
.pani-puri-art .p-3d-center:hover    { animation-name: puri-pop-center; }
.pani-puri-art .p-3d-mid-right:hover  { animation-name: puri-pop-mid-right; }
.pani-puri-art .p-3d-fg-left:hover    { animation-name: puri-pop-fg-left; }
.pani-puri-art .p-3d-fg-right:hover   { animation-name: puri-pop-fg-right; }

@keyframes puri-pop {
  0%   { transform: translateY(0) translateZ(0) scale(1); }
  45%  { transform: translateY(-26px) translateZ(30px) scale(1.16); }
  100% { transform: translateY(-20px) translateZ(24px) scale(1.1); }
}

@keyframes puri-pop-back-left {
  0%   { transform: scale(0.92) translateZ(2px); }
  45%  { transform: translateY(-18px) translateZ(22px) scale(1.12) rotate(-8deg); }
  100% { transform: translateY(-12px) translateZ(18px) scale(1.06) rotate(-5deg); }
}

@keyframes puri-pop-back-right {
  0%   { transform: scale(0.94) translateZ(4px); }
  45%  { transform: translateY(-18px) translateZ(22px) scale(1.12) rotate(8deg); }
  100% { transform: translateY(-12px) translateZ(18px) scale(1.06) rotate(5deg); }
}

@keyframes puri-pop-mid-left {
  0%   { transform: scale(0.98) translateZ(8px); }
  45%  { transform: translateY(-22px) translateZ(26px) scale(1.14) rotate(-12deg); }
  100% { transform: translateY(-16px) translateZ(22px) scale(1.08) rotate(-8deg); }
}

@keyframes puri-pop-center {
  0%   { transform: scale(1.05) translateZ(14px); }
  45%  { transform: translateY(-30px) translateZ(36px) scale(1.18); }
  100% { transform: translateY(-24px) translateZ(30px) scale(1.12); }
}

@keyframes puri-pop-mid-right {
  0%   { transform: scale(0.97) translateZ(8px); }
  45%  { transform: translateY(-22px) translateZ(26px) scale(1.14) rotate(12deg); }
  100% { transform: translateY(-16px) translateZ(22px) scale(1.08) rotate(8deg); }
}

@keyframes puri-pop-fg-left {
  0%   { transform: scale(1.02) translateZ(18px); }
  45%  { transform: translateY(-28px) translateZ(34px) scale(1.17) rotate(-10deg); }
  100% { transform: translateY(-22px) translateZ(28px) scale(1.12) rotate(-6deg); }
}

@keyframes puri-pop-fg-right {
  0%   { transform: scale(1.04) translateZ(20px); }
  45%  { transform: translateY(-28px) translateZ(34px) scale(1.17) rotate(10deg); }
  100% { transform: translateY(-22px) translateZ(28px) scale(1.12) rotate(6deg); }
}

.pani-puri-art .clay-puri-shell:hover .teekha-pool {
  transform: scale(1.1) translateY(-3px) translateZ(4px);
  box-shadow:
    inset 0 4px 6px rgba(0, 0, 0, 0.65),
    0 0 12px var(--pp-pani-glow);
  animation: pani-fill-rise 0.55s var(--pp-bezier) forwards;
}

.pani-puri-art .clay-puri-shell:hover .bead-boondi {
  animation: boondi-bounce 0.45s var(--pp-bezier) forwards;
}

/* Signature ritual: fill → tilt → pop readiness */
.pani-puri-art:has(.clay-puri-shell:hover) .chocolate-dish {
  animation: pani-cluster-ready 0.65s var(--pp-bezier) forwards;
}

.pani-puri-art:has(.clay-puri-shell:hover) .pani-puri-thermal-glow {
  opacity: 1;
  transform: scale(1.12);
  filter: brightness(1.15);
}

.pani-puri-art .clay-puri-shell:hover::before {
  animation: pani-shell-crack-glint 0.55s ease forwards;
}

@keyframes pani-fill-rise {
  0%   { height: 22px; filter: brightness(1); }
  55%  { height: 28px; filter: brightness(1.12); }
  100% { height: 26px; filter: brightness(1.08); }
}

@keyframes pani-cluster-ready {
  0%   { transform: rotateX(var(--food-rest-tilt-x, 18deg)) rotateY(var(--food-rest-tilt-y, -8deg)) rotateZ(0deg); }
  40%  { transform: rotateX(24deg) rotateY(-10deg) rotateZ(-2deg); }
  100% { transform: rotateX(21deg) rotateY(-9deg) rotateZ(-1deg); }
}

@keyframes pani-shell-crack-glint {
  0%   { opacity: 0.55; filter: brightness(1); }
  45%  { opacity: 0.95; filter: brightness(1.35); }
  100% { opacity: 0.75; filter: brightness(1.15); }
}

@keyframes boondi-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px) scale(1.18); }
}

/* ── Teekha pani meniscus ── */
.pani-puri-art .teekha-pool {
  position: absolute;
  top: 22%;
  left: 18%;
  width: 64%;
  height: 22px;
  background:
    radial-gradient(ellipse at 50% 28%, var(--pp-pani-rim) 8%, var(--pp-pani-core) 72%, #052e16 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 4px 7px rgba(0, 0, 0, 0.65),
    inset 0 -1px 2px rgba(74, 222, 128, 0.35),
    0 2px 3px rgba(255, 255, 255, 0.2);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform var(--pp-dur) var(--pp-bezier), box-shadow var(--pp-dur) ease;
}

.pani-puri-art .teekha-pool::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 15%;
  width: 45%;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}

/* ── Boondi beads ── */
.pani-puri-art .bead-boondi {
  position: absolute;
  background: radial-gradient(circle at 32% 32%, #ffffff 0%, var(--pp-boondi-bead) 58%, #b45309 100%);
  border-radius: 50%;
  box-shadow:
    0 2px 3px rgba(0, 0, 0, 0.42),
    inset -1px -1px 2px rgba(0, 0, 0, 0.28);
}

.pani-puri-art .bead-boondi::after {
  content: '';
  position: absolute;
  top: 15%;
  left: 20%;
  width: 35%;
  height: 35%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}

.pani-puri-art .b-1 { width: 5.5px; height: 5.5px; top: 2px; left: 25%; }
.pani-puri-art .b-2 { width: 4.5px; height: 4.5px; bottom: 1px; left: 45%; }
.pani-puri-art .b-3 { width: 5px;   height: 5px;   top: 3px; right: 20%; }
.pani-puri-art .b-4 { width: 4px;   height: 4px;   top: 8px; left: 15%; }
.pani-puri-art .b-5 { width: 5.5px; height: 5.5px; bottom: 2px; right: 25%; }

.pani-puri-art .floor-shadow-occlusion,
.pani-puri-art .render-shadow-contact {
  bottom: 38px;
  width: 168px;
}

.pani-puri-art .floor-shadow-ambient,
.pani-puri-art .render-shadow-ambient {
  bottom: 28px;
  width: 210px;
}

.motion-reduced .pani-puri-stage-3d,
.motion-reduced .pani-puri-art .clay-puri-shell:hover,
.motion-reduced .pani-puri-art:has(.clay-puri-shell:hover) .chocolate-dish,
.motion-reduced .pani-puri-art .clay-puri-shell:hover .teekha-pool {
  animation: none !important;
}

.motion-reduced .pani-puri-art .clay-puri-shell:hover {
  transform: translateY(-8px) scale(1.05);
}

.motion-reduced .pani-puri-art .clay-puri-shell:hover .bead-boondi {
  animation: none;
}

.motion-reduced .pani-puri-art .clay-puri-shell:hover .teekha-pool {
  height: 26px;
  filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
  .pani-puri-stage-3d {
    animation: none !important;
  }

  .pani-puri-art .clay-puri-shell:hover,
  .pani-puri-art:has(.clay-puri-shell:hover) .chocolate-dish,
  .pani-puri-art .clay-puri-shell:hover .teekha-pool {
    animation: none;
  }

  .pani-puri-art .clay-puri-shell:hover {
    transform: translateY(-8px) scale(1.05);
  }

  .pani-puri-art .clay-puri-shell:hover .bead-boondi {
    animation: none;
  }

  .pani-puri-art .clay-puri-shell:hover .teekha-pool {
    height: 26px;
    filter: brightness(1.08);
  }
}