/* ============================================================================
   HERO MOLECULE PATTERN - On Top Labs
   ---------------------------------------------------------------------------
   Brandon, 2026-07-28: "add a very well designed aesthetic molecule pattern
   with low transparency to every hero image besides the home page rather than
   this ai slop animation."

   Replaces the drifting canvas field (assets/js/molbg.js) on the 25 section
   headers with a STATIC, drawn pattern. Nothing animates and nothing is random:
   the previous version scattered generated structures at random positions every
   load, which is exactly what read as generated filler.

   WHAT IT IS
   A hand-placed hexagonal lattice - the flat-topped six-ring grid of fused
   carbocycles, drawn once as an SVG tile and repeated. It is the single most
   recognisable shape in chemistry, it tiles seamlessly by construction, and as
   a regular lattice it reads as intentional structure rather than as clutter.
   A second, larger-scale layer of ring VERTICES sits over it at lower opacity
   so the field has depth without a second colour.

   WHY SVG-IN-CSS AND NOT A CANVAS
   · zero JavaScript, zero per-frame cost, nothing to pause on scroll
   · resolution independent - crisp on any DPR, no canvas re-raster on resize
   · it cannot drift out of alignment or clip a shape at the band edge, which
     were both failure modes of the animated version

   ⚠️ Geometry note: the tile is 56 x 96.99. That height is 56 x sqrt(3) and is
   NOT arbitrary - a hexagonal lattice only tiles seamlessly at that ratio. If
   the width changes, the height must be recomputed as width x 1.7320508, or a
   visible seam appears every repeat.

   Opacity is intentionally very low (the brief said low transparency, i.e.
   barely-there). These sit UNDER headline copy; anything stronger competes.
   ========================================================================== */

/* The canvas the old animation drew into. Kept in the markup on 25 pages, so
   it is hidden here rather than stripped from every file - and molbg.js is
   unlinked, so nothing draws into it either way. */
.mol-section > canvas.mol-bg { display:none !important; }

.mol-section {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

/* layer 1: the hexagonal lattice */
.mol-section::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96.99' viewBox='0 0 56 96.99'>\
<g fill='none' stroke='%23203191' stroke-width='1.1' stroke-linejoin='round'>\
<path d='M14 0 L0 8.083 L0 24.248 L14 32.33 L28 24.248 L28 8.083 Z'/>\
<path d='M14 48.495 L0 56.577 L0 72.742 L14 80.825 L28 72.742 L28 56.577 Z'/>\
<path d='M42 24.248 L28 32.33 L28 48.495 L42 56.577 L56 48.495 L56 32.33 Z'/>\
<path d='M42 72.742 L28 80.825 L28 96.99 L42 105.07 L56 96.99 L56 80.825 Z'/>\
</g></svg>");
  background-size:168px 291px;          /* 3x the tile, so the lattice reads large */
  /* Faded from the top-left so the pattern is densest where the eyebrow sits
     and clears away under the paragraph and buttons. */
  -webkit-mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);
  mask-image:linear-gradient(115deg, #000 0%, rgba(0,0,0,.55) 38%, transparent 78%);
  opacity:.13;
}

/* layer 2: vertex dots at a different scale, for depth without a second hue */
.mol-section::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='96.99' viewBox='0 0 56 96.99'>\
<g fill='%23203191'>\
<circle cx='14' cy='0' r='1.7'/><circle cx='0' cy='8.083' r='1.7'/>\
<circle cx='0' cy='24.248' r='1.7'/><circle cx='14' cy='32.33' r='1.7'/>\
<circle cx='28' cy='24.248' r='1.7'/><circle cx='28' cy='8.083' r='1.7'/>\
<circle cx='42' cy='56.577' r='1.7'/><circle cx='56' cy='48.495' r='1.7'/>\
<circle cx='14' cy='80.825' r='1.7'/><circle cx='0' cy='72.742' r='1.7'/>\
</g></svg>");
  background-size:112px 194px;          /* 2x tile - deliberately not a multiple
                                           of layer 1, so the two never lock into
                                           an obvious repeating motif */
  -webkit-mask-image:radial-gradient(120% 100% at 88% 12%, #000 0%, transparent 72%);
  mask-image:radial-gradient(120% 100% at 88% 12%, #000 0%, transparent 72%);
  opacity:.16;
}

/* content must sit above both layers */
.mol-section > .wrap,
.mol-section > .wrap-wide,
.mol-section > * { position:relative; z-index:1; }

/* On a narrow screen the copy fills the band, so the pattern is pulled back
   further rather than sitting directly behind the headline. */
@media (max-width:760px) {
  .mol-section::before { opacity:.09; background-size:118px 204px; }
  .mol-section::after  { opacity:.10; }
}

/* Nothing here animates, so there is no reduced-motion branch to write - which
   is itself part of the point of replacing the canvas. */