/* Malía · Halloween: decoración aislada, sin interferir con los clics. */
.mh-layer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1031;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}
.mh-layer *, .mh-layer *::before, .mh-layer *::after {
  box-sizing: border-box;
  pointer-events: none;
}
/* La esquina permanece anclada; la seda se deforma con una brisa leve. */
.mh-web {
  position: absolute;
  opacity: 0;
  animation: mhWebIn 1.8s ease-out .2s forwards;
}
.mh-web svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.mh-web-tl { top: -2px; left: -2px; width: clamp(190px, 28vw, 440px); }
.mh-web-br { right: -2px; bottom: -2px; width: clamp(160px, 23vw, 370px); }
.mh-web-br svg { transform: rotate(180deg); } /* esquina inferior derecha: solo la telaraña, sin nada colgando */
.mh-silk {
  transform-origin: 0 0;
  animation: mhSilkBreeze 8.5s ease-in-out infinite;
}
.mh-web-br .mh-silk { animation-duration: 10.5s; animation-delay: -4s; }
@keyframes mhWebIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mhSilkBreeze {
  0%, 100% { transform: skew(.05deg, -.08deg) scale(1, 1); }
  35% { transform: skew(.45deg, .18deg) scale(1.004, .996); }
  70% { transform: skew(-.22deg, .3deg) scale(.997, 1.004); }
}
/* Araña suspendida de un hilo continuo hasta el abdomen. */
.mh-spider {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--mh-sw, 112px);
  margin-left: calc(var(--mh-sw, 112px) / -2);
  transform: translate3d(0, -160%, 0);
  will-change: transform;
}
.mh-sway {
  position: relative;
  transform-origin: 50% -45vh;
  animation: mhSway 4.8s ease-in-out infinite;
}
.mh-thread {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 130vh;
  margin-left: -.5px;
  background: rgba(220, 220, 220, .8);
  box-shadow: .6px 0 .4px rgba(0, 0, 0, .38);
}
.mh-spider svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(1px 4px 2px rgba(0, 0, 0, .18));
}
@keyframes mhSway {
  0%, 100% { transform: rotate(-.7deg); }
  50% { transform: rotate(.7deg); }
}
.mh-leg {
  transform-box: view-box;
  transform-origin: var(--ox, 120px) var(--oy, 120px);
  animation: mhLeg 3.8s ease-in-out infinite;
  animation-delay: var(--ld, 0s);
}
.mh-spider.mh-moving .mh-leg { animation-duration: .72s; }
@keyframes mhLeg {
  0%, 100% { transform: rotate(0deg); }
  40%, 65% { transform: rotate(var(--la, 3deg)); }
}
/* Murciélagos: se mueven con el script (trayectoria) y el CSS (aleteo). */
.mh-bat {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  filter: drop-shadow(1px 5px 2.5px rgba(0, 0, 0, .16));
}
.mh-bat svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  /* Tres cuartos: girado hacia donde vuela y visto un poco desde abajo */
  transform: perspective(800px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 10deg));
}
/* Aleteo real: batido hacia abajo rápido con el ala extendida y recuperación plegada (codo y muñeca se doblan). */
.mh-bat .mh-wr, .mh-bat .mh-wl {
  transform-box: view-box;
  transform-origin: 150px 78px;
  animation: mhFlap var(--f, .2s) linear infinite;
  animation-delay: var(--d, 0s);
}
.mh-bat .mh-wing-hand {
  transform-box: view-box;
  transform-origin: 190px 28px;
  animation: mhWrist var(--f, .2s) linear infinite;
  animation-delay: var(--d, 0s);
}
.mh-bat .mh-bd {
  animation: mhBob var(--f, .2s) linear infinite;
  animation-delay: var(--d, 0s);
}
@keyframes mhFlap {
  0% { transform: rotate(-22deg) scale(1, 1); animation-timing-function: cubic-bezier(.35, 0, .6, 1); }
  38% { transform: rotate(38deg) scale(1, .92); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  60% { transform: rotate(26deg) scale(.64, .78); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  84% { transform: rotate(-8deg) scale(.72, .86); animation-timing-function: cubic-bezier(.4, 0, .6, 1); }
  100% { transform: rotate(-22deg) scale(1, 1); }
}
@keyframes mhWrist {
  0% { transform: rotate(-4deg) scaleX(1); animation-timing-function: ease-in-out; }
  38% { transform: rotate(4deg) scaleX(1); animation-timing-function: ease-in-out; }
  60% { transform: rotate(22deg) scaleX(.66); animation-timing-function: ease-in-out; }
  84% { transform: rotate(12deg) scaleX(.8); animation-timing-function: ease-in-out; }
  100% { transform: rotate(-4deg) scaleX(1); }
}
@keyframes mhBob {
  0% { transform: translateY(3px); animation-timing-function: ease-out; }
  38% { transform: translateY(-4px); animation-timing-function: ease-in-out; }
  70% { transform: translateY(-1px); animation-timing-function: ease-in; }
  100% { transform: translateY(3px); }
}
.mh-layer.mh-paused *, .mh-layer.mh-static * { animation-play-state: paused !important; }
.mh-layer.mh-static .mh-web { opacity: 1; animation: none; }
@media (max-width: 767px) {
  .mh-web-tl { width: clamp(145px, 36vw, 200px); }
  .mh-web-br { width: clamp(125px, 30vw, 165px); }
}
@media (prefers-reduced-motion: reduce) {
  .mh-layer * { animation: none !important; }
  .mh-web { opacity: 1; }
  .mh-spider, .mh-bat { display: none; }
}