/* web.css: spinnenweb en bewoner. potlood: huurt hier al langer dan wij */

/* ---------- spinnenweb ---------- */

.web {
  position: absolute;
  z-index: 3;
  left: calc(var(--wrap) * .6);
  top: calc(var(--wrap) * .6);
  width: calc(var(--k) * 13cqw);
  aspect-ratio: 1;
  pointer-events: none;
}
.web svg { width: 100%; height: 100%; overflow: visible; }
.web-threads path, .spider-thread {
  fill: none;
  stroke: rgba(255, 255, 255, .75);
  stroke-width: .5;
  filter: drop-shadow(0 0 .4px rgba(0, 0, 0, .5));
}

.spider {
  position: absolute;
  left: 58%;
  top: 70%;
  width: calc(var(--k) * 1.6cqw);
  height: calc(var(--k) * 1.9cqw);
  margin-left: calc(var(--k) * -0.8cqw);
  pointer-events: auto;
  cursor: pointer;
  animation: bob 4s ease-in-out infinite;
  transform-origin: 50% -200%;
}
.spider::before { /* lijfje */
  content: "";
  position: absolute;
  inset: 20% 15% 0;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 40% 35%, #555, #111 70%);
}
.spider::after { /* kopje */
  content: "";
  position: absolute;
  left: 30%;
  top: 0;
  width: 40%;
  height: 35%;
  border-radius: 50%;
  background: #222;
}
.spider i { /* pootjes */
  position: absolute;
  inset: 25% -45% 15%;
  background:
    linear-gradient(20deg, transparent 46%, #111 46% 54%, transparent 54%) left / 50% 50% no-repeat,
    linear-gradient(-20deg, transparent 46%, #111 46% 54%, transparent 54%) right / 50% 50% no-repeat,
    linear-gradient(-25deg, transparent 46%, #111 46% 54%, transparent 54%) left bottom / 50% 50% no-repeat,
    linear-gradient(25deg, transparent 46%, #111 46% 54%, transparent 54%) right bottom / 50% 50% no-repeat;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(12%) rotate(4deg); }
}

@media (max-width: 640px) {
  .web { width: 20cqw; }
}