/* ──────────────────────────────────────────────────────────────
   BMB shared motion library (added 2026-06-10)

   Named hero patterns + scroll-reveal nuances for every content
   page that doesn't have a bespoke service-page treatment. Loaded
   site-wide on content + article + archive + store pages via
   PAGE_CSS_MAP / build.py.

   Naming convention:
   - .bmb-anim-*           reusable patterns applied via classes
   - body[data-hero-style] page-level opt-in for hero choreography
   - .is-revealed          intersection-observer hook the existing
                           auto-reveal.css IIFE already toggles

   All animations:
   - run once, on first paint or first viewport entry
   - honour prefers-reduced-motion (everything settles instantly)
   - use cubic-bezier(.2, .7, .2, 1) for the editorial ease-out
   - use cubic-bezier(.2, .6, .2, 1) for content reveals
   ────────────────────────────────────────────────────────────── */

/* ── Shared easing tokens ─────────────────────────────────────── */
:root {
  --bmb-ease-edit: cubic-bezier(.2, .7, .2, 1);  /* editorial ease-out */
  --bmb-ease-soft: cubic-bezier(.2, .6, .2, 1);  /* content reveal */
}

/* ────────────────────────────────────────────────────────────── */
/* HERO PATTERN 1 — "Editorial sweep" (about-us)                  */
/* Eyebrow slides down from above, display headline word-by-word  */
/* slides in from below with the <em> italic delayed for accent.  */
/* H1 fades up. Lead fades last. The whole thing finishes in 1.4s.*/
/* ────────────────────────────────────────────────────────────── */
body[data-hero-style="editorial"] .bmb-eyebrow,
body[data-hero-style="editorial"] [class*="-hero-eyebrow"],
body[data-hero-style="editorial"] [class*="-hero-display"],
body[data-hero-style="editorial"] [class*="-hero-h1"],
body[data-hero-style="editorial"] [class*="-hero-lead"] {
  opacity: 0;
  transform: translateY(18px);
  animation: bmbHeroFadeUp .9s var(--bmb-ease-edit) forwards;
}
body[data-hero-style="editorial"] .bmb-eyebrow,
body[data-hero-style="editorial"] [class*="-hero-eyebrow"] {
  animation-delay: .1s;
  transform: translateY(-12px);  /* eyebrow drops from above */
  animation-name: bmbHeroFadeDown;
}
body[data-hero-style="editorial"] [class*="-hero-display"] {
  animation-delay: .25s;
  animation-duration: 1.1s;
  transform: translateY(28px);
}
body[data-hero-style="editorial"] [class*="-hero-display"] em {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  animation: bmbHeroFadeUp .9s var(--bmb-ease-edit) .65s forwards;
}
body[data-hero-style="editorial"] [class*="-hero-h1"] {
  animation-delay: .55s;
}
body[data-hero-style="editorial"] [class*="-hero-lead"] {
  animation-delay: .85s;
  animation-duration: 1s;
}

/* ────────────────────────────────────────────────────────────── */
/* HERO PATTERN 2 — "Warm sequence" (contact-us)                  */
/* Slower, calmer choreography: each line fades in at its own     */
/* pace. Eyebrow first (a beat), then display (lingering), then   */
/* h1, then lead. Reads as "settling in" not "presenting."        */
/* ────────────────────────────────────────────────────────────── */
body[data-hero-style="warm"] .bmb-eyebrow,
body[data-hero-style="warm"] [class*="-hero-eyebrow"],
body[data-hero-style="warm"] [class*="-hero-display"],
body[data-hero-style="warm"] [class*="-hero-h1"],
body[data-hero-style="warm"] [class*="-hero-lead"] {
  opacity: 0;
  transform: translateY(12px);
  animation: bmbHeroFadeUp 1.1s var(--bmb-ease-soft) forwards;
}
body[data-hero-style="warm"] .bmb-eyebrow,
body[data-hero-style="warm"] [class*="-hero-eyebrow"] {
  animation-delay: .15s;
  animation-duration: .7s;
}
body[data-hero-style="warm"] [class*="-hero-display"] {
  animation-delay: .4s;
  animation-duration: 1.3s;
}
body[data-hero-style="warm"] [class*="-hero-h1"] {
  animation-delay: .8s;
}
body[data-hero-style="warm"] [class*="-hero-lead"] {
  animation-delay: 1.15s;
  animation-duration: 1.2s;
}

/* ────────────────────────────────────────────────────────────── */
/* HERO PATTERN 3 — "Cinematic" (portfolio)                       */
/* Bigger, more dramatic. Display headline scales-in from 0.95,   */
/* the <em> italic slides in from RIGHT after a beat to feel like */
/* a film title card. Stats below count up via JS.                */
/* ────────────────────────────────────────────────────────────── */
body[data-hero-style="cinematic"] .bmb-eyebrow,
body[data-hero-style="cinematic"] [class*="-hero-eyebrow"],
body[data-hero-style="cinematic"] [class*="-hero-display"],
body[data-hero-style="cinematic"] [class*="-hero-h1"],
body[data-hero-style="cinematic"] [class*="-hero-lead"] {
  opacity: 0;
  animation: bmbHeroFadeUp 1s var(--bmb-ease-edit) forwards;
}
body[data-hero-style="cinematic"] .bmb-eyebrow,
body[data-hero-style="cinematic"] [class*="-hero-eyebrow"] {
  animation-delay: .15s;
  letter-spacing: .3em;
}
body[data-hero-style="cinematic"] [class*="-hero-display"] {
  animation-delay: .35s;
  animation-duration: 1.2s;
  animation-name: bmbHeroScaleIn;
}
body[data-hero-style="cinematic"] [class*="-hero-display"] em {
  display: inline-block;
  opacity: 0;
  transform: translateX(40px);
  animation: bmbHeroSlideRightToZero 1s var(--bmb-ease-edit) .85s forwards;
}
body[data-hero-style="cinematic"] [class*="-hero-h1"] {
  animation-delay: .7s;
}
body[data-hero-style="cinematic"] [class*="-hero-lead"] {
  animation-delay: 1s;
}

/* ────────────────────────────────────────────────────────────── */
/* HERO PATTERN 4 — "Magazine cover" (16 blog articles)           */
/* The article's <h1> drops in with a brief overshoot, the meta   */
/* line (date / author / read-time) fades after, lead paragraph   */
/* glides in last. Optional cover image (.bmb-article-cover) gets */
/* a slow Ken Burns scale-down for the first 12s.                 */
/* ────────────────────────────────────────────────────────────── */
body[data-hero-style="magazine"] h1,
body[data-hero-style="magazine"] .bmb-article-meta,
body[data-hero-style="magazine"] .bmb-article-lead,
body[data-hero-style="magazine"] .bmb-article-cover {
  opacity: 0;
  transform: translateY(16px);
  animation: bmbHeroFadeUp .95s var(--bmb-ease-edit) forwards;
}
body[data-hero-style="magazine"] h1 {
  animation-delay: .15s;
  animation-duration: 1.1s;
}
body[data-hero-style="magazine"] .bmb-article-meta {
  animation-delay: .45s;
}
body[data-hero-style="magazine"] .bmb-article-lead {
  animation-delay: .65s;
  animation-duration: 1.1s;
}
body[data-hero-style="magazine"] .bmb-article-cover {
  animation-delay: 0s;
  animation-duration: 1.2s;
  transform: scale(1.06);
  animation-name: bmbHeroKenBurnsIn;
  overflow: hidden;
}
body[data-hero-style="magazine"] .bmb-article-cover img {
  transform: scale(1.04);
  animation: bmbHeroKenBurnsSlow 14s var(--bmb-ease-edit) forwards;
}

/* ────────────────────────────────────────────────────────────── */
/* HERO PATTERN 5 — "Quiet eyebrow lift" (faq, store, archives)   */
/* The lightest pattern. Eyebrow + h1 + lead lift up in quick     */
/* sequence — 0.7s total. Reads as "page loaded" not "presenting."*/
/* ────────────────────────────────────────────────────────────── */
body[data-hero-style="quiet"] .bmb-section-head .bmb-eyebrow,
body[data-hero-style="quiet"] .bmb-eyebrow:first-of-type,
body[data-hero-style="quiet"] [class*="-hero-eyebrow"],
body[data-hero-style="quiet"] [class*="-hero-display"],
body[data-hero-style="quiet"] [class*="-hero-h1"],
body[data-hero-style="quiet"] [class*="-hero-lead"],
body[data-hero-style="quiet"] main h1:first-of-type,
body[data-hero-style="quiet"] main .bmb-section-head:first-of-type h1,
body[data-hero-style="quiet"] main .bmb-section-head:first-of-type p,
body[data-hero-style="quiet"] main > header h1,
body[data-hero-style="quiet"] main > header p,
body[data-hero-style="quiet"] [class*="-intro"] h1,
body[data-hero-style="quiet"] [class*="-intro"] > p {
  opacity: 0;
  transform: translateY(10px);
  animation: bmbHeroFadeUp .7s var(--bmb-ease-edit) forwards;
}
body[data-hero-style="quiet"] .bmb-eyebrow:first-of-type,
body[data-hero-style="quiet"] .bmb-section-head .bmb-eyebrow,
body[data-hero-style="quiet"] [class*="-hero-eyebrow"]      { animation-delay: .1s; }
body[data-hero-style="quiet"] [class*="-hero-display"]      { animation-delay: .2s; animation-duration: .9s; }
body[data-hero-style="quiet"] [class*="-hero-h1"],
body[data-hero-style="quiet"] main h1:first-of-type,
body[data-hero-style="quiet"] main .bmb-section-head:first-of-type h1,
body[data-hero-style="quiet"] main > header h1,
body[data-hero-style="quiet"] [class*="-intro"] h1          { animation-delay: .2s; animation-duration: .9s; }
body[data-hero-style="quiet"] main .bmb-section-head:first-of-type p,
body[data-hero-style="quiet"] main > header p,
body[data-hero-style="quiet"] [class*="-intro"] > p,
body[data-hero-style="quiet"] [class*="-hero-lead"]         { animation-delay: .4s; animation-duration: .9s; }

/* ────────────────────────────────────────────────────────────── */
/* GRID STAGGER — Bento reveal for any [class*="-grid"]           */
/* When the grid's parent (a section) gets .is-revealed from the  */
/* observer, each child reveals with a 70ms cascading delay. Up   */
/* to 12 children explicitly; 13+ all reveal with the last delay. */
/* Replaces the generic auto-reveal fade for richer rhythm.       */
/* ────────────────────────────────────────────────────────────── */
.bmb-grid-bento > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .7s var(--bmb-ease-soft),
    transform .7s var(--bmb-ease-soft);
}
.bmb-grid-bento.is-revealed > * { opacity: 1; transform: none; }
.bmb-grid-bento.is-revealed > *:nth-child(1)  { transition-delay: .00s; }
.bmb-grid-bento.is-revealed > *:nth-child(2)  { transition-delay: .07s; }
.bmb-grid-bento.is-revealed > *:nth-child(3)  { transition-delay: .14s; }
.bmb-grid-bento.is-revealed > *:nth-child(4)  { transition-delay: .21s; }
.bmb-grid-bento.is-revealed > *:nth-child(5)  { transition-delay: .28s; }
.bmb-grid-bento.is-revealed > *:nth-child(6)  { transition-delay: .35s; }
.bmb-grid-bento.is-revealed > *:nth-child(7)  { transition-delay: .42s; }
.bmb-grid-bento.is-revealed > *:nth-child(8)  { transition-delay: .49s; }
.bmb-grid-bento.is-revealed > *:nth-child(9)  { transition-delay: .56s; }
.bmb-grid-bento.is-revealed > *:nth-child(10) { transition-delay: .63s; }
.bmb-grid-bento.is-revealed > *:nth-child(11) { transition-delay: .70s; }
.bmb-grid-bento.is-revealed > *:nth-child(n+12) { transition-delay: .77s; }

/* ── Keyframes ────────────────────────────────────────────────── */
@keyframes bmbHeroFadeUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bmbHeroFadeDown {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bmbHeroScaleIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bmbHeroSlideRightToZero {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes bmbHeroKenBurnsIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes bmbHeroKenBurnsSlow {
  to { transform: scale(1); }
}

/* ── Reduced motion: everything settles instantly ─────────────── */
@media (prefers-reduced-motion: reduce) {
  body[data-hero-style] .bmb-eyebrow,
  body[data-hero-style] [class*="-hero-eyebrow"],
  body[data-hero-style] [class*="-hero-display"],
  body[data-hero-style] [class*="-hero-display"] em,
  body[data-hero-style] [class*="-hero-h1"],
  body[data-hero-style] [class*="-hero-lead"],
  body[data-hero-style] h1,
  body[data-hero-style] main > h1:first-of-type,
  body[data-hero-style] main > header h1,
  body[data-hero-style] main > header p,
  body[data-hero-style] .bmb-article-meta,
  body[data-hero-style] .bmb-article-lead,
  body[data-hero-style] .bmb-article-cover,
  body[data-hero-style] .bmb-article-cover img,
  .bmb-grid-bento > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}