/* ══════════════════════════════════════════════════════════════
   napkin.css — folded linen.
   Realism here comes from three things stacked in order:
     1. a real woven texture (two crossed repeating gradients)
     2. soft broad wrinkles that bend the shading
     3. hard fold lines with a lit edge above and shade below
   ══════════════════════════════════════════════════════════════ */

.napkin {
  position: absolute;
  right: 3%;
  top: 40%;
  width: 26%;
  aspect-ratio: 1.34;
  rotate: -7deg;
  z-index: 11;
  /* Sits back in the frame → gentle defocus. */
  filter: blur(calc((1 - var(--px)) * 2.1px));
}

.napkin__shadow {
  position: absolute;
  inset: -6% -8% -12% -4%;
  border-radius: 6px;
  background: radial-gradient(
    ellipse at 42% 44%,
    hsl(var(--shadow-hue) / 0.46),
    transparent 72%
  );
  filter: blur(13px);
  transform: rotate(var(--sun-angle)) translateY(5%) scaleX(1.1)
    rotate(calc(var(--sun-angle) * -1));
  opacity: calc(0.5 + var(--sun-strength) * 0.35);
}

.napkin__body {
  position: absolute;
  inset: 0;
  border-radius: 3px 5px 4px 6px;
  background: linear-gradient(
    158deg,
    var(--linen-hi) 0%,
    var(--linen) 34%,
    var(--linen-lo) 72%,
    var(--linen-sh) 100%
  );
  box-shadow:
    var(--sh-close),
    inset 0 1px 2px rgba(255, 255, 255, 0.8),
    inset -3px -4px 10px rgba(120, 100, 74, 0.3);
  /* Cloth doesn't have four straight edges — soften the outline. */
  -webkit-mask: radial-gradient(
    140% 140% at 50% 50%,
    #000 92%,
    transparent 99%
  );
  mask: radial-gradient(140% 140% at 50% 50%, #000 92%, transparent 99%);
  overflow: hidden;
}

/* ── Weave: warp and weft at right angles, plus a slubby thread
   irregularity so it isn't a perfect grid. ── */
.napkin__weave {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.5) 0 1px,
      rgba(126, 106, 78, 0.34) 1px 2px,
      rgba(150, 130, 100, 0.16) 2px 3px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.44) 0 1px,
      rgba(126, 106, 78, 0.3) 1px 2px,
      rgba(150, 130, 100, 0.14) 2px 3px
    ),
    /* Slub threads: a heavier fibre every so often, both ways. */
    repeating-linear-gradient(
        0deg,
        transparent 0 17px,
        rgba(122, 100, 72, 0.18) 17px 19px
      ),
    repeating-linear-gradient(
      90deg,
      transparent 0 23px,
      rgba(122, 100, 72, 0.14) 23px 25px
    );
  opacity: 0.95;
  mix-blend-mode: multiply;
}

/* ── Broad soft wrinkles: overlapping elongated highlights and
   troughs at angles, blurred so they read as cloth relief. ── */
.napkin__wrinkles {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      72deg,
      transparent 18%,
      rgba(255, 255, 255, 0.3) 25%,
      rgba(140, 118, 88, 0.22) 31%,
      transparent 38%
    ),
    linear-gradient(
      66deg,
      transparent 48%,
      rgba(255, 255, 255, 0.22) 55%,
      rgba(140, 118, 88, 0.18) 60%,
      transparent 67%
    ),
    linear-gradient(
      -58deg,
      transparent 26%,
      rgba(255, 255, 255, 0.18) 33%,
      rgba(140, 118, 88, 0.16) 39%,
      transparent 46%
    ),
    linear-gradient(
      88deg,
      transparent 70%,
      rgba(140, 118, 88, 0.14) 78%,
      transparent 86%
    );
  filter: blur(2.4px);
}

/* ── Hard folds: a bright edge sitting directly on a shadow.
   This is what makes the cloth look layered rather than printed. ── */
.napkin__fold {
  position: absolute;
  left: -4%;
  width: 108%;
}
.napkin__fold--top {
  top: 27%;
  height: 8%;
  background: linear-gradient(
    180deg,
    rgba(120, 98, 72, 0.3) 0%,
    rgba(255, 255, 255, 0.78) 28%,
    rgba(255, 253, 246, 0.34) 44%,
    rgba(130, 108, 80, 0.34) 78%,
    transparent 100%
  );
  rotate: -2.2deg;
  filter: blur(1.1px);
}
.napkin__fold--mid {
  top: 61%;
  height: 10%;
  background: linear-gradient(
    180deg,
    rgba(120, 98, 72, 0.26) 0%,
    rgba(255, 255, 255, 0.62) 30%,
    rgba(255, 253, 246, 0.26) 48%,
    rgba(130, 108, 80, 0.4) 82%,
    transparent 100%
  );
  rotate: 1.6deg;
  filter: blur(1.4px);
}

/* ── Hemmed edge, stitched. ── */
.napkin__hem {
  position: absolute;
  inset: 4%;
  border: 1px solid rgba(160, 138, 106, 0.34);
  border-radius: 2px;
  background:
    repeating-linear-gradient(
        90deg,
        rgba(150, 128, 96, 0.3) 0 3px,
        transparent 3px 7px
      )
      top / 100% 1px no-repeat,
    repeating-linear-gradient(
        90deg,
        rgba(150, 128, 96, 0.3) 0 3px,
        transparent 3px 7px
      )
      bottom / 100% 1px no-repeat;
  box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.35);
}

/* ── Lace trim along the lower edge.
   Scalloped loops with an openwork field: a repeating radial for
   the eyelet holes, masked into a scalloped strip. Sits outside
   .napkin__body so it can overhang the cloth. ── */
.napkin__lace {
  position: absolute;
  left: -1%;
  bottom: -7%;
  width: 102%;
  height: 15%;
  rotate: -1.2deg;
  /* Openwork: rows of small holes over a pale thread ground. */
  background:
    radial-gradient(
      1.4px 1.4px at 50% 30%,
      transparent 0 52%,
      rgba(250, 244, 230, 0.92) 56%
    ),
    radial-gradient(
      1.1px 1.1px at 50% 68%,
      transparent 0 50%,
      rgba(244, 236, 218, 0.8) 54%
    ),
    linear-gradient(
      180deg,
      rgba(250, 245, 232, 0.95) 0%,
      rgba(236, 226, 204, 0.88) 52%,
      rgba(206, 192, 164, 0.8) 100%
    );
  background-size:
    7px 7px,
    5px 5px,
    auto;
  /* Scalloped hem: half-circles cut from the bottom edge. */
  -webkit-mask:
    radial-gradient(circle at 50% 0%, #000 46%, transparent 50%) bottom / 9% 62%
      repeat-x,
    linear-gradient(#000 0 0) top / 100% 42% no-repeat;
  mask:
    radial-gradient(circle at 50% 0%, #000 46%, transparent 50%) bottom / 9% 62%
      repeat-x,
    linear-gradient(#000 0 0) top / 100% 42% no-repeat;
  filter: drop-shadow(0 2px 3px hsl(var(--shadow-hue) / 0.4));
  opacity: 0.96;
}

/* ── The folded edge, seen side-on.
   A folded napkin is two layers thick, and that visible second
   thickness along one side is what stops it reading as a printed
   card. Sits outside .napkin__body so it isn't clipped by the
   body's mask. ── */
.napkin::after {
  content: "";
  position: absolute;
  left: -0.6%;
  bottom: -1.2%;
  width: 101%;
  height: 7%;
  border-radius: 2px 3px 4px 3px;
  background: linear-gradient(
    180deg,
    var(--linen-lo) 0%,
    var(--linen) 22%,
    var(--linen-hi) 40%,
    /* lit crown of the fold */ var(--linen-lo) 68%,
    var(--linen-sh) 100%
  );
  rotate: -0.8deg;
  box-shadow:
    0 2px 5px hsl(var(--shadow-hue) / 0.42),
    inset 0 1px 1px rgba(255, 255, 255, 0.6);
  /* Fade both ends so the layer edge disappears into the cloth
     instead of terminating in a hard bar. */
  -webkit-mask: linear-gradient(
    90deg,
    transparent,
    #000 9%,
    #000 91%,
    transparent
  );
  mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* ── One corner lifted off the table — instant three-dimensionality. ── */
.napkin__corner {
  position: absolute;
  right: -2%;
  bottom: -3%;
  width: 30%;
  aspect-ratio: 1.1;
  background: linear-gradient(
    212deg,
    var(--linen-hi) 0%,
    var(--linen) 40%,
    var(--linen-lo) 78%,
    var(--linen-sh) 100%
  );
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
  border-radius: 0 0 4px 0;
  box-shadow: -3px -3px 9px hsl(var(--shadow-hue) / 0.34);
  filter: brightness(1.04);
}