/* ========================================================================= reveal-n12.css — one reveal, used everywhere. The proof section already had a reveal: .6s, cubic-bezier(.16,1,.3,1), a short offset, once only. Rather than invent a second vocabulary for the other four sections, this extends that one. Every section on the page now moves the same way, which is what stops a scroll from feeling like a tour of five different websites. TWO PROPERTIES MOVE: opacity and translateY. Nothing scales, blurs, rotates, bounces, or arrives from the side. Those read as effects; this should read as the page simply being there by the time you look at it. The distance is 18px -- far enough to register as arriving, short enough that you never watch it travel. The stagger is 70ms and runs in reading order, so a section resolves top to bottom in about the time it takes to start reading its first line. Elements are marked by script, not by hand in the markup, so the reading order for each section lives in one list rather than being spread across forty attributes where it cannot be checked. ========================================================================= */ /* Everything is scoped to .rv, which the script adds to before the page paints. Without it nothing is hidden, so a JS failure leaves a plain visible page rather than a blank one. */ /* 240ms, DOWN FROM 600. At .6s with a 70ms stagger the last item in a seven-item card landed 1.1s after the card came into view, and a reader scrolling at any speed saw the empty shell for most of that. The distance comes down with it -- 18px over 240ms is a lurch, 12px is the same gesture at the new duration. */ .rv [data-rv]{ opacity:0; transform:translateY(12px); transition: opacity .24s cubic-bezier(.16,1,.3,1) var(--rv-d,0ms), transform .24s cubic-bezier(.16,1,.3,1) var(--rv-d,0ms); } /* The transform is dropped the moment it lands, so nothing keeps a stale containing block for absolutely-positioned children. No will-change. It is meant to be set just before an animation starts, not left standing on thirty-one elements, and setting it here promoted every one of them to its own compositor layer -- which showed up as elements painting at their final opacity a frame or two before their transition had begun. opacity and transform are composited anyway. */ .rv [data-rv].is-rv{opacity:1;transform:none} /* THE HIDING ITSELF MUST NOT BE AN ANIMATION. data-rv is put on by script. Before it lands an element has no transition and opacity 1; the attribute brings the hidden value and the transition in the same style recalc, and a transition takes its timing from the after-change style -- so the browser dutifully animated opacity from 1 down to 0 over .6s. The reveal then turned it round part-way and sent it back up, which is why nothing ever looked like it arrived: it was never at 0 to arrive from. So the marking happens under this class, with one forced reflow to commit the hidden values, and it comes off before anything is revealed. Same dance the drawn ink does with .is-setting. */ .rv.rv-setting [data-rv], .rv.rv-setting [data-rv="fade"], .rv.rv-setting [data-rv="mark"]{transition:none} /* Fade only, no movement. For the things that are already in place before you look -- the hero photograph and the masthead. A photograph that slides is a slideshow; a masthead that slides is a splash screen. */ .rv [data-rv="fade"]{ transform:none; transition:opacity .9s ease var(--rv-d,0ms); } .rv [data-rv="fade"].is-rv{transform:none} /* The wordmark, slower than anything else on the page. It shares the first beat with the photograph but takes 1.15s to get there, so it is still settling while the panel assembles under it and is the last thing to finish. That is the whole effect: not a separate animation, just the one element that arrives at its own pace. A wordmark that slides or scales is a logo animation, which is a different and much cornier thing. */ .rv [data-rv="mark"]{ transform:none; transition:opacity 1.15s cubic-bezier(.33,1,.68,1) var(--rv-d,0ms); } .rv [data-rv="mark"].is-rv{transform:none} @media(prefers-reduced-motion:reduce){ .rv [data-rv], .rv [data-rv="fade"], .rv [data-rv="mark"]{opacity:1;transform:none;transition:none} }