.cd-disk.spinning {
    animation-play-state: running;
}

@keyframes cd-disk {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.flying-note {
    position: absolute;
    width: 10vw;
    height: 10vw;
    pointer-events: none;
    animation: fly-note 1.5s ease-out forwards;
}

@keyframes fly-note {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: translate(8vw, -4vw) rotate(20deg);
        opacity: 0.8;
    }

    100% {
        transform: translate(15vw, -9vw) rotate(45deg);
        opacity: 0;
    }
}

.wave-ruler {
    position: relative;
    width: 100%;
    height: 4vw;
    cursor: pointer;
    z-index: 2;
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.section5-progress-bar.active::before {
    animation: progress 3s forwards;
}

@keyframes progress {
    to {
        height: calc(100% - 2vw);
    }
}