/* Variant E, Loaded: a full-bleed bar at true proportions. 190 kg is on it; scrolling adds the 5s and the 2.5s,
   the readout prints 200 then 205, and the sheet cell and the Carnet log fill at the same beats.
   Default CSS is the end state (205 loaded, readout 205, three rows). Motion is added only when the browser has
   scroll timelines, the reader allows motion and the viewport is tall enough for the sticky panel. */

.stage { overflow-x: clip; }
.hero { padding-block: clamp(20px, 2.5vw, 28px) clamp(12px, 1.5vw, 20px); display: grid; gap: clamp(10px, 1.5vw, 16px); }
.hero h1 { font-size: clamp(2.9rem, 1rem + 7.2vw, 6.6rem); line-height: .92; letter-spacing: -.035em; max-width: none; }
.hero-row { display: grid; gap: 16px 40px; align-items: start; }
@media (min-width: 900px) { .hero-row { grid-template-columns: minmax(0, 60ch) auto; } }
.hero .lede { max-width: 60ch; }
.hero .invite-actions { display: grid; gap: 8px; justify-items: start; }

/* ---------------------------------------------------------------- the bar, iron on putty */
.proof { display: grid; gap: clamp(10px, 1.5vw, 18px); }
.bar { display: block; width: 100%; height: clamp(200px, 19vw, 270px); overflow: visible; }
/* Chrome in two flat tones on putty: steel, a lighter gleam along the top edge, darker collars; the knurl is a
   crosshatch pattern, the IPF ring marks are smooth and lighter, the bands are the plate red. */
.bar .shaft, .bar .sleeve { fill: #938E84; }
.bar .gleam { fill: #C9C5BB; }
.bar .knurl { fill: url(#knurl); }
.bar .ring { fill: #B8B3A8; }
.bar .band { fill: #B5232B; }
.bar .collar { fill: #6F6B63; }
/* Eleiko IPF colours. The plate red is the disc's own, a step darker and bluer than the signal red of the key. */
.bar .p rect { stroke-width: 1.5; }
.bar .k25 rect, .bar .k2 rect { fill: #B5232B; stroke: #7A151B; }
.bar .k10 rect { fill: #1F8A45; stroke: #145C2E; }
.bar .k5 rect { fill: var(--paper); stroke: var(--key-edge); }

.below { display: grid; gap: clamp(16px, 3vw, 32px); align-items: start; }
@media (min-width: 900px) { .below { grid-template-columns: auto 1fr; } }
.readout { display: grid; grid-template-columns: max-content max-content; align-items: baseline; font-size: clamp(5.5rem, 2rem + 8vw, 9rem); line-height: .85; letter-spacing: -.05em; }
.readout span { grid-area: 1 / 1; }
.lead { display: grid; gap: 12px; align-content: start; }
.lead .who { max-width: 34ch; }
.readout .v1, .readout .v2 { opacity: 0; }
.readout small { grid-area: 1 / 2; font-size: .22em; font-weight: 600; letter-spacing: 0; font-variation-settings: "wdth" 100; margin-left: .15em; align-self: end; }

/* ---------------------------------------------------------------- the two records, with their mess */
.records { display: grid; gap: clamp(14px, 2vw, 28px); align-items: start; }
@media (min-width: 720px) { .records { grid-template-columns: 1fr 1fr; } }
.record { display: grid; gap: 8px; }
.record .frame { border-radius: 6px; }
.sheet { font: 12px/1.3 Arial, Helvetica, sans-serif; color: #202124; background: #fff; }
.sheet table { border-collapse: collapse; table-layout: fixed; width: 100%; }
.sheet th, .sheet td { border: 1px solid #e2e3e3; padding: 3px 5px; height: 21px; vertical-align: top; overflow: hidden; white-space: pre-line; text-align: left; font-weight: 400; }
.sheet th { background: #f8f9fa; color: #5f6368; text-align: center; font-size: 11px; }
.sheet th.r { width: 22px; }
.sheet .head td { font-weight: 700; }
.sheet .cursor { outline: 2px solid #1a73e8; outline-offset: -2px; }
.log { padding: 6px 14px 10px; display: grid; }
.log .row { display: grid; grid-template-columns: 1.4em 1fr 2.4em auto; align-items: baseline; gap: 12px; padding-block: 5px; border-top: 1px solid var(--rule); }
.log .row:first-child { border-top: 0; }
.log .row > span:first-child { color: var(--ink-2); font-size: .9rem; }
.log .w { font-weight: 850; font-variation-settings: "wdth" 125; letter-spacing: -.03em; font-size: 1.45rem; }
.log .w small { font-size: .7rem; font-weight: 600; letter-spacing: 0; font-variation-settings: "wdth" 100; }
.log .note { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: .95rem; }

/* ---------------------------------------------------------------- motion, scroll driven */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-height: 600px) {
    .stage { height: 170vh; view-timeline: --stage block; --start: 40%; }
    .panel { height: 100%; }
    .proof { position: sticky; top: 8px; }
    .bar .go-5, .bar .go-25, .bar .barbell, .readout span, .log .r2, .log .r3, .sheet .cursor span {
      animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: --stage; animation-range: contain var(--start) contain 85%;
    }
    .bar .l { --off: -600px; }
    .bar .r { --off: 600px; }
    .bar .go-5 { animation-name: go-5; }
    .bar .go-25 { animation-name: go-25; }
    .bar .barbell { animation-name: dip; }
    .readout .v1 { animation-name: show-to-45; }
    .readout .v2 { animation-name: show-45-85; }
    .readout .v3 { animation-name: show-from-85; }
    .log .r2, .sheet .c2 { animation-name: at-46; }
    .log .r3, .sheet .c3 { animation-name: at-86; }
    /* The 190 seats itself once, on load: three 25s and a 10 per side, 120 ms apart, hard stop. */
    .bar .seat { animation: seat 520ms cubic-bezier(.25, 1, .35, 1) both; }
    .bar .seat-2 { animation-delay: 120ms; }
    .bar .seat-3 { animation-delay: 240ms; }
    .bar .seat-4 { animation-delay: 360ms; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) { .stage { --start: 25%; } }
  /* Where headline, bar and records fit one screen, the whole panel sticks and the headline stays in view. */
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) and (min-height: 820px) {
    .stage { height: 160vh; --start: 0%; }
    .panel { position: sticky; top: 0; height: auto; min-height: 100dvh; }
    .proof { position: static; }
  }
}
@keyframes seat { from { transform: translateX(var(--off)); } to { transform: translateX(0); } }
/* Each plate travels the sleeve, lands, and the bar dips 6 units and recovers: the hard stop. */
@keyframes go-5 { 0%, 34% { transform: translateX(var(--off)); } 45%, 100% { transform: translateX(0); } }
@keyframes go-25 { 0%, 74% { transform: translateX(var(--off)); } 85%, 100% { transform: translateX(0); } }
@keyframes dip { 0%, 45%, 50%, 85%, 90%, 100% { transform: translateY(0); } 46.5% { transform: translateY(6px); } 86.5% { transform: translateY(7px); } }
@keyframes show-to-45 { 0%, 44.9% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes show-45-85 { 0%, 44.9% { opacity: 0; } 45%, 84.9% { opacity: 1; } 85%, 100% { opacity: 0; } }
@keyframes show-from-85 { 0%, 84.9% { opacity: 0; } 85%, 100% { opacity: 1; } }
@keyframes at-46 { 0%, 45.9% { opacity: 0; } 46%, 100% { opacity: 1; } }
@keyframes at-86 { 0%, 85.9% { opacity: 0; } 86%, 100% { opacity: 1; } }

/* ---------------------------------------------------------------- the four ideas, the invite */
.section.idea { padding-block: clamp(40px, 5vw, 56px); }
.idea .cols { align-items: center; }
.idea .phone { max-width: 270px; justify-self: center; }
.idea .frame { max-width: 560px; }
@media (min-width: 820px) {
  .idea figure { justify-self: end; }
  .idea .flip figure { order: -1; justify-self: start; }
}
/* The review breaks the text-left, frame-right rhythm: heading and copy over a full-width frame. */
.idea.wide .head { align-items: end; }
.idea.wide .frame { max-width: none; }
.frame.pad { padding: clamp(6px, 1vw, 12px); background: var(--chassis); }
/* Below 820 the <picture> serves the coach's phone review; frame it like the other phones. */
@media (max-width: 819px) { .review-frame { padding: 0; border: 2px solid var(--ink); border-radius: 36px; max-width: 320px; justify-self: center; } }
.qa { display: grid; gap: 20px; }
.qa dl { display: grid; gap: 0; margin: 0; max-width: 70ch; }
.qa dl > div { padding-block: 14px; border-top: 1px solid var(--rule); }
.qa dt { font-weight: 700; }
.qa dd { margin: 4px 0 0; color: var(--ink-2); }
.invite h2 { margin-bottom: 4px; }