/* ============================================================= Chemist2U — entrance motion Elements arrive in the order they should be read. Every move is transform + opacity only, so nothing here can move the layout: the page has its final geometry from first paint and the CLS contribution is zero. ── Two mechanisms, and why ────────────────────────────────── THE HERO PLAYS ITSELF. Plain CSS animations with a delay, no script involved. `animation-fill-mode: both` holds each element in its from-state until its delay elapses, so the pre-hidden state IS the animation — there is no separate "hide it first" rule to get stranded if a script never arrives, and no window in which unstyled content can flash. Above-the-fold content can therefore never be stuck invisible, which is the one failure mode worth engineering out. EVERYTHING ELSE WAITS TO BE SEEN. c2u-motion.js marks a section `is-armed` (pre-hidden) and adds `is-in` when it scrolls into view; the transition is declared on the `is-in` state only, so arming is instant and only the reveal animates. The script arms nothing that is already on screen, so a section can only be hidden while it is out of sight — and with no script at all, nothing is ever armed and the page is simply static. That is what removes the need for the fallback timers this kind of effect usually drags along. ── Where the choreography lives ───────────────────────────── Here, not in the parts. A part marks WHAT can move (a handful of data-c2u-* attributes); this file decides WHEN, because the order of reading is a property of the page composition rather than of any one component. Delays are written as a single custom property per element so a section's timing can be read top to bottom as a score. Durations and offsets are ported from the homepage motion so the two pages feel like one site: 700ms masked rises, ~650ms fades, 16–28px of travel, and the two GSAP power curves — power3.out as --c2u-ease-rise, power2.out as --c2u-ease. ============================================================= */ /* ── Shared vocabulary ─────────────────────────────────────────── Three moves, one delay knob. A section sets --c2u-mo-d per element and otherwise leaves these alone. rise masked slide up from behind the text's own box up fade + travel up (the workhorse) pop fade + scale, for small marks like the step dots */ .c2u-page { /* Travel distances. Small enough that a fade still reads as the main event — past ~32px the movement starts to draw the eye to itself rather than to the words. */ --c2u-mo-up: 24px; --c2u-mo-up-sm: 16px; --c2u-mo-up-lg: 28px; } /* ── Hero ──────────────────────────────────────────────────────── Self-playing. The score, in the order the hero should be read: 0ms eyebrow "Pharmacy Partners" — sets the audience 120ms headline one sentence at a time, masked rise 500ms photos the promise, staggered 80ms apart 760ms subhead the detail 900ms cta the ask 1100ms circular the flourish, once the work is done The photo beat is deliberately early. The wide photo is this page's LCP element, and an entrance animation defers LCP by exactly as long as it withholds it — so everything above it is compressed and overlapped to buy the sequence back. Moving the photos later is not a free aesthetic choice; it is spending Largest Contentful Paint. Measure before changing 500ms. */ .c2u-hero [data-c2u-mo] { animation-duration: var(--c2u-enter); animation-timing-function: var(--c2u-ease); animation-delay: var(--c2u-mo-d, 0ms); /* both: backwards fill is what pre-hides the element during the delay, forwards fill is what holds it once it has landed. */ animation-fill-mode: both; } .c2u-hero [data-c2u-mo="up"] { animation-name: c2u-mo-up; } .c2u-hero__eyebrow { --c2u-mo-d: 0ms; } /* Headline — one mask per sentence, each sliding its own line up from behind the one above it. Targeted structurally rather than by data-c2u-mo, because the element that moves is not the element that owns the timing: the delay is set on the mask, where the nth-child count is, and the inner span inherits it. c2u_lines() emits the pair for every heading on the site, so the animation is scoped to the hero's own headline and nothing else picks it up. */ .c2u-hero__headline .c2u-line { --c2u-mo-d: 120ms; } .c2u-hero__headline .c2u-line:nth-child(2) { --c2u-mo-d: 240ms; } .c2u-hero__headline .c2u-line:nth-child(3) { --c2u-mo-d: 360ms; } .c2u-hero__headline .c2u-line:nth-child(4) { --c2u-mo-d: 480ms; } .c2u-hero__headline .c2u-line--hard .c2u-line__in { animation: c2u-mo-rise var(--c2u-enter-slow) var(--c2u-ease-rise) var(--c2u-mo-d) both; } .c2u-hero__media { --c2u-mo-d: 500ms; } .c2u-hero__media:nth-of-type(2) { --c2u-mo-d: 580ms; } .c2u-hero__media:nth-of-type(3) { --c2u-mo-d: 660ms; } .c2u-hero__subhead { --c2u-mo-d: 760ms; --c2u-mo-up: var(--c2u-mo-up-sm); } .c2u-hero__actions { --c2u-mo-d: 900ms; --c2u-mo-up: var(--c2u-mo-up-lg); } /* The ring is already positioned by a transform of its own, so it cannot use the shared keyframes — a second transform would drop the first and the ring would jump down onto the photo. Its keyframes restate the offset and scale on top of it. */ .c2u-hero__circular { --c2u-mo-d: 1100ms; animation: c2u-mo-circular var(--c2u-enter-slow) var(--c2u-ease) var(--c2u-mo-d) both; } /* ── Masked line rise ──────────────────────────────────────────── The line's own box is the mask and an inner span does the travelling, so the heading occupies its full height from first paint whether or not the text has arrived in it yet. clip-path, not overflow:hidden, and the difference matters. The display scale runs at line-height 1.04 — tighter than the face's own ascent plus descent — so every line's glyphs already paint several pixels outside their box, and clipping at the box edge would shave the tops off the capitals and the tails off the g's and y's. The mask has to be allowed to leak. overflow:hidden can only be given that allowance as padding, which the line box then has to be talked back out of with a matching negative margin. That does hold the heading's height — but only because the last line's negative margin collapses out through the h1, so the whole thing quietly stops working the day the h1 gains a bottom padding or becomes a formatting context. clip-path takes no part in layout at all: the box is the box, and the clip region is simply drawn 0.15em larger. Only ever applied to hard lines. Below 767px a soft .c2u-line falls back to display:inline (see c2u-base.css) and an inline box has no box to clip against, so the mask would silently stop working while the inner span kept its offset — that is not a degraded headline, it is a missing one. */ .c2u-hero__headline .c2u-line--hard { display: block; /* Vertical: past the descenders. Horizontal: wide open — nothing travels sideways here, so there is nothing to hide, and a clip at the text edge would only put the last glyph of a tracked line at risk. */ clip-path: inset(-0.15em -0.5em); } .c2u-hero__headline .c2u-line__in { display: block; } /* ── Word by word ──────────────────────────────────────────────── The masked rise again, but cut at the word rather than the line: every word rises out of its own box, one after the next. Used by parts/hero-statement.php, which plays it on load, and by parts/statement.php, which waits to be scrolled to. The mask and the delay are shared; only the trigger differs, and the two blocks after this one are that difference. THE MASK IS THE POINT here, so it is worth being exact about where its edge falls. clip-path, not overflow:hidden, for the reason the line mask gives above and one more of its own. Vertically the clip is at the box edge, inset 0 — no bleed, so the edge the words rise past is a hard one. That is only safe while the leading stays at or above about 1.21: the line box is then taller than Inter's ascent plus descent and the deepest descender sits inside it. Both callers are written to that — 1.2 on the headline, 1.3 on the paragraph (see c2u-components.css) — and the display scale's own 1.04 would shave the tails off the g's and y's. Leading and this inset are one decision, in two files. Horizontally it is wide open, because the tracking is negative: it is applied after the last glyph too, so a word's box is fractionally narrower than its ink and a clip at the box edge would trim the final letter of every word. Both callers run -0.05em, the display figure. overflow:hidden could express neither half. It clips on all four sides at once, and it changes an inline-block's baseline to its bottom margin edge, which would need the whole padding and negative-margin correction the line mask's note describes. Timing is here and position is in the markup: --c2u-word-i counts the words straight through, and --c2u-line-i counts the lines where a caller has them, so this file can express a stagger whose length it does not know. A caller with no lines contributes nothing through the gap term and its words simply run on — which is why the paragraph needs no rule to say it has no pause between sentences. Because the word count runs straight through a break, the gap is a pause on top of one that is already there, and no value here has to change when the copy does. */ .c2u-word { display: inline-block; clip-path: inset(0 -0.5em); } .c2u-word__in { display: inline-block; /* One expression, three knobs, both callers. Held as a custom property because one caller spends it as an animation-delay and the other as a transition-delay. */ --c2u-word-delay: calc( var(--c2u-word-lead, 0ms) + var(--c2u-word-i, 0) * var(--c2u-word-step, 120ms) + var(--c2u-line-i, 0) * var(--c2u-line-gap, 0ms) ); } /* ── Statement hero — plays itself ─────────────────────────────── parts/hero-statement.php. THE STEP IS SET BY READING, not by the animation. At 45ms a word arrived every frame or two and the line read as one swipe across the page — the eye followed the movement rather than the words. 120ms is close enough to a comfortable reading cadence that the sentence assembles at the speed it is being taken in. Each word still takes --c2u-enter-slow to travel, which is more than the step, so four or five are in flight at once. That overlap is what keeps this a wave rather than a metronome; dropping the travel to under the step would make each word land before the next left, which reads as stamping. THE GAP HAS TO CLEAR THAT OVERLAP to be heard at all. It is an offset on when the next sentence STARTS, and every word is still moving for --c2u-enter-slow after its own start — so a gap shorter than the travel does not produce a pause, it only thins the overlap, and the second sentence opens while the first is still settling. That is what 400ms did here: sentence one's last word landed at 1.9s and sentence two had already begun at 1.7s. 900ms puts the break past the travel with room to spare — the first sentence is whole and still for about a third of a second before the second one moves. Anything under ~750ms for this copy is a shorter overlap wearing a pause's name. The run is about 3.5s end to end, against 1.8s when this was first built. That is a real cost and worth knowing where it lands: the headline is the LCP element now that the hero has no photographs, and anyone who scrolls in the first second sees a part-built sentence. The lead holds against the first of those — the opening words are on screen at 120ms whatever the rest does — but the last word is now 2.8s out. Two numbers move it: --c2u-word-step for the pace, --c2u-line-gap for the break. */ /* On the section rather than on the headline, because the photo strip below is timed off the same three numbers and is not inside the heading. They still reach the words by inheritance, which is how they were reaching them before. */ /* parts/hero-arc.php plays the identical entrance and is named alongside rather than given a block of its own: the pace above is a reading cadence, not a property of either composition, and two copies of it would drift apart the first time one is retuned. Its headline is a plain string, so it reports one line and the gap term below contributes nothing to it — the pause costs it neither a rule nor a millisecond. */ .c2u-hero--statement, .c2u-hero--arc { --c2u-word-lead: 120ms; /* when the first word starts */ --c2u-word-step: 120ms; /* word to word — reading cadence */ --c2u-line-gap: 900ms; /* extra pause at each sentence break */ } .c2u-hero--statement .c2u-word__in, .c2u-hero--arc .c2u-word__in { animation: c2u-mo-rise var(--c2u-enter-slow) var(--c2u-ease-rise) both; animation-delay: var(--c2u-word-delay); } /* The line mask above would clip these words a second time, 0.15em lower and to no purpose — the word boxes already hide everything that has not arrived. Dropped so there is one mask with one edge, and so a line that ever needs to overflow can. */ .c2u-hero--statement .c2u-hero__headline .c2u-line--hard { clip-path: none; } /* ── Statement hero — the photographs ──────────────────────────── parts/hero-statement.php's strip. Two things happen to it: it arrives, and then it drifts. They share nothing but the element. ARRIVING. The row waits for the whole headline and then comes in one photograph at a time, at --c2u-tile-step. That step is the headline's own pace multiplied, so the row is the same cadence read slower rather than a second rhythm — see the tile rule below for why the two are not the same number. The wait is CALCULATED, not written down, and that is the whole point of the block. The moment the headline finishes is the last word's delay plus its travel: lead + (words - 1) x step + (lines - 1) x gap + travel Both counts ride in from PHP on the section, from the same c2u_words() call that emitted the spans — so the copy can gain a word or lose a sentence and the photographs still land the instant the text settles, with nothing here to re-tune. Written as a constant it would be right once, for one headline. Minus one on each, because both are counts of BOXES and what is wanted is the offset of the LAST one: sixteen words are fifteen steps apart, two sentences have one break between them. A plain string headline reports one line and contributes nothing, which is the same thing the gap term already does for it. WHAT IT COSTS. The strip's first tile is about 3.5s out for this copy and the last about 4s, which is a long time for content above the fold — deliberately so, since the whole ask is that the statement is made before it is illustrated. It is not paid for in Largest Contentful Paint: the headline is a full-width two-line block and every tile is a fifth of the row, so LCP is the heading either way, and it was already landing at 3.5s before these existed (see the note above). What it does cost is anyone who scrolls in the first four seconds, who will scroll past photographs that have not arrived — and the row now takes longer than that to finish, since --c2u-tile-step spreads it. --c2u-word-step brings the whole section in sooner and moves the headline with it; --c2u-tile-step tightens the row alone. */ .c2u-hero--statement .c2u-hero__strip { --c2u-strip-lead: calc( var(--c2u-word-lead) + (var(--c2u-word-count, 1) - 1) * var(--c2u-word-step) + (var(--c2u-line-count, 1) - 1) * var(--c2u-line-gap) + var(--c2u-enter-slow) ); } /* Set on the tile and spent by the span inside it — the same split the headline's lines use, since the element that owns the position is not the element that moves. --c2u-tile-beat is which beat this tile takes, and it defaults to the tile's position in the row, which is what it is for every tile at every width but two. The indirection exists because the phone hides three of the five (see c2u-components.css) and the two left behind are the row's second and fourth: taken at their positions they would open a beat late and land two beats apart, which is a different cadence from the one the headline just set. So the phone renumbers them below. It has to be a second property rather than an override of --c2u-tile-i, because that one is written inline by the part and an inline declaration beats any stylesheet rule short of !important. */ .c2u-hero--statement .c2u-hero__tile { /* Tile to tile. This was --c2u-word-step itself, which is the reading cadence of a word — at 120ms the five photographs arrive inside six tenths of a second and read as the row appearing, not as one tile after another. Four times that gives each one its own beat. It is stated as a multiple rather than a duration so the two stay related: re-pace the headline and the row still follows it, which is the thing the section is built on. Keeping it separate is what lets the row be spread without slowing the words down to do it. */ --c2u-tile-step: calc(var(--c2u-word-step) * 4); --c2u-mo-d: calc( var(--c2u-strip-lead) + var(--c2u-tile-beat, var(--c2u-tile-i, 0)) * var(--c2u-tile-step) ); } /* ── …and then it drifts ───────────────────────────────────────── Parallax, on the same terms as every other scroll-driven thing here: c2u-page.js writes ONE number onto the strip, 0 to 1, once per scroll frame, and this file decides what five elements do with it. No per-tile bookkeeping, no transform written from script, and scrolling back runs it back for free because there is no accumulated state — only a number that goes down again. DOWN, not up. Positive translate is with the scroll, so a tile falls behind the page as the reader pulls it up, which is what reads as depth. --c2u-tile-pace is how much of the drift each one takes, and the values are deliberately not in order: a row whose speeds ran left to right would read as a wipe. The one at 1 is the far end of the range and every other is a fraction of it, so --c2u-strip-drift alone sets how far the row pulls apart. IT STOPS, and that is a requirement rather than an optimisation. The drift is clamped at the end of --c2u-strip-run, so by the time the section below is arriving the tiles are still and the reader is handed a composed row rather than five things in motion. The run is short for the same reason — 400px is about half a screen, spent while the strip is still the subject. Both constants are read back by c2u-page.js off this stylesheet, so retuning happens here and only here. Behind .is-live, which the script adds only once it has checked reduced motion — so no script and no preference both land on a strip with no transform on it at all, sitting exactly where the margins in c2u-components.css put it. There is no hidden state to be stranded in, which is why this needs none of the fallback machinery the entrance above also does without. */ .c2u-hero__strip { /* How far the fastest tile falls behind, as a fraction of a tile — the percentage in the transform below resolves against the element's own box, and the tiles are square, so 60% is 60% of one photograph whatever the screen is. Held in the tile's terms for the reason the offsets in c2u-components.css are: 160px is a sixth of a tile at 1920 and well over a whole one on a phone, and those are not the same effect. */ --c2u-strip-drift: 60%; --c2u-strip-run: 400px; /* the scrolling that buys all of it */ } .c2u-hero__strip.is-live .c2u-hero__tile { transform: translate3d(0, calc( var(--c2u-strip-p, 0) * var(--c2u-tile-pace, 0) * var(--c2u-strip-drift) ), 0); will-change: transform; } .c2u-hero__tile:nth-child(1) { --c2u-tile-pace: .38; } .c2u-hero__tile:nth-child(2) { --c2u-tile-pace: 1; } .c2u-hero__tile:nth-child(3) { --c2u-tile-pace: .12; } .c2u-hero__tile:nth-child(4) { --c2u-tile-pace: .81; } .c2u-hero__tile:nth-child(5) { --c2u-tile-pace: .56; } /* ── What the phone has to restate ─────────────────────────────── Both of these are here for one reason: below 767px the row is the second and fourth tiles only, and a set of five values chosen to read well as five does not read the same way as the two of them that happen to survive. THE BEAT. Renumbered to 0 and 1, so the pair opens on the beat after the headline and lands one step apart — the cadence every other width gets. At their own positions they would be a beat late and two beats apart. THE PACE. 1 and .81 are neighbours, picked to sit inside a spread of five; alone they drift within 20% of each other, which is two photographs moving together rather than a parallax. The second keeps the full drift and the fourth is dropped to .3, so the pair separates by about 80px over the run instead of 20. The one that sits lower is the one that falls furthest behind, which is the relation the five-up row has. */ @media (max-width: 767px) { .c2u-hero__tile:nth-child(2) { --c2u-tile-beat: 0; --c2u-tile-pace: 1; } .c2u-hero__tile:nth-child(4) { --c2u-tile-beat: 1; --c2u-tile-pace: .3; } } /* ── The arc turns ─────────────────────────────────────────────── parts/hero-arc.php. Two things happen to it, and as with the strip above they share nothing but the element: it arrives, and then it turns forever. ARRIVING, on the beat the headline finishes — the same calculated moment the photo strip used, and calculated the same way rather than written down, so the copy can gain a word and this still lands the instant the sentence settles. The wrapper is what moves; the turning is on a group inside the SVG, so the two transforms never meet. TURNING. One animation, and the reason it cannot show a seam is in the part's header: the repeats tile the whole circle, so a turn of exactly one repeat — 360°/k — redraws the identical frame. k rides in on the SVG from PHP, which is the only thing that knows how many repeats it took. The duration is stated PER REPEAT rather than per revolution, so the speed is a speed: change the phrase, the type size or the radius, k moves with it, and the arc still passes the eye at the same rate with nothing here to retune. 10s a repeat is about 80px/s at 1440 — near the resting drift the tagline band this replaced ran at, which is a held statement moving rather than a ticker. Clockwise, which at the BOTTOM of a circle carries the letters to the left: a line of text drifting the way a line of text is read off a page. */ .c2u-hero__arc { --c2u-arc-turn: 10s; /* per repeat, not per revolution */ --c2u-mo-d: calc( var(--c2u-word-lead) + (var(--c2u-word-count, 1) - 1) * var(--c2u-word-step) + (var(--c2u-line-count, 1) - 1) * var(--c2u-line-gap) + var(--c2u-enter-slow) ); } .c2u-arc__spin { /* The viewBox, not the group's own ink — 50% of the view box is the circle's centre, which is the only point this may turn about. Left to the bounding box it would pivot around the ring's edge. */ transform-box: view-box; transform-origin: 50% 50%; animation: c2u-arc-spin var(--c2u-arc-turn) linear infinite; } /* ── …and the photographs go round with it ─────────────────────── The same trick as the arc, on the same centre, one circle out: the ring turns by exactly one SET of photographs per cycle and the set repeats, so the frame at the end of a cycle is the frame at its start. The part's header has why the tile COUNT is what makes that true rather than the turn. THE SQUARES STAY SQUARE by spending the turn twice — once on the ring and once, backwards, on every tile. The two are declared with the same duration and the same linear timing in the same stylesheet, so they start together and stay locked; there is no frame in which a tile is at an angle. The per-tile placement angle is already cancelled in c2u-components.css, which is what lets the backwards half be ONE rule rather than one per tile. THE TWO ARCS RUN OPPOSITE WAYS. The band above carries its letters to the left; the photographs go right. Together they read as two separate things passing, where the same direction read as one thick mass sliding — and the arcs are close enough here to be mistaken for one. --c2u-ring-dir is the whole of that decision. The pace is stated PER PHOTOGRAPH, not per cycle, so the speed is a speed. The set has already gone from five pictures to seven, which lengthened the cycle from 15s to 26s and changed how fast the row travels by nothing at all — that is the whole reason the number is written this way. 3.75s a tile is about 72px/s at 1440, a little under the 82px/s the band above runs at. Close enough that the two read as one system moving; the photographs trailing the type very slightly is the right way round, since the words are what is being read. */ .c2u-hero__ring { --c2u-ring-beat: 3.75s; /* per photograph, not per cycle */ --c2u-ring-span: calc(var(--c2u-ring-step) * var(--c2u-ring-set)); --c2u-ring-time: calc(var(--c2u-ring-beat) * var(--c2u-ring-set)); /* A beat behind the arc, which is a beat behind the headline: the sentence lands, the line under it arrives, then the pictures. */ --c2u-mo-d: calc( var(--c2u-word-lead) + (var(--c2u-word-count, 1) - 1) * var(--c2u-word-step) + (var(--c2u-line-count, 1) - 1) * var(--c2u-line-gap) + var(--c2u-enter-slow) * 2 ); } .c2u-ring { animation: c2u-ring-spin var(--c2u-ring-time) linear infinite; } .c2u-ring__tile { animation: c2u-ring-plumb var(--c2u-ring-time) linear infinite; } /* ── Statement paragraph — scrubbed by scroll ──────────────────── parts/statement.php. The same masked rise as the hero, one word at a time — but here the reader turns the handle. The section pins, and how far it has been scrolled through is what decides how much of the paragraph has arrived: scroll on and it keeps arriving, stop and it stops, scroll back and it goes back. HOW A SCROLL POSITION BECOMES A FRAME. The animation is declared paused, so its own clock never advances and the only thing deciding which frame shows is the delay. c2u-page.js writes one number per scroll frame — --c2u-statement-p, 0 to 1 — and it is subtracted from every word's delay at once. A word whose delay is still positive has not started, and the backwards fill holds it under its mask; one whose delay has gone negative is that far into its rise; one past the duration has landed. So the stagger is untouched — it is the same --c2u-word-delay the hero spends on the clock — and nothing here has to know how many words there are or which one is next. One subtraction moves the whole paragraph, and it is exact in both directions, which is what makes scrolling back run it backwards rather than replaying it. --c2u-statement-span is how much of that timeline one pass of the section covers, and it has to be all of it: the last word's delay plus its travel, or the paragraph would still be arriving as the pin let go. It is derived from the word count JS measures rather than stated, so the copy can change without it. NOTHING IS GIVEN AWAY. At p=0 every word is still under its mask, including the first, so the paragraph shows nothing until the section has pinned and the reader scrolls on. A head start was tried — half a second of timeline spent before the handle is turned, so the opening words were already up when the pin took hold — and it read as a fragment that had been left there rather than as the front of something arriving. The whole effect is that the words are being brought in by the scrolling, and a word that was there before any scrolling happened is outside it. The cost is the approach: the section rises into view empty, and on a tall window that is most of a screen of nothing before the pin catches. Paying it is the point — the paragraph starts from nothing, in front of the reader. --c2u-statement-lead is set to zero in c2u-components.css for the same reason, so the first word moves on the first pixel scrolled past the pin rather than after a hold. THE STEP IS NOT THE HERO'S, and cannot be. This paragraph is 43 words against the headline's 16, and the ratio of step to travel is what sets how many words are in the air at once: at 55ms against a 700ms rise it is about a dozen, which is the wave the hero has and the shape being kept here. No --c2u-line-gap: the part passes a plain string, so c2u_words() emits no lines, --c2u-line-i is never set and the gap term multiplies by zero. The sentences run on with nothing between them, which is the ask, and no rule states it that could fall out of step with the markup. Everything above is behind .is-live, which c2u-page.js adds only after checking the window can hold the pinned paragraph and that reduced motion is off — the same opt-in the card wheel uses. Without it there is no pin, no animation and no hidden state to be stranded in: the paragraph is simply there. That also settles what would otherwise be a trap, since a paused animation forced to delay 0 by the reduced-motion block below would sit on its first frame forever, which for these words means invisible. It never gets the chance. */ .c2u-statement.is-live .c2u-statement__text { --c2u-word-step: 55ms; --c2u-statement-span: calc( var(--c2u-word-count, 1) * var(--c2u-word-step) + var(--c2u-enter-slow) ); } .c2u-statement.is-live .c2u-word__in { animation: c2u-mo-rise var(--c2u-enter-slow) var(--c2u-ease-rise) both paused; /* After the shorthand, which resets it. At p=0 this is every word's own delay, unmodified and never negative — so nothing has begun. */ animation-delay: calc( var(--c2u-word-delay) - var(--c2u-statement-p, 0) * var(--c2u-statement-span) ); } /* ── Scroll-revealed sections ──────────────────────────────────── Armed by c2u-motion.js. The transition is on the `is-in` state only: arming an off-screen section snaps it hidden with no 500ms fade-out running where nobody can see it. */ .is-armed [data-c2u-mo="up"] { opacity: 0; transform: translateY(var(--c2u-mo-up)); } .is-armed [data-c2u-mo="pop"] { opacity: 0; transform: scale(0.4); } .is-armed [data-c2u-mo="fade"] { opacity: 0; } .is-armed.is-in [data-c2u-mo] { opacity: 1; transform: none; transition: opacity var(--c2u-enter) var(--c2u-ease) var(--c2u-mo-d, 0ms), transform var(--c2u-enter) var(--c2u-ease-rise) var(--c2u-mo-d, 0ms); } /* ── How it works ──────────────────────────────────────────────── One sequence for the whole section, started when the heading comes into view. 0ms eyebrow 120ms heading 300ms step 1, then one every 180ms Within a step the four parts land 70ms apart, in the order the eye needs them: the dot marks the position on the rail, the numeral says which step it is, then the name, then the detail. The rail fades with its dot rather than being drawn — a connector that arrives after the things it connects reads as a mistake, and one that draws itself is a different, louder effect than anything else on the page. */ .c2u-steps .c2u-eyebrow { --c2u-mo-d: 0ms; } .c2u-steps .c2u-h1 { --c2u-mo-d: 120ms; } .c2u-steps .c2u-lead { --c2u-mo-d: 220ms; } .c2u-steps__item { /* Where this step's own four-part sequence starts. */ --c2u-mo-step: 300ms; } .c2u-steps__item:nth-child(2) { --c2u-mo-step: 480ms; } .c2u-steps__item:nth-child(3) { --c2u-mo-step: 660ms; } .c2u-steps__item:nth-child(4) { --c2u-mo-step: 840ms; } .c2u-steps__rail { --c2u-mo-d: var(--c2u-mo-step); } .c2u-steps__dot { --c2u-mo-d: var(--c2u-mo-step); } .c2u-steps__num { --c2u-mo-d: calc(var(--c2u-mo-step) + 70ms); } .c2u-steps__title { --c2u-mo-d: calc(var(--c2u-mo-step) + 140ms); } .c2u-steps__body { --c2u-mo-d: calc(var(--c2u-mo-step) + 210ms); } /* The numeral is the biggest thing in the step, so it travels the least — a large mark moving a long way reads as heavier than a small one covering the same distance. */ .c2u-steps__num { --c2u-mo-up: var(--c2u-mo-up-sm); } .c2u-steps__title { --c2u-mo-up: var(--c2u-mo-up-sm); } /* Single column: the rail is dropped at this width (c2u-components.css), and the numerals carry the sequence on their own. */ @media (max-width: 600px) { .c2u-steps__rail { --c2u-mo-d: 0ms; } } /* ── How it works — the idle cycle ─────────────────────────────── After the entrance has landed, the section keeps reading itself out: one step is lit at a time, and the highlight is carried to the next step by a spark that runs down the rail and lights the red trail behind it as it goes. The states are here; the walk between them is c2u-page.js, which holds no timings of its own — it reads the five below off the list and does what they say. So the whole cycle is retimed from this block, and the section reads as a score like the rest of the file. hold step lit, nothing moving send spark's run from this dot to the next fade trail clearing once the spark has arrived beat the pause instead of a send, at a row break lead entrance out, first step lit THE RESTING STATE ONLY EXISTS UNDER .is-cycling. Dimming three steps out of four is right when something is about to light them back up in turn and wrong the moment nothing is — so the dim is attached to the class the script adds, and a page with no JS, a script that dies, or reduced motion all keep the section at full presence rather than permanently faded. Same inversion as the entrance: the stylesheet hides nothing on its own. The lead is measured against the entrance above: the last body starts at 840 + 210ms and takes --c2u-enter to arrive, so the cycle waits out ~1.7s before dimming anything. Move the step stagger and this moves with it. */ .c2u-steps__list { --c2u-steps-hold: 2000ms; --c2u-steps-send: 700ms; --c2u-steps-fade: 400ms; --c2u-steps-beat: 650ms; --c2u-steps-lead: 1800ms; /* Nothing to wait for: the section was already on screen, so the entrance never played, or the reader has come back to it. */ --c2u-steps-lead-static: 500ms; /* Lit ⇄ resting. Long enough to read as a change of attention rather than a switch being flipped. */ --c2u-steps-swap: 380ms; /* The spark eases at both ends — it is a thing being thrown, not a thing being faded. The trail is drawn on the same curve, or its leading edge slides out from under the spark. */ --c2u-steps-ease: cubic-bezier(.45, .05, .35, 1); } /* The transition has to be restated rather than inherited from the entrance, and the delay with it: every element here carries an entrance --c2u-mo-d of up to 1050ms, which would otherwise be applied to each swap for the rest of the page's life. */ .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__num, .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__dot, .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__title, .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__body { transition: opacity var(--c2u-steps-swap) var(--c2u-ease), transform var(--c2u-steps-swap) var(--c2u-ease); transition-delay: 0ms; } /* Resting. The numeral scales from its bottom-left corner: the section is flush left and the rail underneath is a fixed line, so growing away from that corner is the only direction that leaves both of them still. */ .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__num { opacity: .6; transform: scale(.8); transform-origin: left bottom; } .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__dot { transform: scale(.6); } .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__title { opacity: .6; } .c2u-steps__list.is-cycling .c2u-steps__item .c2u-steps__body { opacity: .5; } /* Lit. The numeral returns to the size it is drawn at, so the top of the cycle is the section's own design and the rest of it is the departure — not the other way round. */ .c2u-steps__list.is-cycling .c2u-steps__item.is-active .c2u-steps__num { opacity: 1; transform: scale(1); } .c2u-steps__list.is-cycling .c2u-steps__item.is-active .c2u-steps__dot { transform: scale(1.25); } .c2u-steps__list.is-cycling .c2u-steps__item.is-active .c2u-steps__title { opacity: 1; } .c2u-steps__list.is-cycling .c2u-steps__item.is-active .c2u-steps__body { opacity: 1; } /* The send. Spark and trail are one movement drawn twice, so they share a duration and a curve; the spark's fade-out is inside its own keyframes rather than a second animation, because it has to land exactly as the next dot starts growing — a spark still visible a frame later reads as two marks, not one handover. */ .c2u-steps__item.is-sending .c2u-steps__spark { animation: c2u-steps-spark var(--c2u-steps-send) var(--c2u-steps-ease); } /* forwards, and only here: the class swap that starts the fade below is a timer, so it can land a frame or two after the animation ends. Holding the last frame covers that gap — without it the trail blinks out and back in between the two. The fade needs no such cover; it ends on the resting state it would revert to anyway. */ .c2u-steps__item.is-sending .c2u-steps__rail::after { animation: c2u-steps-trail var(--c2u-steps-send) var(--c2u-steps-ease) forwards; } /* Arrival. The trail holds its full length and fades from under the next step, which is now lighting: pulling it back the way it came would be a second movement competing with that one. */ .c2u-steps__item.is-spent .c2u-steps__rail::after { animation: c2u-steps-trail-out var(--c2u-steps-fade) linear; } @keyframes c2u-steps-spark { 0% { opacity: 0; transform: translateX(0); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } } @keyframes c2u-steps-trail { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @keyframes c2u-steps-trail-out { from { opacity: 1; transform: scaleX(1); } to { opacity: 0; transform: scaleX(1); } } /* Phone: no cycle at all, just the entrance. A hold of zero is the off switch — c2u-page.js reads it, finds nothing to hold for and leaves the list alone, so every step keeps the full presence it arrives with. 767px is the site's phone breakpoint, the same line the header and the soft line breaks turn on. Highlighting one of four works when all four are in front of you. On a phone they are not: the steps are taller than the screen and read one at a time, so a cycle running to its own clock spends most of its time dimming the step somebody is in the middle of reading. Below 600px the rail is dropped as well, which would leave the spark nowhere to run even if the rest of it held up. */ @media (max-width: 767px) { .c2u-steps__list { --c2u-steps-hold: 0ms; } } /* ── Labelled rows ─────────────────────────────────────────────── Same shape of sequence as How it works above, one beat slower per row: there are three rows rather than four steps, and each carries a paragraph instead of a line, so the eye needs longer in each one. 0ms eyebrow 120ms heading 220ms subhead 320ms row 1, then one every 200ms Within a row the label leads its content by 90ms — the same name-then-detail order the steps use. The rules are not in the score. They are painted with the section and the content arrives into them. */ .c2u-rows .c2u-eyebrow { --c2u-mo-d: 0ms; } .c2u-rows .c2u-h1 { --c2u-mo-d: 120ms; } .c2u-rows .c2u-lead { --c2u-mo-d: 220ms; } .c2u-rows__row { --c2u-mo-row: 320ms; } .c2u-rows__row:nth-child(2) { --c2u-mo-row: 520ms; } .c2u-rows__row:nth-child(3) { --c2u-mo-row: 720ms; } .c2u-rows__label { --c2u-mo-d: var(--c2u-mo-row); } .c2u-rows__content { --c2u-mo-d: calc(var(--c2u-mo-row) + 90ms); } /* The label is the larger mark, so it travels the shorter distance — the same reasoning as the step numerals above. */ .c2u-rows__label { --c2u-mo-up: var(--c2u-mo-up-sm); } /* The picture, when the section runs one. It sits beside the whole list rather than beside any one row, so it arrives on the beat between the subhead and the first label — late enough to read as following the words, early enough that the column it anchors is never being read against an empty space. */ .c2u-rows__media { --c2u-mo-d: 280ms; } /* ── Text beside a picture ─────────────────────────────────────── 0ms eyebrow 120ms heading 220ms first paragraph, the rest 80ms behind it 380ms picture The picture arrives last even though it sits alongside the text rather than under it. It is the largest thing in the section and the only one that is not read, so leading with it would pull the eye out to the right before the heading had been taken in. Paragraphs after the first share one beat rather than each getting their own. They are one block of prose split for legibility, and stepping through them reads as a list. */ .c2u-split .c2u-eyebrow { --c2u-mo-d: 0ms; } .c2u-split .c2u-h1 { --c2u-mo-d: 120ms; } .c2u-split__body { --c2u-mo-d: 220ms; } .c2u-split__body ~ .c2u-split__body { --c2u-mo-d: 300ms; } /* The CTA reads after the last line of prose and before the eye is pulled out to the picture, so it lands between the body and the media. */ .c2u-split__actions { --c2u-mo-d: 340ms; } .c2u-split__media { --c2u-mo-d: 380ms; } /* The biggest mark in the section travels the shortest distance — the same reasoning as the step numerals and the row labels. */ .c2u-split__media { --c2u-mo-up: var(--c2u-mo-up-sm); } /* ── Logo wall ─────────────────────────────────────────────────── 0ms eyebrow 140ms heading 280ms subhead 440ms row 1, then one every 100ms The rows only fade. They are already travelling — each track runs its own marquee animation on transform — so a transform on the row itself is the one thing that cannot be added here without one animation overwriting the other. The stutter across the three is what gives the block its entrance. */ .c2u-logos__eyebrow { --c2u-mo-d: 0ms; } .c2u-logos__heading { --c2u-mo-d: 140ms; } .c2u-logos__subhead { --c2u-mo-d: 280ms; } .c2u-logos__rows .c2u-marquee { --c2u-mo-d: 440ms; } .c2u-logos__rows .c2u-marquee:nth-child(2) { --c2u-mo-d: 540ms; } .c2u-logos__rows .c2u-marquee:nth-child(3) { --c2u-mo-d: 640ms; } /* Rows fade over a longer window than anything else. A hard cut-in on a band that is already sliding sideways looks like a load, not an entrance. */ .c2u-logos__rows .c2u-marquee { --c2u-enter: 900ms; } /* ── Benefit cards, plain grid ─────────────────────────────────── 0ms eyebrow 120ms heading 220ms subhead 360ms card 1, then one every 120ms The cards carry their index in --c2u-cardgrid-i, so the stagger is one line rather than a rule per card. */ .c2u-cardgrid .c2u-eyebrow { --c2u-mo-d: 0ms; } .c2u-cardgrid .c2u-h1 { --c2u-mo-d: 120ms; } .c2u-cardgrid .c2u-lead { --c2u-mo-d: 220ms; } .c2u-cardgrid__card { --c2u-mo-d: calc(360ms + var(--c2u-cardgrid-i, 0) * 120ms); } /* ── Bento ─────────────────────────────────────────────────────── 0ms eyebrow 120ms heading 220ms subhead 360ms the feature, then one card every 110ms Same score as the card grid above, and deliberately so — they are the same card arriving under the same heading. The one difference is what "first" means: the stagger runs on DOM order, and the part writes the feature first, so the sequence starts in the middle of the grid and opens outwards rather than sweeping across it. That is the order the layout is composed to be read in, and it is the mobile order too, where the same delays land as a plain top-to-bottom run. 110ms rather than the grid's 120ms: there is one more card here and the last of them is the bottom-right corner, which is the last thing anyone looks at. */ .c2u-bento .c2u-eyebrow { --c2u-mo-d: 0ms; } .c2u-bento .c2u-h1 { --c2u-mo-d: 120ms; } .c2u-bento .c2u-lead { --c2u-mo-d: 220ms; } .c2u-bento__card { --c2u-mo-d: calc(360ms + var(--c2u-bento-i, 0) * 110ms); } /* ── People ────────────────────────────────────────────────────── 0ms eyebrow 120ms heading 220ms subhead 360ms person 1, then one every 90ms Same opening as the bento above, and the same reasoning: it is the same heading arriving over the same kind of grid. What differs is that nothing here is a feature, so the stagger is a plain sweep in reading order — left to right along the first row, then along the second. 90ms rather than the bento's 110ms because there are seven of them: at 110 the last portrait lands well over a second after the heading, by which time the sweep has stopped reading as one movement and starts reading as a queue. Each person moves as one block — photograph, name, role and bio together — rather than in parts. They are one thing to read, and seven of them coming apart into four pieces each would be 28 moving objects in a single viewport. */ .c2u-people .c2u-eyebrow { --c2u-mo-d: 0ms; } .c2u-people .c2u-h1 { --c2u-mo-d: 120ms; } .c2u-people .c2u-lead { --c2u-mo-d: 220ms; } .c2u-people__person { --c2u-mo-d: calc(360ms + var(--c2u-people-i, 0) * 90ms); } /* ── Promise ───────────────────────────────────────────────────── 0ms eyebrow 120ms the claim 240ms the line under it Read in order and arriving in it. The same three beats the closing section takes, because it is the same shape — a label, a statement, and the thing that qualifies it — and the two should not arrive at different speeds on one page. The claim keeps the default travel. It is the largest type in the section and the one thing the reader is here for; the smaller move the eyebrow and the subtext take would flatten it into the pair around it. */ .c2u-promise__eyebrow { --c2u-mo-d: 0ms; --c2u-mo-up: var(--c2u-mo-up-sm); } .c2u-promise__claim { --c2u-mo-d: 120ms; } .c2u-promise__subtext { --c2u-mo-d: 240ms; --c2u-mo-up: var(--c2u-mo-up-sm); } /* ── Trust band ────────────────────────────────────────────────── 0ms heading, when there is one 120ms figure 1, then one every 90ms A sweep in reading order, left to right, at the same 90ms the leadership grid uses — four items is the same kind of set as seven portraits, read the same way, and two different sweep rates on one page would read as two different mechanisms. Each item moves as one block, figure and label together. They are one claim in two lines, and splitting them would put the number on screen a beat before the thing it counts. The travel is the small one: these are short lines in a thin band, and the default 24px on four items at once reads as the row bouncing rather than arriving. */ .c2u-trustband .c2u-h2 { --c2u-mo-d: 0ms; } .c2u-trustband__item { --c2u-mo-d: calc(120ms + var(--c2u-trustband-i, 0) * 90ms); --c2u-mo-up: var(--c2u-mo-up-sm); } /* ── Closing ───────────────────────────────────────────────────── 0ms heading 120ms subhead, when there is one 240ms the buttons Three beats and then it stops, which is the whole section. The buttons follow the line rather than arriving with it: the reader should have read what the page is closing on before the two links under it appear. One delay for the pair, not one each. They are a single offer, and staggering them would ask the reader to weigh the first before the second is on the page — the same call .c2u-hero__actions makes, and the larger travel is that block's too, for the same reason: a button coming from further up reads as arriving rather than as settling. */ .c2u-closing__heading { --c2u-mo-d: 0ms; } .c2u-closing__subhead { --c2u-mo-d: 120ms; --c2u-mo-up: var(--c2u-mo-up-sm); } .c2u-closing__actions { --c2u-mo-d: 240ms; --c2u-mo-up: var(--c2u-mo-up-lg); } /* ── Keyframes ─────────────────────────────────────────────────── */ @keyframes c2u-mo-up { from { opacity: 0; transform: translateY(var(--c2u-mo-up)); } to { opacity: 1; transform: none; } } @keyframes c2u-mo-rise { /* 125% of the line box, not 100%. The line has to start below the mask's lower edge, and that edge is itself 0.15em below the box — so a 100% offset would leave the tops of the capitals showing through the gap before the animation had begun. The surplus is sized against the loosest case (a tight line-height on a face with tall ascenders); it costs nothing, since the extra travel happens entirely out of sight. */ from { transform: translateY(125%); } to { transform: translateY(0); } } /* One repeat's worth of turn. k is on the SVG, from PHP — see the arc block above for why that single division is the whole seamlessness argument. */ @keyframes c2u-arc-spin { from { transform: rotate(0deg); } to { transform: rotate(calc(360deg / var(--c2u-arc-k, 1))); } } /* One set of photographs' worth of turn, and the same taken back out so the squares stay square. Neither needs the tile's index: the placement angle is cancelled statically in c2u-components.css, so what is left here is common to every tile on the ring. */ @keyframes c2u-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(calc(var(--c2u-ring-dir) * var(--c2u-ring-span))); } } @keyframes c2u-ring-plumb { from { transform: rotate(0deg); } to { transform: rotate(calc(-1 * var(--c2u-ring-dir) * var(--c2u-ring-span))); } } @keyframes c2u-mo-circular { from { opacity: 0; transform: translateY(calc(-1 * var(--c2u-hero-circular-rise))) scale(0.86); } to { opacity: 1; transform: translateY(calc(-1 * var(--c2u-hero-circular-rise))) scale(1); } } /* ── Reduced motion ────────────────────────────────────────────── c2u-base.css already collapses every duration to ~0. Delays are what it cannot reach, and a zero-length animation held behind a 1.1s delay is just content that shows up late. Clearing the delays turns the whole system into "everything is already here", which is the correct reading of the preference. The list has to name every animated thing in this file, including the two that are targeted structurally rather than by attribute. Missing one is easy to do and hard to see: the headline's lines animate a transform and never touch opacity, so a line left behind a 480ms delay is not a hidden element that a sweep would catch — it is a heading that arrives late. The idle cycle is the one thing here that is deliberately absent from the list. It has no delays to clear, and it never starts at all under the preference — c2u-page.js checks it before adding .is-cycling, so the section simply keeps every step lit. */ @media (prefers-reduced-motion: reduce) { .c2u-page [data-c2u-mo], .c2u-page .c2u-hero__circular, .c2u-page .c2u-hero__headline .c2u-line__in, /* Every word, in both callers — the case that note describes exactly: transform only, never opacity, and the last of them sits seconds behind a delay. Left off this list the text assembles itself word by word for anyone who asked for no motion at all. Matched on the word rather than on either section, so a third caller is covered before it is written. */ .c2u-page .c2u-word__in { animation-delay: 0ms !important; transition-delay: 0ms !important; } /* Clearing the delay is not enough for an endless one. The base stylesheet collapses durations to ~0, which for a loop means it completes instantly and restarts — so the arc would sit at whatever angle the first frame left it and judder there forever. It has to be stopped outright, which leaves the phrase where the markup put it: a still band of type, which is what anyone sees in any single frame of it moving. Same reasoning, and same rule, as .c2u-circular and .c2u-marquee in c2u-components.css. */ .c2u-page .c2u-arc__spin, /* Both halves of the ring, and BOTH have to be named. Stopping the turn while the tiles kept taking it back out would leave every photograph slowly rotating in place — the one failure mode here that looks deliberate. */ .c2u-page .c2u-ring, .c2u-page .c2u-ring__tile { animation: none !important; } }