/* Scroll reveal shared by the feature pages: the hero plays in on load, then blocks rise as they enter the viewport (js/scroll-reveal.js).
   Uses the individual translate/scale properties so the elements keep their own transforms (tilted cards, hover lifts). */
.js-reveal .rv{opacity:0;translate:0 56px;scale:.97;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1),scale .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
.js-reveal .rv.rv-in{opacity:1;translate:0 0;scale:1}

/* Hero on load: text column first, then the visual, its cards and its messages */
.rvh{animation:rvhUp .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--rvh-d,0s)}
.rvh-pop{animation:rvhPop .9s cubic-bezier(.2,.8,.25,1.1) both;animation-delay:var(--rvh-d,0s)}
.rvh-msg{animation:rvhMsg .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--rvh-d,0s)}
@keyframes rvhUp{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
@keyframes rvhPop{from{opacity:0;translate:0 36px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
@keyframes rvhMsg{from{opacity:0;translate:0 12px;scale:.97}to{opacity:1;translate:0 0;scale:1}}

@media (prefers-reduced-motion:reduce){.js-reveal .rv{opacity:1;translate:none;scale:none;transition:none}.rvh,.rvh-pop,.rvh-msg{animation:none}}