/*
|--------------------------------------------------------------------------
| Halloween Theme - Testchi
|--------------------------------------------------------------------------
*/

:root {
    --hw-orange: #ff7518;
    --hw-purple: #6f2da8;
    --hw-dark:   #1a0033;
}


.btn-primary,
.btn-primary:focus,
.badge-primary,
.label-primary {
    background-color: var(--hw-orange) !important;
    border-color: var(--hw-purple) !important;
    transition: all .3s ease;
    color:#fff !important;
}
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--hw-purple) !important;
    border-color: var(--hw-orange) !important;
    box-shadow: 0 0 12px rgba(255,117,24,.6);
    color:#fff !important;
}



body::before {
    content: "🕸️";
    position: absolute;  
    top: -10px;
    font-size: 64px;
    z-index: 9999;
    pointer-events: none;
    opacity: .3;
    line-height: 1;
}
body::before { left: 52%; transform: rotate(0deg); }



body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>🎃</text></svg>") 16 16, auto;
}
a, button, .btn, input[type="submit"], label[for] {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>🦇</text></svg>") 16 16, pointer;
}



.hw-scene { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

.hw-spider { position: fixed; top: -30px; left: 55%; width: 48px; }
.hw-spider__thread {
    display: block;
    width: 2px;
    height: var(--len, 0px);
    margin: 0 auto;
    background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255,255,255,.75));
    transition: height 2.8s cubic-bezier(.45,.05,.55,.95);
}
.hw-spider__body {
    position: absolute;
    left: 50%;
    top: var(--len, 0px);
    transform: translateX(-50%);
    padding: 0;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
    transition: top 2.8s cubic-bezier(.45,.05,.55,.95), filter .2s;
}
.hw-spider.is-up .hw-spider__thread,
.hw-spider.is-up .hw-spider__body { transition-duration: .7s; }
.hw-spider__body:hover { filter: drop-shadow(0 0 7px #ff7518); }
.hw-spider.is-down .hw-spider__body { animation: hw-sway 2.6s ease-in-out infinite; }

@keyframes hw-sway {
    0%, 100% { transform: translateX(-50%) rotate(-7deg); }
    50%      { transform: translateX(-50%) rotate(7deg); }
}


.hw-pumpkin {
    position: fixed;
    z-index: 9999;
    right: 15px;
    bottom: 250px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 60px;
    line-height: 1;
    pointer-events: auto;
    cursor: pointer;
    transform-origin: center bottom;
    animation: hw-bob 3s ease-in-out infinite, hw-glow 2.4s ease-in-out infinite;
}
@keyframes hw-bob {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50%      { transform: translateY(-7px) rotate(5deg); }
}
@keyframes hw-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255,117,24,.5)); }
    50%      { filter: drop-shadow(0 0 14px rgba(255,117,24,.95)); }
}
.hw-pumpkin.is-pop { animation: hw-pop .6s ease; }
@keyframes hw-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.25) rotate(-12deg); }
    70%  { transform: scale(.9) rotate(10deg); }
    100% { transform: scale(1); }
}


.hw-burst {
    position: fixed;
    right: 40px;
    bottom: 280px;
    font-size: 20px;
    pointer-events: none;
    animation: hw-burst .9s ease-out forwards;
}
@keyframes hw-burst {
    from { transform: translate(0,0) scale(.5); opacity: 1; }
    to   { transform: translate(var(--dx), var(--dy)) scale(1.3); opacity: 0; }
}
.hw-quote {
    position: fixed;
    right: 60px;
    bottom: 320px;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 12px;
    background: #1a0033;
    color: #fff;
    font-size: 13px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s, transform .25s;
}
.hw-quote.is-show { opacity: 1; transform: translateY(0); }

@media (max-width: 768px) {
    .hw-spider__body { font-size: 26px; }
    .hw-quote { max-width: 170px; font-size: 12px; }
}