/* ═══════════════════════════════════════════════════════
   Rádio Blast! — themes/theme-animenohi.css
   Anime no Hi · アニメの日 · 19–25 out
   Paleta: roxo #C060FF · magenta #FF3388 · ciano #00D4FF
   ═══════════════════════════════════════════════════════ */


/* ── Fundo: noite roxa profunda ───────────────────── */
body.theme-animenohi {
  --green:        #00D4FF;
  --green-rgb:    0, 212, 255;
  --green-dim:    rgba(0, 212, 255, 0.10);
  --green-border: rgba(0, 212, 255, 0.22);
  --green2:       #00AABB;
  background:
    radial-gradient(ellipse at 30% 0%,  rgba(140, 40, 220, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 60%, rgba(255, 30, 120, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #09060F 0%, #060410 100%);
}

/* ── Shapes orgânicos — nebulosa anime nas bordas ── */
body.theme-animenohi .td-rings {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

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

body.theme-animenohi .td-r1 {
  width: 840px; height: 640px;
  top: -100px; right: -320px;
  background: radial-gradient(ellipse, rgba(160, 60, 240, 0.22) 0%, transparent 65%);
}
body.theme-animenohi .td-r2 {
  width: 700px; height: 800px;
  bottom: -300px; left: -260px;
  background: radial-gradient(ellipse, rgba(220, 30, 120, 0.18) 0%, transparent 65%);
}
body.theme-animenohi .td-r3 {
  width: 540px; height: 540px;
  top: 28%; left: -270px;
  background: radial-gradient(ellipse, rgba(0, 180, 220, 0.14) 0%, transparent 60%);
}
body.theme-animenohi .td-r4 {
  width: 460px; height: 460px;
  bottom: 9%; right: -180px;
  background: radial-gradient(ellipse, rgba(140, 40, 220, 0.16) 0%, transparent 60%);
}
body.theme-animenohi .td-r5 {
  width: 380px; height: 300px;
  top: 4%; left: 30%;
  background: radial-gradient(ellipse, rgba(200, 30, 100, 0.05) 0%, transparent 55%);
}

/* ── Estrelas e brilhos de anime nas bordas ─────── */
body.theme-animenohi .td-sparks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

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

body.theme-animenohi .td-s::before              { content: '✨'; }
body.theme-animenohi .td-s:nth-child(even)::before { content: '⭐'; }

body.theme-animenohi .td-s1 { font-size: 105px; right: -26px; top:  7%; opacity: 0.42; animation-delay:   0s; animation-duration: 23s; }
body.theme-animenohi .td-s2 { font-size:  70px; right: -16px; top: 37%; opacity: 0.34; animation-delay:  -6s; animation-duration: 19s; }
body.theme-animenohi .td-s3 { font-size:  90px; right: -23px; top: 63%; opacity: 0.38; animation-delay: -12s; animation-duration: 26s; }
body.theme-animenohi .td-s4 { font-size:  80px; left:  -20px; top: 20%; opacity: 0.32; animation-delay:  -4s; animation-duration: 22s; }
body.theme-animenohi .td-s5 { font-size:  62px; left:  -15px; top: 53%; opacity: 0.28; animation-delay: -15s; animation-duration: 18s; }
body.theme-animenohi .td-s6 { font-size:  52px; left:  -13px; top: 77%; opacity: 0.34; animation-delay:  -8s; animation-duration: 23s; }
body.theme-animenohi .td-s7 { font-size:  34px; left:  12%;  top: 14%; opacity: 0.16; animation-delay: -18s; animation-duration: 28s; }
body.theme-animenohi .td-s8 { font-size:  28px; right: 14%;  top: 82%; opacity: 0.13; animation-delay: -10s; animation-duration: 25s; }

@keyframes animenohi-element-bg {
  0%   { transform: translate(  0px,   0px) rotate(  0deg); }
  25%  { transform: translate(  8px, -10px) rotate( -8deg); }
  50%  { transform: translate( -6px,   6px) rotate( 12deg); }
  75%  { transform: translate(  5px,  -5px) rotate( -5deg); }
  100% { transform: translate(  0px,   0px) rotate(  0deg); }
}


/* ── Header: roxo noturno com borda magenta ───────── */
body.theme-animenohi .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(9, 6, 20, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 51, 136, 0.28);
  box-shadow: none;
}

body.theme-animenohi .logo img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(800%) hue-rotate(290deg) brightness(115%);
}

body.theme-animenohi .header--green .nav-item       { color: rgba(200, 180, 230, 0.72); }
body.theme-animenohi .header--green .nav-item:hover { color: #fff; background: rgba(192, 96, 255, .08); }
body.theme-animenohi .header--green .nav-item.active { color: #00D4FF; background: rgba(0, 212, 255, .07); }
body.theme-animenohi .header--green .nav-more-btn   { color: rgba(200, 180, 230, 0.72); }
body.theme-animenohi .header--green .nav-more-btn:hover,
body.theme-animenohi .header--green .nav-more-btn.open { color: #fff; background: rgba(192, 96, 255, .08); }

body.theme-animenohi .header--green .btn-icon {
  color: rgba(200, 180, 230, 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-animenohi .header--green .btn-icon:hover { color: #fff; background: rgba(255,255,255,.08); }

body.theme-animenohi .header--green .btn-avatar {
  color: #09060F;
  background: linear-gradient(180deg, #E080FF 0%, #C060FF 100%);
  border-top-color: rgba(255,255,255,.40); border-left-color: rgba(255,255,255,.20);
  border-right-color: rgba(160,60,230,.25); border-bottom-color: rgba(100,20,180,.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-animenohi .header--green .btn-avatar:hover { filter: brightness(1.10); }

body.theme-animenohi .header--green .btn-badge {
  background: #FF3388; color: #fff; border-color: #09060F;
}


/* ══════════════════════════════════════════════════
   DJBox Anime no Hi — carta lendária
   ══════════════════════════════════════════════════ */

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

/* ✨ gem — pulsa como um efeito de abertura de anime */
body.theme-animenohi .djbox-wrap::before {
  content: '✨';
  position: absolute;
  top: 50%;
  right: -26px;
  font-size: 42px;
  line-height: 1;
  z-index: 10;
  pointer-events: none;
  filter:
    drop-shadow(0 0 10px rgba(192, 96, 255, .80))
    drop-shadow(0 0 24px rgba(255, 51, 136, .55));
  animation: anime-gem-pulse 2s ease-in-out infinite;
}

@keyframes anime-gem-pulse {
  0%, 100% { transform: translateY(-50%) scale(1.00) rotate(-8deg); }
  50%       { transform: translateY(-50%) scale(1.22) rotate( 8deg); }
}

/* Estrelas ao redor do DJBox — efeito sparkle de anime */
body.theme-animenohi .djbox-season-deco {
  position: absolute;
  inset: -48px;
  pointer-events: none;
  z-index: 6;
}

body.theme-animenohi .deco-p {
  position: absolute;
  line-height: 1;
  animation: anime-sparkle 4s ease-in-out infinite;
}

body.theme-animenohi .deco-p1 { top:  4%; left: 12%; font-size: 20px; color: #C060FF; animation-delay:  0s;  animation-duration: 3.8s; }
body.theme-animenohi .deco-p2 { top:  8%; right: 6%; font-size: 14px; color: #FF3388; animation-delay: -1s;  animation-duration: 5.0s; }
body.theme-animenohi .deco-p3 { top: 44%; left: -2%; font-size: 12px; color: #00D4FF; animation-delay: -3s;  animation-duration: 4.5s; }
body.theme-animenohi .deco-p4 { bottom: 22%; left: 8%; font-size: 16px; color: #FF3388; animation-delay: -2s; animation-duration: 6.0s; }
body.theme-animenohi .deco-p5 { bottom: 40%; right: 1%; font-size: 11px; color: #C060FF; animation-delay: -4s; animation-duration: 4.2s; }

body.theme-animenohi .deco-p::before { content: '✦'; }

/* Estrelas sobem e somem — efeito de poder/magia anime */
@keyframes anime-sparkle {
  0%   { opacity: 0;    transform: translateY(  0px) scale(0.5) rotate(  0deg); }
  20%  { opacity: 1.00; transform: translateY(-18px) scale(1.3) rotate( 90deg); }
  70%  { opacity: 0.55; transform: translateY(-42px) scale(0.9) rotate(200deg); }
  100% { opacity: 0;    transform: translateY(-68px) scale(0.3) rotate(360deg); }
}

/* Card: borda cycling roxo → magenta → ciano */
body.theme-animenohi .djbox-card {
  position: relative;
  border-width: 2px;
  animation: anime-card-glow 4s ease-in-out infinite;
}

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

/* Gradiente interno: roxo no topo, magenta escuro no rodapé */
body.theme-animenohi .djbox-card:not(.is-playing)::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-16);
  background: linear-gradient(
    180deg,
    rgba(140, 40, 220, 0.12) 0%,
    transparent               40%,
    rgba(180, 20, 80, 0.09)  100%
  );
  pointer-events: none;
  z-index: 0;
}

/* Topo do card */
body.theme-animenohi .djb-header {
  background: linear-gradient(180deg, rgba(100, 20, 180, 0.22) 0%, transparent 100%);
}

/* Badge "Ao vivo" em magenta */
body.theme-animenohi .djb-live-badge { background: rgba(255,51,136,.10); border-color: rgba(255,51,136,.30); }
body.theme-animenohi .live-dot { background: #FF3388; box-shadow: 0 0 6px rgba(255,51,136,.7); }
body.theme-animenohi .live-lbl { color: #FF3388; }

/* Ouvintes — roxo */
body.theme-animenohi .djb-listeners-badge { border-color: rgba(192,96,255,.25); color: #C060FF; }
body.theme-animenohi .djb-listeners-badge span { color: #C060FF; }

/* Avatar do DJ — anel ciano */
body.theme-animenohi .dj-av { border-color: #00D4FF; box-shadow: 0 0 0 3px rgba(0,212,255,.14); }
body.theme-animenohi .dj-soc:hover { border-color: rgba(192,96,255,.50); color: #C060FF; }

/* Acentos — ciano */
body.theme-animenohi .prog-expand  { color: #00D4FF; }
body.theme-animenohi .djb-hist-btn { color: #00D4FF; }

/* "Tocando agora" — roxo sutil */
body.theme-animenohi .djb-now { background: rgba(100,20,180,.10); border-color: rgba(192,96,255,.20); }

/* "Próximo programa" — magenta sutil */
body.theme-animenohi .djb-next { background: rgba(180,20,80,.10); border-color: rgba(255,51,136,.22); }
body.theme-animenohi .next-lbl  { color: #FF6AA8; }
body.theme-animenohi .next-time { color: #00D4FF; }


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


/* ── Brilho anime no "!" do logo ───────────────────── */
body.theme-animenohi .logo {
  position: relative;
}
body.theme-animenohi .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(160, 60, 240, .65));
  animation: animenohi-logo-micro 5s ease-in-out infinite;
}

@keyframes animenohi-logo-micro {
  0%, 100% { transform: rotate(-12deg) scale(1.00); opacity: 0.88; }
  50%       { transform: rotate( 12deg) scale(1.20); opacity: 1.00; }
}


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

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

@keyframes animenohi-carousel-glow {
  0%, 100% {
    border-color: rgba(160, 60, 240, .28);
    box-shadow: 0 0 24px rgba(160,60,240,.09), 0 0 8px rgba(160,60,240,.05), inset 0 0 20px rgba(80,20,120,.08);
  }
  50% {
    border-color: rgba(220, 30, 120, .36);
    box-shadow: 0 0 28px rgba(220,30,120,.13), 0 0 10px rgba(220,30,120,.07), inset 0 0 24px rgba(80,20,120,.10);
  }
}

body.theme-animenohi .section-title::before { background: #C060FF; }

body.theme-animenohi .convo-item:hover {
  border-color: rgba(160, 60, 240, .22);
  box-shadow: 0 0 12px rgba(160, 60, 240, .09);
}


/* ══════════════════════════════════════════════════
   Responsivo — Anime no Hi
   ══════════════════════════════════════════════════ */

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

  /* Bottom bar — fundo e borda do tema */
  body.theme-animenohi .bottom-bar {
    background: rgba(10, 4, 6, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top-color: rgba(220, 80, 100, 0.25);
  }
  body.theme-animenohi .bottom-bar-item {
    color: rgba(255, 180, 180, 0.50);
  }
  body.theme-animenohi .bottom-bar-item:hover,
  body.theme-animenohi .bottom-bar-item.active {
    color: #EE6677;
  }

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

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

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

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