/* Ball Anatomy — scroll section on a PolaraDS dark surface.
   Tokens only (--pg-*); the one red in view is the spin-axis line. */
.ba {
  --ba-ink: var(--pg-color-white);
  --ba-dim: rgb(255 255 255 / 0.66);
  --ba-rule: rgb(255 255 255 / 0.22);
  background: var(--pg-bg-dark);
  color: var(--ba-ink);
}
.ba h2,
.ba h3 { color: inherit; }

.ba__intro {
  padding-block: var(--pg-space-8) var(--pg-space-7);
  text-align: center;
}
/* Desktop: the intro lies over the top of the first stop instead of pushing the stage down,
   so the page opens on the whole ball, centred, with the heading above it (v2 note 1). It
   scrolls away with the move to stop 1. On a phone the ball already sits right under it. */
@media (min-width: 900px) {
  .ba { position: relative; }
  .ba__intro {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding-block: var(--pg-space-6) 0;
    pointer-events: none;
  }
}
.ba__intro .pg-section-heading { margin-bottom: var(--pg-space-4); }
.ba__lead {
  max-width: 44ch;
  margin-inline: auto;
  font-size: var(--pg-text-lead);
  line-height: 1.5;
  color: var(--ba-dim);
}

.ba__track { position: relative; height: 800vh; }   /* one viewport per stop; JS sets the exact height */
.ba__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.ba__canvas { position: absolute; top: 0; left: 0; }
.ba__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ── Leaders: a black under-stroke keeps the white line legible over the white ball ── */
.ba-leader__under,
.ba-leader__over {
  fill: none;
  stroke-dasharray: 1;
  stroke-linejoin: round;
}
.ba-leader__under { stroke: var(--pg-color-black); stroke-width: 3; }
.ba-leader__over { stroke: var(--pg-color-white); stroke-width: 1; }
.ba-leader__dot { fill: var(--pg-color-black); stroke: var(--pg-color-white); stroke-width: 1.5; }

.ba-axis__under { stroke: var(--pg-color-black); stroke-width: 5; stroke-linecap: round; }
.ba-axis__over { stroke: var(--pg-accent); stroke-width: 2; stroke-linecap: round; }

/* ── Captions ── */
.ba__captions { margin: 0; padding: 0; list-style: none; }
.ba-caption {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(13rem, 19vw, 17rem);
  opacity: 0;
  will-change: transform, opacity;
}
.ba-caption[data-side='left'] { text-align: right; }
.ba-caption__index {
  display: block;
  margin-bottom: var(--pg-space-2);
  font-size: var(--pg-text-caption);
  color: var(--ba-dim);
}
.ba-caption__title { margin-bottom: var(--pg-space-2); line-height: 20px; }
.ba-caption__body { margin: 0; color: var(--ba-dim); }
.ba-caption[data-side='dock'] {
  padding-top: var(--pg-space-3);
  border-top: var(--pg-border-width) solid var(--ba-rule);
}

/* ── Robot-test stat ── */
.ba-stat {
  position: absolute;
  top: 0;
  left: 0;
  width: min(22rem, calc(100vw - 40px));
  margin: 0;
  opacity: 0;
}
.ba-stat__label {
  margin-bottom: var(--pg-space-3);
  font-size: var(--pg-text-caption);
  text-transform: uppercase;
  color: var(--ba-dim);
}
.ba-stat__rows { display: grid; gap: var(--pg-space-3); margin: 0; }
.ba-stat__row { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: var(--pg-space-3); }
.ba-stat__row dt { color: var(--ba-dim); }
.ba-stat__row dd { display: flex; align-items: center; gap: var(--pg-space-2); margin: 0; }
.ba-stat__bar {
  height: 6px;
  flex: 0 0 auto;
  width: calc(10rem * var(--ba-bar));
  background: var(--pg-color-gray-500);
  transform: scaleX(var(--ba-reveal, 0));
  transform-origin: left;
}
.ba-stat__row--polara dt,
.ba-stat__row--polara .ba-stat__value { color: var(--ba-ink); }
.ba-stat__row--polara .ba-stat__bar { background: var(--pg-color-white); }
.ba-stat__value { font-size: var(--pg-text-card-title); color: var(--ba-dim); }
.ba-stat__takeaway { margin: var(--pg-space-3) 0 0; color: var(--ba-dim); }
.ba-stat__takeaway strong { font-weight: 700; color: var(--ba-ink); }

/* ── Slogan ring (Polara's badge artwork, fitted to the resting ball) ── */
.ba-slogan {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* ── Spec strip + CTA ── */
.ba-specs {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--pg-space-6);
  opacity: 0;
}
.ba-specs__heading { margin: 0 0 var(--pg-space-2); font-size: var(--pg-text-caption); text-transform: uppercase; color: var(--ba-ink); }
.ba-specs__list { display: flex; margin: 0; }
.ba-specs__list > div { padding-inline: var(--pg-space-5); border-left: var(--pg-border-width) solid var(--ba-rule); }
.ba-specs__list > div:first-child { padding-left: 0; border-left: 0; }
.ba-specs__list dt { font-size: var(--pg-text-caption); text-transform: uppercase; color: var(--ba-dim); }
.ba-specs__list dd { margin: var(--pg-space-1) 0 0; font-size: var(--pg-text-h1); white-space: nowrap; }
.ba-specs__note { max-width: 28ch; margin: 0; color: var(--ba-dim); }
/* Desktop finale: a column beside the tee lockup. */
.ba-specs--column { flex-direction: column; align-items: flex-start; }
.ba-specs--column .ba-specs__list { flex-direction: column; gap: var(--pg-space-4); }
.ba-specs--column .ba-specs__list > div { padding: 0; border-left: 0; }

.ba__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ba-rule);
}
.ba__progress span {
  display: block;
  height: 100%;
  background: var(--pg-color-white);
  transform: scaleX(0);
  transform-origin: left;
}
/* Skip: bottom right of the stage. Cuts a playing move short, or jumps to the next caption. */
.ba__skip {
  position: absolute;
  right: var(--pg-space-5);
  bottom: var(--pg-space-5);
  z-index: 2;
  min-height: 36px;
  padding: 8px 14px;
  font-size: var(--pg-text-caption);
  text-transform: uppercase;
  --_bd: var(--ba-rule);
  --_bd-hover: var(--pg-color-white);
}
.ba__skip[hidden] { display: none; }
/* A move is waiting on frames: the progress rail breathes instead of the ball stuttering. */
.ba--loading .ba__progress { animation: ba-wait 1.2s var(--pg-ease) infinite alternate; }
@keyframes ba-wait { from { opacity: 1; } to { opacity: 0.25; } }

@media (width <= 899px) {
  .ba-specs { flex-direction: column; gap: var(--pg-space-4); }
  .ba-specs__list > div { padding-inline: var(--pg-space-3); }
  .ba-specs__list dd { font-size: var(--pg-text-card-title); }
}

/* ── ?static (QA): stacked key frames, nothing moves ── */
.ba--static .ba__track { height: auto; }
.ba--static .ba__stage { position: static; height: auto; overflow: visible; }
.ba--static .ba__canvas,
.ba--static .ba-slogan,
.ba--static .ba__lines,
.ba--static .ba__progress,
.ba--static .ba__skip { display: none; }
.ba--static .ba__captions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--pg-space-7) var(--pg-space-6);
  max-width: var(--pg-page-width);
  margin-inline: auto;
  padding: 0 var(--pg-page-gutter) var(--pg-space-7);
}
.ba--static .ba-caption,
.ba--static .ba-stat,
.ba--static .ba-specs { position: static; width: auto; opacity: 1; transform: none; }
.ba--static .ba-stat,
.ba--static .ba-specs { max-width: var(--pg-page-width); margin: 0 auto var(--pg-space-7); padding-inline: var(--pg-page-gutter); --ba-reveal: 1; }
.ba--static .ba-specs { flex-wrap: wrap; }
.ba--static .ba-specs__heading { flex-basis: 100%; }
.ba--static .ba-static__frame { width: 100%; height: auto; margin-bottom: var(--pg-space-4); }
.ba--static .ba__intro { position: static; padding-block: var(--pg-space-8) var(--pg-space-7); }