/** * Peel text reveals - pre-hide layer. * * Companion to library/js/peel-reveal.js. Its only job is to stop the text being * painted before the engine has prepared it, which would otherwise show every * heading in full for a frame and then snap it away to animate in. * * Three guards, because hiding text is the kind of thing that fails badly: * * 1. Everything is scoped to `html.peel-anim`, a class added by an inline * script (functions.php). No JavaScript, no class, nothing hidden. * 2. A failsafe animation restores opacity after 4s. If peel-reveal.js fails * to load, 404s, or throws before it prepares an element, the text appears * anyway - late, but present. A blank page is never the resting state. * 3. `data-peel-ready` is set by the engine the moment it has taken an element * over. From then on visibility is governed by the inline styles it writes, * and the failsafe is cancelled so it cannot fight them mid-animation. * * The selector list is duplicated from peel-reveal.js on purpose: CSS has to act * on the server-rendered markup, before any script has run and could mark it. * Keep the two lists in step - an element hidden here but not animated there * would sit invisible for 4s, which the failsafe makes survivable but ugly. */ html.peel-anim .peel-h1, html.peel-anim .peel-network-copy, html.peel-anim .peel-h2, html.peel-anim .peel-h3, html.peel-anim .peel-cp-heading, html.peel-anim .peel-cp-term, html.peel-anim .peel-cp-def, html.peel-anim .peel-measure-h, html.peel-anim .peel-measure-body, html.peel-anim .peel-sector-h, html.peel-anim .peel-team-h, html.peel-anim .peel-contact-h, html.peel-anim .peel-contact-address, html.peel-anim .peel-statement, html.peel-anim .peel-lead { opacity: 0; animation: peel-reveal-failsafe 1ms linear 4s forwards; } /* The sector tiles run their own hover crossfade; the engine skips them and so must this, or their labels would be hidden with nothing to bring them back. */ html.peel-anim .peel-sector-title, html.peel-anim .peel-sector-panel-label, html.peel-anim .peel-sector-panel-body, html.peel-anim .peel-no-reveal { opacity: 1; animation: none; } /* Engine has this element; its inline styles take over from here. */ html.peel-anim [data-peel-ready] { opacity: 1; animation: none; } @keyframes peel-reveal-failsafe { to { opacity: 1; } } /* The engine bails out entirely under reduced motion, so nothing would ever set data-peel-ready. Keep the text visible rather than waiting on the failsafe. */ @media (prefers-reduced-motion: reduce) { html.peel-anim .peel-h1, html.peel-anim .peel-network-copy, html.peel-anim .peel-h2, html.peel-anim .peel-h3, html.peel-anim .peel-cp-heading, html.peel-anim .peel-cp-term, html.peel-anim .peel-cp-def, html.peel-anim .peel-measure-h, html.peel-anim .peel-measure-body, html.peel-anim .peel-sector-h, html.peel-anim .peel-team-h, html.peel-anim .peel-contact-h, html.peel-anim .peel-contact-address, html.peel-anim .peel-statement, html.peel-anim .peel-lead { opacity: 1 !important; animation: none !important; } }