/* ══════════════════════════════════════════════════════════════
   pie.css — the hero. Ceramic dish, crimped edge, bubbling
   filling, and a true woven lattice: horizontal and vertical
   strips alternate above and below one another via clip-path,
   so the weave actually interlocks instead of just crossing.
   ══════════════════════════════════════════════════════════════ */

.pie {
  --size: 30%;
  position: absolute;
  left: 40%;
  top: 54%;
  width: var(--size);
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 20;
}
.pie > * {
  position: absolute;
  inset: 0;
}

/* ── Cast shadow: long, soft, thrown down-right by the sun, with
   a tight contact core so the dish sits on the wood. ── */
.pie__shadow {
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.52),
    transparent 78%
  );
  filter: blur(16px);
  transform: rotate(var(--sun-angle)) translateY(6%) scaleX(1.16) scaleY(0.9)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.55 + var(--sun-strength) * 0.35);
}
.pie__ao {
  /* tight ambient occlusion, hugs the rim */
  border-radius: 50%;
  box-shadow:
    0 0 0 1px hsl(var(--shadow-hue) / 0.22),
    0 6px 14px hsl(var(--shadow-hue) / 0.55),
    0 14px 34px hsl(var(--shadow-hue) / 0.42),
    0 30px 70px hsl(var(--shadow-hue) / 0.3);
  pointer-events: none;
  z-index: 9;
}

/* ── Stoneware dish, lit from upper left. ── */
.pie__dish {
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 26%,
      var(--china-hi) 0%,
      var(--china) 18%,
      #dccdae 40%,
      var(--china-lo) 64%,
      var(--china-sh) 86%,
      #77664b 100%
    ),
    var(--china-lo);
  box-shadow:
    inset -8px -10px 24px rgba(60, 40, 20, 0.34),
    inset 10px 12px 26px rgba(255, 245, 225, 0.4);
}
.pie__dish-rim {
  /* the fluted outer lip */
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 250, 238, 0.4) 0deg 2.2deg,
    rgba(96, 78, 56, 0.28) 2.2deg 4.4deg
  );
  -webkit-mask: radial-gradient(circle, transparent 86%, #000 88%, #000 100%);
  mask: radial-gradient(circle, transparent 86%, #000 88%, #000 100%);
  filter: blur(0.4px);
}

/* ── Crimped crust edge: scalloped ring of baked pastry. ── */
.pie__crimp {
  z-index: 6;
  /* Scalloped: a repeating conic ramp gives each thumb-pressed
     flute a lit face and a shaded one, so the ring reads as
     pinched dough rather than a painted band. */
  background:
    /* Softer, lower-contrast flutes at a coarser pitch. A tight,
       high-contrast repeat here reads as a bead necklace rather
       than thumb-pressed dough. */
    /* A hard, narrow crease between flutes on top of the soft ramp.
       The crease is what makes the eye read separate pinches; the
       ramp alone just looks like a blurred ring. */
    repeating-conic-gradient(
      from 3deg,
      rgba(40, 18, 3, 0.85) 0deg 1.2deg,
      rgba(40, 18, 3, 0.15) 2.4deg,
      transparent 6deg 18deg,
      rgba(40, 18, 3, 0.15) 21.6deg,
      rgba(40, 18, 3, 0.85) 22.8deg 24deg
    ),
    repeating-conic-gradient(
      from 3deg,
      var(--crust-burn) 0deg,
      var(--crust-deep) 5deg,
      var(--crust-mid) 9deg,
      var(--crust-pale) 12deg,
      var(--crust-mid) 15deg,
      var(--crust-deep) 19deg,
      var(--crust-burn) 24deg
    ),
    var(--crust-deep);
  border-radius: 50%;
  /* A wide band, softly feathered on both edges so the pastry
     sits into the dish rather than being stencilled onto it. */
  /* Inset to 8% so the pastry sits INSIDE the ceramic, leaving the
     dish lip visible around it — filling → lattice → crimp → dish,
     reading outward. Within this smaller box the band runs
     62%→96% of its own radius. */
  inset: 8%;
  /* Tight transitions: a wide feather here turns the whole ring
     into a soft glow instead of dough with a defined edge. */
  -webkit-mask: radial-gradient(
    circle,
    transparent 63%,
    #000 66%,
    #000 95%,
    transparent 98%
  );
  mask: radial-gradient(
    circle,
    transparent 63%,
    #000 66%,
    #000 95%,
    transparent 98%
  );
  box-shadow:
    inset 0 0 26px rgba(94, 52, 16, 0.55),
    inset 0 0 8px rgba(255, 236, 190, 0.3);
  filter: saturate(1.08) contrast(1.04);
}
/* Radial relief across the band: each flute is domed, so the
   middle of the ring is lighter than either lip. */
.pie__crimp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    transparent 63%,
    rgba(44, 20, 4, 0.68) 67%,
    /* shaded inner wall of the ring */ rgba(255, 232, 182, 0.34) 76%,
    /* lit crown of the fluting     */ rgba(255, 226, 172, 0.12) 84%,
    rgba(44, 20, 4, 0.66) 93%,
    /* shaded outer wall             */ transparent 98%
  );
}
/* Sun side of the crimp catches, shade side deepens. */
.pie__crimp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 26% 22%,
      rgba(255, 240, 205, 0.55),
      transparent 46%
    ),
    radial-gradient(circle at 76% 80%, rgba(74, 38, 10, 0.45), transparent 52%);
  -webkit-mask: radial-gradient(
    circle,
    transparent 62%,
    #000 67%,
    #000 92%,
    transparent 98%
  );
  mask: radial-gradient(
    circle,
    transparent 62%,
    #000 67%,
    #000 92%,
    transparent 98%
  );
  mix-blend-mode: overlay;
}

/* ── Filling beneath the weave: dark, glossy, gently bubbling. ── */
.pie__filling {
  border-radius: 50%;
  inset: 15%;
  background:
    radial-gradient(
      circle at 34% 30%,
      var(--filling-hi) 0%,
      var(--filling-mid) 34%,
      var(--filling-lo) 78%
    ),
    var(--filling-lo);
  /* The filling sits BELOW the weave, so it should read as being
     down in a well: heavy inner darkening, and only a small warm
     kick where the sun reaches past the strips. */
  box-shadow:
    inset 0 0 34px rgba(22, 4, 3, 0.92),
    inset 0 0 12px rgba(16, 3, 2, 0.7),
    inset 5px 7px 16px rgba(255, 140, 90, 0.1);
}
.pie__filling::after {
  /* fruit bubbles caught mid-simmer */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(3px 2px at 38% 44%, rgba(255, 168, 120, 0.5), transparent),
    radial-gradient(4px 3px at 62% 58%, rgba(255, 150, 100, 0.42), transparent),
    radial-gradient(
      2.5px 2px at 52% 33%,
      rgba(255, 180, 130, 0.38),
      transparent
    ),
    radial-gradient(
      3.5px 2.5px at 44% 68%,
      rgba(255, 140, 95, 0.34),
      transparent
    );
  filter: blur(0.5px);
  z-index: 2; /* above the strip shadows cast by ::before */
}

/* ══ THE WEAVE ══════════════════════════════════════════════════
   Ten strips, five each way. Horizontals sit at z-index 5,
   verticals at 6 — then each vertical is clipped so it vanishes
   where it should pass *under* a horizontal. Alternating the
   clip per strip index produces a real basket weave.
   ═══════════════════════════════════════════════════════════════ */

.lattice {
  position: absolute;
  inset: 17%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 5;
  /* Two masks intersected: the round outline AND an angular sector
     with the slice's wedge knocked out. Removing the weave here —
     rather than painting a filled shape on top of it — is what
     makes the gap read as a void you can see down into.

     A conic-gradient is the right tool for an angular cut; a
     clip-path polygon can't express "everything except this
     wedge" without joining the region up (see the weave notes). */
  -webkit-mask:
    radial-gradient(circle, #000 96%, transparent 99%),
    conic-gradient(
      from 0deg at 50% 50%,
      #000 0deg 19deg,
      transparent 20deg 64deg,
      #000 65deg 360deg
    );
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, #000 96%, transparent 99%),
    conic-gradient(
      from 0deg at 50% 50%,
      #000 0deg 19deg,
      transparent 20deg 64deg,
      #000 65deg 360deg
    );
  mask-composite: intersect;
}

.strip {
  position: absolute;
  display: block;
  /* Baked pastry: pale centre, caramelised shoulders, dark edges. */
  /* Flatter than a tube: a rolled pastry strip is domed only
     slightly, with the caramelisation concentrated at the edges
     where it met the oven air. The off-centre pale band keeps the
     highlight consistent with the upper-left key light. */
  background: linear-gradient(
    180deg,
    var(--crust-char) 0%,
    var(--crust-burn) 5%,
    var(--crust-deep) 13%,
    var(--crust-mid) 27%,
    var(--crust-pale) 41%,
    var(--crust-mid) 62%,
    var(--crust-deep) 80%,
    var(--crust-burn) 93%,
    var(--crust-char) 100%
  );
  border-radius: 5px;
  box-shadow:
    0 4px 7px rgba(58, 28, 6, 0.6),
    /* strip-on-strip shadow */
    /* Sub-surface scatter: warm light bleeding out of the pastry
       edge. Baked dough is translucent at the rim, and this warm
       outward bleed is most of what separates "food" from
       "plastic" at close range. */
    0 0 5px rgba(214, 132, 52, 0.34),
    0 0 11px rgba(190, 104, 36, 0.2),
    inset 0 1px 1px rgba(255, 236, 195, 0.45),
    inset 0 -2px 4px rgba(78, 42, 12, 0.5);
}

/* Blistered, uneven bake — every strip gets a different blotch map. */
.strip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Blistering and uneven bake. Offsetting every blob by --n means
     no two strips carry the same pattern, which is what stops the
     weave reading as a repeated texture. */
  /* Sized in % of the strip, not px, so the mottling stays visible
     at any render size. The repeating band running along the strip
     is the important one: it breaks the smooth extrusion that
     otherwise makes rolled pastry look like a dowel. */
  background:
    repeating-linear-gradient(
      84deg,
      transparent 0 4%,
      rgba(74, 38, 10, 0.22) 5% 7%,
      transparent 8% 13%,
      rgba(232, 196, 137, 0.2) 14% 16%,
      transparent 17% 23%
    ),
    radial-gradient(
      14% 42% at calc(11% + var(--n) * 7%) 36%,
      rgba(66, 32, 8, 0.5),
      transparent 72%
    ),
    radial-gradient(
      11% 34% at calc(44% - var(--n) * 5%) 68%,
      rgba(99, 50, 14, 0.46),
      transparent 74%
    ),
    radial-gradient(
      17% 46% at calc(76% + var(--n) * 3%) 30%,
      rgba(236, 202, 146, 0.5),
      transparent 76%
    ),
    radial-gradient(
      9% 30% at calc(60% + var(--n) * 6%) 22%,
      rgba(66, 32, 8, 0.42),
      transparent 72%
    ),
    radial-gradient(
      13% 38% at calc(28% + var(--n) * 9%) 74%,
      rgba(230, 192, 134, 0.4),
      transparent 74%
    ),
    radial-gradient(
      8% 26% at calc(88% - var(--n) * 4%) 56%,
      rgba(54, 26, 6, 0.44),
      transparent 72%
    ),
    /* scorch freckles */
    radial-gradient(
        3% 12% at calc(34% + var(--n) * 11%) 44%,
        rgba(42, 20, 5, 0.6),
        transparent 78%
      ),
    radial-gradient(
      2.4% 10% at calc(66% - var(--n) * 8%) 66%,
      rgba(42, 20, 5, 0.52),
      transparent 78%
    );
  mix-blend-mode: multiply;
  opacity: 1;
}
/* Verticals need the band running the other way. */
.strip.v::before {
  background:
    repeating-linear-gradient(
      6deg,
      transparent 0 4%,
      rgba(74, 38, 10, 0.22) 5% 7%,
      transparent 8% 13%,
      rgba(232, 196, 137, 0.2) 14% 16%,
      transparent 17% 23%
    ),
    radial-gradient(
      42% 14% at 36% calc(11% + var(--n) * 7%),
      rgba(66, 32, 8, 0.5),
      transparent 72%
    ),
    radial-gradient(
      34% 11% at 68% calc(44% - var(--n) * 5%),
      rgba(99, 50, 14, 0.46),
      transparent 74%
    ),
    radial-gradient(
      46% 17% at 30% calc(76% + var(--n) * 3%),
      rgba(236, 202, 146, 0.5),
      transparent 76%
    ),
    radial-gradient(
      30% 9% at 22% calc(60% + var(--n) * 6%),
      rgba(66, 32, 8, 0.42),
      transparent 72%
    ),
    radial-gradient(
      38% 13% at 74% calc(28% + var(--n) * 9%),
      rgba(230, 192, 134, 0.4),
      transparent 74%
    ),
    radial-gradient(
      26% 8% at 56% calc(88% - var(--n) * 4%),
      rgba(54, 26, 6, 0.44),
      transparent 72%
    ),
    radial-gradient(
      12% 3% at 44% calc(34% + var(--n) * 11%),
      rgba(42, 20, 5, 0.6),
      transparent 78%
    ),
    radial-gradient(
      10% 2.4% at 66% calc(66% - var(--n) * 8%),
      rgba(42, 20, 5, 0.52),
      transparent 78%
    );
}
/* Egg-wash sheen, brighter on the sun side of each strip. */
.strip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Egg wash: a narrow gloss along the lit shoulder only. Kept
     weak on purpose — a broad screen layer here flattens all the
     blistering underneath it. */
  background: linear-gradient(
    160deg,
    rgba(255, 246, 220, 0.26) 0%,
    rgba(255, 246, 220, 0.06) 18%,
    transparent 38%
  );
  mix-blend-mode: screen;
}

/* ── Horizontal strips ── */
.strip.h {
  left: -6%;
  width: 112%;
  /* 17% against an 18.4% pitch. The wavy clip-path below bites
     ~3% off each edge, so the drawn strip is ~11% and the filling
     shows through the remainder — enough overlap that the bites
     never open a hole, but not so much that the gaps close up. */
  height: 17%;
  top: calc(4% + var(--n) * 18.4%);
  /* Slight per-strip rotation: hand-laid, not machined. */
  rotate: calc((var(--n) - 2) * 0.5deg);
  z-index: 5;
  /* Wavy long edges. A hand-rolled strip is never parallel-sided,
     and a straight edge is the single biggest tell that these are
     CSS rectangles. Each strip gets its own wave via --n. */
  clip-path: polygon(
    0% calc(15% + var(--n) * 1.1%),
    12% calc(10% - var(--n) * 0.5%),
    26% calc(14% + var(--n) * 0.7%),
    39% calc(9% + var(--n) * 0.4%),
    53% calc(13% - var(--n) * 0.6%),
    67% calc(8% + var(--n) * 0.9%),
    81% calc(12% + var(--n) * 0.3%),
    93% calc(9% - var(--n) * 0.4%),
    100% calc(14% + var(--n) * 0.6%),
    100% calc(86% - var(--n) * 0.9%),
    88% calc(91% + var(--n) * 0.4%),
    74% calc(87% - var(--n) * 0.6%),
    61% calc(92% - var(--n) * 0.3%),
    47% calc(88% + var(--n) * 0.7%),
    33% calc(92% - var(--n) * 0.8%),
    19% calc(87% + var(--n) * 0.5%),
    7% calc(91% - var(--n) * 0.6%),
    0% calc(86% - var(--n) * 0.7%)
  );
}

/* ── Vertical strips: rotated, then clipped into segments so the
   weave interlocks. Even strips duck under bands 1 & 3; odd
   strips duck under bands 0, 2 & 4. ── */
.strip.v {
  top: -6%;
  height: 112%;
  width: 17%;
  left: calc(4% + var(--n) * 18.4%);
  rotate: calc((var(--n) - 2) * -0.5deg);
  z-index: 6;
  border-radius: 5px;
  background: linear-gradient(
    90deg,
    var(--crust-char) 0%,
    var(--crust-burn) 5%,
    var(--crust-deep) 13%,
    var(--crust-mid) 27%,
    var(--crust-pale) 41%,
    var(--crust-mid) 62%,
    var(--crust-deep) 80%,
    var(--crust-burn) 93%,
    var(--crust-char) 100%
  );
  box-shadow:
    4px 0 7px rgba(58, 28, 6, 0.55),
    inset 1px 0 1px rgba(255, 236, 195, 0.45),
    inset -2px 0 4px rgba(78, 42, 12, 0.5);
  /* Same wavy silhouette, rotated into the vertical axis. This
     composes with the weave mask above — clip-path and mask are
     independent operations, so the strip is both cut into bands
     and given irregular sides. */
  clip-path: polygon(
    calc(15% + var(--n) * 1.1%) 0%,
    calc(10% - var(--n) * 0.5%) 12%,
    calc(14% + var(--n) * 0.7%) 26%,
    calc(9% + var(--n) * 0.4%) 39%,
    calc(13% - var(--n) * 0.6%) 53%,
    calc(8% + var(--n) * 0.9%) 67%,
    calc(12% + var(--n) * 0.3%) 81%,
    calc(9% - var(--n) * 0.4%) 93%,
    calc(14% + var(--n) * 0.6%) 100%,
    calc(86% - var(--n) * 0.9%) 100%,
    calc(91% + var(--n) * 0.4%) 88%,
    calc(87% - var(--n) * 0.6%) 74%,
    calc(92% - var(--n) * 0.3%) 61%,
    calc(88% + var(--n) * 0.7%) 47%,
    calc(92% - var(--n) * 0.8%) 33%,
    calc(87% + var(--n) * 0.5%) 19%,
    calc(91% - var(--n) * 0.6%) 7%,
    calc(86% - var(--n) * 0.7%) 0%
  );
}
.strip.v::after {
  background: linear-gradient(
    118deg,
    rgba(255, 246, 220, 0.24) 0%,
    rgba(255, 246, 220, 0.05) 20%,
    transparent 40%
  );
}

/* ── Interlocking the weave ────────────────────────────────────
   A clip-path can't express disjoint regions (one polygon ring
   would just join the segments up), so the over/under is cut with
   a mask instead: hard-stop gradient bands, black where the strip
   shows and transparent where it passes beneath a horizontal.

   Geometry, in .lattice coordinates: horizontal band n covers
   4% + 18.4n  →  21% + 18.4n. The vertical strips are 112% tall
   starting at −6%, so a band at lattice Y maps to (Y + 6) / 1.12
   in the strip's own coordinate space. The .v strips sit at
   z-index 6, above the horizontals, so only the masked-out gaps
   let the horizontal below show through — which is the weave. */

/* Verticals 0, 2, 4 (children 6, 8, 10) duck under bands 1 and 3. */
.strip.v:nth-child(2n) {
  --gap-a-start: 25.4%; /* band 1: lattice 22.4% → 39.4%  */
  --gap-a-end: 40.5%;
  --gap-b-start: 58.2%; /* band 3: lattice 59.2% → 76.2%  */
  --gap-b-end: 73.4%;
  -webkit-mask: var(--weave-mask);
  mask: var(--weave-mask);
}
/* Verticals 1, 3 (children 7, 9) duck under bands 0, 2 and 4. */
.strip.v:nth-child(2n + 1) {
  --gap-a-start: 8.9%; /* band 0: lattice  4.0% → 21.0%  */
  --gap-a-end: 24.1%;
  --gap-b-start: 41.8%; /* band 2: lattice 40.8% → 57.8%  */
  --gap-b-end: 57%;
  --gap-c-start: 74.6%; /* band 4: lattice 77.6% → 94.6%  */
  --gap-c-end: 89.8%;
  -webkit-mask: var(--weave-mask);
  mask: var(--weave-mask);
}

/* One shared mask definition; the gap variables above position it.
   The 1px feather on each stop keeps the cut from aliasing. */
.strip.v {
  --gap-c-start: 200%; /* off the end unless a rule sets it */
  --gap-c-end: 200%;
  --weave-mask: linear-gradient(
    180deg,
    #000 0 var(--gap-a-start),
    transparent calc(var(--gap-a-start) + 1px) calc(var(--gap-a-end) - 1px),
    #000 var(--gap-a-end) var(--gap-b-start),
    transparent calc(var(--gap-b-start) + 1px) calc(var(--gap-b-end) - 1px),
    #000 var(--gap-b-end) var(--gap-c-start),
    transparent calc(var(--gap-c-start) + 1px) calc(var(--gap-c-end) - 1px),
    #000 var(--gap-c-end) 100%
  );
}

/* ── Sugar crystals scattered over the crust, twinkling. ── */
.pie__sugar {
  border-radius: 50%;
  z-index: 7;
  background:
    radial-gradient(
      1.4px 1.4px at 34% 28%,
      rgba(255, 255, 255, 0.95),
      transparent
    ),
    radial-gradient(
      1.1px 1.1px at 58% 41%,
      rgba(255, 252, 240, 0.85),
      transparent
    ),
    radial-gradient(
      1.6px 1.6px at 44% 62%,
      rgba(255, 255, 255, 0.9),
      transparent
    ),
    radial-gradient(
      1.2px 1.2px at 68% 70%,
      rgba(255, 250, 235, 0.8),
      transparent
    ),
    radial-gradient(
      1.3px 1.3px at 27% 52%,
      rgba(255, 255, 255, 0.88),
      transparent
    ),
    radial-gradient(1px 1px at 72% 33%, rgba(255, 252, 242, 0.75), transparent),
    radial-gradient(
      1.5px 1.5px at 52% 78%,
      rgba(255, 255, 255, 0.82),
      transparent
    ),
    radial-gradient(
      1.1px 1.1px at 39% 44%,
      rgba(255, 253, 245, 0.78),
      transparent
    );
  filter: drop-shadow(0 0 2px rgba(255, 240, 200, 0.8));
  animation: sugar-twinkle 5.5s ease-in-out infinite;
}
@keyframes sugar-twinkle {
  0%,
  100% {
    opacity: 0.78;
  }
  38% {
    opacity: 1;
  }
  62% {
    opacity: 0.66;
  }
}

/* ── The glisten: a soft specular band sweeping across the crust,
   as if the sun were crawling over the glaze. ── */
.pie__gloss {
  border-radius: 50%;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: radial-gradient(circle, #000 88%, transparent 93%);
  mask: radial-gradient(circle, #000 88%, transparent 93%);
}
.pie__gloss::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255, 244, 214, 0.13) 44%,
    rgba(255, 250, 228, 0.3) 50%,
    rgba(255, 244, 214, 0.13) 56%,
    transparent 66%
  );
  mix-blend-mode: screen;
  filter: blur(5px);
  animation: crust-glisten 11s var(--ease-soft) infinite;
}
@keyframes crust-glisten {
  0%,
  12% {
    transform: translate3d(-58%, -34%, 0);
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  74% {
    opacity: 1;
  }
  88%,
  100% {
    transform: translate3d(58%, 34%, 0);
    opacity: 0;
  }
}

/* Strip shadows falling onto the filling below. Drawn as a grid
   matching the lattice pitch, sitting above the filling but below
   the strips, which is what makes the weave read as raised rather
   than inlaid flush with the fruit. */
.pie__filling::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(14, 3, 2, 0.82) 0 3.2%,
      transparent 3.2% 8.4%,
      rgba(14, 3, 2, 0.5) 8.4% 10%,
      transparent 10% 21.6%
    ),
    repeating-linear-gradient(
      90deg,
      rgba(14, 3, 2, 0.78) 0 3.2%,
      transparent 3.2% 8.4%,
      rgba(14, 3, 2, 0.46) 8.4% 10%,
      transparent 10% 21.6%
    );
  /* Offset down-right so the shadows agree with the key light. */
  translate: 1.4% 1.8%;
  filter: blur(2px);
  z-index: 1;
}

/* Ambient bounce from the filling onto the underside of the weave. */
.pie__gloss::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 55%,
    rgba(220, 90, 50, 0.12),
    transparent 62%
  );
  mix-blend-mode: color-dodge;
}