.esm-scroll-morph-yes {
    --bg-grad-s: linear-gradient(45deg, var(--esm-bg-c1-s, transparent), var(--esm-bg-c2-s, transparent));
    --bg-grad-e: linear-gradient(45deg, var(--esm-bg-c1-e, transparent), var(--esm-bg-c2-e, transparent));

    overflow: hidden !important; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-style: solid;
    
    animation: esmScrollMorph linear both;
    animation-timeline: view();
    animation-range: entry var(--esm-trigger, 10%) exit var(--esm-end, 90%);
    
    perspective: 1200px; /* Increased for deeper 3D effect */
    transform-style: preserve-3d;
}

@keyframes esmScrollMorph {
    from {
        opacity: var(--esm-op-s, 1);
        filter: blur(var(--esm-blur-s, 0px)) saturate(var(--esm-sat-s, 100%)) hue-rotate(var(--esm-hue-s, 0deg));
        background-image: var(--bg-grad-s);
        border-width: var(--esm-bw-s, 0px);
        border-color: var(--esm-bc-s, transparent);
        transform: 
            translate3d(var(--esm-x-s, 0), var(--esm-y-s, 0), var(--esm-z-s, 0))
            scale(var(--esm-scale-s, 1)) 
            rotateX(var(--esm-rx-s, 0deg)) 
            rotateY(var(--esm-ry-s, 0deg))
            rotateZ(var(--esm-rz-s, 0deg));
    }
    to {
        opacity: var(--esm-op-e, 1);
        filter: blur(var(--esm-blur-e, 0px)) saturate(var(--esm-sat-e, 100%)) hue-rotate(var(--esm-hue-e, 0deg));
        background-image: var(--bg-grad-e);
        border-width: var(--esm-bw-e, 0px);
        border-color: var(--esm-bc-e, transparent);
        transform: 
            translate3d(var(--esm-x-e, 0), var(--esm-y-e, 0), var(--esm-z-e, 0))
            scale(var(--esm-scale-e, 1)) 
            rotateX(var(--esm-rx-e, 0deg)) 
            rotateY(var(--esm-ry-e, 0deg))
            rotateZ(var(--esm-rz-e, 0deg));
    }
}