/* ---------- Metallic marbling ----------
   Since 27 Oct 2026 the hero's approved metal is the liquid brass smoke (assets/smoke.css); these thin
   veins show only with ?smoke=off. This file still provides html.bt-marble and the ?marble=off switch.
   Bronze, aged-brass and champagne veins running through the hero's charcoal, framing the copy
   and curving around the tin, plus one faint echo behind the maker. Everything is scoped to
   html.bt-marble, so removing that class (or this stylesheet) restores the previous hero exactly.
   The veins are static SVG (assets/marble-*.svg, generated by tools/marble.py from measured
   positions) and work as Shopify theme assets. */

/* Veins sit above the photograph's dark fade but below the copy. An oval around the tin keeps
   the product itself clear. */
.bt-marble .hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("marble-hero-tall.svg") 50% 50% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 21%, #000 27%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 21%, #000 27%);
}

@media (min-width: 1024px) {
  .bt-marble .hero::after {
    background-image: url("marble-hero.svg"); background-position: 0 50%;
    -webkit-mask-image: radial-gradient(ellipse 22% 34% at 67% 42%, transparent 72%, #000 100%);
    mask-image: radial-gradient(ellipse 22% 34% at 67% 42%, transparent 72%, #000 100%);
  }
}

/* The veins arrive once, softly, after the photograph; nothing moves afterwards. */
@media (prefers-reduced-motion: no-preference) {
  .js.bt-marble .hero::after { animation: bt-marble-in 1.8s var(--ease-out) .5s both; }
}
@keyframes bt-marble-in { from { opacity: 0; } to { opacity: 1; } }

/* The one echo: a single fine vein low behind the maker's portrait. */
.bt-marble .story::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background: url("marble-accent.svg") 0 100% / cover no-repeat;
}
/* On wide screens the vein's tip would reach under the maker's text; it fades out before the column. */
@media (min-width: 1024px) {
  .bt-marble .story::after { -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 42%); mask-image: linear-gradient(90deg, #000 30%, transparent 42%); }
}
.bt-marble .story__grid { position: relative; z-index: 1; }

/* On phones the section stacks, so the vein keeps to the open space below the links. */
@media (max-width: 1023.98px) {
  .bt-marble .story::after { background-size: 100% auto; }
}