/* Decoracao de Halloween do site (templates/tibiacom/halloween). Ligada no index.php ate o fim do evento. */
.shw-layer { position: fixed; inset: 0; pointer-events: none; z-index: 1050; overflow: hidden; }

/* morcego: as asas giram no ombro */
.shw-bat { position: absolute; left: 0; top: 0; width: 64px; height: 32px; will-change: transform;
  /* contorno laranja + halo roxo: o fundo do site e azul escuro e o morcego preto sumia */
  filter: drop-shadow(0 0 1px rgba(255, 150, 40, .95)) drop-shadow(0 0 5px rgba(170, 70, 255, .75)); }
.shw-bat svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shw-bat .shw-wing { transform-box: fill-box; animation: shw-flap .22s ease-in-out infinite alternate; }
.shw-bat .shw-wing--l { transform-origin: 100% 40%; }
.shw-bat .shw-wing--r { transform-origin: 0% 40%; animation-name: shw-flap-r; }
.shw-bat .shw-eye { fill: #ffb21e; filter: drop-shadow(0 0 2px #ff7a00); }
@keyframes shw-flap { from { transform: rotate(-28deg) scaleY(.75); } to { transform: rotate(18deg) scaleY(1); } }
@keyframes shw-flap-r { from { transform: rotate(28deg) scaleY(.75); } to { transform: rotate(-18deg) scaleY(1); } }

/* teias nos cantos do conteudo */
.shw-web { position: absolute; top: 0; width: 120px; height: 120px; pointer-events: none; z-index: 5; opacity: .6; }
.shw-web--l { left: 0; }
.shw-web--r { right: 0; transform: scaleX(-1); }

/* aranha descendo no fio */
/* o wrapper corta o fio na borda de cima do conteudo */
.shw-spider-wrap { position: absolute; top: 0; right: 13%; width: 30px; height: 190px; overflow: hidden; pointer-events: none; z-index: 6; }
.shw-spider { position: absolute; top: 0; left: 2px; width: 26px; animation: shw-drop 7s ease-in-out infinite; }
.shw-spider::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 400px; background: linear-gradient(rgba(255, 255, 255, 0), rgba(230, 230, 230, .8)); }
.shw-spider svg { display: block; width: 26px; height: 26px; animation: shw-wiggle 1.8s ease-in-out infinite alternate; }
@keyframes shw-drop { 0%, 100% { transform: translateY(18px); } 45%, 60% { transform: translateY(150px); } }
@keyframes shw-wiggle { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* abobora nas laterais */
.shw-pumpkin { position: fixed; bottom: 14px; width: 74px; height: 66px; z-index: 1040; cursor: pointer; border: 0; padding: 0; background: none; }
.shw-pumpkin svg { display: block; width: 100%; height: 100%; overflow: visible; animation: shw-glow 2.6s ease-in-out infinite; }
.shw-pumpkin:hover svg { transform: translateY(-3px) rotate(-3deg); transition: transform .2s; }
.shw-pumpkin:focus-visible { outline: 2px solid #ffb21e; outline-offset: 4px; border-radius: 50%; }
.shw-pumpkin .shw-face { fill: #ffd34d; animation: shw-flicker 1.7s steps(1) infinite; }
@keyframes shw-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 140, 0, .55)); }
  50% { filter: drop-shadow(0 0 16px rgba(255, 160, 20, .95)); }
}
@keyframes shw-flicker { 0%, 100% { fill: #ffd34d; } 20% { fill: #ffbe2e; } 37% { fill: #ffe27a; } 61% { fill: #ffb01f; } 80% { fill: #ffd85c; } }

/* nevoa roxa no rodape (atras do conteudo) */
.shw-fog { position: fixed; left: 0; right: 0; bottom: 0; height: 200px; pointer-events: none; z-index: -1; overflow: hidden; }
.shw-fog i { position: absolute; bottom: -60px; width: 70%; height: 220px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(150, 80, 200, .35), rgba(60, 200, 120, .08) 55%, transparent 70%); animation: shw-fog 38s linear infinite; }
.shw-fog i:nth-child(2) { animation-duration: 52s; animation-delay: -20s; opacity: .8; }
@keyframes shw-fog { from { transform: translateX(-60%); } to { transform: translateX(160%); } }

/* link no rodape para ligar/desligar */
.shw-toggle { display: inline-block; margin-top: 4px; font-size: 10px; color: #ffcf7a; text-decoration: none; cursor: pointer; background: none; border: 0; padding: 0; }
.shw-toggle:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .shw-web { width: 70px; height: 70px; }
  .shw-spider-wrap, .shw-pumpkin, .shw-fog { display: none; }
  .shw-bat { width: 46px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .shw-bat .shw-wing, .shw-spider, .shw-spider svg, .shw-pumpkin svg, .shw-pumpkin .shw-face, .shw-fog i { animation: none; }
}