/* ---------- The Forged Brass Seal (approved, 27 Oct 2026) ----------
   The store's own round logo, mounted in an aged-brass bezel. The coin sits in the header and
   just breaks its lower edge (7 px on desktop, 3 px on phones), and a brass line leaves the coin's
   rim exactly where it crosses that edge, then runs along it into the hero's marbling.
   The logo file itself is shown as is; the metal is a separate image (assets/seal/, made by
   tools/seal.py). Everything is scoped to html.bt-seal, so ?seal=off (or removing the class)
   shows the previous header exactly. Without motion the seal is complete; on hover a slow glint
   crosses the metal. */

/* The wrapper is needed with or without the seal: it keeps the logo the flex item it was. */
.brand__mark { position: relative; display: flex; flex: none; }

/* --seal: the coin's diameter. --seal-drop: how far its centre sits below the header's centre.
   --seal-k: its scale (it shrinks on scroll by transform only, so nothing around it reflows).
   --seal-meet: where the header's lower edge crosses the rim, measured from the coin's left edge
   (r + the square root of r² minus the centre's distance to the edge, less 3 px tucked under the rim). */
.bt-seal .site-header { --seal: 80px; --seal-drop: 7px; --seal-k: 1; --seal-meet: 62px; }
.bt-seal .site-header.is-scrolled { --seal-drop: 0px; --seal-k: .7; }
.bt-seal .brand { gap: 14px; }
/* The mark keeps a fixed footprint (the coin's width, the old 52 px row height), so the header,
   the business name and the navigation never reflow; the coin overhangs it. */
.bt-seal .brand__mark { width: var(--seal); height: 52px; }
.bt-seal .brand__mark img,
.bt-seal .brand__rim {
  position: absolute; top: 50%; left: 0;
  width: var(--seal); height: var(--seal); margin-top: calc(var(--seal) / -2);
  /* Scale about the coin's left-middle, so its left edge stays on the page gutter with the hero copy. */
  transform-origin: 0 50%;
  transform: translateY(var(--seal-drop)) scale(var(--seal-k));
  transition: transform .4s var(--ease);
}
/* The logo fills the bezel's opening: 75% of the seal, centred, scaling about the same point. */
.bt-seal .brand__mark img {
  width: calc(var(--seal) * .75); height: calc(var(--seal) * .75);
  left: calc(var(--seal) * .125); margin-top: calc(var(--seal) * -.375);
  transform-origin: calc(var(--seal) * -.125) 50%;
}
.bt-seal .brand__rim {
  z-index: 1; pointer-events: none;
  background: image-set(url("seal/seal-rim-384.webp") 1x, url("seal/seal-rim-768.webp") 2x) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1.5px 1px rgba(26, 16, 6, .45)) drop-shadow(0 5px 7px rgba(26, 16, 6, .28));
}
/* The name follows the coin's right edge as it shrinks, smoothly, by transform. */
.bt-seal .brand__name { transition: transform .4s var(--ease); }
.bt-seal .is-scrolled .brand__name { transform: translateX(calc(var(--seal) * (var(--seal-k) - 1))); }

/* Hover: a band of light crosses the metal only (the rim image is its own mask). */
.bt-seal .brand__rim::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("seal/seal-rim-384.webp") center / 100% 100% no-repeat;
  mask: url("seal/seal-rim-384.webp") center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 220, .0) 42%, rgba(255, 246, 220, .75) 50%, rgba(255, 246, 220, 0) 58%, transparent 62%) 120% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen; opacity: 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .bt-seal .brand__rim::after { transition: background-position 1.1s var(--ease-inout), opacity .3s; }
  .bt-seal .brand:hover .brand__rim::after,
  .bt-seal .brand:focus-visible .brand__rim::after { opacity: 1; background-position: -20% 0; }
}

/* The brass line: it starts at the rim, where the coin crosses the header's lower edge (its first
   3 px tuck under the bezel), and runs along that edge, thinning to nothing. On wide screens the
   hero's top veins rise to meet it. It withdraws when the header slims down on scroll. */
.bt-seal .brand__thread {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--seal-meet); top: calc(50% + 38px - 8px);
  width: min(50vw, 740px); height: 16px;
  background: url("seal/seal-thread.svg") 0 0 / 100% 100% no-repeat;
  transform-origin: 0 50%;
  transition: opacity .3s var(--ease), transform .5s var(--ease);
}
.bt-seal .is-scrolled .brand__thread { opacity: 0; transform: scaleX(.4); }

@media (max-width: 1023.98px) {
  .bt-seal .site-header { --seal: 66px; --seal-drop: 8px; --seal-meet: 44px; }
  .bt-seal .site-header.is-scrolled { --seal-drop: 0px; --seal-k: .8; }
}