/* MUZIKA · Halloween kit. Усе працює лише коли на <html> є клас .hw-on (його ставить halloween.js). */
.hw-on [data-hw-root]{position:relative}
.hw-on [data-hw-root]>*{position:relative;z-index:1}
.hw-on [data-hw-root]>.hw-glow,.hw-on [data-hw-root]>.hw-spider{position:absolute}
.hw-glow{left:0;right:0;top:-120px;height:320px;pointer-events:none;z-index:0!important}
.hw-spider{top:0;z-index:2!important;pointer-events:none;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0}
.hw-th{width:1px;height:var(--l);background:linear-gradient(rgba(201,168,255,.05),rgba(201,168,255,.35))}
.hw-sp{margin-top:-1px}
.hw-spider.s1{left:41%;--l:6px;animation:hwSwing 3.2s ease-in-out infinite}
.hw-spider.s2{right:4px;--l:6px;animation:hwSwing 4s ease-in-out infinite}
.hw-spider.s1 .hw-th{animation:hwLen1 9s ease-in-out 1s infinite}
.hw-spider.s2 .hw-th{animation:hwLen2 12s ease-in-out 4s infinite}
@keyframes hwLen1{0%,100%{height:6px}45%,60%{height:40px}}
@keyframes hwLen2{0%,100%{height:6px}40%,62%{height:150px}}
@keyframes hwSwing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}

.hw-on [data-hw-web]{position:relative;overflow:hidden}
.hw-web{position:absolute;top:0;right:0;opacity:.14;pointer-events:none}

.hw-on [data-hw-glow]{animation:hwGlow 3s ease-in-out infinite}
@keyframes hwGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,138,61,0)}50%{box-shadow:0 0 18px 2px rgba(255,138,61,.35)}}

/* Кокон над сумою */
.hw-on [data-hw-cocoon].hw-cc-on{position:relative;display:inline-block;max-width:100%;overflow:clip;overflow-clip-margin:96px}
.hw-cc{position:absolute;left:-12px;right:-14px;top:-7px;bottom:-7px;padding:0;border:0;border-radius:50%;background:rgba(20,16,26,.15);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:pointer;color:inherit;overflow:visible;animation:hwBreath 3s ease-in-out infinite;font:inherit}
.hw-cc>svg:first-child{position:absolute;inset:0;width:100%;height:100%}
.hw-cc:focus-visible{outline:2px solid #C9A8FF;outline-offset:2px}
.hw-cc-sp{position:absolute;right:2px;top:-4px;animation:hwWig 2.4s ease-in-out infinite}
.hw-cc-sh{position:absolute;left:50%;top:50%;width:18px;height:1px;background:#E9DDF7;opacity:0;pointer-events:none}
@keyframes hwWig{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-1px)}}
@keyframes hwBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.hw-cc.burst{pointer-events:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
.hw-cc.burst>svg:first-child{animation:hwPop .55s cubic-bezier(.3,1.4,.5,1) forwards}
.hw-cc.burst .hw-cc-sp{animation:hwRun .9s ease-in forwards}
.hw-cc.burst .hw-cc-sh{animation:hwShard .7s ease-out forwards}
.hw-cc .s1{--r:-20deg;--x:-70px;--y:-26px}.hw-cc .s2{--r:25deg;--x:-60px;--y:28px}.hw-cc .s3{--r:-60deg;--x:10px;--y:-40px}.hw-cc .s4{--r:70deg;--x:20px;--y:38px}.hw-cc .s5{--r:10deg;--x:80px;--y:-18px}.hw-cc .s6{--r:-30deg;--x:74px;--y:24px}
@keyframes hwPop{0%{transform:scale(1);opacity:1}35%{transform:scale(1.18);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes hwShard{0%{opacity:.9;transform:translate(-50%,-50%) rotate(var(--r))}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scaleX(.4)}}
@keyframes hwRun{0%{transform:none;opacity:1}30%{transform:translate(6px,-6px) rotate(20deg)}100%{transform:translate(70px,-60px) rotate(40deg);opacity:0}}
.hw-on [data-hw-cocoon].hw-cc-pop{animation:hwReveal .6s ease .1s both}
@keyframes hwReveal{0%{opacity:.6;transform:scale(.96)}60%{transform:scale(1.04)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .hw-spider,.hw-th,.hw-cc,.hw-cc-sp,.hw-on [data-hw-glow],.hw-on [data-hw-cocoon].hw-cc-pop{animation:none!important}
  .hw-cc.burst{display:none}
}