/* QCC scroll-reveal — scroll-triggered entrance animations. .qcc-js is added in for JS-capable browsers; .qcc-reveal-init is added when scroll-reveal.js prepares targets on DOMContentLoaded. Animated elements are marked in render.php — see qcc_reveal_steps_attr(). */ :root { --qcc-reveal-distance: 16px; --qcc-reveal-duration: 450ms; --qcc-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1); --qcc-reveal-stagger: 75ms; } /* ── Pre-init hide (after .qcc-js, before scroll-reveal runs) ────── */ html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal="stagger"] > *, html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal="fade-up"], html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal-target="fade-up"], html.qcc-js:not(.qcc-reveal-init) .qcc-reveal-header > *, html.qcc-js:not(.qcc-reveal-init) .qcc-reveal-stagger > * { opacity: 0; transform: translateY(var(--qcc-reveal-distance)); } html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal="fade"], html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal-target="fade"] { opacity: 0; } /* ── Pending (pre-reveal) states ─────────────────────────────────── */ html.qcc-reveal-init .qcc-reveal--fade-up { opacity: 0; transform: translateY(var(--qcc-reveal-distance)); } html.qcc-reveal-init .qcc-reveal--fade { opacity: 0; } /* ── Revealed states ─────────────────────────────────────────────── */ html.qcc-reveal-init .qcc-reveal--fade-up.is-qcc-revealed { animation: qcc-reveal-fade-up var(--qcc-reveal-duration) var(--qcc-reveal-ease) forwards; animation-delay: calc(var(--qcc-stagger-index, 0) * var(--qcc-reveal-stagger)); } html.qcc-reveal-init .qcc-reveal--fade.is-qcc-revealed { animation: qcc-reveal-fade var(--qcc-reveal-duration) var(--qcc-reveal-ease) forwards; animation-delay: calc(var(--qcc-stagger-index, 0) * var(--qcc-reveal-stagger)); } @keyframes qcc-reveal-fade-up { to { opacity: 1; transform: none; } } @keyframes qcc-reveal-fade { to { opacity: 1; } } /* ── Reduced motion ──────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal="stagger"] > *, html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal="fade-up"], html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal="fade"], html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal-target="fade-up"], html.qcc-js:not(.qcc-reveal-init) [data-qcc-reveal-target="fade"], html.qcc-js:not(.qcc-reveal-init) .qcc-reveal-header > *, html.qcc-js:not(.qcc-reveal-init) .qcc-reveal-stagger > *, html.qcc-reveal-init .qcc-reveal--fade-up, html.qcc-reveal-init .qcc-reveal--fade { opacity: 1; transform: none; animation: none; } }