/* Frenetic spin on hover + smooth stop on mouse leave (no JS) */

/* Base */
td img#avatar.avatar{
  width:140px;
  height:140px;
  object-fit:cover;
  display:block;
  border-radius:50%;
  position:relative;
  transform-origin:50% 50%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  /* initial transform and transition for smooth stopping */
  transform: rotate(0deg) rotateX(0deg) rotateY(0deg) scale(1);
  transition: transform 0.9s cubic-bezier(.22,.9,.24,1), box-shadow 0.35s;
}

/* Frenetic keyframes (fast chaotic spin) */
@keyframes frenetic-spin {
  0%   { transform: rotate(0deg)    rotateX(0deg)   rotateY(0deg)   scale(1); }
  12%  { transform: rotate(140deg)  rotateX(12deg)  rotateY(8deg)   scale(1.06); }
  28%  { transform: rotate(360deg)  rotateX(-8deg)  rotateY(18deg)  scale(1.04); }
  44%  { transform: rotate(620deg)  rotateX(10deg)  rotateY(-12deg) scale(1.08); }
  68%  { transform: rotate(920deg)  rotateX(-6deg)  rotateY(10deg)  scale(1.02); }
  100% { transform: rotate(1260deg) rotateX(0deg)    rotateY(0deg)   scale(1); }
}

/* While hovering: run fast infinite animation BUT also remove the smooth transition so animation governs transform */
td img#avatar.avatar:hover{
  animation: frenetic-spin 0.45s linear infinite;
  box-shadow:0 30px 60px rgba(0,0,0,0.75), 0 6px 18px rgba(0,0,0,0.35);
  /* disable the transition so the animation is not interfered */
  transition: none;
}

/* On mouse leave: animation stops (browser cancels it) and CSS returns to base transform.
   The base rule has a transition on transform, so the element will smoothly interpolate from current visual rotation back to rest.
   To ensure browsers interpolate from the computed animated state, force a tiny reflow by toggling a neutral transform via :not(:hover). */
td img#avatar.avatar:not(:hover){
  /* explicitly set transform to identity to animate back (transition defined on base) */
  transform: rotate(0deg) rotateX(0deg) rotateY(0deg) scale(1);
  box-shadow:0 10px 28px rgba(0,0,0,0.45);
  /* keep the transition active so it eases to stop */
  transition: transform 0.9s cubic-bezier(.22,.9,.24,1), box-shadow 0.35s;
}

/* Mobile/tap: quick burst then smooth stop */
td img#avatar.avatar:active{
  animation: frenetic-spin 0.45s linear 1;
  transition: transform 0.9s cubic-bezier(.22,.9,.24,1);
}

/* Smaller screens */
@media(max-width:480px){
  td img#avatar.avatar{ width:110px; height:110px; }
}

/* Coloca o GIF do disco abaixo do player, centralizado */
.player.box {
  position: relative;
  padding-bottom: 150px; /* espaço para o GIF */
  min-height: 88px;
}

/* Disco (GIF) posicionado abaixo e centralizado */
.player.box::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  width: 128px;
  height: 128px;
  background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.pinimg.com%2Foriginals%2F3b%2F8c%2F5f%2F3b8c5fc7990fb08c8f3a44dfde89bf95.gif&f=1&nofb=1&ipt=dbfdf19b1a4a434ba159ec7e48c71a52b969a27a48ce2f5b6df3525b2b4b6fb2');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 5;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

/* Ajuste para evitar sobreposição do texto */
.player.box .songName { margin-bottom: 8px; }

/* Responsivo: reduz o GIF em telas pequenas */
@media (max-width:480px){
  .player.box { padding-bottom: 120px; }
  .player.box::after{
    width: 96px;
    height: 96px;
    bottom: 8px;
  }