.lyrics-section {
    position: relative;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease 0.6s, transform 0.5s ease 0.6s;
}

.lyrics-section.loaded {
    opacity: 1;
    transform: translateY(0);
}

.lyrics-container {
    color: #fff;
    margin: 0 auto;
    height: 100%;
    width: auto;
    max-height: 25rem;
    max-width: 25rem;
    aspect-ratio: 1;
    overflow-y: auto;
    padding: 0;
    scroll-behavior: smooth;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease 0.7s;
    -webkit-overflow-scrolling: touch;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.lyrics-container.loaded {
    opacity: 1;
}

.lyrics-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.player-wrapper.lyrics .cover-wrapper {
    overflow: hidden;
    border-radius: .5rem;
}

/* .lyrics-container::after,
.lyrics-container::before { */
.player-wrapper.lyrics .cover-wrapper::after,
.player-wrapper.lyrics .cover-wrapper::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 5rem;
    text-decoration: inherit;
    vertical-align: inherit;
    pointer-events: none;
    transition: all .8s;
}

.player-wrapper.lyrics.videoshot {
    --lyrics-bg: rgba(0, 0, 0, 0);
}

.player-wrapper.lyrics:not(.videoshot) {
    --lyrics-bg: var(--average-color);
}

/* .lyrics-container::after { */
.player-wrapper.lyrics .cover-wrapper::after {
    background: linear-gradient(1turn, var(--lyrics-bg) 0, hsla(0, 0%, 5%, 0) 100%);
    inset-block-end: 0;
    inset-inline-start: 0;
    z-index: 2;
}

/* .lyrics-container::before { */
.player-wrapper.lyrics .cover-wrapper::before {
    background: linear-gradient(180deg, var(--lyrics-bg) 0, hsla(0, 0%, 5%, 0) 100%);
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 1;
}

.pre-lyrics-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    padding: 20px;
}

.wave-animation {
    display: flex;
    align-items: center;
    column-gap: max(.5rem, .62vw);
    column-gap: max(.5rem, .62dvw);
    height: max(2rem * 1.25, 3.125vw);
    height: max(2rem * 1.25, 3.125dvw);
    justify-content: center;
}

.wave-ball {
    height: max(1.125rem, 1.4vw);
    height: max(1.125rem, 1.4dvw);
    opacity: .1;
    transform: scale(1) translateY(50%);
    width: max(1.125rem, 1.4vw);
    width: max(1.125rem, 1.4dvw);
    border-radius: 50%;
    background: #e6e6e6;
    animation: pulse linear infinite alternate, opacity linear infinite alternate;
}

.wave-ball:nth-child(1) {
    animation-delay: 0.275s;
    animation-duration: 1.1s, 1.1s;
}

.wave-ball:nth-child(2) {
    animation-delay: 0.55s;
    animation-duration: 1.1s, 1.1s;
}

.wave-ball:nth-child(3) {
    animation-delay: 0.825s;
    animation-duration: 1.1s, 1.1s;
}

.wave-ball:nth-child(4) {
    animation-delay: 1.1s;
    animation-duration: 1.1s, 1.1s;
}

@keyframes pulse {
    0% {
        transform: scale(1) translateY(50%);
    }

    50% {
        transform: scale(1.3) translateY(0);
    }

    100% {
        transform: scale(1) translateY(-50%);
    }
}

@keyframes opacity {
    0% {
        opacity: .1;
    }

    100% {
        opacity: .5;
    }
}

.countdown {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    font-family: monospace;
}

.lyrics-content {
    padding: 20px;
}

.lyrics-line {
    padding: 12px 16px;
    margin: 0;
    line-height: 1.5;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
}

.lyrics-line span {
    transition: opacity .45s, transform .45s;
    font-size: max(1.25rem, calc(5vw - 2vw));
    display: inline-block;
}

.auto-scroll-mode .lyrics-line span {
    opacity: 0.3;
}

.lyrics-line.active span {
    opacity: 1;
    transform: scale(1.2);
}

.auto-scroll-mode .lyrics-line.past {
    opacity: 0 !important;
}