I am new to the Nextjs and I have this in my global.css file

/* CSS for fading out the parent div */
.fade-out {
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

/* CSS for maintaining opacity of child content */
.fade-content {
  opacity: 1;
}

and I tried fade the things around timer component( the child ) like this

<div className={`relative z-10 bg-gray-200 bg-opacity-50 p-8 rounded-lg shadow-md flex flex-col items-center ${isPlaying ? 'fade-out' : 'fade-in'}`}>
  <h1 className="text-3xl font-bold text-center mb-4">Test Timer</h1>

   <TimerContext.Provider value={{ isPlaying, setIsPlaying }}>
      <Timer isPlaying={isPlaying} />
    </TimerContext.Provider>

</div>

The problem is when parent component fades out the the timer also fades out.

I was trying searching on google and using chat gpt for some good time. Anyone know how to do it properly?
Thank you.