/* Scroll-triggered slide-in for the pink/yellow corner flag accents (.section-pink-corner, .section-pink-corner-sm, .section-yellow-corner in style.css). Applies automatically to those classes' ::before -- no extra class needed in Divi. Pairs with corner-flag-reveal.js, which toggles `is-revealed` via IntersectionObserver and adds `corner-flag-reveal-js` to once running -- flags render in their final position if JS is disabled or fails. */ html.corner-flag-reveal-js .section-pink-corner::before, html.corner-flag-reveal-js .section-pink-corner-sm::before { opacity: 0; transform: translate(-40px, -40px); transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } html.corner-flag-reveal-js .section-yellow-corner::before { opacity: 0; transform: translate(40px, -40px); transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } html.corner-flag-reveal-js .section-pink-corner.is-revealed::before, html.corner-flag-reveal-js .section-pink-corner-sm.is-revealed::before, html.corner-flag-reveal-js .section-yellow-corner.is-revealed::before { opacity: 1; transform: translate(0, 0); } @media (prefers-reduced-motion: reduce) { html.corner-flag-reveal-js .section-pink-corner::before, html.corner-flag-reveal-js .section-pink-corner-sm::before, html.corner-flag-reveal-js .section-yellow-corner::before, html.corner-flag-reveal-js .section-pink-corner.is-revealed::before, html.corner-flag-reveal-js .section-pink-corner-sm.is-revealed::before, html.corner-flag-reveal-js .section-yellow-corner.is-revealed::before { opacity: 1; transform: none; transition: none; } }