/* 10-06 (Gerb): motion layer for gerbflow.com and GERBPRINT.
   1. A slow gold Damascus-steel wallpaper (canvas, js/gf-motion.js) behind everything.
   2. Smoother scroll reveals: no blur, earlier trigger, short stagger, so nothing pops in late.
   3. Headlines rise word by word out of a mask; key paragraphs brighten word by word as you scroll. */

html { background: var(--ink-0); }
body { background: transparent !important; }
#gf-steel { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
#gf-steel.on { opacity: 1; }
/* sections that painted a solid colour now let the steel show through, softly */
.proof, .motto { background: rgba(17, 17, 19, .55) !important; }
.ledger, .gf-footer { background: transparent !important; }

/* Reveal: rise + fade only (blur made scrolling feel heavy) */
.gf-reveal, .ga-rise { filter: none !important; transform: translate3d(0, 26px, 0); opacity: 0;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1) !important; will-change: opacity, transform; }
.gf-reveal.gf-in, .ga-rise.ga-in { opacity: 1; transform: none; }

/* Headline words slide up out of a mask */
.gm-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.gm-w > i { display: inline-block; font-style: inherit; transform: translate3d(0, 105%, 0); transition: transform .9s cubic-bezier(.76, 0, .24, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.gm-in .gm-w > i { transform: none; }
/* a headline that is split no longer needs the block reveal */
.gm-split.gf-reveal, .gm-split.ga-rise { opacity: 1 !important; transform: none !important; }

/* Paragraph words brighten as they scroll past */
.gm-b { opacity: .2; transition: opacity .35s ease; }
.gm-b.lit { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gf-reveal, .ga-rise { opacity: 1 !important; transform: none !important; }
  .gm-w > i { transform: none !important; }
  .gm-b { opacity: 1 !important; }
}

/* 10-06 round 2 (Leadr-style) */
/* small arrow labels above sections */
.gm-eye { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .9rem; font: 400 .8125rem/1 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; color: var(--gold-hi); opacity: .85; }
.gm-eye span { font-size: 1rem; line-height: 1; }
/* soft gold glow behind big headlines */
.gf-section .gf-h2, .gf-section .gf-display, .page .gf-h2, .home-left .gf-display { text-shadow: 0 0 70px color-mix(in srgb, var(--gold) 30%, transparent), 0 0 140px color-mix(in srgb, var(--gold) 14%, transparent); }
/* big thin numbers */
.ledger-num { font-weight: 300 !important; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* product cards */
.gm-inside-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 3rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.gm-inside-head .gf-lead { max-width: 34ch; }
.gm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.6vw, 1.25rem); }
.gm-card { margin: 0; border: 1px solid rgba(201,168,76,.18); border-radius: 16px; overflow: hidden; background: rgba(17,17,19,.72); box-shadow: 0 30px 80px -40px rgba(201,168,76,.45);
  transition: transform .5s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .5s; }
.gm-card:hover { transform: translateY(-6px); border-color: rgba(201,168,76,.45); box-shadow: 0 40px 100px -40px rgba(201,168,76,.65); }
.gm-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
.gm-card figcaption { padding: .9rem 1rem 1.05rem; display: grid; gap: .25rem; }
.gm-card b { font-weight: 500; color: var(--bone); }
.gm-card span { font-size: .875rem; color: var(--bone-2); }
@media (max-width: 900px) { .gm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gm-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .gm-cards::-webkit-scrollbar { display: none; } .gm-card { flex: 0 0 78%; scroll-snap-align: start; } }
/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }