/* Billboard — wall of stills behind a giant name */

.pg-billboard { font-family: var(--font-body); }

.pg-billboard .bb-hero {
  position: relative; min-height: clamp(520px, 100cqh, 760px); overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--bg);
}
.pg-billboard .bb-hero-bare { min-height: clamp(380px, 70cqh, 560px); }

.pg-billboard .bb-wall {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr;
  gap: 3px;
}
.pg-billboard .bb-wall img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.75) contrast(1.05) brightness(.62);
}

.pg-billboard .bb-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), transparent 30%,
      color-mix(in srgb, var(--bg) 30%, transparent) 62%, color-mix(in srgb, var(--bg) 96%, transparent));
}

.pg-billboard .bb-hero .logo { position: absolute; z-index: 3; top: 22px; left: 24px; max-height: 44px; }

.pg-billboard .bb-title { position: relative; z-index: 2; padding: 0 clamp(1.2rem, 5cqw, 3.4rem) 1rem; }
.pg-billboard .bb-kicker {
  margin-bottom: .8rem;
  font: 500 10px/1.5 var(--font-mono); letter-spacing: .34em; text-transform: uppercase;
  color: var(--accent);
}
.pg-billboard h1 {
  font-family: 'Bebas Neue', var(--font-black);
  font-size: clamp(4rem, 17.5cqw, 11rem); line-height: .84; letter-spacing: .01em;
  text-wrap: balance;
}
.pg-billboard .bb-rule { display: block; width: clamp(90px, 18cqw, 200px); height: 8px; margin-top: 1rem; background: var(--accent); }

.pg-billboard .bb-stats {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 1px; margin-top: 1.6rem;
  border-top: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
}
.pg-billboard .bb-stat {
  flex: 1 1 130px; display: flex; align-items: baseline; gap: .55em;
  padding: 1rem clamp(1.2rem, 5cqw, 3.4rem) 1.1rem;
  font: 500 9px/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); background: color-mix(in srgb, var(--bg) 72%, transparent);
}
.pg-billboard .bb-stat b { font: 400 1.9rem/1 'Bebas Neue', var(--font-black); color: var(--accent); letter-spacing: .02em; }

.pg-billboard .bb-bio {
  padding: clamp(3rem, 9cqw, 5.6rem) clamp(1.2rem, 8cqw, 5rem);
  background: var(--surface);
}
.pg-billboard .bb-bio p {
  max-width: 60ch; margin: 0 auto;
  font: 400 clamp(1.15rem, 3cqw, 1.6rem)/1.55 var(--font-serif);
  text-align: center;
}

.pg-billboard .bb-prods {
  display: grid; grid-template-columns: .8fr 1.6fr; gap: 2rem;
  padding: clamp(3rem, 9cqw, 5.6rem) clamp(1.2rem, 5cqw, 3.4rem);
}
.pg-billboard .bb-prods h2 {
  font-family: 'Bebas Neue', var(--font-black);
  font-size: clamp(2.2rem, 7cqw, 3.8rem); line-height: .9; letter-spacing: .02em;
  color: var(--accent);
}
.pg-billboard .bb-prods ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2.4rem; }
.pg-billboard .bb-prods li {
  display: flex; gap: .9em; align-items: baseline; break-inside: avoid;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
  font-weight: 600; font-size: .95rem;
}
.pg-billboard .bb-prods li span { font: 400 8px var(--font-mono); color: var(--muted); letter-spacing: .1em; }
.pg-billboard .bb-more { margin-top: 1rem; font: 500 9px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.pg-billboard .bb-reel { max-width: 860px; margin: 0 auto; padding: 0 clamp(1.2rem, 5cqw, 3.4rem) clamp(2.6rem, 7cqw, 4.4rem); }

/* horizontal catalogue strip — scroll-snap, built for dozens of images */
.pg-billboard .bb-strip-wrap { padding: 0 0 clamp(3rem, 9cqw, 5.6rem); }
.pg-billboard .bb-strip-label {
  padding: 0 clamp(1.2rem, 5cqw, 3.4rem) 1rem;
  font: 500 9px/1.5 var(--font-mono); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.pg-billboard .bb-strip {
  display: flex; gap: 10px; overflow-x: auto; padding: 0 clamp(1.2rem, 5cqw, 3.4rem) 1rem;
  scroll-snap-type: x mandatory;
}
.pg-billboard .bb-strip figure { flex: 0 0 clamp(150px, 26cqw, 220px); scroll-snap-align: start; margin: 0; }
.pg-billboard .bb-strip img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.pg-billboard .bb-strip figcaption { margin-top: .45rem; font: 400 8px var(--font-mono); letter-spacing: .12em; color: var(--muted); }
.pg-billboard .bb-strip::-webkit-scrollbar { height: 6px; }
.pg-billboard .bb-strip::-webkit-scrollbar-thumb { background: var(--line); border: none; }

.pg-billboard .bb-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2rem;
  padding: 0 clamp(1.2rem, 5cqw, 3.4rem) clamp(3rem, 8cqw, 5rem);
}
.pg-billboard .bb-cols h3 {
  margin-bottom: .9rem;
  font: 500 9px var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}
.pg-billboard .bb-cols ul { list-style: none; margin: 0; padding: 0; }
.pg-billboard .bb-cols li { padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; font-weight: 500; }

.pg-billboard .bb-foot {
  padding: 2rem clamp(1.2rem, 5cqw, 3.4rem) 1.6rem;
  border-top: 1px solid var(--line); text-align: center;
}
.pg-billboard .bb-foot nav { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }

@container page (max-width: 640px) {
  .pg-billboard .bb-wall { grid-template-columns: repeat(4, 1fr); }
  .pg-billboard h1 { font-size: clamp(3.4rem, 19cqw, 6rem); }
  .pg-billboard .bb-prods { grid-template-columns: 1fr; }
  .pg-billboard .bb-prods ol { columns: 1; }
}

/* ── Motion polish ─────────────────────────────────────────────────────────── */

/* Text selection */
.pg-billboard ::selection { background: var(--accent); color: var(--bg); }

/* Wall cell hover: lift toward contrast + micro-scale.
   .bb-hero already has overflow:hidden so the scale stays inside the hero. */
.pg-billboard .bb-wall img {
  transition: filter .5s ease, transform .55s ease;
}
.pg-billboard .bb-wall img:hover {
  filter: grayscale(.1) contrast(1.08) brightness(.88);
  transform: scale(1.04);
}

/* Catalogue strip: contain scale within each figure + momentum/scrollbar polish */
.pg-billboard .bb-strip figure { overflow: hidden; }
.pg-billboard .bb-strip img    { transition: filter .6s ease, transform .6s ease; }
.pg-billboard .bb-strip img:hover { transform: scale(1.03); }
.pg-billboard .bb-strip {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* Scroll-triggered reveals — gated: both are one-shot, not ambient loops */
@media (prefers-reduced-motion: no-preference) {

  /* Wall images start hidden; reveal with column-scattered delays.
     7-column grid: columns fire in the order 1 → 7 → 3 → 5 → 2 → 6 → 4.
     Max total reveal: 0.90 s delay + 0.52 s transition = 1.42 s (under 1.5 s cap). */
  .animate .pg-billboard .bb-hero .bb-wall img {
    opacity: 0;
    transform: translateY(7px);
    transition: opacity .52s ease, transform .52s ease, filter .5s ease;
  }
  .animate .pg-billboard .bb-hero.in .bb-wall img {
    opacity: 1;
    transform: none;
  }
  .animate .pg-billboard .bb-hero.in .bb-wall img:nth-child(7n+1) { transition-delay: .10s; }
  .animate .pg-billboard .bb-hero.in .bb-wall img:nth-child(7n)   { transition-delay: .18s; }
  .animate .pg-billboard .bb-hero.in .bb-wall img:nth-child(7n+3) { transition-delay: .28s; }
  .animate .pg-billboard .bb-hero.in .bb-wall img:nth-child(7n+5) { transition-delay: .42s; }
  .animate .pg-billboard .bb-hero.in .bb-wall img:nth-child(7n+2) { transition-delay: .58s; }
  .animate .pg-billboard .bb-hero.in .bb-wall img:nth-child(7n+6) { transition-delay: .72s; }
  .animate .pg-billboard .bb-hero.in .bb-wall img:nth-child(7n+4) { transition-delay: .90s; }

  /* Accent rule draws in from the left once the first wall columns are lit */
  .animate .pg-billboard .bb-hero .bb-rule {
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  }
  .animate .pg-billboard .bb-hero.in .bb-rule {
    transform: scaleX(1);
    transition-delay: .5s;
  }
}