/* ===========================================================
   LOJA SINTONIA — tema de Halloween (camada sazonal, versão melhorada)
   Só liga quando o <body> tem a classe "tema-halloween" (o app.js põe isso
   quando o painel manda "tema": "halloween"). Sem a classe, nada aqui aparece.
   =========================================================== */
.tema-halloween {
  --primary: #ff7a18;
  --primary-rgb: 255, 122, 24;
  --primary-hover: #ff9a3c;
  --pink: #a34bff;
  --grad: linear-gradient(100deg, #ff9a2e 0%, #ff5a00 42%, #8a2be2 100%);
  --bg-0: #080400;
  --bg-1: #120a02;
  --bg-2: #1a1005;
  --bg-3: #241608;
  --line: rgba(255, 150, 60, .10);
  --line-2: rgba(255, 150, 60, .18);
}

/* fundo: lua cheia + névoa laranja, por cima do fundo escuro */
.tema-halloween .bg-glow.g1 { background: radial-gradient(circle, rgba(255,150,50,.34), transparent 70%); }
.tema-halloween .bg-glow.g2 { background: radial-gradient(circle, rgba(138,43,226,.20), transparent 70%); }
.tema-halloween body, .tema-halloween::after { }
.tema-halloween .bg::after {
  content: ''; position: absolute; top: -58px; right: 3%; width: 165px; height: 165px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fff6df 0%, #ffe6a6 42%, #e9c879 62%, transparent 72%);
  box-shadow: 0 0 80px 24px rgba(255, 228, 160, .30);
  opacity: .88;
}
/* craterazinhas na lua */
.tema-halloween .bg::before {
  content: ''; position: absolute; top: -34px; right: 5.5%; width: 110px; height: 110px; border-radius: 50%;
  background:
    radial-gradient(circle at 60% 40%, rgba(180,150,90,.35) 0 5px, transparent 6px),
    radial-gradient(circle at 35% 65%, rgba(180,150,90,.30) 0 7px, transparent 8px),
    radial-gradient(circle at 70% 72%, rgba(180,150,90,.25) 0 4px, transparent 5px);
}

/* vinheta escura nas bordas pra dar clima */
.tema-halloween main::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 120% 80% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}

/* enfeites (morcegos + teia + fantasma) */
.hw-deco { display: none; }
.tema-halloween .hw-deco { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.tema-halloween .hw-teia { position: absolute; width: 190px; height: 190px; opacity: .5; }
.tema-halloween .hw-teia.e { top: 0; left: 0; }
.tema-halloween .hw-teia.d { top: 0; right: 0; transform: scaleX(-1); }

.tema-halloween .hw-bat {
  position: absolute; width: 56px; opacity: .9;
  animation: hw-voa 9s ease-in-out infinite;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
}
.tema-halloween .hw-bat.b1 { top: 14%; left: 7%; animation-delay: 0s; }
.tema-halloween .hw-bat.b2 { top: 26%; right: 10%; width: 40px; animation-delay: -3s; opacity: .75; }
.tema-halloween .hw-bat.b3 { top: 62%; left: 14%; width: 34px; animation-delay: -6s; opacity: .65; }
@keyframes hw-voa {
  0%, 100% { transform: translate(0, 0) rotate(-3deg) scaleX(1); }
  20% { transform: translate(22px, -16px) rotate(5deg) scaleX(.9); }
  50% { transform: translate(-14px, 12px) rotate(-6deg) scaleX(1); }
  75% { transform: translate(16px, 8px) rotate(4deg) scaleX(.92); }
}

/* fantasma flutuando que some e aparece */
.tema-halloween .hw-deco::after {
  content: ''; position: absolute; right: 9%; top: 48%; width: 70px; height: 88px;
  background: url('img/halloween/fantasma.svg') no-repeat center / contain;
  animation: hw-flutua 7s ease-in-out infinite;
}
@keyframes hw-flutua {
  0%, 100% { transform: translateY(0); opacity: .25; }
  50% { transform: translateY(-26px); opacity: .8; }
}

/* rodapé de cemitério embaixo do hero */
.tema-halloween .hero { position: relative; }
.tema-halloween .hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 72px;
  background: url('img/halloween/cemiterio.svg') repeat-x bottom center / auto 100%;
  opacity: .92; pointer-events: none;
}

/* abóbora acesa no meio das caixas do hero */
.hw-abobora { display: none; }
.tema-halloween .hero-art .hw-abobora {
  position: absolute; left: 50%; bottom: -4%; width: 155px; margin-left: -77px; z-index: 4;
  animation: hw-brilha 3s ease-in-out infinite;
}
.tema-halloween .hero-art .halo {
  background: radial-gradient(circle, rgba(255,140,30,.55) 0%, rgba(255,90,0,.14) 45%, transparent 70%);
}
@keyframes hw-brilha {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(255,122,24,.5)); transform: translateY(0); }
  50% { filter: drop-shadow(0 0 36px rgba(255,180,60,.9)); transform: translateY(-4px); }
}

/* aranha descendo nos cards de VIP em destaque */
.tema-halloween .vip.top::after {
  content: ''; position: absolute; top: -40px; right: 20px; width: 20px; height: 46px;
  background: url('img/halloween/teia.svg') no-repeat top right / 130px 130px;
  opacity: .7; animation: hw-aranha 5s ease-in-out infinite;
}
@keyframes hw-aranha { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* cards com brilho de abóbora no hover */
.tema-halloween .vip:hover,
.tema-halloween .carro:hover,
.tema-halloween .item:hover { box-shadow: 0 22px 60px -22px rgba(255,100,0,.5); border-color: rgba(255,130,40,.5); }
.tema-halloween .badge { box-shadow: 0 6px 18px -6px rgba(255,100,0,.9); }

/* botões com brilho de brasa */
.tema-halloween .btn.primary { box-shadow: 0 10px 30px -10px rgba(255,100,0,.85); }

/* faixa do cupom vira promoção assombrada */
.tema-halloween .cupom-bar::before { content: '🎃 '; }
.tema-halloween .cupom-bar::after { content: ' 👻'; }

/* título com laranja */
.tema-halloween .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tema-halloween .eyebrow i { background: #ff7a18; box-shadow: 0 0 10px #ff7a18; }

@media (prefers-reduced-motion: reduce) {
  .tema-halloween .hw-bat,
  .tema-halloween .hero-art .hw-abobora,
  .tema-halloween .vip.top::after,
  .tema-halloween .hw-deco::after { animation: none; }
}
@media (max-width: 820px) {
  .tema-halloween .hw-teia { width: 130px; height: 130px; }
  .tema-halloween .hero-art .hw-abobora { width: 120px; margin-left: -60px; }
  .tema-halloween .bg::after { width: 150px; height: 150px; top: -50px; }
  .tema-halloween .bg::before { display: none; }
  .tema-halloween .hw-deco::after { display: none; }
}