@keyframes pulse-ring {
    0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.03); }
}

/* Hero-right panel (migrated from Home.razor's .hero-right). Owns the navy backdrop, clips the
   full-bleed visualizer + ring overflow, and is the positioned ancestor for the inset:0 layers. */
.now-playing-panel {
    background: var(--deepdrft-navy);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    height: 100%;
}

@media (max-width: 960px) {
    .now-playing-panel { min-height: 50vh; }
}

/* Full-bleed waveform background. WaveformVisualizer Fill="true" renders its layer as
   position:absolute; inset:0, so this box only needs to be a positioned, sized ancestor. z-index:0
   pins it to the bottom of the panel's stacking order, beneath the rings and the now-playing-content. */
.np-visualizer-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* The lava-lamp popover trigger overlays the panel's top-right corner (full parity, §8e). Above the
   canvas (z-index) and pointer-enabled so the icon is clickable even though the visualizer layer below
   it is pointer-events:none. */
.np-visualizer-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 3;
}

.now-playing-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
}

.circle-deco {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(61, 122, 104, 0.3);
    animation: pulse-ring 4s ease-in-out infinite;
    pointer-events: none;
}

.circle-deco:nth-child(1) { width: 320px; height: 320px; animation-delay: 0s; }
.circle-deco:nth-child(2) { width: 520px; height: 520px; animation-delay: 0.8s; }
.circle-deco:nth-child(3) { width: 720px; height: 720px; animation-delay: 1.6s; }