/* ══════════════════════════════════════════════════════════════
   slice.css — the wedge cut from the pie, and the slice served on
   a plate with melting ice cream.

   Two separate jobs:
     .pie__cut   the void left in the hero pie — cut walls,
                 exposed filling, and a spill onto the dish
     .served     the plated slice, scoop, melt pool and fork
   ══════════════════════════════════════════════════════════════ */

/* ══ THE VOID IN THE PIE ════════════════════════════════════════
   A wedge clipped out of the pie's upper-right. It sits ABOVE the
   lattice so it hides the weave, and paints the exposed interior:
   a dark filling floor, two lit cut walls, and the crust's cross
   section at the outer end. */

.pie__cut {
  position: absolute;
  inset: 0;
  z-index: 7;
  /* The same 20°–64° sector the lattice mask removes, expressed as
     a triangle in pie coordinates. Radius ~40% keeps the cut
     inside the crimp so the crust ring stays unbroken around it.
       20° from vertical → (50 + 40·sin20, 50 − 40·cos20) = (64, 12)
       64° from vertical → (50 + 40·sin64, 50 − 40·cos64) = (86, 32) */
  clip-path: polygon(50% 50%, 64% 12%, 86% 32%);
  pointer-events: none;
}

/* Filling floor. The gradient is anchored at the wedge's own
   centroid (~78% 30%), not the pie's centre, so the light falls
   across the exposed area correctly rather than looking like a
   flat red triangle pasted over the weave. */
.pie__cut-floor {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    40% 40% at 68% 28%,
    #55160d 0%,
    #3a0d07 42%,
    #240605 76%,
    #150303 100%
  );
  /* Deep shade at the apex, where the cut is deepest and least
     reachable by light. */
  box-shadow:
    inset -12px 12px 24px rgba(8, 2, 1, 0.9),
    inset 5px -5px 14px rgba(150, 58, 32, 0.16);
}
/* Cherries visible in the cut face. */
.pie__cut-floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      2.4% 1.9% at 62% 26%,
      rgba(196, 52, 32, 0.8),
      transparent 72%
    ),
    radial-gradient(
      2% 1.6% at 68% 33%,
      rgba(168, 40, 26, 0.74),
      transparent 74%
    ),
    radial-gradient(
      1.7% 1.4% at 58% 34%,
      rgba(210, 66, 40, 0.6),
      transparent 74%
    ),
    radial-gradient(
      2.2% 1.7% at 72% 25%,
      rgba(150, 34, 22, 0.7),
      transparent 74%
    ),
    radial-gradient(
      1.9% 1.5% at 64% 40%,
      rgba(182, 46, 28, 0.66),
      transparent 74%
    );
  filter: blur(0.4px);
}

/* The two cut walls: pastry seen edge-on, bright where the sun
   reaches into the gap. This is what makes the cut read as having
   depth rather than being a painted-on dark wedge. */
.pie__cut-wall {
  position: absolute;
  inset: 0;
  /* Two bands running along the wedge's straight sides. The upper
     wall faces the sun and shows pale pastry with a bright top
     lip; the lower faces away and stays dark. Together they give
     the void thickness. */
  /* Wall normals are perpendicular to each cut edge: the 20° edge
     faces 110°, the 64° edge faces 334°. The first catches the
     upper-left sun and shows pale pastry; the second is turned
     away and stays dark. */
  background:
    linear-gradient(
      110deg,
      transparent 47.8%,
      rgba(244, 212, 160, 0.92) 48.6%,
      rgba(198, 142, 74, 0.86) 50%,
      rgba(122, 72, 26, 0.72) 51.2%,
      transparent 52%
    ),
    linear-gradient(
      334deg,
      transparent 47.8%,
      rgba(78, 42, 13, 0.88) 48.8%,
      rgba(44, 22, 6, 0.82) 50.2%,
      transparent 51.4%
    );
  filter: blur(0.6px);
}

/* Filling that slumped out over the cut edge onto the dish. */
.pie__cut-spill {
  position: absolute;
  right: 20%;
  top: 26%;
  width: 12%;
  aspect-ratio: 1.5;
  border-radius: 54% 46% 38% 62% / 58% 44% 56% 42%;
  background: radial-gradient(
    ellipse at 38% 34%,
    #a8321e 0%,
    #7a1e12 46%,
    #45100a 84%
  );
  box-shadow:
    inset 0 1px 2px rgba(255, 150, 110, 0.34),
    0 1px 3px hsl(var(--shadow-hue) / 0.5);
  filter: blur(0.3px);
}

/* ══ THE SERVED SLICE ═══════════════════════════════════════════ */

.served {
  position: absolute;
  left: 17%;
  bottom: -6%;
  width: 23%;
  aspect-ratio: 1.08;
  rotate: -5deg;
  z-index: 22;
  filter: blur(calc((1 - var(--px)) * 1.4px));
}

.served__shadow {
  position: absolute;
  inset: 2% -3% -6% -2%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.55),
    transparent 76%
  );
  filter: blur(13px);
  transform: rotate(var(--sun-angle)) translateY(6%) scaleX(1.14) scaleY(0.86)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.55 + var(--sun-strength) * 0.35);
}

.served__plate {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 26%,
    var(--china-hi) 0%,
    var(--china) 32%,
    var(--china-lo) 72%,
    var(--china-sh) 100%
  );
  box-shadow:
    inset -7px -9px 20px rgba(80, 62, 42, 0.3),
    inset 9px 11px 22px rgba(255, 252, 244, 0.55),
    var(--sh-close);
}
.served__plate-well {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  box-shadow:
    inset 0 2px 6px rgba(90, 72, 50, 0.3),
    inset 0 -1px 2px rgba(255, 255, 255, 0.5);
}
.served__plate-glaze {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 196deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.34) 22deg,
    transparent 58deg,
    transparent 302deg,
    rgba(255, 250, 240, 0.16) 334deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  filter: blur(1.4px);
}

/* Melt pool: ice cream running out under the slice. Sits below
   both, above the plate. */
.served__melt {
  position: absolute;
  left: 24%;
  top: 42%;
  width: 52%;
  aspect-ratio: 1.7;
  border-radius: 46% 54% 62% 38% / 52% 46% 54% 48%;
  background: radial-gradient(
    ellipse at 42% 38%,
    rgba(255, 250, 232, 0.92) 0%,
    rgba(248, 238, 210, 0.8) 44%,
    rgba(232, 216, 178, 0.55) 76%,
    transparent 94%
  );
  filter: blur(1.6px);
  z-index: 2;
}

/* ── The wedge of pie, seen from above ── */
.slice {
  position: absolute;
  left: 16%;
  top: 16%;
  width: 56%;
  aspect-ratio: 0.96;
  rotate: 14deg;
  z-index: 3;
  /* Wedge with a curved crust edge and slightly irregular cut
     sides — a cut slice slumps, it doesn't stay a clean triangle. */
  clip-path: polygon(
    49% 97%,
    40% 74%,
    30% 52%,
    19% 30%,
    15% 21%,
    23% 12%,
    35% 5%,
    50% 2.5%,
    65% 5%,
    78% 12%,
    86% 21%,
    82% 30%,
    71% 52%,
    60% 74%
  );
  filter: drop-shadow(0 3px 6px hsl(var(--shadow-hue) / 0.55));
}

/* Layer order, bottom to top: base pastry → cherry filling →
   lattice strips → crimped crust along the outer arc.
   The wedge's apex points DOWN (bottom of the box) and its crust
   arc runs across the TOP, so every gradient here is anchored to
   50% 0%, not 50% 100%. */

.slice__base {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    168deg,
    var(--crust-mid) 0%,
    var(--crust-deep) 40%,
    var(--crust-burn) 76%,
    var(--crust-char) 100%
  );
}

/* Cherry filling: fills the wedge except a margin for the crust. */
.slice__filling {
  position: absolute;
  inset: 14% 10% 4%;
  clip-path: inherit;
  background: radial-gradient(
    ellipse at 46% 30%,
    #9c3320 0%,
    #74200f 40%,
    #4a1109 74%,
    #2c0805 100%
  );
  box-shadow: inset 0 2px 8px rgba(20, 4, 2, 0.75);
  z-index: 2;
}
/* Whole cherries sitting in the filling. */
.slice__filling::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(9% 7% at 42% 34%, rgba(198, 56, 34, 0.85), transparent 74%),
    radial-gradient(7% 6% at 58% 46%, rgba(170, 42, 26, 0.8), transparent 76%),
    radial-gradient(
      8% 6.4% at 48% 58%,
      rgba(210, 70, 42, 0.7),
      transparent 76%
    ),
    radial-gradient(6% 5% at 38% 50%, rgba(160, 36, 22, 0.72), transparent 78%);
  filter: blur(0.5px);
}

/* Lattice strips over the filling: two crossed sets of bands, cut
   to the wedge so they stop at the crust. */
.slice__lattice {
  position: absolute;
  inset: 14% 10% 4%;
  clip-path: inherit;
  z-index: 3;
  /* Fixed units, not percentages. On a narrow wedge, percentage
     stops are measured against the box, so the two sets converge
     toward the apex and the weave reads as a radial fan instead
     of a grid. px keeps the pitch constant across the slice. */
  background:
    repeating-linear-gradient(
      54deg,
      transparent 0 9px,
      var(--crust-pale) 9px 13px,
      var(--crust-mid) 13px 15px,
      transparent 15px 24px
    ),
    repeating-linear-gradient(
      -50deg,
      transparent 0 9px,
      var(--crust-mid) 9px 13px,
      var(--crust-deep) 13px 15px,
      transparent 15px 24px
    );
  filter: drop-shadow(0 1.5px 1.5px rgba(50, 24, 6, 0.7));
}

/* The crimped crust running along the wedge's outer arc — the
   thick browned edge you always see on a cut slice. */
.slice__crust {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    repeating-conic-gradient(
      from 200deg at 50% 108%,
      rgba(40, 18, 3, 0.5) 0deg 1deg,
      transparent 1deg 4deg
    ),
    radial-gradient(
      112% 46% at 50% 4%,
      var(--crust-pale) 0%,
      var(--crust-mid) 34%,
      var(--crust-deep) 62%,
      var(--crust-burn) 86%,
      transparent 100%
    );
  -webkit-mask: radial-gradient(112% 46% at 50% 4%, #000 62%, transparent 96%);
  mask: radial-gradient(112% 46% at 50% 4%, #000 62%, transparent 96%);
}
/* Filling oozing from the cut point of the wedge. */
.slice__ooze {
  position: absolute;
  left: 38%;
  bottom: -6%;
  width: 30%;
  aspect-ratio: 1.4;
  border-radius: 50% 50% 44% 56% / 46% 54% 46% 54%;
  background: radial-gradient(
    ellipse at 40% 32%,
    #a2301d 0%,
    #71190f 52%,
    #3c0c07 88%
  );
  box-shadow: inset 0 1px 2px rgba(255, 148, 106, 0.3);
  z-index: 5;
  filter: blur(0.4px);
}

/* ── Ice cream scoop, melting ── */
.scoop {
  position: absolute;
  right: 16%;
  top: 34%;
  width: 32%;
  aspect-ratio: 1;
  z-index: 5;
}
.scoop__body {
  position: absolute;
  inset: 0;
  /* Not a sphere: a scoop slumps, and its outline is lumpy. */
  border-radius: 52% 48% 46% 54% / 50% 54% 46% 50%;
  /* Vanilla, not white — and the falloff has to be fast at the
     rim or it reads as a flat disc rather than a dome. */
  background: radial-gradient(
    circle at 34% 26%,
    #fffdf4 0%,
    #fdf6e0 22%,
    #f4e8c6 48%,
    #dcc99c 74%,
    #b89f72 92%,
    #96805a 100%
  );
  box-shadow:
    inset -7px -9px 16px rgba(120, 96, 58, 0.5),
    inset 7px 9px 16px rgba(255, 255, 255, 0.9),
    inset 0 0 22px rgba(150, 122, 78, 0.22),
    0 4px 9px hsl(var(--shadow-hue) / 0.55);
}
/* Surface texture: the ridges a scoop leaves. */
.scoop__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* The curled ridges a scoop leaves, plus a few surface pits.
     Stronger than before: at this size a .17 alpha vanishes. */
  background:
    repeating-conic-gradient(
      from 12deg at 40% 38%,
      transparent 0 11deg,
      rgba(255, 252, 240, 0.3) 11deg 14deg,
      rgba(168, 138, 92, 0.34) 14deg 17deg,
      transparent 17deg 28deg
    ),
    radial-gradient(
      7% 6% at 62% 58%,
      rgba(160, 132, 88, 0.26),
      transparent 74%
    ),
    radial-gradient(5% 5% at 44% 70%, rgba(160, 132, 88, 0.22), transparent 76%);
  filter: blur(0.6px);
}
/* A small, tight specular — a broad screen wash here flattens the
   dome the box-shadows just built. */
.scoop__gloss {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    20% 15% at 33% 24%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 253, 244, 0.3) 52%,
    transparent 78%
  );
  mix-blend-mode: screen;
  filter: blur(1.6px);
}
/* A drip running off the scoop toward the melt pool. */
.scoop__drip {
  position: absolute;
  left: 14%;
  bottom: -14%;
  width: 34%;
  aspect-ratio: 0.8;
  border-radius: 50% 50% 46% 54% / 38% 42% 58% 62%;
  background: linear-gradient(
    180deg,
    rgba(253, 247, 230, 0.95),
    rgba(238, 224, 190, 0.7) 70%,
    transparent
  );
  filter: blur(0.9px);
}

/* ── Fork resting on the plate ── */
.fork {
  position: absolute;
  right: -14%;
  bottom: 18%;
  width: 68%;
  height: 15%;
  rotate: -26deg;
  z-index: 6;
}
.fork__shadow {
  position: absolute;
  inset: 12% -3% -40% 2%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 56% 50%,
    hsl(var(--shadow-hue) / 0.5),
    transparent 72%
  );
  filter: blur(4px);
}
.fork__handle {
  position: absolute;
  right: 0;
  top: 24%;
  width: 62%;
  height: 50%;
  border-radius: 8% 40% 40% 8% / 50%;
  background: linear-gradient(
    178deg,
    var(--silver-sh) 0%,
    var(--silver-lo) 15%,
    var(--silver-hi) 40%,
    #eef1f5 49%,
    var(--silver) 58%,
    var(--silver-lo) 76%,
    var(--silver-sh) 100%
  );
  box-shadow:
    0 2px 4px hsl(var(--shadow-hue) / 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.9);
}
.fork__neck {
  position: absolute;
  left: 26%;
  top: 30%;
  width: 22%;
  height: 38%;
  background: linear-gradient(
    178deg,
    var(--silver-sh) 0%,
    var(--silver-hi) 44%,
    var(--silver) 60%,
    var(--silver-sh) 100%
  );
  clip-path: polygon(0% 10%, 100% 22%, 100% 78%, 0% 90%);
}
.fork__tines {
  position: absolute;
  left: 0;
  top: 8%;
  width: 30%;
  height: 84%;
  background: linear-gradient(
    178deg,
    var(--silver-lo) 0%,
    var(--silver-hi) 42%,
    var(--silver) 62%,
    var(--silver-sh) 100%
  );
  /* Four tines cut with a repeating mask. */
  -webkit-mask: repeating-linear-gradient(
    180deg,
    #000 0 18%,
    transparent 18% 27%
  );
  mask: repeating-linear-gradient(180deg, #000 0 18%, transparent 18% 27%);
  border-radius: 40% 8% 8% 40% / 50%;
  box-shadow: 0 1px 2px hsl(var(--shadow-hue) / 0.45);
}