Activating CSS keyframes animation with input:checked

Question

Im fairly sure this should be working so I must be overlooking something obvious. I have a input toggle that I want to activate 3 staggered animations (staggered with animation-delay) once the input is 'checked'.

Think of it as essentially a hamburger type button that drops down 3 menus consecutively. Im trying to see if i can get this done just with CSS.

My CSS is here

.CT007Content {
  display:flex;
  flex-direction: row-reverse;
  height:0;
  overflow:hidden;
}
@keyframes open-CT007 {
  from{height:0;}
  to{height:auto}
}

.songContainer{
  display:flex;
  flex:1;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  height:0;
  overflow:hidden;
}

@keyframes CT007-dropdown {
  from{height:0}
  to{height:auto; overflow:visible;  padding-top:10%;}
}

.artworkContainer {
  display:flex;
  flex:2;
  transform: translateX(150%);
  background-color: white;
  min-height:50vw;
  max-height:60vw;
  width:auto;
  z-index:1;
}

@keyframes CT007-pullover {
  from{transform: translate3d(100%,0,0);}
  to{transform: translate3d(0,0,0);}
}

.CT007toggle:checked ~ .songContainer{
  animation: CT007-dropdown 1s linear forwards;
  animation-delay:0.5s;
}

.CT007toggle:checked ~ .CT007Content{
animation: open-CT007 1s linear forwards;
  animation-delay:0.2s;
}

.CT007toggle:checked ~ .artworkContainer{
animation: CT007-pullover 1s linear forwards;
animation-delay:2s;
}

It works perfectly fine when the toggle input is not involved. Note that I have also tried .CT007toggle:checked + .songContainer{ ect...

HTML

<div className={styles.Release}>
            <h2 className={styles.releaseTitle}>CT007
            
                <input className={styles.CT007toggle} type="checkbox"/>
                <label htmlFor={styles.CT007toggle}></label>
            </h2>
            <content className={styles.CT007Content}>
                <div className={styles.songContainer}>
                    <div className={styles.trackContainer} onClick={changeStyle}>
                        <audio controls className={style} src="/TEX86.mp3">
                            {/* <source src="/TEX86.mp3" type = "audio/mpeg"/> */}
                        </audio>
                        
                        <div className={styles.trackText}>
                            <h4>You'll Never Get Rich</h4>
                        </div>
                        
                    </div>
                    <div className={styles.trackContainer}>
                        <audio controls className={style}>
                            <source src="" type = "audio/mpeg"/>
                        </audio>
                        <div className={styles.trackText}>
                                <h4>Death by Dole</h4>
                        </div>
                    </div>
                </div>
                <div className={styles.artworkContainer}>
                    <svg  src=""/>
                </div>
           <content/>
    </div>