Cargo.site website - on scroll overlay header scale

Currently, re-making my website from scratch on cargo.site in order for it to be upgraded from cargo2 to cargo3.

I have a series of stacked pages, and a top-pinned overlayed header which scales down on scroll, simply and smoothly. It is initially filling the width, and once it scales it should be left-top aligned.

I kind of made it work. But I'm sure there are WAY more elegant ways to do it. Would love the transform anim to be smoother/nicer, but, most of all, it to work on mobile too! I guess what doesn't work on mobile is the 100% width initial scale.

HTML

  <!-- Overlay header container -->
    <header class="overlay-header">
        <div class="header-content">
            <span class="big-bold" uses="fit-text">NAME GOES HERE</span>
        </div>

    </header>

<script>
        window.addEventListener("scroll", function() {
            if (window.scrollY > 50) {
                document.body.classList.add("scrolled");
            } else {
                document.body.classList.remove("scrolled");
            }
        });
    </script>

CSS

/* Basic reset for margin and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Overlay header styling */
.overlay-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem;
    z-index: 10;
    transition: transform 0.4s ease-in-out;
}

.header-content {
    text-align: left; /* Center-aligns the text on load */
}

.big-bold {
    color: rgb(207, 255, 4);
    font-size: 10vw; /* Large font size to fill the width on load */
    display: block;
    transition: transform 0.5s ease , font-size 0.5s ease; /* Smooth transitions */
    transform-origin: top left;
}

/* Scaling and alignment on scroll */
.scrolled .header-content {
    text-align: left;
}

.scrolled .big-bold {
    font-size: 2.5rem; /* Smaller font size on scroll */
    transform: scale(0.8);
}