/* ============================================================================
   texture_brick.css -- the surface of ONE brick, close up.

   Joseph, 2026-09-21: "The brick texture should look like a closeup of a red
   brick's surface. The buttons themselves should end up looking a bit like a
   brick if the scale is right."

   NOT A WALL. There are no courses and no mortar joints. An earlier version
   drew a running bond of small bricks, which is the thing this replaces; if
   you are tempted to add mortar lines back, that is the mistake.

   WHY THIS VERSION EXISTS
     The first attempt at "one brick" built its grit from tiled radial dots.
     Rendered at button size it read as polka dots or perforated metal -- a
     regular grid of circles, nothing like fired clay. Dots on a lattice cannot
     look like grit, however small, because the eye finds the lattice.

     Real clay grain is irregular at every scale, so this uses fractal noise
     (SVG feTurbulence) instead. It is genuinely random, it tiles without a
     seam, and it does not resolve into a pattern when you look at it.

   THE KNOBS
     --tex-brick-base             the clay colour underneath. A plain colour.
     --tex-brick-scale            grit size. Bigger = coarser grain.
     --tex-brick-strength         how visible the grit is (0 = smooth clay).
     --tex-brick-mottle-strength  how uneven the firing looks across the face.
     --tex-brick-on               text colour for use on the finished surface.

     The grain and mottle layers are built ONLY from transparent black and
     white. They carry no hue of their own, so --tex-brick-base genuinely
     re-colours the whole thing: set it to a buff or a grey and you get a buff
     or grey brick, not a red one showing through. That is the point of the
     split, and it is why the noise is desaturated before it is used.

   TUNED FOR a 150x40 button, which is the case that matters -- at that size
   the button should read as a single brick face. Checked in a browser at
   1x and 2x device pixel ratio.

   CONTRAST: --tex-brick-on #fff6f2 against the darkest composited pixel of
   the default surface (about rgb(96,47,38)) is roughly 9.3:1. Raising
   --tex-brick-strength well past 1 darkens the troughs, so re-check if you do.
   ============================================================================ */

:root {
  /* THE BUTTONS NOW WEAR A RENDER (2026-09-22, Joseph: "try to do a brick texture render for the
     masonery page"). tools/metal_render renders one brick's face in Blender (fired clay: fine grit,
     sparse pocks, uneven firing), in the same three shapes. r3 (Joseph: "it should be matte and the
     shine effect should be replaced with slight cracks/crumbling"): no specular, soft even light,
     a few hairline cracks and a couple of chipped edges. The CSS grit below is kept for anything else that uses .tex-brick; the summer buttons
     use the render (materials.css). Knobs for the render: base (rim + fade) and texture strength. */
  --tex-brick-shine: 1;
  --tex-brick-blend: normal;
  /* r6 (brick/real, Joseph 2026-09-23: "we are going for realism (while maintaining the button shape).
     Hover should be the same for all versions of the button as well ... a couple of brick types, both
     should be red-ish, close to the current color ... one smoother and one rougher"). Each face is ONE
     real brick cut from a CC0 scan (ambientCG Bricks051 = smooth, Bricks023 = rough; which crop is in
     tools/metal_render/build.py BRICK_TYPES), graded to --mat-brick-avg, with chips broken along the
     arris by the scan's own height (lighter broken clay inside, the page showing through). Still the
     ONE image for a summer button: face, rounded edge and chips (materials.css draws no CSS rim on
     summer). topnav-cta keeps its own render at its real 6px corner.
     Which type: html[data-brick="smooth|rough"] (landing.html sets it on /summer: rough, unless the
     URL says ?brick=smooth). The per-type sets are below; --tex-brick-face-* is what the buttons wear. */
  --tex-brick-smooth-face-wide:   url("brand/metal/brick_smooth_wide.r6@2x.webp");
  --tex-brick-smooth-face-mid:    url("brand/metal/brick_smooth_mid.r6@2x.webp");
  --tex-brick-smooth-face-round:  url("brand/metal/brick_smooth_round.r6@2x.webp");
  --tex-brick-smooth-face-topnav: url("brand/metal/brick_smooth_topnav.r6@2x.webp");
  --tex-brick-rough-face-wide:    url("brand/metal/brick_rough_wide.r6@2x.webp");
  --tex-brick-rough-face-mid:     url("brand/metal/brick_rough_mid.r6@2x.webp");
  --tex-brick-rough-face-round:   url("brand/metal/brick_rough_round.r6@2x.webp");
  --tex-brick-rough-face-topnav:  url("brand/metal/brick_rough_topnav.r6@2x.webp");
  --tex-brick-face-wide:   var(--tex-brick-rough-face-wide);   /* rough is the brick (Joseph 2026-09-23: "I like the rough brick") */
  --tex-brick-face-mid:    var(--tex-brick-rough-face-mid);
  --tex-brick-face-round:  var(--tex-brick-rough-face-round);
  --tex-brick-face-topnav: var(--tex-brick-rough-face-topnav);
  /* ONE hover for every brick button (topnav, chat launcher, hero, cards ...): the brick lifts, the
     key light comes up a little, and a soft shadow shows under it. Keyboard focus gets the same lift
     and keeps the browser's own focus ring. Knobs: */
  --tex-brick-hover-lift: -2px;                            /* how far it rises */
  --tex-brick-hover-light: 1.04;                           /* brightness() over the face */
  --tex-brick-hover-shadow: 0 3px 3px rgba(0,0,0,.30);     /* drop-shadow() under it */
  --tex-brick-rim-top:    color-mix(in srgb, var(--tex-brick-base), #ffd8cc 15%);
  /* Matte (r3): the rim bevel is the shared one's shape with a much fainter top light, so the
     edge reads as a rounded arris of clay, not a glossy lip. */
  --tex-brick-bevel-hi: rgba(255,255,255,.10);
  --tex-brick-bevel-lo: rgba(0,0,0,.30);
  --tex-brick-bevel:
    linear-gradient(180deg,
      var(--tex-brick-bevel-hi) 0,
      var(--tex-metal-clear) 3px,
      var(--tex-metal-clear) calc(100% - 3px),
      var(--tex-brick-bevel-lo) 100%);
  --tex-brick-rim-side:   color-mix(in srgb, var(--tex-brick-base), #000000 25%);
  --tex-brick-rim-bottom: color-mix(in srgb, var(--tex-brick-base), #000000 50%);
  --tex-brick-on-glow: rgba(0,0,0,.45);

  --tex-brick-base: #9c4c3e;
  --tex-brick-scale: 28px;   /* tuned at 150x40: 18px is finest, 40px+ goes blotchy */
  --tex-brick-strength: 1;
  --tex-brick-mottle-strength: 1;
  --tex-brick-on: #fff6f2;

  /* Fine grit: dense fractal noise, desaturated, used as a dark speckle.
     stitchTiles keeps the tile edges invisible when it repeats. */
  --tex-brick-grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.55' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");

  /* Coarser pitting: a second, lower-frequency noise so the face has pocks as
     well as grain. A different frequency AND a different tile size, so the two
     never line up into a repeat. */
  --tex-brick-pits:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.16' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.40' intercept='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23p)'/%3E%3C/svg%3E");
}

.tex-brick {
  position: relative;
  background-color: var(--tex-brick-base);
  background-image:
    radial-gradient(ellipse 70% 120% at 22% 30%, rgba(255,255,255,.16), rgba(255,255,255,0) 60%),
    radial-gradient(ellipse 85% 130% at 78% 72%, rgba(0,0,0,.20), rgba(0,0,0,0) 62%),
    var(--tex-brick-grain),
    var(--tex-brick-pits);
  background-size: 100% 100%, 100% 100%,
                   var(--tex-brick-scale) var(--tex-brick-scale),
                   calc(var(--tex-brick-scale) * 2.7) calc(var(--tex-brick-scale) * 2.7);
  background-repeat: no-repeat, no-repeat, repeat, repeat;
  background-blend-mode: normal, normal, multiply, multiply;
  color: var(--tex-brick-on);
  border: 1px solid rgba(0, 0, 0, .28);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* The smooth brick, only when the URL asks for it (?brick=smooth on /summer; rough is the default since Joseph picked it). */
html[data-brick="smooth"] {
  --tex-brick-face-wide:   var(--tex-brick-smooth-face-wide);
  --tex-brick-face-mid:    var(--tex-brick-smooth-face-mid);
  --tex-brick-face-round:  var(--tex-brick-smooth-face-round);
  --tex-brick-face-topnav: var(--tex-brick-smooth-face-topnav);
}