Quelagrate

$(document).on('click', function(event) {
  const isPopupClicked = Boolean(event.target.closest('.music-content'));
  if (!isPopupClicked) {
    $('.music-content').removeClass('open');
  }
});

upd: Код для плавной анимации (но без keyframes :))

HTML:

<div class="music-content"></div>
<button class="music-btn">Open</button>

CSS:

.music-content {
  width: 400px;
  height: 400px;
  visibility: hidden;
  position: absolute;
  left: 50%;
  top: 0;
  background-color: tomato;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: transform ease .5s, opacity ease .2s, visibility ease .2s;
}

.open {
  transform: translate(-50%, 20%);
  opacity: 1;
  visibility: visible;
}

JS:

$(document).on('click', function(event) {
  const isPopupClicked = Boolean(event.target.closest('.music-content'));
  if (!isPopupClicked) {
    $('.music-content').removeClass('open');
  }
});

$('.music-btn').on('click', function(event) {
  event.stopPropagation();
  $('.music-content').addClass('open');
});

Я так понял у тебя анимация лишь как open, да?
- Тогда можно просто в JS менять значения в свойстве animation , а как подключить @keyframes к JS можешь и сам узнать (НО если нужно могу дать пример).
- Ещё можешь добавлять класс .open - при открытии и .close - при закрытии, там же писать логику, когда закрывается, открывается и, конечно, когда он в статике.
Так-же есть и другие способы.

if (($_SESSION['login'] ?? '') === '');

Можно в РНР использовать нечто подобное

<?php
$random_string = strtoupper(bin2hex(random_bytes(12)));

echo $random_string;

PHP online