/* ══════════════════════════════════════════════════════════════
   table.css — aged oak, built from stacked gradients only.
   Six layers, each doing one job:
     grain      long fibre streaks running with the planks
     pores      fine open-grain speckle
     rings      cathedral figure (the arched heartwood pattern)
     planks     board seams + bevelled edges
     wear       broad tonal blotching so no two areas match
     scratches  hairline knife marks, mostly cross-grain
   ══════════════════════════════════════════════════════════════ */

.table {
  position: absolute;
  inset: 0;
  /* Base tone is graded left-to-right before any light layer lands
     on it, so the sunlit boards start from warmer stock than the
     shaded ones. */
  background: linear-gradient(
    104deg,
    var(--oak-300) 0%,
    var(--oak-400) 22%,
    var(--oak-500) 46%,
    var(--oak-600) 72%,
    var(--oak-700) 100%
  );
  overflow: hidden;
}
.table > * {
  position: absolute;
  inset: 0;
}

/* ── Long fibre. Three repeating gradients at slightly different
   periods; the mismatch stops any visible tiling rhythm. ── */
.table__grain {
  background-image:
    repeating-linear-gradient(
      1deg,
      rgba(46, 27, 14, 0) 0px,
      rgba(46, 27, 14, 0.3) 2px,
      rgba(196, 148, 92, 0.12) 4px,
      rgba(46, 27, 14, 0) 7px,
      rgba(46, 27, 14, 0.19) 11px,
      rgba(46, 27, 14, 0) 16px
    ),
    repeating-linear-gradient(
      -0.6deg,
      rgba(26, 14, 6, 0) 0px,
      rgba(26, 14, 6, 0.22) 13px,
      rgba(176, 124, 70, 0.09) 19px,
      rgba(26, 14, 6, 0) 31px
    ),
    repeating-linear-gradient(
      0.6deg,
      rgba(255, 214, 160, 0) 0px,
      rgba(255, 214, 160, 0.05) 41px,
      rgba(46, 27, 14, 0.14) 58px,
      rgba(255, 214, 160, 0) 97px
    );
  mix-blend-mode: multiply;
  opacity: 0.88;
}

/* ── Open-grain pores: tiny elongated dots, two densities. ── */
.table__pores {
  background-image:
    radial-gradient(
      1.6px 0.7px at 12% 22%,
      rgba(30, 16, 7, 0.55),
      transparent 100%
    ),
    radial-gradient(
      1.3px 0.6px at 47% 63%,
      rgba(30, 16, 7, 0.48),
      transparent 100%
    ),
    radial-gradient(
      1.8px 0.8px at 81% 34%,
      rgba(30, 16, 7, 0.5),
      transparent 100%
    ),
    radial-gradient(
      1.2px 0.6px at 29% 87%,
      rgba(30, 16, 7, 0.44),
      transparent 100%
    ),
    radial-gradient(
      1.5px 0.7px at 66% 12%,
      rgba(30, 16, 7, 0.46),
      transparent 100%
    );
  background-size:
    47px 23px,
    61px 29px,
    83px 31px,
    53px 19px,
    71px 37px;
  opacity: 0.75;
  mix-blend-mode: multiply;
}

/* ── Cathedral figure. Wide, very soft elliptical arcs — the
   giveaway detail that separates "wood" from "brown stripes". ── */
.table__rings {
  background-image:
    /* Nested arcs sharing a focus = the cathedral figure you get
       when a plain-sawn board cuts across the growth rings. */
    radial-gradient(
      38% 130% at 14% 44%,
      transparent 30%,
      rgba(58, 34, 16, 0.34) 37%,
      transparent 44%
    ),
    radial-gradient(
      46% 150% at 14% 44%,
      transparent 46%,
      rgba(58, 34, 16, 0.28) 53%,
      transparent 61%
    ),
    radial-gradient(
      56% 170% at 14% 44%,
      transparent 62%,
      rgba(58, 34, 16, 0.22) 69%,
      transparent 78%
    ),
    radial-gradient(
      34% 120% at 68% 82%,
      transparent 32%,
      rgba(58, 34, 16, 0.3) 40%,
      transparent 48%
    ),
    radial-gradient(
      44% 140% at 68% 82%,
      transparent 50%,
      rgba(58, 34, 16, 0.24) 58%,
      transparent 67%
    ),
    radial-gradient(
      40% 128% at 92% 16%,
      transparent 34%,
      rgba(58, 34, 16, 0.26) 42%,
      transparent 51%
    ),
    /* one knot, small and dark */
    radial-gradient(
        2.2% 5% at 47% 8%,
        rgba(38, 20, 8, 0.62),
        rgba(58, 34, 16, 0.3) 60%,
        transparent 82%
      );
  filter: blur(1.1px);
  mix-blend-mode: multiply;
  opacity: 0.82;
}

/* ── Plank seams: dark groove + lit upper bevel + shaded lower. ── */
.table__planks {
  background-image:
    linear-gradient(
      180deg,
      transparent calc(28% - 1.5px),
      rgba(255, 220, 170, 0.1) calc(28% - 1.4px),
      rgba(24, 12, 5, 0.72) 28%,
      rgba(24, 12, 5, 0.5) calc(28% + 1.2px),
      transparent calc(28% + 3.5px)
    ),
    linear-gradient(
      180deg,
      transparent calc(71% - 1.5px),
      rgba(255, 220, 170, 0.09) calc(71% - 1.4px),
      rgba(24, 12, 5, 0.68) 71%,
      rgba(24, 12, 5, 0.46) calc(71% + 1.2px),
      transparent calc(71% + 3.5px)
    );
}

/* ── Broad blotching so the boards read as separate pieces. ── */
.table__wear {
  background-image:
    radial-gradient(
      58% 46% at 22% 14%,
      rgba(155, 102, 52, 0.38),
      transparent 70%
    ),
    radial-gradient(
      50% 40% at 78% 82%,
      rgba(67, 40, 15, 0.34),
      transparent 72%
    ),
    radial-gradient(
      44% 52% at 92% 20%,
      rgba(196, 148, 92, 0.22),
      transparent 74%
    ),
    radial-gradient(62% 38% at 40% 96%, rgba(46, 27, 14, 0.3), transparent 76%);
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

/* ── Hairline scratches, mostly cross-grain, catching the light
   on one edge and dark on the other. ── */
.table__scratches {
  background-image:
    repeating-linear-gradient(
      74deg,
      transparent 0 137px,
      rgba(255, 226, 180, 0.16) 137px 137.7px,
      rgba(30, 16, 7, 0.2) 137.7px 138.4px,
      transparent 138.4px 291px
    ),
    repeating-linear-gradient(
      -63deg,
      transparent 0 211px,
      rgba(255, 226, 180, 0.12) 211px 211.6px,
      rgba(30, 16, 7, 0.16) 211.6px 212.2px,
      transparent 212.2px 397px
    ),
    repeating-linear-gradient(
      97deg,
      transparent 0 163px,
      rgba(255, 226, 180, 0.09) 163px 163.5px,
      transparent 163.5px 331px
    );
  opacity: 0.5;
}

/* ── Old coffee rings and a spill blot: environmental storytelling. ── */
.table__stain {
  border-radius: 50%;
  mix-blend-mode: multiply;
  filter: blur(0.8px);
}
.table__stain--a {
  /* full ring, left of the pie */
  inset: auto auto 22% 13%;
  width: 7.2%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    transparent 60%,
    rgba(74, 42, 18, 0.3) 68%,
    rgba(74, 42, 18, 0.42) 76%,
    transparent 84%
  );
}
.table__stain--b {
  /* partial ring, top right */
  inset: 11% 17% auto auto;
  width: 5.4%;
  aspect-ratio: 1;
  background: conic-gradient(
    from 200deg,
    rgba(74, 42, 18, 0.34) 0 140deg,
    transparent 150deg 360deg
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 62%,
    #000 70%,
    #000 80%,
    transparent 88%
  );
  mask: radial-gradient(
    circle,
    transparent 62%,
    #000 70%,
    #000 80%,
    transparent 88%
  );
}
.table__stain--c {
  /* faint dried splash, lower right */
  inset: auto 9% 14% auto;
  width: 4%;
  aspect-ratio: 1.6;
  border-radius: 46% 54% 38% 62% / 55% 42% 58% 45%;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(88, 52, 22, 0.26),
    rgba(88, 52, 22, 0.1) 60%,
    transparent 78%
  );
}