/* =========================================================================== MOTION --------------------------------------------------------------------------- One easing curve for the whole site. A page reads as one object when everything decelerates the same way; mixing curves is what makes a site feel assembled from parts. Nothing here is required for content to exist. Every animated element is readable with JavaScript off and with reduced motion on, which is enforced at the bottom of this file. =========================================================================== */ :root { --ease: cubic-bezier(.22, 1, .36, 1); /* the site's only easing curve */ --dur: .82s; } /* ------------------------------------------------------------- the rings A boomerang pair: a forward clip and a frame-exact reversed encode. When the forward pass ends we cross-dissolve into the reversed copy and back, so the object turns forever with no visible seam and no rewind stutter. */ .rings { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; } .rings-v, .rings-still { position: absolute; inset: 0; width: 100%; height: 100%; /* The clip is 16:9 with the object sitting in the LEFT THIRD and flat stage to the right. `contain` therefore drew the object at about a third of the box with a wide empty field beside it, which is why it looked small and boxed. `cover` plus this origin crops to the object so it fills the frame. */ object-fit: cover; /* Measured, not guessed. The object sits at 29.6% across the 3828x2164 frame. object-position aligns the image X% point with the BOX X% point, it does not centre the view on X%, so putting the object in the middle of a square box solves to about 3%, not 30%. Getting that wrong clipped the left arm. */ object-position: 3% 50%; /* NO OPACITY TRANSITION. The loop hands over on a frame the two encodes share, so the swap is a hard cut and is invisible. Fading across it blends two different moments of the motion, which reads as the object dissolving every time the loop turns. This was removed on the live site once already and adding it back here is what made the launch feel wrong. */ /* Decorative. It must never take a click, a tab stop, or Chrome's picture-in-picture overlay. */ pointer-events: none; } .rings-v::-webkit-media-controls, .rings-v::-webkit-media-controls-enclosure { display: none !important; } /* The clip carries its own flat near-white stage. `multiply` drops that stage into whatever is behind it: against a lighter page it disappears, and it can never lighten, so the chrome keeps its darks. Cropping to the object above means there is very little stage left to blend in the first place. */ /* The grey box, properly. Multiply alone could not remove it: the clip's stage is not a flat white, it carries a subtle vignette, so blending left a visibly darker rectangle no matter what single colour we keyed against. Chasing the stage colour was the wrong approach. A radial mask deletes the rectangle instead. The object lives in the middle of the frame, so fading the outer third to nothing removes every straight edge while touching none of the chrome. Multiply stays on top of it to keep the remaining stage from lightening the page. */ .rings-v, .rings-still { mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.55) 62%, transparent 74%); mask-image: radial-gradient(circle at 50% 50%, #000 46%, rgba(0,0,0,.55) 62%, transparent 74%); } /* The still and the video must be the SAME PICTURE or the handover is a jump. It used to be chrome-knot.png, a tight cut-out of the object drawn `contain`, so it filled the whole square box. The video crops a 16:9 frame where the object is a good deal smaller. The object therefore came up huge and shrank the instant the clip took over. The still is now literally frame zero of the forward clip, carrying the same object-fit, object-position, blend and mask as the video above. There is nothing left to disagree about, so the crossfade has nothing to reveal. */ .rings-v { opacity: 0; } .rings-v.on { opacity: 1; } /* The still is NOT a layer that hands over to the video. That was the mistake: an image sitting on top, cross-dissolving into a clip that had already moved on by the time it buffered, so the object appeared to swim into place. The