/* ========================================================================== Fastkava — scroll reveal for block titles & content Ported from the design project's "Block titles and content animation". Every element rises 28px, fades in and un-blurs over 760ms on the design's soft easing, staggered 90ms apart within its group, so a block's kicker → heading → text → items enter one after another. Media gets a longer travel. The hidden state is scoped to [data-fk-reveal] on , which an inline head script sets before first paint. That does two things: no flash of un-animated content, and if JS never arrives the attribute is never set, so everything simply renders visible instead of being stuck at opacity 0. ========================================================================== */ :root { --fk-rv-dist: 28px; --fk-rv-dur: 760ms; --fk-rv-ease: cubic-bezier(.16, 1, .3, 1); } /* * No `will-change` here, deliberately. * * It used to sit on the resting state, which meant all ~80 candidates on the * front page were promoted to their own compositing layer at load — before any * of them had animated — each one also carrying a blur to rasterise. On a phone * that is enough layer memory for iOS Safari to start refusing to composite: * the symptom is reveals that never play, or play for some elements and not * others. Opacity and transform transitions are composited anyway; the hint * bought nothing and cost the whole effect. */ /* * Rise and fade only — no blur, at any width. * * The entrance used to animate `filter: blur(7px) -> blur(0)` as well. Animating * a blur RADIUS is the most expensive thing you can put in a transition: every * frame is a different radius, so every frame is a fresh full re-rasterisation * of the element — and this engine tags ~85 elements on the front page, in * overlapping staggered groups. * * Opacity and transform are composited, so what remains is close to free. The * blur was already dropped below 900px for exactly this reason, with the note * that it is "the most expensive third of the effect and the least visible one"; * that judgement holds just as well on a desktop. */ [data-fk-reveal] .fk-rv { opacity: 0; transform: translate3d(0, var(--fk-rv-d, var(--fk-rv-dist)), 0); } /* Media travels further, so a photo lands just after the copy next to it. */ [data-fk-reveal] .fk-rv--far { --fk-rv-d: 48px; } /* * Slider tracks fade in without the rise. * * The engine animates a slider's TRACK rather than the cards inside it (moving a * scroll-snap child would move its snap position). But B10's track contains * eight `.fk-vend__photo-fill` rim layers, each carrying blur(26px) at ~463x661. * Translating their ancestor re-rasterises all eight on every frame of the * entrance — the same pattern that made the orbs so expensive, just for 760ms * instead of forever. * * Opacity does not have that problem: the blurred layer is rasterised once and * then composited at varying alpha. So tracks keep the fade and lose the travel. */ [data-fk-reveal] .fk-rv[class*="__track"] { transform: none; } [data-fk-reveal] .fk-rv.is-revealed { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity var(--fk-rv-dur) var(--fk-rv-ease) var(--fk-rv-delay, 0ms), transform var(--fk-rv-dur) var(--fk-rv-ease) var(--fk-rv-delay, 0ms); } /* Leaving the viewport downwards resets it quickly, with no stagger, so scrolling back up replays the entrance instead of snapping. */ [data-fk-reveal] .fk-rv.is-resetting { transition: opacity 260ms linear, transform 260ms var(--fk-rv-ease); transition-delay: 0ms; } /* * Once it has played, drop the identity transform. * * A leftover transform keeps the element on its own compositing layer for the * rest of the session; `none` releases it. Visually a no-op at this point, so * nothing shifts. * * (This rule used to reset `filter` too, because an element carrying a filter * becomes a BACKDROP ROOT — a descendant's backdrop-filter then has nothing * left to sample and the glass silently renders flat. That hazard is gone now * the reveal never sets a filter at all.) */ [data-fk-reveal] .fk-rv.is-settled { will-change: auto; transform: none; } /* * The phone-only override that used to strip the blur here is gone: the blur is * no longer applied at ANY width, so this breakpoint had nothing left to undo. */ @media (prefers-reduced-motion: reduce) { /* Never hide anything: the content is simply there. */ [data-fk-reveal] .fk-rv { opacity: 1; transform: none; transition: none; } }