.stretch-wrapper.svelte-kep2ly {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .animated.svelte-kep2ly {
        flex: 1;
        opacity: 0;
        transition-property: opacity, transform;
        transition-duration: var(--duration);
        transition-delay: var(--delay);
        will-change: transform, opacity;
    }

    .enter-animation.svelte-kep2ly {
        opacity: 1;
    }

    .exit-animation.svelte-kep2ly {
        opacity: 0;
        pointer-events: none;
    }

    /* ========================
       Write Variant with Mask
    =========================== */

    .write-mask.svelte-kep2ly {
        mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%);
        mask-size: 200% 100%;
        mask-position: 100% 0;
        mask-repeat: no-repeat;

       /* -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 60%); */
        -webkit-mask-size: 200% 100%;
        -webkit-mask-position: 100% 0;
        -webkit-mask-repeat: no-repeat;

        animation: svelte-kep2ly-reveal-wipe var(--duration) ease-out var(--delay) forwards;
        -webkit-animation: svelte-kep2ly-reveal-wipe var(--duration) ease-out var(--delay) forwards;

        /* Disable fade for write */
        opacity: 1;
        transition: none;
    }


    @keyframes svelte-kep2ly-reveal-wipe {
        from {
            -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
        }
        to {
            -webkit-mask-position: 0% 0;
            mask-position: 0% 0;
        }
    }


    /* ========================
       Other Variants
    =========================== */

    .enter-fade.svelte-kep2ly {
        opacity: 1;
        transform: none;
    }
    .exit-fade.svelte-kep2ly {
        opacity: 0;
        transform: none;
    }

    .enter-top.svelte-kep2ly,
    .enter-bottom.svelte-kep2ly,
    .enter-left.svelte-kep2ly,
    .enter-right.svelte-kep2ly {
        opacity: 1;
        transform: translate(0, 0);
    }
    .exit-top.svelte-kep2ly {
        transform: translateY(-40px);
    }
    .exit-bottom.svelte-kep2ly {
        transform: translateY(40px);
    }
    .exit-left.svelte-kep2ly {
        transform: translateX(-40px);
    }
    .exit-right.svelte-kep2ly {
        transform: translateX(40px);
    }

    .enter-scale.svelte-kep2ly {
        opacity: 1;
        transform: scale(1);
    }
    .exit-scale.svelte-kep2ly {
        transform: scale(0.8);
    }

    .enter-bounce.svelte-kep2ly {
        opacity: 1;
        animation: svelte-kep2ly-bounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }
    .exit-bounce.svelte-kep2ly {
        opacity: 0;
        transform: scale(0.8);
    }

    @keyframes svelte-kep2ly-bounceIn {
        0% {
            transform: scale(0.8);
            opacity: 0;
        }
        60% {
            transform: scale(1.1);
            opacity: 1;
        }
        100% {
            transform: scale(1);
        }
    }

    .bubble-bl.svelte-kep2ly,
    .bubble-br.svelte-kep2ly {
        opacity: 0;

    }

    .bubble-bl.svelte-kep2ly{
        animation: svelte-kep2ly-bounceInAndScaleFromLeft var(--duration) ease-out var(--delay) forwards;
    }

    .bubble-br.svelte-kep2ly{
        animation: svelte-kep2ly-bounceInAndScaleFromRight var(--duration) ease-out var(--delay) forwards;
    }

    .blur-shrink.svelte-kep2ly{
        transform: scale(1.4) translateY(2rem);
        filter: blur(4rem);
        opacity: 0;
        animation: svelte-kep2ly-blurShrink var(--duration) ease-in-out var(--delay) forwards;
    }

    @keyframes svelte-kep2ly-bounceInAndScaleFromLeft {
        0% {
            transform: scale(0.8) translateX(-20px);
            opacity: 0;
        }
        60% {
            transform: scale(1.1) translateX(0px);
            opacity: 1;
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes svelte-kep2ly-bounceInAndScaleFromRight {
        0% {
            transform: scale(0.8) translateX(20px);
            opacity: 0;
        }
        60% {
            transform: scale(1.1) translateX(0px);
            opacity: 1;
        }
        100% {
            transform: scale(1);
        }
    }

    @keyframes svelte-kep2ly-blurShrink {
        0% {
            transform: scale(1.4) translateY(2rem);
            filter: blur(4rem);
            opacity: 0;
        }
        40% {
            opacity: 0.5;
            filter: blur(3rem);
        }
        100% {
            transform: scale(1) translateY(0);
            filter: blur(0);
            opacity: 0.5;
        }
    }