/** * Scroll reveal for the pabau/* blocks. * * Shared rather than per-block, because it is one behaviour applied to all of * them and the script that drives it is shared too. Registered in * functions.php and enqueued only on pages that actually contain a pabau * block. * * Everything is gated on `.pabau-anim`, which reveal.js puts on as its * very first statement. That is the whole safety design: if the script fails * to load, or throws before that line, the class never lands and every rule * below is inert — so the content is simply visible. Hiding content in CSS and * relying on JavaScript to bring it back is how a broken deploy turns into a * blank page, and this avoids it. */ /* * Only content moves — never a block root. * * These sections carry their own backgrounds: a gradient band on the hero, * trust bar, reports and CTA, a tint on the compare table and the feature * accordion. Transforming the root took the band with it, so the whole page * appeared to slide rather than the content arriving on a stationary section. * The root is now purely the scroll trigger and has no visual state at all. * * reveal.js sets --pabau-anim-i to each child's index, so the stagger is * arithmetic rather than a rule per position. */ .pabau-anim .pabau-reveal-child { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); transition-delay: calc(var(--pabau-anim-i, 0) * 90ms); will-change: opacity, transform; } .pabau-anim .pabau-reveal-child.is-revealed { opacity: 1; transform: none; } /* * Once it has arrived, `will-change` has done its job and only costs memory. */ .pabau-anim .pabau-reveal-child.is-settled { will-change: auto; } /* * A table row cannot be transformed reliably across browsers, so those fade * only. Same trigger, same stagger. */ .pabau-anim tr.pabau-reveal-child { transform: none; }