/* MU Dust - tema de Halloween (sazonal).
   Liga/desliga em layouts/default.phtml: $temaHalloween = true/false.
   Tudo aqui depende da classe body.tema-halloween. */

.tema-halloween {
  --hw-laranja: #ff7a1a;
  --hw-laranja-2: #ffa24a;
  --hw-roxo: #7b3fc4;
  --hw-roxo-escuro: #1a0d2b;
}

/* fundo da pagina com brilho roxo/laranja. As posicoes sao % da pagina
   inteira: nada de brilho perto do pe do hero (~12% da home), que fecha
   em #111114 - por isso o topo do fundo tambem comeca em #111114. */
body.tema-halloween {
  background-image:
    radial-gradient(900px 600px at 85% 30%, rgba(255, 122, 26, 0.07), transparent 72%),
    radial-gradient(1100px 700px at 15% 60%, rgba(123, 63, 196, 0.10), transparent 65%),
    linear-gradient(#111114 0%, #111114 15%, #0d0d10 100%);
}

/* ---------- hero ---------- */
.tema-halloween .hero-media video {
  filter: saturate(0.75) hue-rotate(-12deg) brightness(0.9);
}

.tema-halloween .hero-kicker {
  background: rgba(255, 122, 26, 0.16);
  border-color: rgba(255, 122, 26, 0.5);
}

.tema-halloween .hero-kicker-dot {
  background: var(--hw-laranja);
  box-shadow: 0 0 10px var(--hw-laranja);
}

.hw-faixa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(123, 63, 196, 0.6);
  background: rgba(123, 63, 196, 0.22);
  color: #e6d4ff;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hw-faixa svg { width: 16px; height: 16px; }

.tema-halloween .hero-logo {
  filter: drop-shadow(0 0 28px rgba(255, 122, 26, 0.45));
}

/* neblina no pe do hero; some antes da borda, onde o overlay do
   dust-redesign.css fecha no tom do fundo (senao vira uma faixa clara) */
.hw-neblina {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 40px;
  height: 200px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 55%, transparent 100%);
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(200, 190, 230, 0.16), transparent 70%),
    radial-gradient(35% 55% at 55% 80%, rgba(200, 190, 230, 0.13), transparent 70%),
    radial-gradient(40% 60% at 85% 70%, rgba(200, 190, 230, 0.15), transparent 70%);
  filter: blur(6px);
  animation: hw-neblina 18s ease-in-out infinite alternate;
}

@keyframes hw-neblina {
  from { transform: translateX(-3%); }
  to { transform: translateX(3%); }
}

/* teia no canto do hero */
.hw-teia {
  position: absolute;
  top: 0;
  right: 0;
  width: 190px;
  height: 190px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
}

/* morcegos voando */
.hw-morcegos {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hw-morcego {
  position: absolute;
  width: 48px;
  color: #160b20;
  filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.35));
  animation: hw-voo 16s linear infinite;
  opacity: 0;
}

.hw-morcego svg { width: 100%; height: auto; display: block; animation: hw-asa 0.35s ease-in-out infinite alternate; }

.hw-morcego:nth-child(1) { top: 18%; animation-delay: 0s; }
.hw-morcego:nth-child(2) { top: 30%; width: 34px; animation-delay: 5s; animation-duration: 20s; }
.hw-morcego:nth-child(3) { top: 12%; width: 26px; animation-delay: 9s; animation-duration: 23s; }
.hw-morcego:nth-child(4) { top: 42%; width: 40px; animation-delay: 13s; animation-duration: 18s; }

@keyframes hw-voo {
  0% { left: -6%; transform: translateY(0); opacity: 0; }
  6% { opacity: 1; }
  50% { transform: translateY(-34px); }
  94% { opacity: 1; }
  100% { left: 106%; transform: translateY(10px); opacity: 0; }
}

@keyframes hw-asa {
  from { transform: scaleY(1); }
  to { transform: scaleY(0.55); }
}

/* arte de fundo no lugar do video (cena-halloween.phtml).
   .hw-cena-img imita o background-size: cover, mas como elemento: assim as
   velas ficam presas no mesmo ponto da arte em qualquer tamanho de tela. */
.hw-cena {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
}

.hw-cena-img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100cqw, 100cqh * 2.357);
  height: max(100cqh, 100cqw / 2.357);
  transform: translate(-50%, -50%);
  background: #0b0709 url("../images/halloween-fundo.webp") center / 100% 100% no-repeat;
}

/* sombra so do lado do logo/botoes; o resto da arte fica a mostra */
.tema-halloween .hero-shell.is-home .hero-overlay {
  background:
    linear-gradient(90deg, rgba(10, 7, 12, 0.6) 0%, rgba(10, 7, 12, 0.25) 40%, transparent 65%),
    linear-gradient(180deg, rgba(10, 7, 12, 0.35) 0%, transparent 25%, transparent 70%, #111114 100%);
}

/* brilho das velas e abóboras da arte (posicoes em % da arte) */
.hw-luz {
  position: absolute;
  width: 7%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 90, 0.55) 0%, rgba(255, 120, 30, 0.22) 35%, transparent 70%);
  mix-blend-mode: screen;
  animation: hw-chama 2.2s ease-in-out infinite;
}

.hw-luz.is-vela { width: 4.5%; }
.hw-luz:nth-child(2n) { animation-duration: 1.7s; animation-delay: -0.6s; }
.hw-luz:nth-child(3n) { animation-duration: 2.6s; animation-delay: -1.1s; }

@keyframes hw-chama {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  25% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.94); }
  45% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.04); }
  70% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.97); }
}

/* folhas caindo no hero */
.hw-folhas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hw-folha {
  position: absolute;
  top: -40px;
  left: var(--x);
  width: var(--t);
  color: var(--c);
  opacity: 0.85;
  animation: hw-queda var(--d) linear var(--a) infinite;
}

.hw-folha svg {
  display: block;
  width: 100%;
  height: auto;
  animation: hw-balanco calc(var(--d) / 4) ease-in-out var(--a) infinite alternate;
}

@keyframes hw-queda {
  from { transform: translate(0, 0) rotate(0deg); }
  to { transform: translate(var(--v), 720px) rotate(var(--g)); }
}

@keyframes hw-balanco {
  from { transform: translateX(-14px) rotate(-25deg); }
  to { transform: translateX(14px) rotate(25deg); }
}

/* aboborinha antes do subtitulo das secoes */
.tema-halloween .section-head span::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 7px;
  vertical-align: -1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 104'%3E%3Cpath d='M58 22c-1-8 1-15 7-20 2-1 4 1 3 3-4 5-5 10-4 17z' fill='%235d6e2a'/%3E%3Cellipse cx='36' cy='62' rx='30' ry='36' fill='%23e8620f'/%3E%3Cellipse cx='84' cy='62' rx='30' ry='36' fill='%23e8620f'/%3E%3Cellipse cx='60' cy='61' rx='27' ry='39' fill='%23ff8a24'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---------- botoes e destaques ---------- */
.tema-halloween .btn-ember {
  background: linear-gradient(135deg, #ff8a2b 0%, #e2541a 100%);
  border-color: #ff8a2b;
  color: #1a0d05;
  font-weight: 700;
}

.tema-halloween .btn-ember:hover,
.tema-halloween .btn-ember:focus {
  background: linear-gradient(135deg, #ffa24a 0%, #f06322 100%);
  border-color: #ffa24a;
  color: #1a0d05;
}

.tema-halloween .btn-ember-outline {
  border-color: rgba(255, 122, 26, 0.6);
  color: var(--hw-laranja-2);
}

.tema-halloween .btn-ember-outline:hover {
  background: rgba(255, 122, 26, 0.14);
  border-color: var(--hw-laranja);
  color: #fff;
}

.tema-halloween .section-head span,
.tema-halloween .quick-link-kicker {
  color: var(--hw-laranja-2);
}

.tema-halloween .quick-link-card:hover,
.tema-halloween .home-news25-card:hover {
  border-color: rgba(255, 122, 26, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 122, 26, 0.15), 0 10px 30px rgba(123, 63, 196, 0.18);
}

.tema-halloween .home-stat {
  border-color: rgba(123, 63, 196, 0.35);
  background: linear-gradient(180deg, rgba(34, 22, 48, 0.92) 0%, rgba(20, 15, 28, 0.96) 100%);
}

.tema-halloween .home-stat i,
.tema-halloween .home-news25-card i {
  color: var(--hw-laranja);
  text-shadow: 0 0 12px rgba(255, 122, 26, 0.45);
}

.tema-halloween .dust-placar {
  --rk-acento: var(--hw-laranja);
}

.tema-halloween .panel-surface {
  border-color: rgba(123, 63, 196, 0.22);
}

.tema-halloween .dust-footer {
  border-top: 1px solid rgba(255, 122, 26, 0.25);
}

/* quem pede menos movimento nao ve animacao */
@media (prefers-reduced-motion: reduce) {
  .hw-neblina,
  .hw-morcego,
  .hw-morcego svg { animation: none; }
  .hw-morcegos { display: none; }
  .hw-luz { animation: none; }
  .hw-folhas { display: none; }
}

@media (max-width: 767px) {
  .hw-teia { width: 120px; height: 120px; }
  .hw-faixa { margin-left: 0; }
  /* celular corta a arte nas laterais: puxa o castelo (~65% da arte) pro centro */
  .hw-cena-img {
    left: calc(50cqw - 100cqh * 0.354);
    background-image: url("../images/halloween-fundo-cel.webp");
  }
  .hw-folha:nth-child(n+8) { display: none; }
}