/* ============================================================
   JIFFY TRICE — RADIO TRICE (estrutura "Live Sets")
   Seção de fluxo normal: sem sticky de 255svh, sem cena
   scroll-scrubbed, sem overlays de Saturno em PNG. O cenário
   é só o loop de vídeo no fundo + a vinheta padrão.
   As regras base de .sets / .set-card em styles.css já são as
   do layout Live Sets — aqui só neutralizamos os overrides
   tardios daquele arquivo (disco em CSS, vídeo escondido,
   cabeçalho à esquerda, min-height de tela cheia).
   ============================================================ */

/* Altura governada pelo padding, como no Live Sets. O filete de 1px do
   topo sai: quem separa a seção agora é o fade preto, e a linha cortava
   justamente a transição que ele suaviza. */
.sets-radio {
  min-height: 0;
  padding-block: clamp(48px, 7vw, 88px);
  border-top: 0;
}

/* O disco/planeta desenhado em CSS era o "Saturno laranja" da
   frente — o fundo agora é o vídeo, então ele sai de cena. */
.sets-radio .sets-bg { display: none !important; }

/* Loop de Saturno cobrindo a seção. Revela só quando realmente
   toca (o poster segura o quadro até lá), evitando o primeiro
   frame congelado por cima do fundo. */
.sets-radio .sets-video {
  display: block !important;
  opacity: 0;
  transition: opacity 900ms ease;
}
.sets-radio .sets-video.is-playing { opacity: .55; }

/* Vinheta radial do Live Sets + fade preto no topo e na base, para a
   seção nascer e morrer no mesmo tom das vizinhas (#050505) em vez de
   cortar seco no vídeo. Fica em z-index 1 (abaixo do conteúdo, que é 2),
   então escurece só o cenário. */
.sets-radio::before {
  background:
    linear-gradient(180deg, #050505 0%, rgba(5, 5, 5, .86) 6%, rgba(5, 5, 5, .42) 13%, transparent 22%),
    linear-gradient(0deg, #050505 0%, rgba(5, 5, 5, .86) 6%, rgba(5, 5, 5, .42) 13%, transparent 22%),
    radial-gradient(90% 80% at 50% 50%, rgba(8, 8, 8, .28) 0%, rgba(8, 8, 8, .9) 100%);
}

/* Cabeçalho centralizado, como no Live Sets. */
.sets-radio .sets-head { text-align: center; }
.sets-radio .sets-head .cue { justify-content: center; }

/* ------------------------------------------------------------
   Destaque do card central — mesma curva e mesmos valores do
   Live Sets: só o do meio fica colorido e nítido; os laterais
   ficam preto e branco, desfocados e ofuscados.
   O script.js já publica --card-focus (k², k = 1 - d/larg*1.14)
   e força 1 no card que está tocando; aqui só o traduzimos em
   pixels. Sem transition: acompanha o gesto quadro a quadro.
   ------------------------------------------------------------ */
/* Capas de release são quadradas (1080×1080): thumb 1:1 mostra a arte
   inteira. No 4:3 herdado do Live Sets o corte central comia o título
   impresso no topo da capa. */
.sets-radio .set-thumb { aspect-ratio: 1; }

.sets-radio .set-card {
  --card-focus: 1;
  opacity: calc(.4 + var(--card-focus) * .6);
  /* Esses dois valores (grayscale .74, blur 1.65px) tinham ficado
     desalinhados com a intenção original do script.js — que calcula e
     publica --card-blur/--card-gray com esses mesmos limites, mas
     nenhuma regra CSS os consumia. O calc() aqui rodava solto com um
     teto bem maior (grayscale 1, blur 3.5px), mais caro de rasterizar
     a cada frame de scroll sem ganho visual correspondente. */
  filter: grayscale(calc((1 - var(--card-focus)) * .74)) blur(calc((1 - var(--card-focus)) * 1.65px));
  transform: scale(calc(.9 + var(--card-focus) * .12));
  will-change: filter, transform;
}

/* mobile: sem filtro (rasterizar blur/grayscale por card custa caro) e
   card menor — a 300px ele dominava a tela inteira do telefone. */
@media (max-width: 767px) {
  .sets-radio .set-card {
    filter: none;
    width: min(248px, 66vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sets-radio .sets-video { display: none !important; }
  .sets-radio .set-card { filter: grayscale(calc(1 - var(--card-focus))); transform: none; }
}