/* Eifeltor Halloween, Stand 03.10.2026 */

/* ---------- Geister (schweben, fliehen vor der Maus) ---------- */
#hw-sheets{position:fixed;inset:0;pointer-events:none;z-index:9000;overflow:hidden}
.hw-sheet{position:absolute;left:0;top:0;width:var(--w,160px);will-change:transform;transform-origin:50% 25%}
.hw-sheet img{display:block;width:100%;height:auto;filter:drop-shadow(0 16px 20px rgba(0,0,0,.35));animation:hw-bob var(--b,3.2s) ease-in-out infinite}
.hw-sheet.scared img{animation-duration:.5s}
@keyframes hw-bob{0%,100%{transform:translateY(0) scaleX(1)}50%{transform:translateY(-10px) scaleX(1.025)}}

/* ---------- Spinnennetze mit baumelnder Spinne ---------- */
.hw-net{--nw:340px;position:fixed;top:0;width:var(--nw);aspect-ratio:1/1;z-index:9000;pointer-events:none}
.hw-net .web{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.hw-net.l{left:0}
.hw-net.r{right:0}
.hw-net.l .hang{left:64%;top:33.9%}
.hw-net.r .hang{left:36%;top:32.1%}
.hw-net .hang{position:absolute;width:0;height:calc(var(--nw) * .26)}
.hw-net .thread{position:absolute;left:-1px;top:0;width:2px;height:100%;background:rgba(255,255,255,.95);box-shadow:0 0 1px rgba(0,0,0,.6);transform-origin:50% 0;animation:hw-thread var(--d,4.2s) ease-in-out infinite}
.hw-net .spider{position:absolute;top:100%;left:0;width:calc(var(--nw) * .31);transform:translateX(-50%);filter:drop-shadow(0 3px 3px rgba(0,0,0,.45));animation:hw-spider var(--d,4.2s) ease-in-out infinite}
.hw-net .spider img{display:block;width:100%;height:auto;transform-origin:50% 20%;animation:hw-legs .9s ease-in-out infinite alternate}
.hw-net.r{--d:5.1s}
.hw-net.r .spider img{animation-duration:1.1s}
@keyframes hw-thread{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.3)}}
@keyframes hw-spider{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,calc(var(--nw) * .078))}}
@keyframes hw-legs{from{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}

/* ---------- Skelett unten links ---------- */
#hw-skel{position:fixed;left:0;bottom:-6px;width:260px;z-index:9001;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,0,0,.35));animation:hw-skel-in 1.2s cubic-bezier(.2,.9,.3,1.2) both}
#hw-skel img{display:block;width:100%;height:auto}
@keyframes hw-skel-in{from{transform:translateY(110%)}to{transform:translateY(0)}}

/* ---------- Bodennebel ---------- */
#hw-fog{position:fixed;left:0;right:0;bottom:0;height:260px;pointer-events:none;z-index:8990;overflow:hidden}
#hw-fog .f{position:absolute;left:-50%;bottom:-40px;width:200%;height:240px;opacity:.7;filter:blur(22px);
  background:radial-gradient(ellipse at 15% 85%,rgba(232,226,245,.65),transparent 55%),radial-gradient(ellipse at 50% 95%,rgba(232,226,245,.5),transparent 50%),radial-gradient(ellipse at 82% 80%,rgba(232,226,245,.6),transparent 55%);
  animation:hw-fog 45s ease-in-out infinite alternate}
#hw-fog .f.b{height:170px;opacity:.5;animation-duration:62s;animation-direction:alternate-reverse}
@keyframes hw-fog{from{transform:translateX(0)}to{transform:translateX(-16%)}}

/* ---------- Kürbis-Button und Aktionskarte ---------- */
#hw-pumpkin{position:fixed;right:14px;bottom:10px;width:230px;z-index:9001;cursor:pointer;border:0;background:none;padding:0;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));transform-origin:40% 90%;animation:hw-pk-idle 3.2s ease-in-out infinite;transition:transform .25s}
#hw-pumpkin:hover{transform:scale(1.06) rotate(-3deg);animation:none}
#hw-pumpkin.on{animation:none}
#hw-pumpkin img{display:block;width:100%;height:auto}
@keyframes hw-pk-idle{0%,100%{transform:rotate(0)}50%{transform:rotate(-2.5deg) translateY(-3px)}}
#hw-card{position:fixed;right:22px;bottom:150px;z-index:9001;width:340px;background:#1d1a24;color:#f4f1ea;border-radius:16px;padding:20px 22px;font-family:inherit;
  box-shadow:0 18px 40px rgba(0,0,0,.4);transform:translateY(12px);opacity:0;pointer-events:none;transition:all .3s}
#hw-card.on{transform:none;opacity:1;pointer-events:auto}
#hw-card b{display:block;font-size:1.15rem;line-height:1.3;margin-bottom:10px;color:#f6b24a}
#hw-card p{margin:0 0 10px;font-size:.95rem;line-height:1.45}
#hw-card p.cta{font-weight:700;color:#f6b24a;margin:12px 0 14px}
#hw-card a{display:inline-block;background:#f6b24a;color:#1d1a24;text-decoration:none;font-weight:700;padding:8px 14px;border-radius:999px;font-size:.9rem}
#hw-card .x{position:absolute;right:10px;top:8px;background:none;border:0;color:#f4f1ea;font-size:20px;line-height:1;cursor:pointer;opacity:.7}
#hw-card .x:hover{opacity:1}

/* ---------- Mobil ---------- */
@media (max-width:760px){
  .hw-sheet{--w:90px!important}
  .hw-net{top:var(--hw-hero-top,90px);--nw:150px;z-index:999}
  #hw-pumpkin{width:118px;right:8px;bottom:6px}
  #hw-card{bottom:96px;right:12px;width:calc(100vw - 24px)}
  #hw-skel{width:100px;bottom:-4px}
  #hw-fog{height:160px}
}
@media (max-width:480px){.hw-net.r{display:none}}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  #hw-sheets,#hw-fog{display:none}
  .hw-net .thread,.hw-net .spider,.hw-net .spider img,#hw-skel,#hw-pumpkin{animation:none}
}

/* ---------- Pause, solange ein Popup (Popup Builder) offen ist ---------- */
#hw-sheets,.hw-net,#hw-skel,#hw-fog,#hw-pumpkin,#hw-card{transition:opacity .3s}
body.hw-paused #hw-sheets,body.hw-paused .hw-net,body.hw-paused #hw-skel,body.hw-paused #hw-fog,body.hw-paused #hw-pumpkin,body.hw-paused #hw-card{opacity:0!important;pointer-events:none!important}