/* ===================================================
   EFEITO DE ARANHAS DE HALLOWEEN (CSS PURO - ATUALIZADO)
   =================================================== */

/* Posicionamento base: ancorado estritamente no topo do ecrã */
[class*="spider"] {
  position: absolute;
  top: 0;
  height: 40px;
  width: 50px;
  border-radius: 50%;
  background: #110D04;
  z-index: 10;
}

[class*="spider"] *, 
[class*="spider"]::before, 
[class*="spider"]::after {
  position: absolute;
  content: "";
}

/* Fio da teia esticado bem alto para fora do ecrã */
[class*="spider"]::before {
  width: 1px;
  background: #AAAAAA;
  left: 50%;
  top: -400px;
  height: 400px;
}

/* Olhos da aranha */
[class*="spider"] .eye {
  top: 16px;
  height: 14px;
  width: 12px;
  background: #FFFFFF;
  border-radius: 50%;
}

[class*="spider"] .eye::after {
  top: 6px;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: black;
}

[class*="spider"] .eye.left {
  left: 14px;
}
[class*="spider"] .eye.left::after {
  right: 3px;
}

[class*="spider"] .eye.right {
  right: 14px;
}
[class*="spider"] .eye.right::after {
  left: 3px;
}

/* Pernas da Aranha */
[class*="spider"] .leg {
  height: 12px;
  width: 14px;
  border-top: 2px solid #110D04;
  border-left: 1px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 1px solid transparent;
  z-index: -1;
}

[class*="spider"] .leg.left {
  left: -8px;
  transform-origin: top right;
  transform: rotate(36deg) skewX(-20deg);
  border-left: 2px solid #110D04;
  border-radius: 60% 0 0 0;
  animation: legs-wriggle-left 1s infinite;
}

[class*="spider"] .leg.right {
  right: -8px;
  transform-origin: top left;
  transform: rotate(-36deg) skewX(20deg);
  border-right: 2px solid #110D04;
  border-radius: 0 60% 0 0;
  animation: legs-wriggle-right 1s 0.2s infinite;
}

/* Posições horizontais de cada aranha ao longo do topo */
.spider_0 { left: 5%; animation: spider-move-0 5s infinite; }
.spider_1 { left: 20%; animation: spider-move-1 5s infinite; }
.spider_2 { left: 35%; animation: spider-move-2 5s infinite; }
.spider_3 { right: 35%; animation: spider-move-3 5s infinite; }
.spider_4 { right: 20%; animation: spider-move-4 5s infinite; }
.spider_5 { right: 5%; animation: spider-move-5 5s infinite; }

/* Animações de Movimento das Pernas */
@keyframes legs-wriggle-left {
  0%, 100% { transform: rotate(36deg) skewX(-20deg); }
  25%, 75% { transform: rotate(15deg) skewX(-20deg); }
  50% { transform: rotate(45deg) skewX(-20deg); }
}

@keyframes legs-wriggle-right {
  0%, 100% { transform: rotate(-36deg) skewX(20deg); }
  25%, 75% { transform: rotate(-15deg) skewX(-20deg); }
  50% { transform: rotate(-45deg) skewX(20deg); }
}

/* Animações de subida e descida a partir do topo absoluto (usando translateY) */
@keyframes spider-move-0 { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(80px); } }
@keyframes spider-move-1 { 0%, 100% { transform: translateY(10px); } 40% { transform: translateY(110px); } }
@keyframes spider-move-2 { 0%, 100% { transform: translateY(0px); } 60% { transform: translateY(70px); } }
@keyframes spider-move-3 { 0%, 100% { transform: translateY(20px); } 30% { transform: translateY(130px); } }
@keyframes spider-move-4 { 0%, 100% { transform: translateY(5px); } 70% { transform: translateY(90px); } }
@keyframes spider-move-5 { 0%, 100% { transform: translateY(15px); } 50% { transform: translateY(100px); } }