Making a fade in when in sight thing but it messed up my :hover effect for a card thing

Question

I have 8 divs in a div called card-group. These cards should expand and there are also little cards which go to the edge.

This worked then a added more text at the bottom and the on screen fade in but it messed up the :hover effect.

const observer = new IntersectionObserver((entries) => {

    entries.forEach((entry) =>{
      if (entry.isIntersecting) {
        entry.target.classList.add('visible'); // Use a different class for visibility
      } else {
        entry.target.classList.remove('visible');
      }
    });
  });
  
  const hiddenElements = document.querySelectorAll('.hidden');
  hiddenElements.forEach((element) => observer.observe(element));
  
  const cards = document.querySelectorAll('.card');
  
  cards.forEach(card => {
    card.addEventListener('mouseenter', () => {
        console.log(card)
      card.classList.add('hovered');
    });
  
    card.addEventListener('mouseleave', () => {
      card.classList.remove('hovered');
    });
  });

.hidden {
    opacity: 0;
    transition: all 1s;
    filter: blur(5px);
    transform: translateX(-100%);
  }
  .visible {
    opacity: 1;
    filter: blur(0px);
    transform: translateX(0);
  }

  .card-group:hover  .big-card:nth-child(1) {
    transform: translate(-75%,16%) rotate(-24deg);
    cursor: pointer;
  }

  <div class="card-group">
    <div class="big-card card">

    </div>
    <div class="little-card card">

    </div>
    <div class="big-card card">

    </div>
    <div class="little-card card">

    </div>
    <div class="big-card card">

    </div>
    <div class="little-card card">

    </div>
    <div class="big-card card ">

    </div>
    <div class="little-card card">

    </div>
  </div>
  <section class="hidden">
    <h1>Cats and Dogs in a deck</h1>
  </section>
  <section class="hidden">
    <p class="p1 hidden">This effeect took forever, like forever 2+ hours this was the first real thing I did in html, css, and js. P.S Hover over it to get a suprise</p>
  </section>
  <section class="hidden">
    <p class="p1 hidden">Now for  a cool effect This text is here so I can implement this cool scrolling effect I saw it on the github copilot page and really liked it so I will try to do it</p>
  </section>
  <section class="hidden">
    <p class="p1 hidden">You will be able too tell if it's working if this text is "sliding" in hopefully a cool style</p>
  </section>
  <section class="hidden">
    <p class="p1 hidden">Hi everyone, this is my website hope you enjoyed it took me FOREVER and I learned the basics of js, html, and css, it was fun!</p> 
  </section>

I was expecting this card group to open like the 8 :hover things said it should but instead it just did nothing the effect where the hidden and visible things fade in works but the hover does not.