<!-- wp:greenshift-blocks/element {"id":"gsbp-5de3781","dynamicGClasses":[{"value":"card_effect","type":"local","label":"card_effect","localed":false,"css":".card_effect{display:flex;align-items:center;justify-content:center;padding-top:80px;padding-bottom:80px;overflow:clip;}","attributes":{"styleAttributes":{"display":["flex"],"alignItems":["center"],"justifyContent":["center"],"paddingTop":["80px"],"paddingBottom":["80px"],"overflow":["clip"]}},"originalID":"gsbp-5de3781","originalBlock":"greenshift-blocks/element","selectors":[{"value":" .containercards","attributes":{"styleAttributes":{"display":["flex"],"flexDirection":["row","column",null,"column"],"rowGap":[null,"20px",null,"20px"]}},"css":".card_effect .containercards{display:flex;flex-direction:row;}@media (max-width: 991.98px){.card_effect .containercards{flex-direction:column;row-gap:20px;}}@media (max-width: 575.98px){.card_effect .containercards{flex-direction:column;row-gap:20px;}}"},{"value":" .card","attributes":{"styleAttributes":{"width":["20vw","80vw",null,"80vw"],"aspectRatio":["0.8","auto"],"paddingLink_Extra":"all","paddingTop":["0px"],"paddingBottom":["0px"],"paddingLeft":["0px"],"paddingRight":["0px"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["0.6em"],"borderBottomLeftRadius":["0.6em"],"borderTopRightRadius":["0.6em"],"borderBottomRightRadius":["0.6em"],"textDecoration":["none"],"backgroundColor":["#ffffff"],"borderWidth":["1px"],"borderStyle":["solid"],"borderColor":["#ffffff4a"],"boxShadow":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dshadow\u002d\u002dfocus, 0px 2px 4px 0px rgba(0, 0, 0, 0.07))"]}},"css":".card_effect .card{width:20vw;aspect-ratio:0.8;padding-top:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;border-top-left-radius:0.6em;border-bottom-left-radius:0.6em;border-top-right-radius:0.6em;border-bottom-right-radius:0.6em;text-decoration:none;background-color:#ffffff;border-width:1px;border-style:solid;border-color:#ffffff4a;box-shadow:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dshadow\u002d\u002dfocus, 0px 2px 4px 0px rgba(0, 0, 0, 0.07));}@media (max-width: 991.98px){.card_effect .card{width:80vw;aspect-ratio:auto;}}@media (max-width: 575.98px){.card_effect .card{width:80vw;}}"},{"value":" .card:not(:first-child)","attributes":{"styleAttributes":{"margin":["0 0 0 -10vw"],"marginTop":["0px","0px",null,"0px"],"marginRight":["0px","0px",null,"0px"],"marginBottom":["0px","0px",null,"0px"],"marginLeft":["0vw","0px",null,"0px"]}},"css":".card_effect .card:not(:first-child){margin:0 0 0 -10vw;margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0vw;}@media (max-width: 991.98px){.card_effect .card:not(:first-child){margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}}@media (max-width: 575.98px){.card_effect .card:not(:first-child){margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}}"},{"value":" .card .content","attributes":{"styleAttributes":{"width":["100%"],"height":["100%","auto"],"borderRadius":["0.6em"],"color":["#000"],"display":["flex"],"flexDirection":["column"],"justifyContent":["space-between"],"padding":["25px"]}},"css":".card_effect .card .content{width:100%;height:100%;border-radius:0.6em;color:#000;display:flex;flex-direction:column;justify-content:space-between;padding:25px;}@media (max-width: 991.98px){.card_effect .card .content{height:auto;}}"},{"value":" .card .content .bottom","attributes":{"styleAttributes":{"display":["flex"],"alignItems":["center"],"columnGap":["15px"],"font":["500 normal 1.1vw / 0.9 'Inter', sans-serif"],"borderTop":["1px dashed #000"],"padding":["25px 0 0"]}},"css":".card_effect .card .content .bottom{display:flex;align-items:center;column-gap:15px;font:500 normal 1.1vw / 0.9 'Inter', sans-serif;border-top:1px dashed #000;padding:25px 0 0;}"},{"value":" .card .content .bubble","attributes":{"styleAttributes":{"width":["3.3vw"],"aspectRatio":["1"],"borderRadius":["100%"],"backgroundColor":["#FFF"],"display":["grid"],"placeItems":["center"]}},"css":".card_effect .card .content .bubble{width:3.3vw;aspect-ratio:1;border-radius:100%;background-color:#FFF;display:grid;place-items:center;}"},{"value":" .card .content .bubble img","attributes":{"styleAttributes":{"width":["80%"],"height":["80%"],"objectFit":["contain"],"borderRadiusLink_Extra":true,"borderTopLeftRadius":["100px"],"borderBottomLeftRadius":["100px"],"borderTopRightRadius":["100px"],"borderBottomRightRadius":["100px"]}},"css":".card_effect .card .content .bubble img{width:80%;height:80%;object-fit:contain;border-top-left-radius:100px;border-bottom-left-radius:100px;border-top-right-radius:100px;border-bottom-right-radius:100px;}"},{"value":" .card .content .job","attributes":{"styleAttributes":{"opacity":[0.6],"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dxs, 0.85rem)"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dxs, 1.15rem)"]}},"css":".card_effect .card .content .job{opacity:0.6;font-size:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dxs, 0.85rem);line-height:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dxs, 1.15rem);}"},{"value":" p","attributes":{"styleAttributes":{"marginTop":["0px"],"marginBottom":["5px"],"marginLeft":["0px"],"marginRight":["0px"]}},"css":".card_effect p{margin-top:0px;margin-bottom:5px;margin-left:0px;margin-right:0px;}"},{"value":" .card .content .top","attributes":{"styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dxl, clamp(1.6rem, 2.75vw, 1.9rem))"],"lineHeight":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dxl, clamp(2.3rem, 3.45vw, 2.6rem))"],"fontWeight":["500"]}},"css":".card_effect .card .content .top{font-size:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002dxl, clamp(1.6rem, 2.75vw, 1.9rem));line-height:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dline-height\u002d\u002dxl, clamp(2.3rem, 3.45vw, 2.6rem));font-weight:500;}"},{"value":" .preview-img","attributes":{"styleAttributes":{"borderRadiusCustom_Extra":false,"borderBottomLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px)"],"borderBottomRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px)"],"borderTopLeftRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px)"],"borderTopRightRadius":["var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px)"],"borderRadiusLink_Extra":true,"width":["100%"],"height":["150px"],"objectFit":["cover"],"marginTop":["10px"],"borderStyle":["solid"],"borderWidth":["5px"],"borderColor":["#ffffff"]}},"css":".card_effect .preview-img{border-bottom-left-radius:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px);border-bottom-right-radius:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px);border-top-left-radius:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px);border-top-right-radius:var(\u002d\u002dwp\u002d\u002dcustom\u002d\u002dborder-radius\u002d\u002dlarge, 20px);width:100%;height:150px;object-fit:cover;margin-top:10px;border-style:solid;border-width:5px;border-color:#ffffff;}"},{"value":" .author-name","attributes":{"styleAttributes":{"fontSize":["var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002ds, 1rem)"]}},"css":".card_effect .author-name{font-size:var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dfont-size\u002d\u002ds, 1rem);}"}]}],"type":"no","className":"card_effect","localId":"gsbp-5de3781","isVariation":"stylemanager","customCss":".card_effect .card:nth-of-type(1) .content { background-color: #F48C8C; }\n.card_effect .card:nth-of-type(2) .content { background-color: #FF9E80; }\n.card_effect .card:nth-of-type(3) .content { background-color: #ffe39f; }\n.card_effect .card:nth-of-type(4) .content { background-color: #FFE066; }\n.card_effect .card:nth-of-type(5) .content { background-color: #CDE77F; }\n.card_effect .card:nth-of-type(6) .content { background-color: #7FE0B5; }\n.card_effect .card:nth-of-type(7) .content { background-color: #8FF0C9; }\n.card_effect .card:nth-of-type(8) .content { background-color: #8EDBFF; }\n@keyframes interactionHintPulse {\n            0%, 100% { opacity: 1; }\n            50% { opacity: 0.5; }\n        }","customJs":"import { animate} from \u0022{{PLUGIN_URL}}/libs/motion/motion.js\u0022\n\n        const folioCards = Array.from(document.querySelectorAll('.interactive-folio-card'));\n        const container = document.getElementById('folio-interaction-container');\n        const pivotIndex = (folioCards.length - 1) / 2;\n\n        let hasShuffled = false;\n\n        // Configuration based on screen size\n        const getLayoutConfig = () =\u003e {\n            const isMobile = window.innerWidth \u003c= 1024;\n            return {\n                isMobile,\n                spacing: isMobile ? {{SPACING_M}} : {{SPACING}},\n                displacement: isMobile ? {{DISPLACE_M}} : {{DISPLACE}},\n                baseScale: isMobile ? 0.9 : 1\n            };\n        };\n\n        // 1. Initialize Random Z-Indices\n        const depthIndices = Array.from({ length: folioCards.length }, (_, i) =\u003e i + 1);\n        depthIndices.sort(() =\u003e Math.random() - 0.5);\n        \n        folioCards.forEach((cardNode, idx) =\u003e {\n            cardNode.style.zIndex = depthIndices[idx];\n            \n            // Interaction Handlers\n            cardNode.addEventListener('mouseenter', () =\u003e recalibrateFolioLayout(idx));\n            cardNode.addEventListener('mouseleave', () =\u003e recalibrateFolioLayout(null));\n        });\n\n        // 2. Responsive Animation Logic\n        function recalibrateFolioLayout(focusedIdx) {\n            const config = getLayoutConfig();\n            \n            folioCards.forEach((cardNode, idx) =\u003e {\n                const isFocused = focusedIdx === idx;\n                const isImmediateNeighbor = focusedIdx !== null \u0026\u0026 Math.abs(idx - focusedIdx) === 1;\n                const relativePos = idx - pivotIndex;\n                \n                let targetX = 0;\n                let targetY = 0;\n                let targetRotate = 0;\n                let targetScale = config.baseScale;\n\n                if (config.isMobile) {\n                    // Vertical Stack Layout\n                    targetY = relativePos * config.spacing;\n                    targetRotate = relativePos * 2; // Subtle vertical tilt\n                    \n                    if (focusedIdx !== null) {\n                        if (isFocused) {\n                            targetScale = config.baseScale * 1.1;\n                            targetRotate = 0;\n                            // Pull focused card slightly forward in perspective\n                        } else if (isImmediateNeighbor) {\n                            const sideModifier = idx \u003c focusedIdx ? -1 : 1;\n                            targetY = (relativePos * config.spacing) + (sideModifier * config.displacement);\n                        }\n                    }\n                } else {\n                    // Horizontal Fan Layout\n                    targetX = relativePos * config.spacing;\n                    targetY = Math.abs(relativePos) * 2; \n                    targetRotate = relativePos * 5; \n\n                    if (focusedIdx !== null) {\n                        if (isFocused) {\n                            targetY = -50; \n                            targetRotate = 0; \n                            targetScale = 1.1; \n                        } else if (isImmediateNeighbor) {\n                            const sideModifier = idx \u003c focusedIdx ? -1 : 1;\n                            targetX = (relativePos * config.spacing) + (sideModifier * config.displacement);\n                            targetRotate = targetRotate + (sideModifier * 10); \n                        }\n                    }\n                }\n\n                animate(\n                    cardNode, \n                    { x: targetX, y: targetY, rotate: targetRotate, scale: targetScale }, \n                    { \n                        type: \u0022spring\u0022,\n                        stiffness: 180, \n                        damping: 24, \n                        mass: 1.2\n                    }\n                );\n            });\n        }\n\n        // 3. Opening Shuffle Sequence (Triggered by Observer)\n        async function triggerInitialFolioShuffle() {\n            if (hasShuffled) return;\n            hasShuffled = true;\n\n            const config = getLayoutConfig();\n\n            // Initial hidden state\n            folioCards.forEach((cardNode) =\u003e {\n                const entropyRotation = (Math.random() - 0.5) * 40;\n                // Move cards far off-screen initially based on layout\n                const offscreenY = -100;\n                animate(cardNode, { x: 0, y: offscreenY, rotate: entropyRotation, scale: 0.7, opacity: 0 }, { duration: 0 });\n            });\n\n            await new Promise(resolve =\u003e setTimeout(resolve, 300));\n\n            // Deal animation\n            folioCards.forEach((cardNode, idx) =\u003e {\n                const relativePos = idx - pivotIndex;\n                let destX = 0;\n                let destY = 0;\n                let destRotate = 0;\n\n                if (config.isMobile) {\n                    destY = relativePos * config.spacing;\n                    destRotate = relativePos * 2;\n                } else {\n                    destX = relativePos * config.spacing;\n                    destY = Math.abs(relativePos) * 2;\n                    destRotate = relativePos * 5;\n                }\n\n                animate(\n                    cardNode,\n                    { x: destX, y: destY, rotate: destRotate, scale: config.baseScale, opacity: 1 },\n                    {\n                        delay: idx * 0.12,\n                        duration: 1.2,\n                        type: \u0022spring\u0022,\n                        stiffness: 80,\n                        damping: 18\n                    }\n                );\n            });\n        }\n\n        // 4. Intersection Observer for Start Trigger\n        const observer = new IntersectionObserver((entries) =\u003e {\n            entries.forEach(entry =\u003e {\n                if (entry.isIntersecting) {\n                    triggerInitialFolioShuffle();\n                    observer.unobserve(entry.target);\n                }\n            });\n        }, { threshold: 0.2 });\n\n        observer.observe(container);\n\n        // Resize handler to update layout values dynamically\n        window.addEventListener('resize', () =\u003e {\n            if (hasShuffled) recalibrateFolioLayout(null);\n        });","customJsEnabled":true,"customJsControllers":[{"name":"SPACING","value":"-140"},{"name":"DISPLACE","value":"150"},{"name":"SPACING_M","value":"10"},{"name":"DISPLACE_M","value":"20"}]} -->
<div class="card_effect"></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-e3440b6","dynamicGClasses":[{"value":"card_effect","type":"local","label":"card_effect","css":"","attributes":[],"selectors":[]}],"tag":"section","type":"inner","className":"card_effect","localId":"gsbp-e3440b6","align":"full","styleAttributes":{"overflow":["clip"]},"customJs":"","customJsEnabled":true} -->
<section class="card_effect gsbp-e3440b6 alignfull"><!-- wp:greenshift-blocks/element {"id":"gsbp-379026a","anchor":"folio-interaction-container","type":"repeater","className":"containercards","localId":"gsbp-379026a","query_filters":{"post_type":"post","posts_per_page":"7"},"query_extra":{"fetch_trigger":true},"repeaterType":"query_args"} -->
<div class="containercards" id="folio-interaction-container"><repeater><!-- wp:greenshift-blocks/element {"id":"gsbp-d5e3532","dynamicGClasses":[{"value":"interactive-folio-card","type":"local","label":"interactive-folio-card","css":"","attributes":[],"selectors":[]},{"value":"zero-on-front","type":"local","label":"zero-on-front","localed":false,"css":"body.gspb-bodyfront .zero-on-front{opacity:0;}","attributes":{"styleAttributes":{"opacity":[0]}},"originalID":"gsbp-d5e3532","originalBlock":"greenshift-blocks/element","tag":"a","selectors":[],"localedSpace":"front"}],"tag":"a","type":"inner","dynamiclink":{"dynamicEnable":true,"dynamicType":"repeater","repeaterField":"permalink","dynamicField":""},"className":"card interactive-folio-card zero-on-front","localId":"gsbp-d5e3532","href":"\u003cdynamictext\u003ehttps://greenshift.wpsoul.net/hero-section-with-interactive-background/\u003c/dynamictext\u003e","linkNewWindow":true} -->
<a class="card interactive-folio-card zero-on-front" href="<dynamictext>https://greenshift.wpsoul.net/hero-section-with-interactive-background/</dynamictext>" target="_blank" rel="noopener"><!-- wp:greenshift-blocks/element {"id":"gsbp-79d604b","type":"inner","className":"content","localId":"gsbp-79d604b"} -->
<div class="content"><!-- wp:greenshift-blocks/element {"id":"gsbp-f563dde","type":"inner","className":"top","localId":"gsbp-f563dde"} -->
<div class="top"><!-- wp:greenshift-blocks/element {"id":"gsbp-3aab588","textContent":"\u003cdynamictext\u003eSynced slider with ratings\u003c/dynamictext\u003e","tag":"span","dynamictext":{"dynamicEnable":true,"dynamicType":"repeater","repeaterField":"post_title","dynamicField":""},"localId":"gsbp-3aab588"} -->
<span><dynamictext>Synced slider with ratings</dynamictext></span>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-edbc6ca","type":"inner","className":"bottom","localId":"gsbp-edbc6ca"} -->
<div class="bottom"><!-- wp:greenshift-blocks/element {"id":"gsbp-bccd43b","type":"inner","className":"bubble","localId":"gsbp-bccd43b"} -->
<div class="bubble"><!-- wp:greenshift-blocks/element {"id":"gsbp-b7ad246","tag":"img","type":"image","dynamiclink":{"dynamicEnable":true,"dynamicType":"repeater","dynamicSource":"latest_item","dynamicPostType":"post","dynamicPostId":0,"dynamicPostData":"post_image","repeaterField":"avatar_url","dynamicField":"","dynamicAuthorData":"user_avatar_url"},"localId":"gsbp-b7ad246","src":"https://greenshift.wpsoul.net/wp-content/uploads/2025/11/CleanShot-2025-11-28-at-17.45.53@2x.webp"} -->
<img src="https://greenshift.wpsoul.net/wp-content/uploads/2025/11/CleanShot-2025-11-28-at-17.45.53@2x.webp" loading="lazy"/>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-4afa9e6","type":"inner","localId":"gsbp-4afa9e6"} -->
<div><!-- wp:greenshift-blocks/element {"id":"gsbp-6135266","tag":"p","type":"inner","localId":"gsbp-6135266"} -->
<p><!-- wp:greenshift-blocks/element {"id":"gsbp-1eb227d","textContent":"\u003cdynamictext\u003esupervendor\u003c/dynamictext\u003e","tag":"span","dynamictext":{"dynamicEnable":true,"dynamicType":"repeater","dynamicSource":"latest_item","dynamicPostType":"post","dynamicPostId":0,"dynamicPostData":"post_author","repeaterField":"author","dynamicField":""},"className":"author-name","localId":"gsbp-1eb227d"} -->
<span class="author-name"><dynamictext>supervendor</dynamictext></span>
<!-- /wp:greenshift-blocks/element --></p>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:greenshift-blocks/element {"id":"gsbp-a9fe7cd","tag":"p","type":"inner","className":"job","localId":"gsbp-a9fe7cd"} -->
<p class="job"><!-- wp:greenshift-blocks/element {"id":"gsbp-5b4763a","textContent":"\u003cdynamictext\u003eDecember 8, 2025\u003c/dynamictext\u003e","tag":"span","dynamictext":{"dynamicEnable":true,"dynamicType":"repeater","repeaterField":"modified_date","dynamicField":""},"localId":"gsbp-5b4763a"} -->
<span><dynamictext>December 8, 2025</dynamictext></span>
<!-- /wp:greenshift-blocks/element --></p>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></div>
<!-- /wp:greenshift-blocks/element --></a>
<!-- /wp:greenshift-blocks/element --></repeater></div>
<!-- /wp:greenshift-blocks/element --></section>
<!-- /wp:greenshift-blocks/element -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->