.wp-block-nemtly-cosmic-neon {
    --size: 120px;
    --font-size: 4rem;

    /* Ensure container centers the content if needed, but let's respect block alignment */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #252839;
    /* Default background from effect, user can override with block settings */
    padding: 20px;
    overflow: hidden;

    .nemtly-cosmic-neon-wrapper {
        .name {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            /* Allow wrapping for long text */
            justify-content: center;

            .cosmic {
                position: relative;
                cursor: pointer;
                height: var(--size);
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 5px;

                span {
                    font-family: "Poppins", sans-serif;
                    font-size: var(--font-size);
                    font-weight: 700;
                    -webkit-text-stroke: 2px var(--color);
                    color: transparent;
                    transition: 0.5s;
                    display: block;
                    /* Fix for span behavior */
                }

                &:hover span {
                    opacity: 0;
                }

                &::before {
                    content: attr(data-text);
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    font-family: "Poppins", sans-serif;
                    font-size: var(--font-size);
                    height: 0;
                    font-weight: 700;
                    overflow: hidden;
                    transition: 0.6s ease-in-out;
                    text-align: center;
                    line-height: var(--size);
                    color: var(--color);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                &:hover::before {
                    height: 100%;
                    filter: drop-shadow(0 0 2rem var(--color));
                }
            }
        }
    }
}