/* clubs-hero.css — For Clubs C01 (Alessandro, 8 Oct 2026: the Turntable,
   turning without stopping). Classes kh- (the hero frame and copy) and kt-
   (the turntable); behaviour in clubs.js.

   .kh          Ink, at least one screen tall under the header
   .kh__copy    label, the page's h1 (the italic phrase on its own line),
                lede and the one booking button; left half from 1024 px
   .kt          the turntable: every component of the page stands on one
                flat, wide Muted Plum ellipse (x radius 38cqw, y radius
                10cqw). Depth is scale and opacity only (no blur, no glow):
                the front piece at full size, its two neighbours opaque at
                scale 0.61, everything from the sides back hidden (a piece
                fades in between 90° and 53° as it comes forward), so only
                the group in front shows and nothing shows through a
                product. Widths keep the front piece the largest: a screen
                beside the front stays smaller than a front headset or case.
                While it turns, clubs.js plays the same transform and
                opacity as Web Animations (compositor-run) and sets the
                stacking order; the custom properties below hold the rest
                pose. The pieces are grouped by
                kind (training equipment, software, storage); clubs.js
                turns the ring slowly and without stopping (45° every 4 s)
                and names the front piece's group. No pause control
                (Alessandro, 8 Oct).
   Default style = the ring at rest with the Flux Pod in front (positions
   inline in the markup): the reduced-motion and no-JS composition. */
.kh {
  --kh-screen: calc(100svh - var(--header-h) - var(--review-offset, 0px));
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: var(--space-7) var(--space-8);
}
.kh__grid {
  min-height: calc(var(--kh-screen) - var(--space-7) - var(--space-8));
  align-items: center;
  row-gap: var(--space-7);
}
.kh__title {
  margin: 0 0 var(--space-5);
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.5rem);   /* 40 → 72 */
}
/* the italic phrase starts its own line; its own pitch (headings set .ed to line-height 0) */
.kh__title .ed { display: block; line-height: 1.06; }
.kh__copy .label { margin-bottom: var(--space-4); }
.kh__lede { max-width: 40ch; margin: 0 0 var(--space-6); }
.kh__actions { --gap: var(--space-3); }
.kh__copy > :last-child { margin-bottom: 0; }
.kh__stage { position: relative; width: 100%; justify-self: center; min-width: 0; }
@media (min-width: 1024px) {
  .kh__grid > .kh__copy { grid-column: 1 / span 6; grid-row: 1; }
  .kh__grid > .kh__stage { grid-column: 7 / span 6; grid-row: 1; }
}
/* phones and tablets: the copy and the turntable stay one group, centred in
   the opening (a tall screen's spare height goes above and below the pair,
   not into the gap between them) */
@media (max-width: 1023px) {
  .kh__grid { align-content: center; }
}
/* landscape phones (wide but short): the copy and the turntable side by
   side, so the opening is not two and a half screens tall; the heading at
   the phones' size so its first line still holds "Add Brain-Body" */
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 540px) {
  .kh { padding-block: var(--space-6) var(--space-7); }
  .kh__grid { min-height: calc(var(--kh-screen) - var(--space-6) - var(--space-7)); }
  .kh__grid > .kh__copy { grid-column: 1 / span 4; grid-row: 1; }
  .kh__grid > .kh__stage { grid-column: 5 / span 4; grid-row: 1; }
  .kh__title { font-size: clamp(2.5rem, 1rem + 3.6vw, 3rem); }   /* 40 → 48 */
}

/* ---- the turntable ---- */
.kt { max-width: 620px; }
.kt figure { margin: 0; }
.kt img { display: block; width: 100%; height: auto; }
.kt-ring {
  --kt-cy: 70%;                        /* the ring's centre line */
  position: relative;
  aspect-ratio: 10 / 5.4;
  container-type: inline-size;
}
.kt-track {
  position: absolute;
  left: 50%;
  top: var(--kt-cy);
  width: 76cqw;
  height: 20cqw;
  translate: -50% -50%;
  border: 1px solid var(--on-line);
  border-radius: 50%;
}
/* each piece stands on the ring: bottom centre at (--x, --y) cqw from the
   centre, scaled from its foot */
.kt-item {
  --x: 0; --y: 0; --s: 1; --o: 1; --z: 1;
  position: absolute;
  left: 50%;
  top: var(--kt-cy);
  width: var(--kt-w, 40%);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqw)) scale(var(--s));
  opacity: var(--o);
  z-index: var(--z);
}
.kt.is-live .kt-item { will-change: transform, opacity; }   /* layers only while clubs.js turns the ring */
/* 13 Oct 2026 (phone scroll speed): touch screens at 2x and up keep no
   standing layers; the ring's own compositor animations layer the pieces
   while they turn, drawn the same (measured at 2–3x, turning and paused).
   The standing layers left blank tiles further down the page in most phone
   scroll tests. Below 2x they draw the pieces differently, so they stay */
@media (hover: none) and (min-resolution: 2dppx) {
  .kt.is-live .kt-item { will-change: auto; }
}
.kt-item--pod          { --kt-w: 40%; }
.kt-item--headset      { --kt-w: min(36%, 240px); }
.kt-item--tablet       { --kt-w: 48%; }
.kt-item--screen       { --kt-w: 48%; }
.kt-item--phone        { --kt-w: 26%; }
.kt-item--case-pods    { --kt-w: 46%; }
.kt-item--case-tablets { --kt-w: 36%; }
/* the static composition (reduced motion, no JS): the pieces not shown at
   rest have no box, so their lazy images are not fetched */
.kt:not(.is-live) [data-kt-back] { display: none; }
/* the Workout Summary: its top part in a phone-height window (as C03) */
.kt-phone { display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 14px; outline: 1px solid var(--on-control); outline-offset: -1px; }

/* the front piece's group, in the page's own words */
.kt-cap { margin: var(--space-3) 0 0; text-align: center; font-size: var(--text-ui); font-weight: var(--weight-strong); line-height: 1.3; color: var(--on-text); }
.kt-cap > span { display: inline-block; text-wrap: balance; transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out); }
.kt-cap.is-swap > span { opacity: 0; transform: translateY(6px); }
@media (max-width: 1023px) {
  .kt { max-width: 560px; }
}

/* ---- arrival: the copy rises, then the turntable (CSS only, from first
   paint; the end state is each element's own style) ---- */
@keyframes kh-rise { from { opacity: 0; transform: translateY(var(--travel-expressive)); } }
@media (prefers-reduced-motion: no-preference) {
  .kh-anim { animation: kh-rise 640ms var(--ease-out) both; animation-delay: var(--kh-delay, 0ms); }
  .kh__copy > :nth-child(2) { --kh-delay: 80ms; }
  .kh__copy > :nth-child(3) { --kh-delay: 220ms; }
  .kh__copy > :nth-child(4) { --kh-delay: 300ms; }
  .kh__stage.kh-anim { animation-duration: 1000ms; --kh-delay: 260ms; }
}