Animated Background Hero

<!DOCTYPE html>
<title>My Example</title>

<style>
    :root {
        --abg-padding: 5rem 1.5rem;
        --abg-min-height: 450px;
        --abg-bg: linear-gradient(to right, #83a4d4, #b6fbff);
        --abg-text-color: #2c3e50;
        --abg-headline-color: #1a2a40;
    }
    .animated-bg-hero {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
        min-height: var(--abg-min-height);
        padding: var(--abg-padding);
        background-image: var(--abg-bg);
        width: 100%;
        position: relative;
        overflow: hidden; /* This is crucial */

display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .animated-bg-hero * {
         box-sizing: border-box;
    }
    .animated-bg-hero-content {
        position: relative;
        z-index: 2;
        max-width: 700px;
    }
    .animated-bg-hero-title {
        color: var(--abg-headline-color);
        margin: 0 0 1rem 0;
        font-size: clamp(2.5rem, 6vw, 4rem);
        font-weight: 700;
        line-height: 1.2;
    }
    .animated-bg-hero-subtitle {
        color: var(--abg-text-color);
        font-size: clamp(1.1rem, 3vw, 1.25rem);
        line-height: 1.6;
        margin: 0;
    }

/* Animated shapes styles */
    .floating-shapes {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        z-index: 1;
    }
    .floating-shapes li {
        position: absolute;
        display: block;
        list-style: none;
        width: 20px;
        height: 20px;
        background: rgba(255, 255, 255, 0.2);
        animation: move-around 25s linear infinite;
        bottom: -150px;
    }
    .floating-shapes li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
    .floating-shapes li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
    .floating-shapes li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
    .floating-shapes li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
    .floating-shapes li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
    .floating-shapes li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
    .floating-shapes li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
    .floating-shapes li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
    .floating-shapes li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
    .floating-shapes li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }

@keyframes move-around {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
            border-radius: 0;
        }
        100% {
            transform: translateY(-1000px) rotate(720deg);
            opacity: 0;
            border-radius: 50%;
        }
    }
</style>

<section class="animated-bg-hero">
    <div class="animated-bg-hero-content">
        <h1 class="animated-bg-hero-title">Creativity in Motion</h1>
        <p class="animated-bg-hero-subtitle">
            A fluid approach to design and development, crafting experiences that are both beautiful and intuitive.
        </p>
    </div>
    <ul class="floating-shapes" aria-hidden="true">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>