/* ============================================================ THE PAYOFF — .cs-shortcut, performed by scroll. (The statement's chip and button grew in the same way for a while; removed on request.) Loaded after styles-sidebar.css. Nothing in here is required for either section to be correct; see the safety note below. THE ARGUMENT, AND WHY THE MOTION IS THIS MOTION The band's whole claim is that twenty-one steps became four. What a reader actually gains when seventeen steps are removed is ROOM, so room is what the motion produces. The four plates arrive as a tight, slightly small, overlapping cluster — a stack that hasn't been dealt yet — and as you scroll they walk apart and come up to full size. The band widens under you. The subtraction is performed as space appearing, not as a counter ticking down from 21, which is the corny version of the same idea and which the band's own stylesheet already rejects for its twenty-one-step sibling ("no pin, no scrub, no counter ticking up"). WHY NOT THE REFERENCE'S BLUR Caliper's signature is media resolving from blurred-and-scaled to sharp, and the reason it is good is that a blurred thing is still VISIBLY THERE — it degrades safely in a way an opacity fade does not. This page bans non-compositor properties, so `filter: blur()` is out. The property that survives the ban is the one that carries the same guarantee: at every frame of this motion the four plates are fully opaque, fully sharp and fully readable. Only their SPACING is unresolved. That is the same bargain the blur makes, paid for in transform. WHY THIS CANNOT HIDE ANYTHING — the rule GSAP was removed for Every custom property below is registered with an initial-value of 1, which means FINISHED. If payoff.js never loads, fails to parse, or bails out, --pf-row is 1, --pf-crowd is 0, every transform resolves to the identity, and both sections render exactly as they do today. If @property is unsupported, var(--pf-row) is an invalid substitution, the whole `transform` declaration is dropped at computed-value time, and the result is again the finished layout. There is no code path in this file that produces opacity 0, a zero scale, or an off-screen offset. It can only ever move something that is already right. ============================================================ */ @property --pf-row { syntax: ""; inherits: true; initial-value: 1; } @property --pf-head { syntax: ""; inherits: true; initial-value: 1; } /* Everything is inside `no-preference`. Under `reduce` these rules do not exist at all, so the sections keep the stylesheet's own geometry rather than a JS-disabled approximation of it. payoff.js bails out separately — belt and braces, because the two can disagree (a user who changes the setting after load re-evaluates the media query but not the guard). */ @media (prefers-reduced-motion: no-preference) { /* -------------------------------------------------------- THE REBUILT FUNNEL — the four plates open out --pf-crowd is the inverse of progress: 1 while the band is still below the fold, 0 once it has settled. Every value below is multiplied by it, so "no progress information" and "finished" are the same expression. -------------------------------------------------------- */ .cs-shortcut .cs-shortcut-row { --pf-crowd: calc(1 - var(--pf-row)); /* Per-column convergence, as a percentage of a PLATE'S OWN WIDTH. A percentage in translate resolves against the element's border box, so this is automatically correct at every viewport width and needs no breakpoint of its own. 26% is chosen from the geometry, not by eye. At 1440px a column is 290px and the grid gap is 26px, so neighbours sit 316px apart. Closing 26% of 290px (75px) leaves 241px between plates that are 273px wide after the shrink below — about 32px of tuck. Enough to read as a stack, not enough to bury a screen. */ --pf-step: 26%; /* The plates arrive slightly UNDER size and grow into place. Shrink rather than swell, deliberately: the row is 663px tall at 1440px, and a 6% swell about the centre would push each image 20px down over its own caption. Shrinking cannot collide with anything, and growing-to-size is the right direction for an arrival anyway. */ --pf-shrink: 0.06; /* the whole plate, caption included, rises the last few pixels */ --pf-lift: 18px; } /* A default, so a fifth plate would simply not move rather than invalidating the calc for the four that exist. */ .cs-shortcut .cs-shortcut-step { --pf-f: 0; } /* Shingled left over right, the way a stack of paper spreads under a hand. The alternative — DOM order, so the LAST plate sits on top — gives an inconsistent tuck: plate 1 slides under 2 on its right while plate 4 covers 3 on its left. One direction throughout reads as one object. A transform makes each step a stacking context, so z-index applies with no positioning. */ .cs-shortcut .cs-shortcut-step:nth-child(1) { --pf-f: 1.5; z-index: 4; } .cs-shortcut .cs-shortcut-step:nth-child(2) { --pf-f: 0.5; z-index: 3; } .cs-shortcut .cs-shortcut-step:nth-child(3) { --pf-f: -0.5; z-index: 2; } .cs-shortcut .cs-shortcut-step:nth-child(4) { --pf-f: -1.5; z-index: 1; } .cs-shortcut .cs-shortcut-step { transform: translate3d(0, calc(var(--pf-crowd) * var(--pf-lift)), 0); } /* The horizontal convergence sits on the IMAGE, not on the step, so the four captions hold their grid positions throughout and the plates move against them. That is what keeps the numbering readable: 01–04 stay put as a ruler while the screens slide over each other, and no two caption strings can ever collide. NOTE ON OVERFLOW: every plate moves INWARD, and the convergence (max 1.5 x 26% = 39% of a plate) is larger than the outward reach of the shrink (which is negative — the plate gets smaller). So the row's outer edges only ever move further inside their resting bounds. Horizontal overflow is impossible by construction, at any viewport width, without measuring anything. */ .cs-shortcut .cs-shortcut-step img { transform: translate3d(calc(var(--pf-f) * var(--pf-step) * var(--pf-crowd)), 0, 0) scale(calc(1 - var(--pf-shrink) * var(--pf-crowd))); } /* ---- the 04, removed ---- The numeral had its own version of the row's gesture on an earlier clock (--pf-head), so the head settled and then the row opened beneath it. The .cs-shortcut-sub that carried it — the 04 and the "No card typed" note — was deleted from the markup in rev 7, so the transform had nothing to move and is gone with it. --pf-hcrowd stays on the head. It is declared, not consumed, here; it costs nothing, it is the head's half of a pair whose other half can come back, and --pf-head is still driven by payoff.js against this exact selector (see the map at the top of payoff.js), so the element is still a live target rather than a dead one. */ .cs-shortcut .cs-shortcut-head { --pf-hcrowd: calc(1 - var(--pf-head)); } /* -------------------------------------------------------- THE FINDING — the sentence sets itself The statement is a display line with two objects wedged into it: a photograph of the person, and the product's actual call to action. They are the sentence's nouns. The type is already set; the two objects arrive a beat under size and grow up out of the baseline into their slots as the statement reaches reading height. The sentence composes itself while you look at it. They carry separate clocks, chip then button, which is the order the sentence is read in and the same two-window pattern the chart uses for its lead and its supporting lines. -------------------------------------------------------- */ } /* ---- two up, on a phone ---- Below 900px the row is a 2x2 grid, so "converge toward the centre of four" is the wrong geometry: plates 3 and 4 would be pulled toward a centre that is a row above them. Each PAIR closes on itself instead. --pf-step deliberately does NOT change. It was 30% here for a while, on the reasoning that the factor halves (0.5 rather than 1.5) so the step should grow to compensate. Measured, that produced an 82px tuck on a 403px plate at 900px — 22%, against 11% on the desktop row — and a quarter of a phone screen buried is a different, worse effect than the one the desktop band has. At the shared 26% the tuck comes out at 17% (900px) and 11% (375px), which brackets the desktop value from either side, because the grid gap is a fixed 14px here and eats a larger share of a smaller plate. One number for every width. The travel IS smaller on two columns and that is correct rather than a compromise: two plates in a row can only converge as far as the room between them, and a smaller screen should get a smaller move. The lift comes down to 12px for the same reason. */ @media (prefers-reduced-motion: no-preference) and (max-width: 900px) { .cs-shortcut .cs-shortcut-row { --pf-lift: 12px; } .cs-shortcut .cs-shortcut-step:nth-child(1), .cs-shortcut .cs-shortcut-step:nth-child(3) { --pf-f: 0.5; } .cs-shortcut .cs-shortcut-step:nth-child(2), .cs-shortcut .cs-shortcut-step:nth-child(4) { --pf-f: -0.5; } }