/* =========================================================================
   PlayCash — detalhe da campanha

   O momento de ESCOLHER, que não existia. Antes, tocar numa miniatura caía
   direto no player: a pessoa nunca decidia assistir, ela só se via assistindo.
   É a diferença entre catálogo e lista de tarefas, e é o padrão 8 da tabela do
   DIRECAO-VISUAL.md — o único que faltava inteiro.

   O que esta tela entrega, nesta ordem de leitura:
     1. a capa, grande, sangrando de borda a borda — o conteúdo é a interface;
     2. o título, com o peso de título de verdade;
     3. os metadados e a sinopse, em cinza, porque são apoio;
     4. O VALOR, que é o motivo de a pessoa estar aqui;
     5. uma ação principal impossível de não achar, e a saída ao lado dela.

   Regras da casa valendo: nenhum hex neste arquivo, tudo por token; a capa
   reaproveita .video-capa para nunca divergir de proporção da lista.
   ========================================================================= */

.detalhe {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* ------------------------------------------------------------------ capa */

/* Sangra: escapa do respiro lateral do .app e encosta nas bordas. Capa dentro
   de caixa vira cartão, e cartão é exatamente o que ela não é. */
.detalhe-capa {
  margin-inline: calc(var(--pad-tela) * -1);
  margin-top: calc(var(--e-4) * -1);
  position: relative;
}

/* Mesma classe da miniatura da lista, para o tratamento da cor não divergir —
   mas a MEDIDA aqui é outra. `.video-capa` nasce 76×58px cravado, para caber
   na lista; sem zerar a altura, a capa "larga" vira uma faixa de 58px e o
   padrão inteiro se perde. Nesta tela quem manda é o aspect-ratio. */
.detalhe-capa .video-capa {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0;
}

/* Numa capa deste tamanho a duração precisa do mesmo respiro do resto da
   tela: os 4px que servem à miniatura deixam a etiqueta colada no canto. */
.detalhe-capa .video-dur {
  right: var(--e-3);
  bottom: var(--e-3);
  font-size: var(--txt-nota);
  padding: var(--e-1) var(--e-2);
}

/* A capa termina num corte reto contra o fundo; esta emenda dissolve a linha,
   como no rodapé da capa da tela inicial. */
.detalhe-capa::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--e-8);
  background: linear-gradient(to bottom, transparent, var(--fundo));
  pointer-events: none;
}

/* ----------------------------------------------------------------- corpo */

.detalhe-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding-top: var(--e-2);
}

.detalhe-titulo {
  margin: 0;
  font-size: var(--txt-destaque);
  font-weight: var(--peso-extra);
  line-height: var(--altura-apertada);
  letter-spacing: var(--letra-titulo);
  color: var(--texto);
}

/* Metadados numa linha só, separados por ponto médio. Envolvem quando não
   couberem — nome de anunciante comprido não pode empurrar nada para fora. */
.detalhe-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--txt-nota);
  color: var(--texto-fraco);
}

.detalhe-meta > span:not(:last-child)::after {
  content: '·';
  margin-left: var(--e-2);
  color: var(--texto-3);
}

/* ------------------------------------------------------------- sinopse */

/* Corpo de leitura, não de interface: linha mais solta e medida limitada.
   Linha longa demais faz o olho perder o começo da seguinte, e em telefone
   deitado a coluna passaria de 90 caracteres sem esse teto. */
.detalhe-sinopse {
  margin: 0;
  max-width: 62ch;
  font-size: var(--txt-corpo);
  line-height: var(--altura-solta);
  color: var(--texto-fraco);
}

/* ---------------------------------------------------------------- prêmio */

/* O número é o argumento da tela. Verde porque é dinheiro entrando — a mesma
   regra do extrato e do saldo, sem exceção decorativa. */
.detalhe-premio {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin-top: var(--e-1);
}

.detalhe-premio strong {
  font-size: var(--txt-valor);
  font-weight: var(--peso-extra);
  line-height: 1;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}

.detalhe-premio .nota {
  color: var(--texto-fraco);
}

/* ---------------------------------------------------------------- ações */

.detalhe-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

/* =============================================================== MOVIMENTO

   Entrada em cascata, de cima para baixo, na ordem de leitura. O atraso entre
   os itens é de 55ms: abaixo de ~30ms ninguém percebe cascata, acima de ~80ms
   a tela parece lenta para quem já sabe o que quer.

   O deslocamento é curto de propósito (10px). Movimento de entrada existe para
   dizer "isto chegou agora", não para ser assistido — e quem abriu o detalhe
   está a um toque de pegar dinheiro. */

@keyframes detalhe-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* A capa entra sem deslocar: ela cresce um fio. Deslocar a imagem inteira
   chamaria mais atenção que o conteúdo dela. */
@keyframes detalhe-capa-entra {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: none; }
}

.detalhe-capa,
.detalhe-titulo,
.detalhe-meta,
.detalhe-sinopse,
.detalhe-premio,
.detalhe-acoes {
  animation: detalhe-entra var(--tempo-medio) var(--curva) backwards;
}

.detalhe-capa    { animation-name: detalhe-capa-entra; }
.detalhe-titulo  { animation-delay: 55ms; }
.detalhe-meta    { animation-delay: 110ms; }
.detalhe-sinopse { animation-delay: 165ms; }
.detalhe-premio  { animation-delay: 220ms; }
.detalhe-acoes   { animation-delay: 275ms; }

/* Quem pediu menos movimento recebe a tela pronta. Não é "animação mais
   curta": é nenhuma, e sem `backwards` segurando opacidade zero. */
@media (prefers-reduced-motion: reduce) {
  .detalhe-capa,
  .detalhe-titulo,
  .detalhe-meta,
  .detalhe-sinopse,
  .detalhe-premio,
  .detalhe-acoes {
    animation: none;
  }
}