/* 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;
}
.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); }

/* ── 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__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); }
.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;
}
/* 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); }
}

/* ── Reduced motion: 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 { 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-static__frame { width: 100%; height: auto; margin-bottom: var(--pg-space-4); }