/* ==========================================================================
   PLAYER EFFECTS — animação de troca de música/capa, compartilhada por todos
   os templates de player (urus, blaze, retro, pulse, cinema).

   Quando a música muda, o JS (player-effects.js) adiciona classes que
   disparam animações CSS de "reveal" do conteúdo novo:
     - .music-cover.cover-changing  → fade + blur in (sem transform pra não
                                       brigar com posicionamento de templates
                                       como o retro)
     - .track-title.text-changing
       .track-artist.text-changing  → fade in (sem transform pra não brigar
                                       com .marquee animation)
     - .music-info.track-changing   → ganha 800ms; cada template usa esse
                                       hook pra disparar seu flair próprio
                                       (ripple, shimmer, scan beam, etc.)
   ========================================================================== */

/* Cover — fade + blur revelado quando muda */
@keyframes pe-cover-reveal {
  0%   { opacity: 0; filter: blur(3px) brightness(1.2); }
  60%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0) brightness(1); }
}
.music-cover.cover-changing {
  animation: pe-cover-reveal 380ms ease-out;
}

/* Title/Artist — fade simples (sem translate pra coexistir com marquee) */
@keyframes pe-text-reveal {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.track-title.text-changing {
  animation: pe-text-reveal 320ms ease-out;
}
.track-artist.text-changing {
  animation: pe-text-reveal 320ms ease-out 70ms backwards;
}

/* ==========================================================================
   ACESSIBILIDADE — focus rings visíveis pra navegação por teclado.
   :focus-visible só aparece quando o foco veio do teclado, não do clique do
   mouse — comportamento esperado em UI moderna.
   Outline branca 2px com offset 2px é visível na maioria dos backgrounds
   (todos os 5 templates forçam ou usam fundos escuros/médios). Não toca em
   box-shadow pra não substituir os glows decorativos dos botões.
   ========================================================================== */
button:focus-visible,
a:focus-visible,
input[type="range"]:focus-visible,
[role="region"]:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* Reforço só em containers que tenham fundo claro (urus/blaze podem com tema light) */
.player-container[style*="rgb(255"] :focus-visible,
[data-light-bg] :focus-visible {
  outline-color: #1a1a1c;
}

/* ==========================================================================
   TOUCH TARGETS — em dispositivos coarse (touch), expande hit area dos botões
   pequenos pra atingir o mínimo recomendado de 44×44px (WCAG 2.5.5 AAA).
   Usa ::before invisível como overlay clicável — sem afetar o tamanho visual.
   #play-stop-btn já usa ::after pro spinner de loading; ::before está livre.
   ========================================================================== */
@media (pointer: coarse) {
  .control-btn,
  .like-dislike-buttons button,
  .social-icon,
  .quality-option {
    position: relative;
  }
  .control-btn::before,
  .like-dislike-buttons button::before,
  .social-icon::before,
  .quality-option::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
    /* invisível — só estende a área clicável do elemento pai */
  }
}