@import url(https://fonts.googleapis.com/css?family=Poppins);

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: 'Poppins', serif;
            padding: 0;
            background-color: #121212;
            transition: background-color 420ms ease;
        }

        @property --color-a {
            syntax: "<color>";
            inherits: true;
            initial-value: #ccc;
        }

        @property --color-b {
            syntax: "<color>";
            inherits: true;
            initial-value: #aaa;
        }

        .container {
            display: flex;
            flex-direction: column;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            min-width: 345px;
            min-height: 150px;
            max-width: 345px;
            max-height: 150px;
            width: auto;
            background: linear-gradient(var(--color-a), var(--color-b));
            position: relative;
            right: auto;
            bottom: auto;
            z-index: 1000;
            overflow: hidden;
            opacity: 0.9;
            transition:
                background 420ms ease,
                padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
                min-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
                min-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
                max-width 420ms cubic-bezier(0.22, 1, 0.36, 1),
                max-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
        }

        .container.compact-mode {
            justify-content: center;
            padding: 10px 20px 14px 20px;
            min-height: 94px;
            max-height: 94px;
        }

        .container.expanded-mode {
            padding: 20px;
            min-width: 345px;
            min-height: 150px;
            max-width: 345px;
            max-height: 150px;
        }

        .bubble-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    filter: blur(25px) contrast(1) saturate(1) brightness(1.5);
}

.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
    mix-blend-mode: hard-light;
    will-change: transform;
}

.g1 {
    width: 80%;
    height: 80%;
    left: 0%;
    top: 0%;
    background: radial-gradient(circle at 25% 30%, rgba(var(--bubble1, 18,113,255),0.7) 0, rgba(var(--bubble1, 18,113,255),0) 70%);
    animation: moveVertical 9s ease-in-out infinite;
}
.g2 {
    width: 70%;
    height: 70%;
    left: 30%;
    top: 10%;
    background: radial-gradient(circle at 75% 25%, rgba(var(--bubble2, 221,74,255),0.6) 0, rgba(var(--bubble2, 221,74,255),0) 70%);
    animation: moveInCircle 12s linear infinite;
}
.g3 {
    width: 60%;
    height: 60%;
    left: 10%;
    top: 40%;
    background: radial-gradient(circle at 40% 80%, rgba(var(--bubble3, 100,220,255),0.5) 0, rgba(var(--bubble3, 100,220,255),0) 70%);
    animation: moveHorizontal 16s ease-in-out infinite;
}
.g4 {
    width: 65%;
    height: 65%;
    left: 50%;
    top: 50%;
    background: radial-gradient(circle at 80% 80%, rgba(var(--bubble4, 200,50,50),0.5) 0, rgba(var(--bubble4, 200,50,50),0) 70%);
    animation: moveInCircle 20s reverse infinite;
}
.g5 {
    width: 55%;
    height: 55%;
    left: 20%;
    top: 60%;
    background: radial-gradient(circle at 60% 90%, rgba(var(--bubble5, 180,180,50),0.4) 0, rgba(var(--bubble5, 180,180,50),0) 70%);
    animation: moveVertical 14s reverse infinite;
}

/* Animations */
@keyframes moveInCircle {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.08);}
  100% { transform: rotate(360deg) scale(1);}
}
@keyframes moveVertical {
  0% { transform: translateY(-10%);}
  50% { transform: translateY(10%);}
  100% { transform: translateY(-10%);}
}
@keyframes moveHorizontal {
  0% { transform: translateX(-10%);}
  50% { transform: translateX(10%);}
  100% { transform: translateX(-10%);}
}

/* Make sure your .container content is above the bubbles */
.container > *:not(.bubble-bg) {
    position: relative;
    z-index: 1;
}


        .top-section {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 12px;
            transition: opacity 220ms ease, transform 260ms ease;
        }

        .image {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            margin-right: 16px;
            flex-shrink: 0;
            object-fit: cover;
            transition: transform 280ms ease, filter 280ms ease, opacity 220ms ease;
        }

        .meta {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 0;
            transition: opacity 220ms ease, transform 260ms ease;
        }

        .name {
            white-space: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: bold;
            margin-bottom: 4px;
        }

        .artist {
            white-space: wrap;
            overflow: hidden;
            text-overflow: ellipsis;
            opacity: 0.7;
            font-size: 0.9em;
        }

        .youtube-link {
            margin-top: 6px;
            width: fit-content;
            font-size: 0.78em;
            letter-spacing: 0.02em;
            text-decoration: underline;
            text-underline-offset: 2px;
            opacity: 0.82;
        }

        .youtube-link:hover {
            opacity: 1;
        }

        .lyrics {
            display: flex;
            white-space: wrap;
            flex-direction: column;
            text-align: left;
            opacity: 0;
            transition: opacity 0.5s;
            font-weight: bold;
            width: 100%;
            max-height: 72px;
            overflow: hidden;
        }

        .lyrics.visible {
            opacity: 0.5;
        }

        .container.track-transition-out .top-section,
        .container.track-transition-out .meta,
        .container.track-transition-out .lyrics {
            opacity: 0;
        }

        .container.track-transition-out .image {
            opacity: 0.2;
            transform: scale(0.96);
            filter: blur(0.8px);
        }

        .container.track-transition-in .top-section,
        .container.track-transition-in .meta,
        .container.track-transition-in .lyrics {
            opacity: 1;
        }

        .container.track-transition-in .image {
            opacity: 1;
            transform: scale(1);
            filter: blur(0px);
        }

        .container.compact-mode .lyrics {
            opacity: 0;
            max-height: 0;
            margin-top: 0;
            margin-bottom: 0;
            pointer-events: none;
        }

        .container.compact-mode .top-section {
            margin-bottom: 0;
        }

        .container.expanded-mode .lyrics {
            max-height: 72px;
        }

        @media (max-width: 768px) {
            .container,
            .container.expanded-mode {
                min-width: min(94vw, 390px);
                max-width: min(94vw, 390px);
                min-height: 166px;
                max-height: 166px;
            }

            .container.compact-mode {
                min-height: 106px;
                max-height: 106px;
            }

            .image {
                width: 68px;
                height: 68px;
            }
        }