/* ============================================================
   BADEM — Chocolate Renderer
   Glossy CSS-rendered pieces that morph by shape / type /
   filling / decoration. Exterior + cutaway cross-section.
   Built so a real photo can swap into .choco (set --photo).
   ============================================================ */

.choco-wrap{
  position:relative; display:inline-grid; place-items:center;
  filter:drop-shadow(0 22px 26px rgba(46,26,14,.30)) drop-shadow(0 6px 10px rgba(46,26,14,.18));
  transition:transform .6s var(--ease-out), filter .6s var(--ease);
  --size:240px;
}
.choco{
  position:relative; width:var(--size); aspect-ratio:var(--ar,1);
  -webkit-mask:var(--mask) center/100% 100% no-repeat; mask:var(--mask) center/100% 100% no-repeat;
  transition:aspect-ratio .5s var(--ease-out);
  isolation:isolate;
}
/* photo override — drop a real product shot in later */
.choco.has-photo .choco__layers{display:none;}
.choco.has-photo::after{content:""; position:absolute; inset:0; background:var(--photo) center/cover no-repeat;}

.choco__layers{position:absolute; inset:0;}
.choco__layer{position:absolute; inset:0;}

/* base body — type color, domed shading */
.l-base{ background:
  radial-gradient(120% 130% at 50% 118%, var(--c-dark) 0%, transparent 60%),
  linear-gradient(157deg, var(--c-light) 2%, var(--c-base) 46%, var(--c-dark) 100%);
}
/* edge roundness vignette */
.l-vig{ background:radial-gradient(80% 78% at 50% 44%, transparent 52%, rgba(0,0,0,.30) 100%); mix-blend-mode:multiply;}
/* big soft specular */
.l-gloss{ background:radial-gradient(46% 40% at 34% 24%, var(--c-spec) 0%, rgba(255,255,255,0) 60%); mix-blend-mode:screen;}
/* sharp hotspot */
.l-spot{ background:radial-gradient(14% 12% at 30% 22%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 70%); opacity:.85; mix-blend-mode:screen;}
/* top rim light */
.l-rim{ background:linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 7%);}
/* bottom contact darken */
.l-floor{ background:linear-gradient(0deg, rgba(0,0,0,.22) 0%, transparent 16%);}

/* slow tempered sheen sweep */
.l-sheen{ background:linear-gradient(112deg, transparent 30%, rgba(255,255,255,.22) 46%, rgba(255,255,255,.05) 52%, transparent 64%);
  background-size:260% 100%; background-position:120% 0; mix-blend-mode:screen;}
.choco-wrap[data-anim="1"] .l-sheen{animation:sheen 6.5s var(--ease) infinite;}
@keyframes sheen{0%{background-position:130% 0;}55%,100%{background-position:-60% 0;}}

/* decoration specks */
.deco{position:absolute; pointer-events:none; will-change:transform;}
.deco.pistachio{border-radius:42% 58% 50% 50%/55% 45% 55% 45%; box-shadow:inset 0 -1px 1px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.35);}
.deco.almond{border-radius:50% 50% 48% 48%/64% 64% 36% 36%; box-shadow:inset 0 -1px 1px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.4);}
.deco.nib{border-radius:30% 60% 45% 55%/55% 40% 60% 45%;}
.deco.gold{border-radius:50%; box-shadow:0 0 4px 1px rgba(201,162,77,.7);}
.deco-svg{position:absolute; inset:0; overflow:visible;}

/* ---------- cutaway cross-section ---------- */
.choco.is-cut .choco__layers{opacity:0;}
.cut{position:absolute; inset:0; opacity:0; transition:opacity .45s var(--ease);}
.choco.is-cut .cut{opacity:1;}
.cut-shell{position:absolute; inset:0; -webkit-mask:var(--mask) center/100% 100% no-repeat; mask:var(--mask) center/100% 100% no-repeat;
  background:linear-gradient(157deg, var(--c-base), var(--c-dark));
}
.cut-shell::after{content:""; position:absolute; inset:0; background:radial-gradient(70% 70% at 38% 30%, rgba(255,255,255,.18), transparent 60%);}
.cut-fill{position:absolute; inset:8%; -webkit-mask:var(--mask) center/100% 100% no-repeat; mask:var(--mask) center/100% 100% no-repeat;
  background:
   radial-gradient(60% 50% at 38% 30%, rgba(255,255,255,.30), transparent 55%),
   linear-gradient(160deg, var(--f-light), var(--f-base) 60%, var(--f-dark));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.18);
}
.cut-fill .incl{position:absolute; border-radius:45%; opacity:.85;}

/* swatch (small chip for selectors) */
.swatch{width:100%; height:100%; border-radius:inherit;
  background:radial-gradient(120% 120% at 30% 22%, var(--c-light), var(--c-base) 52%, var(--c-dark));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 4px rgba(0,0,0,.25);}

/* mirrored reflection under a hero piece */
.choco-reflect{position:relative;}
.choco-reflect .choco-wrap.mirror{position:absolute; left:0; right:0; top:100%; margin:auto;
  transform:scaleY(-1); filter:none; opacity:.16;
  -webkit-mask:linear-gradient(180deg, #000, transparent 62%); mask:linear-gradient(180deg, #000, transparent 62%);
  pointer-events:none;}