/* ══════════════════════════════════════════════════════════════
   cookies.css — five cookies, no two alike.
   The .cookie base carries the shared anatomy (dome, bake
   gradient, cracks, chips, shadow); each .cN overrides the
   variables that make it its own: size, rotation, bake depth,
   edge irregularity, and chip placement.
   ══════════════════════════════════════════════════════════════ */

/* The heap sits inside the plate's well, not the whole plate. */
.cookies {
  position: absolute;
  inset: 12%;
}

.cookie {
  --dough-hi: #eec98d;
  --dough: #d9a761;
  --dough-lo: #b47f3e;
  --dough-sh: #8a5a26;
  --bake: 1; /* multiplier on how dark the edges go */
  --tilt: 0deg;

  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  rotate: var(--tilt);
  /* Widths are now a percentage of the plate, so the em driving
     the relief below is a smaller slice of --frame-w than before.
     Defocus is inherited from the plate, not applied per-cookie. */
  font-size: calc(var(--frame-w) * 0.03);
}

/* Cast shadow, direction driven by the shared --sun-angle. */
.cookie::before {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    hsl(var(--shadow-hue) / 0.5),
    transparent 74%
  );
  filter: blur(7px);
  transform: rotate(var(--sun-angle)) translateY(9%) scaleX(1.14) scaleY(0.84)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.55 + var(--sun-strength) * 0.35);
  z-index: -1;
}

/* The biscuit itself: domed centre, caramelised rim, crackled
   surface, chocolate chips half-sunk into the dough. */
/* The surface layer is counter-rotated against the cookie's own
   --tilt, so every cookie shows the same chip map from a different
   angle. Cheaper than authoring five chip layouts, and the eye
   reads it as five different bakes. */
.cookie::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  rotate: var(--chip-spin, 0deg);
  background:
    /* Chocolate chips: each is a dark lump with its own tiny
       specular dot up and left, matching the scene's key light.
       Sized in % of the cookie so they scale with it. */
    radial-gradient(
      circle at 30% 26%,
      rgba(255, 216, 164, 0.55) 0 1.3%,
      transparent 1.9%
    ),
    radial-gradient(
      8.4% 6.6% at 34% 30%,
      #2a150a 0 74%,
      rgba(42, 21, 10, 0.45) 86%,
      transparent 96%
    ),
    radial-gradient(
      circle at 58.5% 40%,
      rgba(255, 216, 164, 0.5) 0 1.1%,
      transparent 1.7%
    ),
    radial-gradient(
      6.2% 7.4% at 61% 43%,
      #35190b 0 72%,
      rgba(53, 25, 11, 0.45) 85%,
      transparent 96%
    ),
    radial-gradient(
      circle at 42% 62%,
      rgba(255, 216, 164, 0.5) 0 1.4%,
      transparent 2%
    ),
    radial-gradient(
      9.2% 7% at 45% 65%,
      #241209 0 76%,
      rgba(36, 18, 9, 0.45) 87%,
      transparent 96%
    ),
    radial-gradient(
      circle at 66.5% 64%,
      rgba(255, 216, 164, 0.45) 0 1%,
      transparent 1.6%
    ),
    radial-gradient(
      5.8% 7.2% at 69% 67%,
      #301608 0 72%,
      rgba(48, 22, 8, 0.45) 85%,
      transparent 96%
    ),
    radial-gradient(
      circle at 22.5% 52%,
      rgba(255, 216, 164, 0.48) 0 1.2%,
      transparent 1.8%
    ),
    radial-gradient(
      7.6% 5.8% at 25% 55%,
      #2d1509 0 74%,
      rgba(45, 21, 9, 0.45) 86%,
      transparent 96%
    ),
    radial-gradient(
      circle at 53% 20%,
      rgba(255, 216, 164, 0.42) 0 0.9%,
      transparent 1.5%
    ),
    radial-gradient(
      5% 6.4% at 55% 23%,
      #2f1608 0 72%,
      rgba(47, 22, 8, 0.4) 85%,
      transparent 96%
    ),
    /* Fine surface cracks radiating from the centre. */
    conic-gradient(
        from 18deg at 48% 46%,
        transparent 0 6deg,
        rgba(138, 90, 38, 0.42) 6deg 7.2deg,
        transparent 7.2deg 84deg,
        rgba(138, 90, 38, 0.34) 84deg 85deg,
        transparent 85deg 168deg,
        rgba(138, 90, 38, 0.38) 168deg 169.4deg,
        transparent 169.4deg 262deg,
        rgba(138, 90, 38, 0.3) 262deg 263deg,
        transparent 263deg 360deg
      ),
    /* Crumb speckle. */
    radial-gradient(
        circle at 30% 70%,
        rgba(255, 236, 200, 0.5) 0 0.9%,
        transparent 1.4%
      ),
    radial-gradient(
      circle at 68% 34%,
      rgba(255, 236, 200, 0.42) 0 0.8%,
      transparent 1.3%
    ),
    radial-gradient(
      circle at 52% 80%,
      rgba(138, 90, 38, 0.4) 0 0.9%,
      transparent 1.4%
    ),
    /* Puffed edge: a bright ring just inside the rim, where a drop
       cookie rises highest, then a fast fall to the dark crimp. */
    radial-gradient(
        circle at 50% 50%,
        transparent 62%,
        rgba(255, 236, 196, 0.34) 74%,
        rgba(150, 92, 36, 0.3) 88%,
        rgba(96, 56, 18, 0.55) 100%
      ),
    /* The bake: pale domed centre falling to a caramelised rim. */
    radial-gradient(
        circle at 36% 30%,
        var(--dough-hi) 0%,
        var(--dough) calc(30% * var(--bake)),
        var(--dough-lo) calc(62% * var(--bake)),
        var(--dough-sh) 88%,
        #6d4419 100%
      );
  /* Heavy inset pair = the domed puff of a drop cookie. Scaled in
     em so the relief holds at any render size. */
  box-shadow:
    inset -0.1em -0.14em 0.26em rgba(90, 54, 20, 0.6),
    inset 0.12em 0.16em 0.3em rgba(255, 244, 214, 0.55),
    inset 0 0 0.4em rgba(120, 72, 28, 0.3),
    0 0.06em 0.14em hsl(var(--shadow-hue) / 0.5);
}

/* ── Individual bakes ────────────────────────────────────────
   Positions are relative to .cookieplate, so the cookies sit in
   a loose heap on the plate: four around the rim and one resting
   on top of the pile, which is what stops it reading as a tidy
   ring. Sizes are % of the plate. */

/* c1 — big, pale, nearly round, front-left of the heap */
.c1 {
  left: 8%;
  top: 40%;
  width: 40%;
  --tilt: -14deg;
  --chip-spin: 0deg;
  --bake: 0.95;
  border-radius: 49% 51% 48% 52% / 51% 48% 52% 49%;
  z-index: 2;
}

/* c2 — darker bake, spread flat on one edge */
.c2 {
  left: 44%;
  top: 12%;
  width: 36%;
  --tilt: 32deg;
  --chip-spin: 118deg;
  --bake: 1.15;
  --dough-hi: #e0b878;
  --dough: #c8934e;
  --dough-lo: #a06c30;
  border-radius: 52% 48% 55% 45% / 46% 54% 44% 56%;
  z-index: 3;
}

/* c3 — small, overbaked, deeply cracked, right edge */
.c3 {
  left: 54%;
  top: 50%;
  width: 33%;
  --tilt: -47deg;
  --chip-spin: 214deg;
  --bake: 1.3;
  --dough-hi: #d2a465;
  --dough: #b8813f;
  --dough-lo: #8e5c26;
  --dough-sh: #6b4118;
  border-radius: 46% 54% 50% 50% / 53% 47% 53% 47%;
  z-index: 4;
}

/* c4 — tucked at the back of the pile */
.c4 {
  left: 16%;
  top: 8%;
  width: 34%;
  --tilt: 68deg;
  --chip-spin: 297deg;
  --bake: 0.88;
  --dough-hi: #f0d09a;
  --dough: #ddae6a;
  border-radius: 53% 47% 46% 54% / 48% 52% 48% 52%;
  z-index: 1;
}

/* c5 — the one on top, with a bite taken out */
.c5 {
  left: 30%;
  top: 30%;
  width: 37%;
  --tilt: 8deg;
  --chip-spin: 156deg;
  --bake: 1.05;
  border-radius: 50% 50% 52% 48% / 49% 51% 49% 51%;
  z-index: 5;
  /* the bite: a wedge clipped out of the upper-right */
  clip-path: polygon(
    50% 0%,
    74% 6%,
    84% 22%,
    78% 30%,
    88% 36%,
    94% 52%,
    88% 74%,
    70% 92%,
    46% 99%,
    22% 90%,
    6% 70%,
    2% 46%,
    10% 22%,
    28% 6%
  );
}