.slot {
  position: relative;
  overflow: hidden;
  background: var(--ink-300);
  isolation: isolate;
}

.slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.07) brightness(0.9);
  transition: transform 1.4s var(--ease-out), filter 1.4s var(--ease-out);
  will-change: transform;
}

.slot:hover img {
  transform: scale(1.035);
  filter: saturate(0.95) contrast(1.02) brightness(1);
}

/* The stand-in: a painted granite plate (see lib/graniteTexture.js), with
   a directional wash over it so it sits in the page's lighting rather than
   floating as a flat swatch. */
.slot__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slot__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
      158deg,
      rgba(255, 244, 214, 0.06) 0%,
      transparent 34%,
      rgba(6, 5, 4, 0.42) 100%
    ),
    radial-gradient(120% 90% at 30% 20%, transparent 40%, rgba(6, 5, 4, 0.45) 100%);
  pointer-events: none;
}