/*
 * Table illustrations, shown until a table has a photo.
 *
 * Each tabletop is drawn from above in its real proportions (round, 1:1
 * square, 1.6:1 oval, 2:1 rectangle) and filled with its marble. The veins
 * and clouding are noise textures in static/img, used as masks so every
 * marble can colour them. To add a marble, add a .marble--<its slug> rule.
 */

.table-visual {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.55), transparent 60%),
    var(--color-stone);
}

.table-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tabletop {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 60%;
  aspect-ratio: 1;
  box-shadow:
    0 24px 32px -22px rgb(29 27 24 / 0.6),
    0 6px 12px -8px rgb(29 27 24 / 0.3);
  transition: transform 0.6s ease;
}

.tabletop--round {
  width: 62%;
  border-radius: 50%;
}

.tabletop--square {
  width: 56%;
  border-radius: 3px;
}

.tabletop--oval {
  width: 80%;
  aspect-ratio: 1.6;
  border-radius: 50%;
}

.tabletop--rectangular {
  width: 86%;
  aspect-ratio: 2;
  border-radius: 3px;
}

/* Marble: base colour, clouding (::after) and veins (::before), plus a soft sheen. */
.marble {
  --marble-base: #efebe4;
  --marble-vein: rgb(96 96 100 / 0.55);
  --marble-cloud: rgb(170 170 176 / 0.35);
  background:
    radial-gradient(120% 90% at 20% 10%, rgb(255 255 255 / 0.35), transparent 60%),
    var(--marble-base);
}

.marble::before,
.marble::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
}

.marble::after {
  background: var(--marble-cloud);
  -webkit-mask-image: url("../img/marble-clouds.d0d4ae54ec00.svg");
  mask-image: url("../img/marble-clouds.d0d4ae54ec00.svg");
}

.marble::before {
  z-index: 0;
  background: var(--marble-vein);
  -webkit-mask-image: url("../img/marble-veins-bold.59c5026040db.svg");
  mask-image: url("../img/marble-veins-bold.59c5026040db.svg");
}

.marble--carrara::before,
.marble--crema-marfil::before,
.marble--dark-emperador::before {
  -webkit-mask-image: url("../img/marble-veins-fine.ac3057ae6596.svg");
  mask-image: url("../img/marble-veins-fine.ac3057ae6596.svg");
}

.marble--crema-marfil {
  --marble-base: #e8dbc3;
  --marble-vein: rgb(150 116 74 / 0.5);
  --marble-cloud: rgb(196 168 126 / 0.3);
}

.marble--dark-emperador {
  --marble-base: #4d3628;
  --marble-vein: rgb(230 208 176 / 0.7);
  --marble-cloud: rgb(30 20 14 / 0.4);
}

.marble--carrara {
  --marble-base: #ecebe8;
  --marble-vein: rgb(112 118 128 / 0.6);
  --marble-cloud: rgb(180 184 192 / 0.25);
}

.marble--nero-marquina {
  --marble-base: #1b1b1d;
  --marble-vein: rgb(242 242 240 / 0.85);
  --marble-cloud: rgb(70 70 76 / 0.4);
}

.marble--calacatta-viola {
  --marble-base: #f1ebe7;
  --marble-vein: rgb(112 40 64 / 0.8);
  --marble-cloud: rgb(170 120 134 / 0.2);
}

.marble--arabescato-corchia {
  --marble-base: #f3f2ef;
  --marble-vein: rgb(58 60 66 / 0.8);
  --marble-cloud: rgb(160 160 168 / 0.2);
}

.marble--calacatta-borghini {
  --marble-base: #f6f3ec;
  --marble-vein: rgb(128 104 62 / 0.75);
  --marble-cloud: rgb(208 190 152 / 0.25);
}