/* ==========================================================================
   Bond Financial — Interior Motion System  (ADDITIVE — load AFTER styles.css)
   The "Cinematic Process" (Direction B) language, generalized for every
   interior page. Brand-locked: navy #003767, ink #231F20, gray #939598, white.
   No new hues. Header/footer untouched.

   Usage:
     <link rel="stylesheet" href="css/styles.css">
     <link rel="stylesheet" href="css/interior.css">
     ...add class "im-banner" to <section class="page-banner">
     ...wrap content blocks in .im-up / build sequences with .flow > .flow-step
     <script src="js/main.js" defer></script>
     <script src="js/interior.js" defer></script>
   ========================================================================== */

/* ---------- 1 · Scroll-progress meter ---------- */
.im-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%;
  z-index: 200; pointer-events: none; background: var(--navy);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

/* ---------- 2 · Banner: parallax drift + staged headline reveal ---------- */
.im-banner .page-banner__bg { will-change: transform; transform: scale(1.12); }
.im-banner .eyebrow,
.im-banner h1,
.im-banner .page-banner__sub,
.im-banner .breadcrumb {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.im-banner.is-in .breadcrumb { opacity: 1; transform: none; transition-delay: 0.05s; }
.im-banner.is-in .eyebrow { opacity: 1; transform: none; transition-delay: 0.16s; }
.im-banner.is-in h1 { opacity: 1; transform: none; transition-delay: 0.28s; }
.im-banner.is-in .page-banner__sub { opacity: 1; transform: none; transition-delay: 0.4s; }

/* ---------- 3 · Universal reveal primitive ---------- */
.im-up { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.im-up.is-in { opacity: 1; transform: none; }
.im-up.d1 { transition-delay: 0.10s; }
.im-up.d2 { transition-delay: 0.20s; }
.im-up.d3 { transition-delay: 0.30s; }

/* ---------- 4 · Floating section counter (optional, for numbered flows) ---------- */
.flow-counter {
  position: fixed; right: clamp(1rem, 2.5vw, 2.5rem); top: calc(var(--header-h) + 40px);
  z-index: 80; display: flex; align-items: baseline; gap: 0.35rem;
  background: rgba(0,55,103,0.92); color: var(--white);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 0.6rem 1rem; font-family: var(--font-display);
  opacity: 0; transform: translateY(-8px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none;
}
.flow-counter.is-shown { opacity: 1; transform: none; }
.flow-counter__cur { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.flow-counter__sep { opacity: 0.6; }
.flow-counter__tot { font-size: 0.95rem; opacity: 0.7; }
@media (max-width: 700px) { .flow-counter { display: none; } }

/* ---------- 5 · Intro lede block ---------- */
.im-intro { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.5rem, 2vw, 3rem); }
.im-intro__inner { max-width: var(--maxw-narrow); margin-inline: auto; }
.im-intro h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); color: var(--navy); margin: 0; }
.im-intro__lede {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.32;
  color: var(--navy); margin: 0 0 1.4rem; max-width: 26ch;
}

/* ---------- 6 · Cinematic flow (alternating media + text, parallax, numeral) ---------- */
.flow { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.flow-step {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center;
  padding-block: clamp(3rem, 2rem + 4vw, 7rem); position: relative;
}
.flow-step + .flow-step { border-top: 1px solid var(--line); }
.flow-step:nth-child(even) .flow-step__media { order: 2; }

/* media: parallax photo + layered navy offset + wipe-up reveal */
.flow-step__media {
  position: relative; aspect-ratio: 5/4; overflow: hidden; background: var(--paper-soft);
  clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease);
}
.flow-step.is-in .flow-step__media { clip-path: inset(0 0 0 0); }
.flow-step__media img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; will-change: transform;
}
/* contain mode for diagrams/illustrations on a soft field */
.flow-step__media--contain { aspect-ratio: 4/3; }
.flow-step__media--contain img { inset: 0; height: 100%; object-fit: contain; padding: clamp(1rem,3vw,2.5rem); }
/* natural mode: diagram renders at its intrinsic size (no upscaling/blur),
   centered on the same soft-gray field the transparent PNG sits on */
.flow-step__media--natural img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: calc(100% - 3rem); max-height: calc(100% - 3rem); object-fit: contain; padding: 0; }
@media (min-width: 901px) {
  .flow-step:nth-child(odd) .flow-step__media { box-shadow: -26px 26px 0 0 var(--navy); }
  .flow-step:nth-child(even) .flow-step__media { box-shadow: 26px 26px 0 0 var(--navy); }
}

.flow-step__text { position: relative; }
.flow-step__num {
  font-family: var(--font-display); font-weight: 600; line-height: 0.8;
  font-size: clamp(3.5rem, 2.5rem + 5vw, 7rem); color: var(--navy);
  opacity: 0; margin: 0 0 -0.35em; letter-spacing: -0.02em; transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.flow-step.is-in .flow-step__num { opacity: 0.14; transform: none; }
.flow-step__kicker {
  font-family: var(--font-body); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--navy);
  margin: 0 0 0.9rem; opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease) 0.10s, transform 0.7s var(--ease) 0.10s;
}
.flow-step__text h2,
.flow-step__text h3 {
  font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.7rem); color: var(--navy);
  margin: 0 0 1.1rem; line-height: 1.1; opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease) 0.18s, transform 0.7s var(--ease) 0.18s;
}
.flow-step__copy { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease) 0.26s, transform 0.7s var(--ease) 0.26s; }
.flow-step__copy p { color: var(--ink); margin: 0 0 1.1rem; max-width: 56ch; }
.flow-step__copy p:last-child { margin-bottom: 0; }
.flow-step.is-in .flow-step__kicker,
.flow-step.is-in .flow-step__text h2,
.flow-step.is-in .flow-step__text h3,
.flow-step.is-in .flow-step__copy { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .flow-step { grid-template-columns: 1fr; gap: 1.75rem; }
  .flow-step:nth-child(even) .flow-step__media { order: 0; }
}

/* ---------- 7 · Cinematic statement band (emphasis pull, full-bleed photo) ---------- */
.im-statement { position: relative; overflow: hidden; color: var(--white); padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.im-statement__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transform: scale(1.08); transition: transform 1.4s var(--ease); }
.im-statement.is-in .im-statement__bg { transform: scale(1); }
.im-statement::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0,55,103,0.82); }
.im-statement__inner { position: relative; z-index: 2; max-width: 1000px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }
.im-statement__line {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.8rem);
  line-height: 1.3; color: var(--white); margin: 0; opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s;
}
.im-statement.is-in .im-statement__line { opacity: 1; transform: none; }
.im-statement .num { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: rgba(255,255,255,0.7); display: block; margin-bottom: 1rem; }

/* ---------- 8 · Staggered grid reveal (team, partners, cards) ---------- */
.im-stagger > * { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.im-stagger.is-in > * { opacity: 1; transform: none; }
.im-stagger.is-in > *:nth-child(1) { transition-delay: 0.04s; }
.im-stagger.is-in > *:nth-child(2) { transition-delay: 0.10s; }
.im-stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.im-stagger.is-in > *:nth-child(4) { transition-delay: 0.22s; }
.im-stagger.is-in > *:nth-child(5) { transition-delay: 0.28s; }
.im-stagger.is-in > *:nth-child(6) { transition-delay: 0.34s; }
.im-stagger.is-in > *:nth-child(7) { transition-delay: 0.40s; }
.im-stagger.is-in > *:nth-child(8) { transition-delay: 0.46s; }
.im-stagger.is-in > *:nth-child(9) { transition-delay: 0.52s; }
.im-stagger.is-in > *:nth-child(10) { transition-delay: 0.58s; }

/* ---------- 9 · Team card photo hover (cinematic zoom) ---------- */
.team-card__photo { overflow: hidden; }
.team-card__photo img { transition: transform 0.6s var(--ease); }
.team-card:hover .team-card__photo img { transform: scale(1.06); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .im-progress { display: none; }
  .im-banner .page-banner__bg { transform: none; }
  .im-banner .eyebrow, .im-banner h1, .im-banner .breadcrumb,
  .im-up, .flow-step__num, .flow-step__kicker,
  .flow-step__text h2, .flow-step__text h3, .flow-step__copy,
  .im-statement__line, .im-stagger > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .flow-step__media { clip-path: none !important; }
  .flow-step__media img { position: relative; inset: 0; height: 100%; }
  .flow-step__media--contain img { height: 100%; }
  .flow-step.is-in .flow-step__num { opacity: 0.14; }
  .im-statement__bg { transform: none !important; }
}