/* The engine ships its own page ground, ink and type. Point its tokens at the brand and
   hand the body back to the theme: tan and nightfield only, Outfit text, Fraunces headings. */
:root {
  --sc-canvas: #F1E2C4;
  --sc-surface: #1A2639;
  --sc-ink: #1A2639;
  --sc-ink-soft: #1A2639;
  --sc-accent: #6E8DAE;
  --sc-accent-ink: #1A2639;
  --sc-font-display: Fraunces, Georgia, serif;
  --sc-font-text: Outfit, system-ui, sans-serif;
  --bc-gutter: clamp(1.25rem, 4vw, 3rem);
  --bc-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
body {
  background: var(--wp--preset--color--tan);
  color: var(--wp--preset--color--nightfield);
  font-family: var(--wp--preset--font-family--outfit);
  font-size: var(--wp--preset--font-size--medium, 1.125rem);
  line-height: 1.6;
  letter-spacing: normal;
}

/* Entry reveals: a clear rise, not a nudge. */
[data-sc-in], [data-sc-stagger] > * {
  transform: translate3d(0, 42px, 0);
  transition: opacity 820ms var(--bc-ease), transform 820ms var(--bc-ease);
}

/* ======================================================================
   Scenes. Without .bc-scenes (narrow screens, reduced motion) every scene is an
   ordinary stacked layout; with it the section pins and the page scroll drives it.
   ====================================================================== */
.bc-merge-stage, .bc-talk-stage, .bc-prem-stage, .bc-pan-stage {
  box-sizing: border-box;
  padding: 72px var(--bc-gutter);
}
.bc-merge-stage > .wp-block-columns, .bc-talk-stage > .wp-block-columns, .bc-prem-stage > .wp-block-columns {
  margin: 0; width: 100%; align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
}
.bc-scenes .bc-merge-stage, .bc-scenes .bc-talk-stage, .bc-scenes .bc-prem-stage, .bc-scenes .bc-pan-stage {
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(24px, 5vh, 64px);
}

/* ---- the three goals merge into one week ---- */
.bc-week { --lane: 5.6rem; position: relative; }
.bc-week-days, .bc-lane-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.bc-week-days {
  margin-bottom: 0.75rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--wp--preset--color--mist); text-align: center;
}
.bc-lanes { position: relative; height: calc(var(--lane) * 3); }
.bc-lane { position: absolute; left: 0; right: 0; height: var(--lane); }
.bc-lane:nth-child(1) { top: 0; }
.bc-lane:nth-child(2) { top: var(--lane); }
.bc-lane:nth-child(3) { top: calc(var(--lane) * 2); }
.bc-lane-label { display: block; height: 1.6rem; font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--cream); }
.bc-lane-label .dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; margin-right: 0.45rem; vertical-align: 0.05rem; }
.tok {
  display: flex; align-items: center; justify-content: center; height: 2.6rem; border-radius: 12px;
  font-size: 0.9rem; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(26, 38, 57, 0.15);
}
.bc-lane.race .dot, .bc-lane.race .tok { background: #6E8DAE; color: #1A2639; }
.bc-lane.weight .dot, .bc-lane.weight .tok { background: #C8D8E8; color: #1A2639; }
.bc-lane.steady .dot, .bc-lane.steady .tok { background: #C49A5E; color: #1A2639; }
.bc-merged-label { display: none; position: absolute; top: var(--lane); left: 0; height: 1.6rem; font-size: 0.95rem; font-weight: 700; color: var(--wp--preset--color--cream); }
.bc-week-why { margin-top: 1.5rem; color: var(--wp--preset--color--cream); max-width: 46ch; }
.bc-week-why span { font-weight: 600; }
/* Same meaning without movement: the lanes stay apart, each day's chosen session stays solid. */
.tok:not(.win) { opacity: 0.35; }
.bc-scenes .bc-week {
  --l: clamp(0, (var(--sc-p, 0) - 0.12) / 0.22, 1);   /* the sessions that lose step back */
  --m: clamp(0, (var(--sc-p, 0) - 0.34) / 0.3, 1);    /* the winning lanes converge */
  --e: clamp(0, (var(--sc-p, 0) - 0.68) / 0.12, 1);   /* the explanation arrives */
}
.bc-scenes .bc-merged-label { display: block; opacity: var(--m); }
.bc-scenes .bc-week-why { opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 12px)); }
.bc-scenes .bc-lane:nth-child(1) { transform: translateY(calc(var(--m) * var(--lane))); }
.bc-scenes .bc-lane:nth-child(3) { transform: translateY(calc(var(--m) * var(--lane) * -1)); }
.bc-scenes .bc-lane .bc-lane-label { opacity: calc(1 - var(--m)); }
.bc-scenes .tok:not(.win) { opacity: calc(1 - var(--l)); transform: scale(calc(1 - var(--l) * 0.12)); }
.bc-scenes .tok.win {
  transform: translateY(calc(var(--l) * -2px));
  box-shadow: inset 0 0 0 1px rgba(26, 38, 57, 0.15), 0 calc(var(--l) * 10px) calc(var(--l) * 22px) -12px rgba(0, 0, 0, 0.6);
}

/* ---- the sideways rail (home tabs, features gallery) ---- */
.bc-pan-stage { max-width: none !important; }
.bc-pan-rail, .bc-pan-rail.is-layout-flex {
  display: flex !important; flex-wrap: wrap !important; justify-content: center;
  gap: 3rem !important; max-width: none !important; margin: 0 !important; align-items: center;
}
.bc-pan-lead { width: min(26rem, 90vw); }
.bc-pan-end { width: min(20rem, 90vw); }
.bc-pan-card { width: min(17rem, 80vw); text-align: center; }
.bc-pan-card .wp-block-image { margin-inline: auto; }
.bc-panel { gap: 2.5rem; flex-wrap: wrap; justify-content: center; }
.bc-panel-info { width: min(24rem, 90vw); }
.bc-scenes .bc-pan-rail, .bc-scenes .bc-pan-rail.is-layout-flex {
  flex-wrap: nowrap !important; width: max-content !important; justify-content: flex-start;
  gap: clamp(2rem, 5vw, 5rem) !important; padding-inline: var(--bc-gutter);
}
.bc-scenes .bc-pan-rail > * { flex: 0 0 auto; }
.bc-scenes .bc-pan-card .wp-block-image img { width: min(17rem, calc(62svh * 0.46)) !important; }
.bc-scenes .bc-pan-card { opacity: clamp(0.55, calc(var(--sc-p, 0) * 4.2 - var(--i, 1) * 0.9 + 1.4), 1); }
.bc-pan-rail > .bc-pan-card:nth-child(2) { --i: 1; }
.bc-pan-rail > .bc-pan-card:nth-child(3) { --i: 2; }
.bc-pan-rail > .bc-pan-card:nth-child(4) { --i: 3; }
.bc-pan-rail > .bc-pan-card:nth-child(5) { --i: 4; }
.bc-scenes .bc-pan-gallery .bc-pan-rail, .bc-scenes .bc-pan-gallery .bc-pan-rail.is-layout-flex {
  gap: clamp(4rem, 9vw, 9rem) !important;
  padding-inline: max(var(--bc-gutter), calc(50vw - 9rem)) max(var(--bc-gutter), calc(50vw - 33rem));
}
.bc-scenes .bc-panel { flex-wrap: nowrap; }
.bc-scenes .bc-panel .wp-block-image img { width: min(17.5rem, calc((100svh - 9rem) * 0.46)) !important; }

/* ---- Coach: the conversation, one step per scroll beat ---- */
.bc-talk-left { position: relative; }
.bc-scenes .bc-talk-stage { --ph: min(58svh, 560px); }
.bc-scenes .bc-talk-left { height: 30rem; }
.bc-talk-step + .bc-talk-step { margin-top: 3rem; }
.bc-scenes .bc-talk-step { position: absolute; inset: 0 0 auto 0; }
.bc-scenes .bc-talk-step + .bc-talk-step { margin-top: 0; }
.bc-talk-phone, .bc-prem-phone { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.bc-talk-phone .wp-block-image, .bc-prem-phone .wp-block-image { width: 150px; margin: 0; }
.bc-talk-phone .wp-block-image img, .bc-prem-phone .wp-block-image img { width: 100%; height: auto; border-radius: 20px; border: 4px solid #0F1622; }
.bc-talk-nav { display: none; }
.bc-scenes .bc-talk-phone, .bc-scenes .bc-prem-phone {
  --w: calc(var(--ph, 520px) * 0.46); display: block; position: relative; width: var(--w); height: var(--ph, 520px);
  margin-inline: auto; border-radius: calc(var(--w) * 0.14); padding: calc(var(--w) * 0.03); background: #0F1622;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18), 0 28px 60px -22px rgba(0, 0, 0, 0.55); box-sizing: border-box;
}
.bc-scenes .bc-talk-phone .wp-block-image, .bc-scenes .bc-prem-phone .wp-block-image { position: absolute; inset: calc(var(--w) * 0.03); width: auto; }
.bc-scenes .bc-talk-phone .wp-block-image img, .bc-scenes .bc-prem-phone .wp-block-image img {
  width: 100%; height: 100%; object-fit: cover; border: 0; border-radius: calc(var(--w) * 0.115);
}
.bc-scenes .bc-talk-nav {
  display: flex; list-style: none; padding: 0; margin: 1.75rem 0 0; gap: 1.25rem; justify-content: center; font-size: 0.85rem; opacity: 0.9;
}
.bc-scenes .bc-talk-nav li { opacity: 0.45; padding-bottom: 4px; border-bottom: 2px solid transparent; transition: opacity 400ms var(--bc-ease); }
.bc-talk-stage[data-step="0"] .bc-talk-nav li:nth-child(1),
.bc-talk-stage[data-step="1"] .bc-talk-nav li:nth-child(2),
.bc-talk-stage[data-step="2"] .bc-talk-nav li:nth-child(3),
.bc-talk-stage[data-step="3"] .bc-talk-nav li:nth-child(4),
.bc-talk-stage[data-step="4"] .bc-talk-nav li:nth-child(5) { opacity: 1; border-bottom-color: #6E8DAE; font-weight: 600; }
.bc-scenes .bc-talk-stage { --k: clamp(0, (var(--sc-p, 0) - 0.8) / 0.12, 1); }
.bc-scenes .bc-talk-right { opacity: calc(1 - var(--k)); transform: translateY(calc(var(--k) * -24px)) scale(calc(1 - var(--k) * 0.06)); }

/* ---- Subscriptions: the Premium feature in front swaps the phone ---- */
.bc-prem-feat { margin-top: 1.75rem; }
.bc-scenes .bc-prem-stage { --ph: min(60svh, 560px); }
.bc-scenes .bc-prem-feat { opacity: 0.28; transition: opacity 500ms var(--bc-ease); }
.bc-prem-stage[data-feat="1"] .bc-prem-feats > .bc-prem-feat:nth-child(1),
.bc-prem-stage[data-feat="2"] .bc-prem-feats > .bc-prem-feat:nth-child(2),
.bc-prem-stage[data-feat="3"] .bc-prem-feats > .bc-prem-feat:nth-child(3) { opacity: 1; }
/* The three features share one viewport: only the one in front shows its detail. */
.bc-scenes .bc-prem-feat > :not(.wp-block-heading) { display: none; }
.bc-prem-stage[data-feat="1"] .bc-prem-feats > .bc-prem-feat:nth-child(1) > :not(.wp-block-heading),
.bc-prem-stage[data-feat="2"] .bc-prem-feats > .bc-prem-feat:nth-child(2) > :not(.wp-block-heading),
.bc-prem-stage[data-feat="3"] .bc-prem-feats > .bc-prem-feat:nth-child(3) > :not(.wp-block-heading) { display: block; }
.bc-scenes .bc-prem-feat { margin-top: 1rem; }
.bc-scenes .bc-prem-phone .wp-block-image { opacity: 0; transition: opacity 600ms var(--bc-ease); }
.bc-prem-stage[data-feat="0"] .bc-prem-phone .wp-block-image:nth-child(1),
.bc-prem-stage[data-feat="1"] .bc-prem-phone .wp-block-image:nth-child(2),
.bc-prem-stage[data-feat="2"] .bc-prem-phone .wp-block-image:nth-child(3),
.bc-prem-stage[data-feat="3"] .bc-prem-phone .wp-block-image:nth-child(4) { opacity: 1; }
.bc-scenes .bc-prem-media { transform: translateY(calc((0.5 - var(--sc-p, 0)) * 36px)) rotate(calc((var(--sc-p, 0) - 0.5) * 3deg)); }

@media (max-width: 781px) {
  .bc-merge-stage > .wp-block-columns, .bc-talk-stage > .wp-block-columns, .bc-prem-stage > .wp-block-columns { flex-direction: column; }
  .bc-week { --lane: 4.6rem; }
  .tok { height: 2.2rem; font-size: 0.68rem; border-radius: 8px; }
  .bc-week-days, .bc-lane-row { gap: 0.25rem; }
}