/* ═══════════════════════════════════════════════════════════════════════════
   Tema de Halloween — roleta de descontos

   ⚠️ TEMPORÁRIA E ADITIVA. Entra DEPOIS de `roleta.css` e só sobrescreve; a
   original não foi tocada. Quem a carrega é
   `site/partials/roleta_modal_halloween.php`. Para apagar o tema: delete este
   arquivo.

   TUDO ESCOPADO EM `.tema-halloween`, classe posta no `<dialog>` e no canvas
   do confete pela cópia do modal. A roleta de sempre não enxerga nada daqui.

   ── A RODA É CANVAS, E ISSO DECIDIU O DESENHO DESTA FOLHA ──────────────────
   As fatias, o aro de lâmpadas e o confete são desenhados por `roleta.js`, com
   uma paleta dourada escrita dentro do próprio JavaScript. Havia dois
   caminhos: copiar o `roleta.js` e trocar três linhas de cor, ou virar a cor
   por fora.

   Escolhi por fora. `roleta.js` carrega o CSRF, a checagem de elegibilidade,
   os endpoints e a trava de uma chance por pessoa — é o arquivo com mais
   consequência de toda a campanha. Bifurcá-lo por causa de cor é trocar um
   problema de pintura por um risco de campanha: as duas cópias divergiriam na
   primeira correção que alguém fizesse na original.

   `hue-rotate` resolve: o dourado da roda vive por volta de 38° de matiz e a
   abóbora por volta de 22°, então uma volta de -16° leva um ao outro sem
   tocar no brilho nem no contraste do texto escrito sobre as fatias. O
   `saturate` recupera o vigor que a rotação come.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. A moldura do modal ─────────────────────────────────────────────────
   ⚠️ Os três tons de ouro (`--rl-ouro`, `--rl-ouro2`, `--rl-ouro3`) NÃO são
   trocados aqui, de propósito. Quem vira a cor é o giro de matiz do item 2, e
   ele pega as variáveis junto com todo o resto; trocá-las também faria o
   dourado girar DUAS VEZES e sair vermelho.

   O que muda é só o preto do modal, que ganha uma gota de roxo — e ele é
   escuro demais para o giro de matiz alcançar. */
.rlm.tema-halloween {
  --rl-bg:    #0a060e;
  --rl-painel:#17101f;
}

/* ── 2. O giro de matiz, no PAINEL INTEIRO ─────────────────────────────────
   ⚠️ Trocar as três variáveis acima NÃO BASTA, e isso foi medido: o aro de
   lâmpadas, o botão "QUERO GIRAR A ROLETA", o destaque do título, a etiqueta
   "ATÉ 25% OFF", a medalha do resultado e o número do voucher têm o dourado
   ESCRITO À MÃO em `roleta.css` (oito regras), fora do alcance das variáveis.
   Com só as variáveis, a roda ficava abóbora dentro de uma moldura dourada.

   Caçar as oito regras resolveria o que eu VI. O problema é o que não vi: a
   roleta tem quatro telas (apresentação, cadastro, resultado, voucher) e a
   última só existe depois de um giro de verdade. Girar o matiz do painel
   inteiro pega todas por construção, inclusive as que eu não abri.

   É seguro aqui porque (a) conferido que nenhum descendente do painel é
   `position: fixed` ou `sticky` — `filter` criaria um bloco de contenção e os
   deslocaria; e (b) cinza e branco não têm saturação, então texto, fundo e
   linhas não se mexem: só o que já era colorido gira.

   O canvas da roda entra junto, por estar dentro do painel — por isso ele NÃO
   tem filtro próprio, ou giraria duas vezes. O confete é irmão do <dialog>,
   fora do painel, e por isso leva o seu. */
.rlm.tema-halloween .rlm__caixa,
canvas#rlConfete.tema-halloween {
  filter: hue-rotate(-24deg) saturate(1.45);
}

/* ── 3. Abóboras no lugar das estrelas ─────────────────────────────────────
   As fichas e o botão começam com "✦" escrito no HTML da cópia. Trocar o
   caractere exigiria mexer no texto; aqui a estrela só muda de cor e ganha o
   brilho da vela, o que é mais barato e some sem deixar rastro. */
.rlm.tema-halloween .rl-chip,
.rlm.tema-halloween .rl-botao {
  text-shadow: 0 0 14px rgba(255, 106, 26, .35);
}

/* ── 4. A vela ─────────────────────────────────────────────────────────────
   O ponto do selo "Especial de Halloween" treme como chama, em passos
   irregulares — tremor regular vira pisca-pisca de vitrine. É o mesmo tremor
   da faixa da home e do selo da página do curso: três telas, uma chama só. */
/* A cor vem do giro de matiz, como no resto do painel — aqui entram só o
   brilho e o tremor. */
.rlm.tema-halloween .rl-selo__p {
  box-shadow: 0 0 12px 2px rgba(243, 199, 117, .75);
  animation: hwVela 3.4s steps(1, end) infinite;
}
@keyframes hwVela {
  0%, 100% { opacity: 1; }
  8%  { opacity: .55; }
  14% { opacity: 1; }
  26% { opacity: .75; }
  34% { opacity: .98; }
  47% { opacity: .5; }
  53% { opacity: .95; }
  68% { opacity: .82; }
  79% { opacity: 1; }
  88% { opacity: .66; }
}

/* ── 5. A cena ────────────────────────────────────────────────────────────
   Teia com aranha descendo e a abóbora acesa — as MESMAS da faixa da home e
   da página do curso (`halloween_cena.css`). Antes havia aqui uma teia
   desenhada em gradiente, no pseudo-elemento da caixa; saiu, porque era outra
   teia, e duas teias diferentes na mesma visita leem como descuido.

   ⚠️ A cena é IRMÃ da `.rlm__caixa`, não filha: o giro de matiz do item 2
   deixaria a abóbora vermelha. E vem depois dela no HTML de propósito — a
   teia e a aranha passam NA FRENTE do painel, que é onde se leem.

   `pointer-events` já é `none` na folha da cena; aqui só o empilhamento. */
.rlm.tema-halloween .rlm-cena {
  z-index: 3;
  border-radius: inherit;
}

/* A aranha desce pelo canto de cima; a abóbora senta no pé do painel, do lado
   oposto à roda, onde não há texto. */
.rlm.tema-halloween .rlm-cena .hwc__abobora { opacity: .92; }

/* Em tela estreita o modal vira a tela inteira e a coluna de texto ocupa
   tudo: a abóbora sairia em cima do aviso do jurídico. */
@media (max-width: 860px) {
  .rlm.tema-halloween .rlm-cena .hwc__abobora { display: none; }
}

/* ── 6. Quem pediu menos movimento ─────────────────────────────────────────
   A chama para de tremer. O resto do tema é cor, e cor não incomoda ninguém. */
@media (prefers-reduced-motion: reduce) {
  .rlm.tema-halloween .rl-selo__p { animation: none; }
}