Gebogenen Text?

Auf meiner Homepage habe ich als Hintergrund einen verlauf und ein logo und dann habe ich einen Text.

Wenn Der Text das Logo berührt soll er sich nach oben biegen das das Logo frei bleibt. (Wie im Beispiel gezeigt wird: )

ChatGPT gibt mir den code aus:

Html:

<main>
  <div id="curvedText" class="curved-text"></div>
</main>

Css:

body {
    height: 100vh;
    color: black;
}


body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgb(0, 255, 0), white, rgb(0, 255, 0));
    z-index: -1;
}


body::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px; /* Adjust the size of the logo */
    height: 150px;
    background: url('src/logo.png') center no-repeat;
    background-size: contain;
    transform: translate(-50%, -50%);
    z-index: -1;
}


.curved-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    text-anchor: middle;
}


.curved-text span {
    position: absolute;
    transform-origin: bottom center;
    display: inline-block;
}

JS:

document.addEventListener('DOMContentLoaded', () => {
    const text = "Nach einigen Jahren Spielpause begannen wir im Herbst 2021 wieder mit einem Schultheater im Alpen-Adria-Gymnasium. Mitmachen kann jede/r ab der 3. Klasse.";
    const curvedTextContainer = document.getElementById('curvedText');
    const radius = 50; // Radius of the curve
    const logoRadius = 55; // Half of the logo's width/height
    const logoCenterX = window.innerWidth / 2;
    const logoCenterY = window.innerHeight / 2;
  
    for (let i = 0; i < text.length; i++) {
        const span = document.createElement('span');
        span.textContent = text[i];
        let angle, x, y;
  
        if (i < text.length / 3) {
            // Text before the logo
            x = i * 10;
            y = 0;
            span.style.transform = `translate(${x}px, ${y}px)`;
        } else if (i < 2 * text.length / 3) {
            // Text around the logo
            angle = ((i - text.length / 3) / (text.length / 3)) * Math.PI;
            x = logoCenterX + Math.cos(angle) * (radius + logoRadius) - logoCenterX;
            y = logoCenterY + Math.sin(angle) * (radius + logoRadius) - logoCenterY;
            span.style.transform = `translate(${x}px, ${y}px) rotate(${angle}rad)`;
        } else {
            // Text after the logo
            x = (i - 2 * text.length / 3) * 10;
            y = 0;
            span.style.transform = `translate(${x}px, ${y}px)`;
        }
  
        curvedTextContainer.appendChild(span);
    }
});

Fehler:

es sieht so aus:'

Kann mir wer sagen was ich ändern muss das es ausseht wie oben im Beispiel?
Danke