/* Scroll-scrubbed "grow into place" card reveal, modeled on the My Projects cards at https://clean.framer.website/ -- each card starts small, tilted back and shifted down, then scales up, flattens and rises into position, spring-smoothed to trail the scroll position rather than a fixed-duration transition. Add the `flip-card-reveal` class to any Divi Row or Module (Advanced tab -> CSS ID & Classes) to enable. Pairs with card-reveal.js, which eases the `--reveal` custom property (0 to 1) toward the scroll-derived target every frame and adds `flip-card-reveal-js` to once running -- rows render normally if JS is disabled or fails. */ .flip-card-reveal .et_pb_image_wrap { display: block; width: 100%; } .flip-card-reveal img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; display: block; } html.flip-card-reveal-js .flip-card-reveal { --reveal: 0; transform: perspective(1200px) translateY(calc(60px * (1 - var(--reveal)))) scale(calc(0.8 + (0.2 * var(--reveal)))) rotateX(calc(25deg * (1 - var(--reveal)))); will-change: transform; } @media (prefers-reduced-motion: reduce) { html.flip-card-reveal-js .flip-card-reveal { transform: none; } }