/* ===========================================================
   LOJA OSTRYA — tema de Halloween (camada da temporada)
   Só liga quando o <body> tem a classe "tema-halloween" (o app.js põe isso quando o painel manda "tema": "halloween").
   Aqui só tem cor e enfeite: o desenho da página fica no style.css.
   =========================================================== */
.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: #110905;
  --bg-2: #1a0f08;
  --bg-3: #241608;
  --line: rgba(255, 150, 60, .10);
  --line-2: rgba(255, 150, 60, .18);
  --text-2: #c9b6a6;
  --text-3: #8d7868;

  --ceu-1: #160a2c;
  --ceu-2: #1c0a14;
  --cena-longe: #2b123a;
  --cena-perto: #0a0407;
  --nevoa-rgb: 255, 118, 28;
}

/* textos que mudam com a temporada */
.tema-halloween .txt-normal { display: none; }
.tema-halloween .txt-tema { display: inline; }
.hw-palavra {
  font-family: 'Creepster', var(--font-head); font-weight: 400; font-size: 1.14em; letter-spacing: .03em; padding: 0 .06em;
  background: linear-gradient(180deg, #ffe09a 0%, #ff9a2e 38%, #ff5a00 78%, #d43c00 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 110, 10, .6)) drop-shadow(0 5px 0 rgba(40, 8, 0, .85));
}

/* fundo geral: brasa de um lado, roxo do outro, e as bordas escuras pra dar clima */
.tema-halloween .bg-glow.g1 { background: rgba(255, 120, 30, .13); }
.tema-halloween .bg-glow.g2 { background: rgba(138, 43, 226, .14); }
.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 58%, rgba(0,0,0,.5) 100%);
}

/* cenário do topo: céu roxo que vira brasa no horizonte, com lua cheia */
.tema-halloween .cena {
  background:
    radial-gradient(circle 420px at calc(100% - 24vw) 300px, rgba(255, 190, 110, .26), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255, 96, 10, .34), transparent 70%),
    linear-gradient(180deg, var(--ceu-1) 0%, #24103a 34%, #33131f 62%, #2a1206 82%, var(--bg-0) 100%);
}
.tema-halloween .cena-lua {
  display: block; position: absolute; right: calc(24vw - 150px); top: 190px; width: 300px; height: 300px; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, rgba(176,146,86,.38) 0 14px, transparent 16px),
    radial-gradient(circle at 34% 62%, rgba(176,146,86,.32) 0 22px, transparent 24px),
    radial-gradient(circle at 70% 72%, rgba(176,146,86,.26) 0 11px, transparent 13px),
    radial-gradient(circle at 46% 28%, rgba(176,146,86,.22) 0 8px, transparent 10px),
    radial-gradient(circle at 38% 36%, #fff7e2 0%, #ffe7ab 44%, #e6c273 70%, #c89c4c 100%);
  box-shadow: 0 0 110px 34px rgba(255, 214, 140, .22), 0 0 240px 100px rgba(255, 140, 40, .14);
  opacity: .92; animation: hw-lua 9s ease-in-out infinite;
}
@keyframes hw-lua { 50% { box-shadow: 0 0 130px 44px rgba(255, 214, 140, .28), 0 0 280px 120px rgba(255, 140, 40, .18); } }
/* dois morcegos passando na frente da lua */
.tema-halloween .cena-lua::before, .tema-halloween .cena-lua::after {
  content: ''; position: absolute; background: url('img/halloween/morcego.svg') no-repeat center / contain; filter: brightness(.35);
}
.tema-halloween .cena-lua::before { width: 92px; height: 46px; left: -34px; top: 96px; transform: rotate(-12deg); animation: hw-voa 8s ease-in-out infinite; }
.tema-halloween .cena-lua::after { width: 54px; height: 27px; right: 26px; top: 54px; transform: rotate(10deg); animation: hw-voa 10s ease-in-out -4s infinite; }
.tema-halloween .cena-janelas { opacity: .62; }
.tema-halloween .cena-nevoa.n2 { background: radial-gradient(ellipse 24% 55% at 34% 76%, rgba(170, 90, 255, .2), transparent 70%), radial-gradient(ellipse 22% 50% at 70% 80%, rgba(255, 200, 150, .12), transparent 70%); }

/* enfeites fixos (teias nos cantos e morcegos) */
.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: 200px; height: 200px; opacity: .42; }
.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: .85; 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: 16%; left: 6%; animation-delay: 0s; }
.tema-halloween .hw-bat.b2 { top: 58%; right: 5%; width: 40px; animation-delay: -3s; opacity: .7; }
.tema-halloween .hw-bat.b3 { top: 78%; left: 9%; width: 34px; animation-delay: -6s; opacity: .6; }
@keyframes hw-voa {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  20% { translate: 22px -16px; rotate: 5deg; }
  50% { translate: -14px 12px; rotate: -6deg; }
  75% { translate: 16px 8px; rotate: 4deg; }
}

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

/* atalhos: brasa na borda */
.tema-halloween .tile { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 122, 24, .2), transparent 62%), rgba(20, 10, 6, .8); }

/* vitrine da edição de Halloween */
.tema-halloween .colecao {
  background:
    radial-gradient(ellipse 55% 90% at 10% 50%, rgba(255, 122, 24, .3), transparent 70%),
    radial-gradient(ellipse 50% 90% at 100% 0%, rgba(138, 43, 226, .26), transparent 70%),
    linear-gradient(135deg, rgba(40, 18, 8, .9), rgba(22, 9, 26, .9));
  border-color: rgba(255, 140, 40, .6);
  box-shadow: 0 40px 110px -50px rgba(255, 110, 10, .85), inset 0 1px 0 rgba(255, 200, 150, .12);
}
.tema-halloween .colecao::before {
  content: ''; position: absolute; top: 0; right: 0; width: 210px; height: 210px; opacity: .3; pointer-events: none;
  background: url('img/halloween/teia.svg') no-repeat top left / contain; transform: scaleX(-1);
}
.tema-halloween .colecao::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; opacity: .55; pointer-events: none;
  background: url('img/halloween/cemiterio.svg') repeat-x bottom center / auto 100%;
}
.tema-halloween .colecao > * { position: relative; z-index: 1; }
.tema-halloween .col-art::after {
  content: ''; position: absolute; left: 2%; bottom: -6px; width: 86px; height: 80px; z-index: 2;
  background: url('img/halloween/abobora.svg') no-repeat center / contain; animation: hw-brilha 3s ease-in-out infinite;
}
.tema-halloween .col-txt h2 { background: linear-gradient(180deg, #fff 30%, #ffd9a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* o VIP da temporada (VIP Halloween): card aceso o tempo todo, com uma abóbora no canto */
.tema-halloween .vip.do-tema {
  border-color: rgba(255,140,40,.9);
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(255,160,60,.2), transparent 62%), linear-gradient(180deg, rgba(255,122,24,.24), rgba(138,43,226,.12) 58%, rgba(255,122,24,.05));
  box-shadow: 0 0 0 1px rgba(255,140,40,.35), 0 26px 70px -26px rgba(255,110,10,.8);
}
.tema-halloween .vip.do-tema .vip-img::before { background: rgba(255,122,24,.5); }
.tema-halloween .vip.do-tema::after {
  content: ''; position: absolute; top: -24px; right: 12px; width: 52px; height: 48px; pointer-events: none;
  background: url('img/halloween/abobora.svg') no-repeat center / contain;
  animation: hw-brilha 3s ease-in-out infinite;
}

/* aranha descendo nos dois VIPs do topo */
.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% { translate: 0 0; } 50% { translate: 0 6px; } }

/* cards com brilho de brasa */
.tema-halloween .vip:hover,
.tema-halloween .carro:hover,
.tema-halloween .item:hover { box-shadow: 0 26px 64px -26px rgba(255,100,0,.6); border-color: rgba(255,130,40,.55); }
.tema-halloween .badge { box-shadow: 0 6px 18px -6px rgba(255,100,0,.9); }
.tema-halloween .carro-img { background: #120e1d; }
.tema-halloween .price.is-promo b, .tema-halloween .price.is-promo span, .tema-halloween .price.is-promo small, .tema-halloween .promo-ate { color: #ffb347; }

/* faixa do cupom vira promoção assombrada */
.tema-halloween .cupom-bar::before { content: '🎃 '; }
.tema-halloween .cupom-bar::after { content: ' 👻'; }
.tema-halloween .nav-links .nav-tema { color: #ffb347; font-family: 'Creepster', var(--font-head); font-size: 1.08rem; font-weight: 400; letter-spacing: .06em; }

/* 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; }

/* chamada final: cemitério no pé e um fantasma espiando */
.tema-halloween .cta-in { background: radial-gradient(ellipse 70% 120% at 50% 0%, rgba(255, 122, 24, .34), transparent 70%), radial-gradient(ellipse 50% 80% at 100% 100%, rgba(138, 43, 226, .22), transparent 70%), rgba(255,255,255,.03); }
.tema-halloween .cta-in::after { height: 76px; opacity: .8; background: url('img/halloween/cemiterio.svg') repeat-x bottom center / auto 100%; -webkit-mask: none; mask: none; }
.tema-halloween .cta-in::before {
  content: ''; position: absolute; right: 9%; top: 26px; width: 62px; height: 78px; z-index: 0; pointer-events: none;
  background: url('img/halloween/fantasma.svg') no-repeat center / contain; animation: hw-flutua 7s ease-in-out infinite;
}
@keyframes hw-flutua { 0%, 100% { translate: 0 0; opacity: .3; } 50% { translate: 0 -18px; opacity: .85; } }

/* janela de compra no clima */
.tema-halloween .modal { background: linear-gradient(180deg, #23130c, #140b10); }

@media (max-width: 820px) {
  .tema-halloween .hw-teia { width: 130px; height: 130px; }
  .tema-halloween .cena-lua { width: 210px; height: 210px; right: 50%; margin-right: -105px; top: 150px; opacity: .8; }
  .tema-halloween .hero-art .hw-abobora { width: 116px; margin-left: -58px; }
  .tema-halloween .col-art::after { left: 12%; }
  .tema-halloween .cta-in::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tema-halloween .hw-bat, .tema-halloween .cena-lua, .tema-halloween .cena-lua::before, .tema-halloween .cena-lua::after,
  .tema-halloween .hero-art .hw-abobora, .tema-halloween .vip.top::after, .tema-halloween .vip.do-tema::after,
  .tema-halloween .col-art::after, .tema-halloween .cta-in::before { animation: none; }
}