/* Halloween - Tarjetero en Red
   Decoración ligera, sin imágenes ni dependencias externas. */
.halloween-corner {
  position: fixed;
  top: 0;
  right: 0;
  width: 145px;
  height: 145px;
  padding: 0;
  border: 0;
  background: transparent;
  z-index: 2147483000;
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.halloween-web {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.halloween-spider {
  position: absolute;
  top: 0;
  right: 20px;
  width: 55px;
  height: 88px;
  overflow: visible;
  transform-origin: 50% 0;
  transition: transform .35s ease;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.halloween-corner:hover .halloween-spider,
.halloween-corner:focus-visible .halloween-spider,
.halloween-corner.is-active .halloween-spider {
  transform: translateY(13px) rotate(9deg);
  animation: halloween-spider-wiggle .7s ease-in-out infinite alternate;
}
.halloween-corner:hover .halloween-web,
.halloween-corner.is-active .halloween-web {
  filter: drop-shadow(0 0 3px #a855f7);
}
@keyframes halloween-spider-wiggle {
  from { rotate: -5deg; }
  to { rotate: 7deg; }
}
@media (max-width: 600px) {
  .halloween-corner {
    width: 95px;
    height: 95px;
  }
  .halloween-spider {
    width: 39px;
    height: 65px;
    right: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .halloween-spider { transition: none; }
  .halloween-corner:hover .halloween-spider,
  .halloween-corner:focus-visible .halloween-spider,
  .halloween-corner.is-active .halloween-spider {
    animation: none;
    transform: translateY(5px);
  }
}


/* Efecto de tejido: los hilos aparecen progresivamente */
.halloween-web-lines {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: halloween-weave 5.5s ease-in-out infinite;
}
@keyframes halloween-weave {
  0% { stroke-dashoffset: 220; opacity: .25; }
  65%, 100% { stroke-dashoffset: 0; opacity: .95; }
}
.halloween-spider {
  animation: halloween-spider-weaving 2.8s ease-in-out infinite;
}
.halloween-spider .spider-body {
  transform-box: fill-box;
  transform-origin: center top;
  animation: halloween-body-weave .65s ease-in-out infinite alternate;
}
@keyframes halloween-spider-weaving {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 5px; }
}
@keyframes halloween-body-weave {
  from { rotate: -4deg; }
  to { rotate: 4deg; }
}
/* Al interactuar, se nota un pequeño tirón del hilo */
.halloween-corner:hover .halloween-web-lines,
.halloween-corner.is-active .halloween-web-lines {
  animation-duration: 1.8s;
  stroke: #d7b7ff;
}
@media (prefers-reduced-motion: reduce) {
  .halloween-web-lines,
  .halloween-spider,
  .halloween-spider .spider-body {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}