Dlaczego nie animuje mi obiektu na stronie CSS i JS - Prosze o pomoc!

Mam problem z animowaniem navbarowego obrazka, funkcja przesuwania obrazka w górę przy scrolowaniu w dół działa ale animacja w CSS nie , prosze o porady! Prosze nie patrzeć na obiekt logo.

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body class="scroll-smooth">
    <img src="pomysł4.png" id="img" class="imgcss img-up"></img>
    <img src="logo.png" id="logo" class="logocss"></img>

    <br>
    <div style="z-index: 1;">
        <kolumna1 class="kolumna1 scroll-smooth">
            <h1>Lorem ipsum dolor</h1>
            <br>
            <h3>Lorem ipsum dolor sit amet. Sed accusantium error vel dolore minus vel distinctio necessitatibus? Qui
                iure voluptas et fugit doloribus eum Quis dignissimos in consequatur ratione sed amet similique est
                veritatis incidunt ex cupiditate galisum.</h3>
            <br><br><br><br><br>
            <a href="#o_nas" class="kotwice" id="o_nas" style="margin-bottom:4000px;"> Coś o
                nas...</a><br><br>
            <a href="#dlaczego_my" class="kotwice">Dlaczego my...</a><br><br>
            <a href="#Kursy" class="kotwice" style="color: rgb(241, 14, 14); margin-bottom: 2000px;">Kursy...</a>

            <br><br><br>
            <a id="o_nas">
            </a>
            <br><br><br>

            <div class="scroll-smooth">

                <h1>O nas:</h1>
                <br>

                <h3>Lorem ipsum dolor sit amet. Sed accusantium error vel dolore minus vel distinctio necessitatibus?
                    Qui
                    iure voluptas et fugit doloribus eum Quis dignissimos in consequatur ratione sed amet similique est
                    veritatis incidunt ex cupiditate galisum.</h3>
            </div>

            <a id="dlaczego_my">
            </a><br>
            <br><br><br>
            <br><br><br><br>

            <div class="scroll-smooth">
                <h1>Dleczego my:</h1>
                <br>

                <h3>Lorem ipsum dolor sit amet. Sed accusantium error vel dolore minus vel distinctio necessitatibus?
                    Qui
                    iure voluptas et fugit doloribus eum Quis dignissimos in consequatur ratione sed amet similique est
                    veritatis incidunt ex cupiditate galisum.</h3>
            </div>
            <a id="Kursy">
            </a><br><br>
            <br><br><br><br><br><br>

            <div class="scroll-smooth">
                <h1>Kursy:</h1>
                <br>
                <div class="grid_block_kurs">
                    <div>
                        <block_kurs class="block_kurs"></block_kurs>
                    </div>
                    <div>
                        <block_kurs class="block_kurs"></block_kurs>
                    </div>
                    <div>
                        <block_kurs class="block_kurs"></block_kurs>
                    </div>
                    <div>
                        <block_kurs class="block_kurs"></block_kurs>
                    </div>
                    <div>
                        <block_kurs class="block_kurs"></block_kurs>
                    </div>
                    <div>
                        <block_kurs class="block_kurs"></block_kurs>
                    </div>
                </div>
            </div>
            <footer class="footer">

            </footer>
        </kolumna1>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>





    <script src="jquery.js"></script>
    <script src="script.js"></script>
</body>

</html>

.imgcss {
    width: 100%;
    z-index: 2;
    position: fixed;
    transition-duration: 0,5;
}

.img-up {
    top: -12rem;
}

.logocss {
    top: 3%;
    left: 3%;
    width: 10%;
    height: auto;
    z-index: 2;
    position: fixed;
    transition: top 200ms ease-in;
}


body {
    margin: 0px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

::-webkit-scrollbar {
    color: transparent;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
}

::-webkit-scrollbar-thumb {
    background: rgb(52, 14, 50);

}

::-webkit-scrollbar-thumb:hover {
    background: rgb(65, 12, 62);
}

.scroll-smooth {
    scroll-behavior: smooth;
}

.kolumna1 {
    position: absolute;
    top: 20px;
    padding-top: 17%;
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    height: auto;
}

.kotwice {
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    margin-left: 6%;
    font-size: 40px;
    color: black;
    font-weight: 600;
    margin-bottom: 40%;
    transition-duration: 0.5s;
}

.kotwice:hover {
    color: rgb(163, 163, 163);
    margin-left: 9%;
}

.grid_block_kurs {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 300px 300px 300px;
}

.block_kurs {
    display: inline-block;
    position: absolute;
    width: 250px;
    height: 250px;
    border: solid 1px gray;
    box-shadow: 0px 0px 10px rgb(193, 193, 193);
    transition-duration: 0.5s;
    cursor: pointer;
}

.block_kurs:hover {
    box-shadow: 0px 0px 30px rgb(193, 193, 193);
}

h1 {
    font-family: 'Lato', sans-serif;
    font-size: 50px;
}

h3 {
    font-family: 'Lato', sans-serif;
    font-size: 30px;
}

.footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 100px;
    background-color: rgb(176, 43, 216);
}

const img = document.querySelector('img');
const logo = document.querySelector('logo');

document.addEventListener('scroll', () => (scroll()));

function scroll() {
  console.log(Math.round(window.scrollY));
  if (Math.round(window.scrollY) > 500) {
    img.classList.add('img-up');
    //logo.classList.add('img-up');
  } else {
    img.classList.remove('img-up');
    //logo.classList.remove('img-up');
  }

}

Z góry dziękuję