/* ———————————————
   0) Odblokuj scroll
   ——————————————— */
html, body { overflow: auto !important; }

/* ———————————————
   1) Overlay nad stroną
   ——————————————— */
.fm-hween{
  position: fixed;
  inset: 0;
  z-index: 99999;        /* nad menu */
  pointer-events: none;  /* nie blokuje kliknięć */
}

/* ———————————————
   2) Styl pająków (namespaced)
   ——————————————— */
.fm-hween [class^="spider_"]{
  position: absolute;
  height: 40px;
  width: 50px;
  border-radius: 50%;
  margin-top: 40px;
  background: #110D04;
  z-index: 1;            /* nad wszystkim w overlayu */
}

/* nić */
.fm-hween [class^="spider_"]::before{
  content:"";
  position:absolute;
  left:50%; top:-320px;
  width:1px; height:320px;
  background:#AAAAAA;
  transform: translateX(-0.5px);
}

/* oczy */
.fm-hween [class^="spider_"] .eye{
  position:absolute;
  top:16px; height:14px; width:12px;
  background:#fff; border-radius:50%;
}
.fm-hween [class^="spider_"] .eye::after{
  content:""; position:absolute;
  top:6px; height:5px; width:5px;
  background:#000; border-radius:50%;
}
.fm-hween [class^="spider_"] .eye.left{ left:14px; }
.fm-hween [class^="spider_"] .eye.left::after{ right:3px; }
.fm-hween [class^="spider_"] .eye.right{ right:14px; }
.fm-hween [class^="spider_"] .eye.right::after{ left:3px; }

/* nogi (białe, bez -1 żeby nie znikały pod menu) */
.fm-hween [class^="spider_"] .leg{
  position:absolute;
  top:6px; height:12px; width:14px;
  border-top:2px solid #fff; /* białe */
  border-left:1px solid transparent;
  border-right:1px solid transparent;
  border-bottom:1px solid transparent;
  z-index:0;
}
.fm-hween [class^="spider_"] .leg.left{
  left:-8px; transform-origin:top right;
  transform:rotate(36deg) skewX(-20deg);
  border-left:2px solid #fff;
  border-radius:60% 0 0 0;
  animation: legs-wriggle-left 1s 0s infinite;
}
.fm-hween [class^="spider_"] .leg.right{
  right:-8px; transform-origin:top left;
  transform:rotate(-36deg) skewX(20deg);
  border-right:2px solid #fff;
  border-radius:0 60% 0 0;
  animation: legs-wriggle-right 1s .2s infinite;
}
/* kolejne pary + fazy */
.fm-hween [class^="spider_"] .leg:nth-of-type(2){ top:14px; left:-11px; animation:legs-wriggle-left 1s .8s infinite; }
.fm-hween [class^="spider_"] .leg:nth-of-type(3){ top:22px; left:-12px; animation:legs-wriggle-left 1s .2s infinite; }
.fm-hween [class^="spider_"] .leg:nth-of-type(4){ top:31px; left:-10px; animation:legs-wriggle-left 1s .4s infinite; }
.fm-hween [class^="spider_"] .leg:nth-of-type(6){ top:14px; right:-11px; animation:legs-wriggle-right 1s .4s infinite; }
.fm-hween [class^="spider_"] .leg:nth-of-type(7){ top:22px; right:-12px; animation:legs-wriggle-right 1s .7s infinite; }
.fm-hween [class^="spider_"] .leg:nth-of-type(8){ top:31px; right:-10px; animation:legs-wriggle-right 1s .3s infinite; }

/* ———————————————
   3) Pozycje pająków + kołysanie
   ——————————————— */
.fm-hween .spider_0{ left:5%;  animation: spider-move-0 5s infinite; }
.fm-hween .spider_1{ left:20%; animation: spider-move-1 5s infinite; }
.fm-hween .spider_2{ left:35%; animation: spider-move-2 5s infinite; }
.fm-hween .spider_3{ right:35%; margin-top:160px; animation: spider-move-3 5s infinite; }
.fm-hween .spider_4{ right:20%; margin-top:50px;  animation: spider-move-4 5s infinite; }
.fm-hween .spider_5{ right:5%;  margin-top:210px; animation: spider-move-5 5s infinite; }

/* animacje nóg */
@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); }
}

/* kołysanie pionowe */
@keyframes spider-move-0{ 0%,100%{margin-top:138px;} 69%{margin-top:calc(138px + 114px);} }
@keyframes spider-move-1{ 0%,100%{margin-top:98px;}  34%{margin-top:calc(98px + 81px);}  }
@keyframes spider-move-2{ 0%,100%{margin-top:59px;}  54%{margin-top:calc(59px + 66px);}  }
@keyframes spider-move-3{ 0%,100%{margin-top:172px;} 51%{margin-top:calc(172px + 72px);} }
@keyframes spider-move-4{ 0%,100%{margin-top:228px;} 39%{margin-top:calc(228px + 40px);} }
@keyframes spider-move-5{ 0%,100%{margin-top:161px;} 41%{margin-top:calc(161px + 23px);} }


/* =============================
   HALLOWEEN TITLE NAD LOGO
   ============================= */
.hween-title{
  position:absolute;
  top:-60px;               /* wysokość nad logo */
  left:50%;
  transform:translateX(-50%);
  font-family:'Eater', cursive;
  font-size:48px;
  color:#fa6701;
  text-shadow:
    0 0 6px rgba(250,103,1,.6),
    0 0 12px rgba(255,150,0,.4),
    0 0 20px rgba(255,255,255,.2);
  letter-spacing:3px;
  animation:hween-flicker 4s infinite;
  pointer-events:none;     /* nie blokuje kliknięć */
  z-index:100000;          /* nad wszystkim */
}

/* lekkie migotanie */
@keyframes hween-flicker{
  0%,6%,12%{ text-shadow:none; opacity:0.85; }
  3%,9%{ text-shadow:0 0 8px rgba(250,103,1,.8); opacity:1; }
  60%,100%{
    text-shadow:
      0 0 8px rgba(250,103,1,.8),
      0 0 16px rgba(255,120,0,.4),
      0 0 24px rgba(255,255,255,.2);
    opacity:1;
  }
}

/* responsywność */
@media (max-width:768px){
  .hween-title{
    font-size:30px;
    top:-40px;
  }
}
/* #header będzie kotwicą do absolutnego pozycjonowania tytułu */
#header{
  position: relative;
  text-align: center;      /* dla pewności centrowania */
}

/* napis nad logo – wersja „jak z oryginału” */
.hween-title{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 10px;              /* podnieś/opuść w razie czego */
  font-family: 'Eater', cursive;
  font-size: clamp(34px, 4.6vw, 84px);  /* responsywne, duże */
  line-height: 1;
  letter-spacing: 3px;
  color: #fa6701;

  /* lekka obwódka/docięcie czytelności na tle */
  -webkit-text-stroke: 1px rgba(0,0,0,.35);
  text-shadow:
    0 0 6px rgba(250,103,1,.65),
    0 0 14px rgba(255,150,0,.45),
    0 0 24px rgba(255,255,255,.18);

  /* migotanie jak w codepenie */
  animation: hween-flicker 4s infinite;
  z-index: 100000;         /* nad pająkami i headerem */
  pointer-events: none;    /* nie klikalny */
}

/* efekt „flicker” */
@keyframes hween-flicker{
  0%,6%,12%   { text-shadow:none; opacity:.88; }
  3%,9%       { text-shadow:0 0 8px rgba(250,103,1,.85); opacity:1; }
  60%,100%    {
    text-shadow:
      0 0 8px rgba(250,103,1,.85),
      0 0 16px rgba(255,120,0,.45),
      0 0 26px rgba(255,255,255,.22);
    opacity: 1;
  }
}

/* drobna korekta dla węższych ekranów */
@media (max-width: 992px){
  .hween-title{ top: -28px; }
}
@media (max-width: 768px){
  .hween-title{ top: -22px; }
}