/* ═══════════════════════════════════════════════════════
   Rádio Blast! — themes/theme-halloween.css
   Halloween · 28–31 out
   Paleta: abóbora #FF6600 · roxo #7700CC · verde-bruxa #33BB33
   ═══════════════════════════════════════════════════════ */


/* ── Fundo: noite assombrada ──────────────────────── */
body.theme-halloween {
  --green:        #FF8833;
  --green-rgb:    255, 136, 51;
  --green-dim:    rgba(255, 136, 51, 0.10);
  --green-border: rgba(255, 136, 51, 0.22);
  --green2:       #CC6622;
  background:
    radial-gradient(ellipse at 40% 0%,  rgba(150, 40, 0, 0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(80, 0, 150, 0.10) 0%, transparent 50%),
    linear-gradient(180deg, #080408 0%, #050204 100%);
}

/* Sem imagem de fundo: o arquivo referenciado aqui não existe, então a regra
   só gerava um 404 a cada carregamento. A identidade do tema vem dos
   gradientes e das formas decorativas abaixo. */

/* ── Shapes orgânicos — névoa sinistra nas bordas ── */
body.theme-halloween .td-rings {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.theme-halloween .td-ring {
  position: absolute;
  border: none;
  border-radius: 50%;
}

body.theme-halloween .td-r1 {
  width: 820px; height: 620px;
  top: -110px; right: -310px;
  background: radial-gradient(ellipse, rgba(200, 70, 0, 0.24) 0%, transparent 65%);
}
body.theme-halloween .td-r2 {
  width: 680px; height: 780px;
  bottom: -290px; left: -240px;
  background: radial-gradient(ellipse, rgba(100, 0, 180, 0.20) 0%, transparent 65%);
}
body.theme-halloween .td-r3 {
  width: 520px; height: 520px;
  top: 28%; left: -260px;
  background: radial-gradient(ellipse, rgba(80, 0, 140, 0.16) 0%, transparent 60%);
}
body.theme-halloween .td-r4 {
  width: 440px; height: 440px;
  bottom: 9%; right: -175px;
  background: radial-gradient(ellipse, rgba(180, 60, 0, 0.18) 0%, transparent 60%);
}
body.theme-halloween .td-r5 {
  width: 360px; height: 280px;
  top: 5%; left: 28%;
  background: radial-gradient(ellipse, rgba(120, 0, 160, 0.06) 0%, transparent 55%);
}

/* ── Abóboras e aranhas nas bordas ──────────────── */
body.theme-halloween .td-sparks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

body.theme-halloween .td-s {
  position: absolute;
  line-height: 1;
  user-select: none;
  animation: halloween-element-bg 24s ease-in-out infinite;
}

body.theme-halloween .td-s::before              { content: '🎃'; }
body.theme-halloween .td-s:nth-child(even)::before { content: '🕷️'; }

body.theme-halloween .td-s1 { font-size: 110px; right: -28px; top:  7%; opacity: 0.44; animation-delay:   0s; animation-duration: 25s; }
body.theme-halloween .td-s2 { font-size:  74px; right: -18px; top: 37%; opacity: 0.37; animation-delay:  -6s; animation-duration: 20s; }
body.theme-halloween .td-s3 { font-size:  95px; right: -24px; top: 63%; opacity: 0.40; animation-delay: -12s; animation-duration: 27s; }
body.theme-halloween .td-s4 { font-size:  84px; left:  -22px; top: 20%; opacity: 0.34; animation-delay:  -4s; animation-duration: 22s; }
body.theme-halloween .td-s5 { font-size:  65px; left:  -16px; top: 52%; opacity: 0.30; animation-delay: -15s; animation-duration: 19s; }
body.theme-halloween .td-s6 { font-size:  55px; left:  -14px; top: 77%; opacity: 0.36; animation-delay:  -8s; animation-duration: 24s; }
body.theme-halloween .td-s7 { font-size:  36px; left:  12%;  top: 14%; opacity: 0.18; animation-delay: -18s; animation-duration: 29s; }
body.theme-halloween .td-s8 { font-size:  30px; right: 14%;  top: 82%; opacity: 0.15; animation-delay: -10s; animation-duration: 26s; }

@keyframes halloween-element-bg {
  0%   { transform: translate(  0px,   0px) rotate(  0deg); }
  25%  { transform: translate(  6px,  -9px) rotate( -8deg); }
  50%  { transform: translate( -5px,   5px) rotate( 13deg); }
  75%  { transform: translate(  4px,  -4px) rotate( -5deg); }
  100% { transform: translate(  0px,   0px) rotate(  0deg); }
}


/* ── Morcegos ao redor do DJBox ──────────────────── */
body.theme-halloween .djbox-season-deco {
  position: absolute;
  inset: -48px;
  pointer-events: none;
  z-index: 6;
}

body.theme-halloween .deco-p {
  position: absolute;
  line-height: 1;
  animation: halloween-bat 7s ease-in-out infinite;
}

body.theme-halloween .deco-p::before { content: '🦇'; }

body.theme-halloween .deco-p1 { top:  5%; left: 16%;  font-size: 18px; animation-delay:  0s;   animation-duration: 6.5s; }
body.theme-halloween .deco-p2 { top:  8%; right: 10%; font-size: 13px; animation-delay: -2.0s; animation-duration: 8.0s; }
body.theme-halloween .deco-p3 { top: 40%; left: -2%;  font-size: 11px; animation-delay: -4.5s; animation-duration: 7.0s; }
body.theme-halloween .deco-p4 { bottom: 26%; left: 10%; font-size: 16px; animation-delay: -1.5s; animation-duration: 9.0s; }
body.theme-halloween .deco-p5 { bottom: 46%; right: 2%; font-size: 12px; animation-delay: -3.5s; animation-duration: 7.5s; }

/* Morcegos voam errático — movimento assimétrico */
@keyframes halloween-bat {
  0%   { opacity: 0;    transform: translate(  0px,   0px) rotate(  0deg); }
  15%  { opacity: 0.85; transform: translate(-18px, -22px) rotate(-15deg); }
  40%  { opacity: 0.65; transform: translate( 10px, -48px) rotate( 12deg); }
  70%  { opacity: 0.40; transform: translate(-12px, -68px) rotate( -8deg); }
  100% { opacity: 0;    transform: translate(  5px, -90px) rotate(  5deg); }
}


/* ── Shimmer: brilho laranja de abóbora ──────────── */
body.theme-halloween .djbox-card:not(.is-playing)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-16);
  background: radial-gradient(
    ellipse at 30% 90%,
    rgba(200, 80, 0, 0.09) 0%,
    transparent 55%
  );
  animation: halloween-brilho 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes halloween-brilho {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1.0; }
}


/* ── Header ───────────────────────────────────────── */
body.theme-halloween .header--green {
  /* O botão do chat usa o acento deste tema: sobre o header escuro daqui ele
     destaca igual, e o laranja padrão brigaria com esta paleta. */
  --chat-cta: var(--green);
  background: rgba(8, 4, 8, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 102, 0, 0.28);
  box-shadow: none;
}

body.theme-halloween .logo img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(90%) saturate(700%) hue-rotate(15deg) brightness(120%);
}

body.theme-halloween .header--green .nav-item       { color: rgba(220, 170, 140, 0.72); }
body.theme-halloween .header--green .nav-item:hover { color: #fff; background: rgba(255,102,0,.07); }
body.theme-halloween .header--green .nav-item.active { color: #FF8833; background: rgba(255,102,0,.07); }
body.theme-halloween .header--green .nav-more-btn   { color: rgba(220,170,140,0.72); }
body.theme-halloween .header--green .nav-more-btn:hover,
body.theme-halloween .header--green .nav-more-btn.open { color: #fff; background: rgba(255,102,0,.07); }

body.theme-halloween .header--green .btn-icon {
  color: rgba(220,170,140,0.80);
  background: rgba(255,255,255,.04);
  border-top-color: rgba(255,255,255,.08); border-left-color: rgba(255,255,255,.05);
  border-right-color: rgba(255,255,255,.03); border-bottom-color: rgba(0,0,0,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.15);
}
body.theme-halloween .header--green .btn-icon:hover { color: #fff; background: rgba(255,255,255,.08); }

body.theme-halloween .header--green .btn-avatar {
  color: #080408;
  background: linear-gradient(180deg, #FF9944 0%, #FF6600 100%);
  border-top-color: rgba(255,255,255,.40); border-left-color: rgba(255,255,255,.20);
  border-right-color: rgba(200,80,0,.25); border-bottom-color: rgba(150,40,0,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.15);
  filter: none;
}
body.theme-halloween .header--green .btn-avatar:hover { filter: brightness(1.10); }

body.theme-halloween .header--green .btn-badge {
  background: #7700CC; color: #fff; border-color: #080408;
}


/* ══════════════════════════════════════════════════
   DJBox Halloween
   ══════════════════════════════════════════════════ */

body.theme-halloween .djbox-wrap { overflow: visible; }

/* 🎃 balança e quica levemente — abóbora viva */
body.theme-halloween .djbox-wrap::before {
  content: '🎃';
  position: absolute;
  top: 50%;
  right: -28px;
  font-size: 44px;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(255, 102, 0, .80))
    drop-shadow(0 0 24px rgba(200, 40, 0, .50));
  animation: halloween-abobora 0.9s cubic-bezier(0.36, 0, 0.66, -0.56) infinite alternate;
  transform-origin: center bottom;
}

@keyframes halloween-abobora {
  0%   { transform: translateY(-50%) rotate(-5deg) scale(1.00); }
  100% { transform: translateY(-46%) rotate( 5deg) scale(1.04); }
}

/* Card: laranja → roxo, alternando como luz de abóbora */
body.theme-halloween .djbox-card {
  position: relative;
  border-width: 2px;
  animation: halloween-card-glow 4.5s ease-in-out infinite;
}

@keyframes halloween-card-glow {
  0%, 100% {
    border-color: rgba(255, 102, 0, .75);
    box-shadow: 0 0 20px rgba(255, 102, 0, .30), inset 0 0 16px rgba(255, 102, 0, .05);
  }
  50% {
    border-color: rgba(255, 102, 0, .36);
    box-shadow: 0 0 10px rgba(255, 102, 0, .14), inset 0 0 10px rgba(255, 102, 0, .02);
  }
}

body.theme-halloween .djb-header { background: linear-gradient(180deg, rgba(80,20,0,.22) 0%, transparent 100%); }

body.theme-halloween .djb-live-badge { background: rgba(255,102,0,.10); border-color: rgba(255,102,0,.28); }
body.theme-halloween .live-dot { background: #FF6600; box-shadow: 0 0 6px rgba(255,102,0,.7); }
body.theme-halloween .live-lbl { color: #FF8833; }
body.theme-halloween .djb-listeners-badge { border-color: rgba(255,102,0,.22); color: #FF8833; }
body.theme-halloween .djb-listeners-badge span { color: #FF8833; }

body.theme-halloween .dj-av { border-color: #7700CC; box-shadow: 0 0 0 3px rgba(119,0,204,.14); }
body.theme-halloween .dj-soc:hover { border-color: rgba(119,0,204,.50); color: #AA44FF; }

body.theme-halloween .prog-expand  { color: #AA44FF; }
body.theme-halloween .djb-hist-btn { color: #AA44FF; }

body.theme-halloween .djb-now  { background: rgba(80,20,0,.12); border-color: rgba(255,102,0,.18); }
body.theme-halloween .djb-next { background: rgba(40,0,80,.16); border-color: rgba(119,0,204,.26); }
body.theme-halloween .next-lbl  { color: #BB66FF; }
body.theme-halloween .next-time { color: #FF8833; }


/* ── Estado idle (rádio pausada) ─────────────────── */
body.theme-halloween .djbox-card:not(.is-playing) {
  border-width: 1px;
  border-color: rgba(255, 102, 0, .28);
  box-shadow: 0 0 10px rgba(255, 102, 0, .10), inset 0 0 8px rgba(255, 102, 0, .02);
  animation: none;
}
body.theme-halloween .djbox-wrap:not(:has(.is-playing))::before {
  font-size: 28px;
  opacity: 0.45;
  animation: none;
}
body.theme-halloween .djbox-wrap:not(:has(.is-playing)) .deco-p {
  opacity: 0.20;
  animation: none;
}


/* ── Abóbora no "!" do logo ────────────────────────── */
body.theme-halloween .logo {
  position: relative;
}
body.theme-halloween .logo::after {
  content: '🎃';
  position: absolute;
  font-size: 16px;
  top: 24px;
  right: -6px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 5px rgba(200, 80, 0, .60));
  animation: halloween-logo-micro 5s ease-in-out infinite;
}

@keyframes halloween-logo-micro {
  0%, 100% { transform: rotate(-12deg) scale(1.00); opacity: 0.88; }
  40%       { transform: rotate( 10deg) scale(1.12); opacity: 1.00; }
  70%       { transform: rotate( -5deg) scale(0.94); opacity: 0.82; }
}


/* ══════════════════════════════════════════════════
   Blocos de conteúdo — borda tematizada
   ══════════════════════════════════════════════════ */

body.theme-halloween .c-owl {
  border: 1px solid rgba(200, 80, 0, .28);
  box-shadow:
    0 0 24px rgba(200, 80, 0, .10),
    0 0  8px rgba(200, 80, 0, .05),
    inset 0 0 20px rgba(60, 0, 80, .08);
  animation: halloween-carousel-glow 6s ease-in-out infinite;
}

@keyframes halloween-carousel-glow {
  0%, 100% {
    border-color: rgba(200, 80, 0, .28);
    box-shadow: 0 0 24px rgba(200,80,0,.10), 0 0 8px rgba(200,80,0,.05), inset 0 0 20px rgba(60,0,80,.08);
  }
  50% {
    border-color: rgba(100, 0, 180, .40);
    box-shadow: 0 0 28px rgba(100,0,180,.14), 0 0 10px rgba(100,0,180,.08), inset 0 0 24px rgba(60,0,80,.12);
  }
}

body.theme-halloween .section-title::before { background: #FF6600; }

body.theme-halloween .convo-item:hover {
  border-color: rgba(200, 80, 0, .25);
  box-shadow: 0 0 12px rgba(200, 80, 0, .10);
}


/* ══════════════════════════════════════════════════
   Responsivo — Halloween
   ══════════════════════════════════════════════════ */

@media (max-width: 53.75rem) {
  /* Hamburger — barras claras sobre header escuro */
  body.theme-halloween .header--green .nav-hamburger span {
    background: rgba(255, 180, 80, 0.88);
  }
  body.theme-halloween .header--green .nav-hamburger {
    border-color: rgba(255, 120, 20, 0.28);
  }

  /* Bottom bar — fundo e borda do tema */
  body.theme-halloween .bottom-bar {
    background: rgba(8, 4, 0, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top-color: rgba(255, 120, 20, 0.28);
  }
  body.theme-halloween .bottom-bar-item {
    color: rgba(255, 180, 80, 0.50);
  }
  body.theme-halloween .bottom-bar-item:hover,
  body.theme-halloween .bottom-bar-item.active {
    color: #FF8020;
  }

  /* Gem lateral do DJBox — sem espaço lateral no mobile */
  body.theme-halloween .djbox-wrap::before {
    display: none;
  }

  /* Partículas ao redor do DJBox — inset menor */
  body.theme-halloween .djbox-season-deco { inset: -24px; }
  body.theme-halloween .deco-p1 { font-size: 13px; }
  body.theme-halloween .deco-p2 { font-size: 9px; }
  body.theme-halloween .deco-p3 { display: none; }
  body.theme-halloween .deco-p4 { font-size: 11px; }
  body.theme-halloween .deco-p5 { display: none; }
}

@media (max-width: 35rem) {
  /* Logo micro-element — smaller on very small screens */
  body.theme-halloween .logo::after {
    font-size: 11px;
    top: -7px;
    right: -4px;
  }

  body.theme-halloween .djbox-season-deco { inset: -12px; }
  body.theme-halloween .deco-p1 { font-size: 10px; }
  body.theme-halloween .deco-p2 { display: none; }
  body.theme-halloween .deco-p4 { font-size: 9px; }
}