/**
 * O palco da página pública `/live`: quem está tocando fica grande, o outro encolhe.
 *
 * A página serve duas transmissões da plataforma — a missa (vídeo) e a rádio (áudio) — e os dois são
 * som. Tocados juntos viram homilia por cima de música; por isso o player já garante que só um toca
 * por vez. Este arquivo cuida da outra metade: **fazer a tela mostrar qual é o que está tocando.**
 *
 * A hierarquia não é fixa. Ela começa no que o servidor sabe (há missa no ar? então a missa) e passa
 * a seguir o dedo do visitante: apertou play na rádio, a rádio vira o foco e o vídeo recolhe; apertou
 * no vídeo, troca de novo. Quem escolhe é quem está ouvindo.
 *
 * ---
 *
 * **Por que um arquivo próprio, e não classes utilitárias.**
 *
 * O layout público carrega `style.css`, um Tailwind congelado que nenhum build regenera — classe que
 * não estiver lá não existe, e falha em silêncio (foi assim que uma capa saiu com 24 px em vez de
 * 128). Escrever isto com utilitárias exigiria despejar dezenas de classes naquele arquivo órfão, ou
 * fazer o JavaScript montar strings de classe na mão.
 *
 * Aqui a regra mora num lugar só, tem nome, e o JavaScript troca UM atributo — `data-focus` no
 * palco. O resto é consequência. É também o que permite a transição: interpolar tamanho é trabalho
 * de CSS, não de script.
 *
 * As cores saem das variáveis do tema da página pública (`--card`, `--primary`, `--muted`), então
 * tudo aqui acompanha o modo claro e o escuro sem uma linha a mais.
 */

/* ---- O palco --------------------------------------------------------------------------------- */

[data-live-stage] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    /* O palco começa logo abaixo do cabeçalho azul. A sobreposição só existe no modo vídeo, abaixo. */
    margin-top: 0.5rem;
    transition: margin-top 300ms ease;
}

/* O VÍDEO sobe e encaixa na faixa azul do hero: ele é escuro, e a sobreposição é o que dá à página
   o ar de "o conteúdo começa aqui". O card da rádio é claro — subindo, ele parecia ter escorregado
   para dentro do cabeçalho, com metade em cima do azul e metade fora.
   Só no desktop: no telefone o hero é curto e qualquer sobreposição come o texto dele. */
@media (min-width: 768px) {
    [data-live-stage][data-focus='video'] {
        margin-top: -2.5rem;
    }
}

/* Quem está em foco vem primeiro, sempre — inclusive quando o visitante troca. Sem isto, apertar
   play na rádio a deixaria grande no lugar de baixo, e a pessoa teria de rolar para ver o que
   acabou de escolher. */
[data-live-stage] > [data-live-slot] {
    order: 2;
}

[data-live-stage][data-focus='video'] > [data-live-slot='video'],
[data-live-stage][data-focus='radio'] > [data-live-slot='radio'] {
    order: 1;
}

/* O card da missa (título e compartilhar) fecha a coluna: é rodapé do conteúdo, não manchete. */
[data-live-stage] > [data-live-tail] {
    order: 3;
}

/* ---- O vídeo recolhido ------------------------------------------------------------------------
 *
 * Vira uma faixa: a capa continua visível e o botão continua clicável. Esconder seria pior do que
 * encolher — quem quer voltar para a missa precisa achar onde clicar.
 */

.live-video-frame {
    transition: height 300ms ease;
}

[data-live-stage][data-focus='radio'] > [data-live-slot='video'] .live-video-frame {
    aspect-ratio: auto;
    height: 6.5rem;
}

[data-live-stage][data-focus='radio'] > [data-live-slot='video'] [data-live-play] {
    width: 3rem;
    height: 3rem;
}

[data-live-stage][data-focus='radio'] > [data-live-slot='video'] [data-live-play] svg {
    width: 1.25rem;
    height: 1.25rem;
}

[data-live-stage][data-focus='radio'] > [data-live-slot='video'] .live-video-caption {
    bottom: 0.75rem;
    left: 0.75rem;
    font-size: 0.8125rem;
}

[data-live-stage][data-focus='radio'] > [data-live-slot='video'] .live-video-sub {
    display: none;
}

/* ---- O card da rádio -------------------------------------------------------------------------- */

.live-radio-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    padding: 1.5rem;
    transition: background-color 250ms ease, border-color 250ms ease, padding 250ms ease;
}

/* No ar: um filete na borda esquerda e um fundo levemente tingido. É o que responde de relance à
   pergunta que traz a pessoa aqui — tem alguma coisa tocando agora? — sem obrigá-la a ler o selo.
   Fora do ar o card fica em repouso, igual a qualquer outro. */
.live-radio-card.is-on-air {
    border-left: 4px solid hsl(var(--primary));
    background: linear-gradient(90deg, hsl(var(--primary) / 0.07), hsl(var(--card)) 55%);
}

.live-radio-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* ---- Capa ---- */

.live-radio-cover {
    position: relative;
    flex-shrink: 0;
    width: 7rem;
    height: 7rem;
    transition: width 300ms ease, height 300ms ease;
}

.live-radio-cover-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
    background: hsl(var(--muted));
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-radio-cover-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* O LOGO cabe inteiro; a capa de álbum é que preenche.

   As duas imagens dividem o mesmo quadrado de 7rem, e por um tempo dividiram também o
   `object-fit: cover`. Para a capa isso está certo: ela é quadrada, e preencher o quadrado não
   tira nada dela. Para o logo é destrutivo — uma marca panorâmica recortada ao centro perde
   justamente o nome, que costuma estar nas laterais.

   `contain` deixa sobrar fundo em volta, e é o preço certo a pagar: marca aparecendo pela metade
   é pior que marca menor. */
.live-radio-cover-inner .live-radio-logo {
    object-fit: contain;
}

.live-radio-cover-icon {
    width: 2.5rem;
    height: 2.5rem;
    color: hsl(var(--muted-foreground));
}

/* A capa do álbum entra por cima do logo, com transição — é o que faz a troca de faixa ser
   percebida em vez de simplesmente acontecer. */
.live-radio-art {
    position: absolute;
    inset: 0;
    transition: opacity 500ms ease;
}

.live-radio-art.is-empty {
    opacity: 0;
}

/* O anel pulsa atrás da capa enquanto o áudio SAI — não enquanto a rádio está no ar. Animar por
   "está no ar" faria a tela parecer tocando com o ouvinte sem ouvir nada. */
.live-radio-ring {
    position: absolute;
    inset: -0.25rem;
    border-radius: 1rem;
    border: 2px solid hsl(var(--primary) / 0.35);
    animation: live-radio-ring 2s ease-out infinite;
    pointer-events: none;
}

@keyframes live-radio-ring {
    0%   { transform: scale(1);    opacity: 0.8; }
    100% { transform: scale(1.08); opacity: 0; }
}

/* ---- Texto ---- */

.live-radio-info {
    flex: 1;
    min-width: 0;
}

.live-radio-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* O `!important` aqui não é preguiça: o `radio-player.js` também alterna utilitárias do painel
   (`bg-rose-50`, `text-rose-700`) neste mesmo elemento, e naquele arquivo elas vêm de uma folha
   carregada depois. Sem a marca, quem ganha é a última — e no CSS público essas classes nem
   existem, então o selo ficaria preto e sem fundo. Foi o que aconteceu. */
.live-radio-card.is-on-air .live-radio-badge {
    background: hsl(0 84% 60% / 0.12) !important;
    color: hsl(0 72% 42%) !important;
}

/* Fora do ar o selo fica neutro, e também precisa vencer as utilitárias. */
.live-radio-card:not(.is-on-air) .live-radio-badge {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--muted-foreground)) !important;
}

/* ---- A onda sonora ----
 *
 * Quatro barras que ondulam. Elas dizem, sem texto, a diferença entre "a rádio está no ar" e "o som
 * está saindo daqui agora" — a segunda é a que o ouvinte quer confirmar depois de apertar play.
 */

.live-radio-wave {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 0.7rem;
}

.live-radio-card.is-on-air .live-radio-wave {
    display: inline-flex;
}

.live-radio-wave > span {
    width: 2px;
    height: 100%;
    border-radius: 1px;
    background: currentColor;
    transform-origin: bottom;

    /* No ar, mas em silêncio deste lado: as barras ficam baixas e paradas — um equalizador imóvel
       seria confundido com defeito, e um animado enquanto ninguém ouve seria mentira. */
    transform: scaleY(0.3);
    transition: transform 200ms ease;
}

/* Tocando: cada barra com o seu ritmo, para não parecerem um bloco só subindo e descendo. */
.live-radio-card.is-playing .live-radio-wave > span {
    animation: live-radio-wave 900ms ease-in-out infinite;
}

.live-radio-card.is-playing .live-radio-wave > span:nth-child(2) { animation-delay: 150ms; animation-duration: 1100ms; }
.live-radio-card.is-playing .live-radio-wave > span:nth-child(3) { animation-delay: 300ms; animation-duration: 800ms; }
.live-radio-card.is-playing .live-radio-wave > span:nth-child(4) { animation-delay: 80ms;  animation-duration: 1000ms; }

@keyframes live-radio-wave {
    0%, 100% { transform: scaleY(0.3); }
    50%      { transform: scaleY(1); }
}

/* Com a onda no selo, o ponto vira redundância: dois indicadores dizendo a mesma coisa lado a lado
   só competem entre si. Ele fica no HTML porque o player o procura pelo `data-` — some daqui. */
.live-radio-card.is-on-air .live-radio-dot {
    display: none;
}

.live-radio-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: currentColor;
}

.live-radio-card.is-on-air .live-radio-dot {
    animation: live-radio-pulse 1.6s ease-in-out infinite;
}

@keyframes live-radio-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.live-radio-name {
    margin-top: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

/* O que está tocando: a linha de maior peso do card, porque é a que muda e a que responde "vale a
   pena ouvir agora?". O `min-width: 0` no pai é o que faz as reticências funcionarem dentro de um
   flex — sem ele, um título longo empurra o botão para fora da tela. */
.live-radio-title {
    margin-top: 0.35rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: hsl(var(--card-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 400ms ease;
}

.live-radio-artist {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 400ms ease;
}

.live-radio-state {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    min-height: 1rem;
}

/* ---- Botão ---- */

.live-radio-action {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.live-radio-toggle {
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    border: none;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px hsl(var(--primary) / 0.28);
    transition: transform 150ms ease, box-shadow 200ms ease, width 300ms ease, height 300ms ease;
}

.live-radio-toggle:hover  { transform: scale(1.06); }
.live-radio-toggle:active { transform: scale(0.95); }

/* O halo pulsante enquanto o som SAI. Ele mora numa sombra animada, e não num elemento a mais:
   assim acompanha o botão nos dois tamanhos sem precisar de regra para cada um.
   `is-playing`, e não `is-on-air` — pulsar com o ouvinte sem ter apertado nada seria a tela
   dizendo que está tocando quando não está. */
.live-radio-card.is-playing .live-radio-toggle {
    animation: live-radio-beat 2s ease-out infinite;
}

@keyframes live-radio-beat {
    0%   { box-shadow: 0 8px 20px hsl(var(--primary) / 0.28), 0 0 0 0    hsl(var(--primary) / 0.45); }
    70%  { box-shadow: 0 8px 20px hsl(var(--primary) / 0.28), 0 0 0 14px hsl(var(--primary) / 0); }
    100% { box-shadow: 0 8px 20px hsl(var(--primary) / 0.28), 0 0 0 0    hsl(var(--primary) / 0); }
}

.live-radio-toggle:focus-visible {
    outline: 3px solid hsl(var(--primary) / 0.4);
    outline-offset: 3px;
}

.live-radio-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.live-radio-pulse {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -2rem;
    width: 4rem;
    height: 4rem;
    border-radius: 999px;
    background: hsl(var(--primary) / 0.25);
    animation: live-radio-ring 2s ease-out infinite;
    pointer-events: none;
}

.live-radio-listeners {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}

.live-radio-listeners-icon {
    width: 0.85rem;
    height: 0.85rem;
}

/* ---- A rádio recolhida: o mesmo card, menor ---- */

[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-card    { padding: 0.9rem 1.1rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-row     { gap: 0.9rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-cover   { width: 3.5rem; height: 3.5rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-cover-icon { width: 1.4rem; height: 1.4rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-toggle  { width: 3rem; height: 3rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-pulse   { width: 3rem; height: 3rem; margin-left: -1.5rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-icon    { width: 1.15rem; height: 1.15rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-title   { font-size: 0.9375rem; margin-top: 0.15rem; }
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-artist  { font-size: 0.8125rem; }

/* Some o que é contexto, fica o que é agora: recolhido, o card responde "o que está tocando" e
   "onde clico". O nome da rádio já está no título da página. */
[data-live-stage][data-focus='video'] > [data-live-slot='radio'] .live-radio-secondary { display: none; }

/* ---- Telefone ---- */

@media (max-width: 640px) {
    .live-radio-row   { gap: 0.9rem; }
    .live-radio-cover { width: 4.5rem; height: 4.5rem; }
    .live-radio-title { font-size: 1rem; }

    /* O contador cabe ao lado do botão no desktop; num telefone ele empurraria o alvo para fora. */
    .live-radio-listeners { display: none; }
}

/* ---- Movimento reduzido ---------------------------------------------------------------------- */

/* Quem prefere menos movimento não recebe nenhum: a troca continua acontecendo, só que instantânea.
   O modo-foco muda tamanho de blocos grandes, que é justamente o tipo de animação que incomoda quem
   tem sensibilidade vestibular. */
@media (prefers-reduced-motion: reduce) {
    .live-video-frame,
    .live-radio-card,
    .live-radio-cover,
    .live-radio-toggle,
    .live-radio-title,
    .live-radio-artist,
    .live-radio-art {
        transition: none;
    }

    .live-radio-ring,
    .live-radio-pulse,
    .live-radio-card.is-on-air .live-radio-dot,
    .live-radio-card.is-playing .live-radio-toggle,
    .live-radio-card.is-playing .live-radio-wave > span {
        animation: none;
    }

    /* Sem animação, as barras ficam em meia altura: continuam sendo o desenho de uma onda, e não
       quatro traços encolhidos que parecem um erro de carregamento. */
    .live-radio-card.is-playing .live-radio-wave > span {
        transform: scaleY(0.65);
    }
}