/* Marble surfaces: the brand checkerboard reimagined as a polished
   museum floor — large tiles, low contrast, faint veining, brass
   fittings. Textures are inline SVG turbulence, never raster photos. */
:root {
  /* Stretched fractal noise = stone grain. Repeated at 320px so the
     browser rasterizes one small tile, not a full-width filter. */
  --marble-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.09' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* The band: an inlaid marble border. One slice of a large checker, so
   you read alternating stone blocks rather than a race flag. */
.checker-band {
  position: relative;
  height: 22px;
  background:
    conic-gradient(
      var(--tile-b) 90deg,
      var(--tile-a) 90deg 180deg,
      var(--tile-b) 180deg 270deg,
      var(--tile-a) 270deg
    );
  background-size: calc(var(--check) * 2) calc(var(--check) * 2);
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  overflow: hidden;
}

/* Grain + a soft raking light across the band. */
.checker-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--marble-grain);
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
}

.checker-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    var(--sheen-hi) 0%,
    transparent 42%,
    var(--sheen-lo) 100%
  );
  pointer-events: none;
}

/* Brass fitting: a hairline of accent used to close a band or edge.
   Its resting opacity is published as --reveal-op so motion.css can put
   it back after a reveal instead of forcing it to full strength. */
.rule-brass {
  --reveal-op: 0.7;
  height: 2px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--accent) 22%,
    var(--brass-bright) 50%,
    var(--accent) 78%,
    transparent 100%
  );
  opacity: var(--reveal-op);
}

/* Any surface can be given stone grain. Requires position:relative on
   the host; the pseudo-element sits under the content. */
.marble {
  position: relative;
  isolation: isolate;
  background: var(--surface);
}

.marble::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--marble-grain);
  background-size: 320px 320px;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  pointer-events: none;
}

/* Full checker field — for hero floors and empty states. Same tiles as
   the band, plus a vertical fade so it recedes into gallery shadow. */
.marble-floor {
  background:
    conic-gradient(
      var(--tile-b) 90deg,
      var(--tile-a) 90deg 180deg,
      var(--tile-b) 180deg 270deg,
      var(--tile-a) 270deg
    );
  background-size: calc(var(--check) * 2) calc(var(--check) * 2);
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.85),
    transparent 92%
  );
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 92%);
}

@media (max-width: 640px) {
  :root {
    --check: 64px;
  }
}