/* Halloween decorations for jb.bzone.ro — loaded only between Oct 1 and Nov 3 (see header.crack.php).
   Adds elements only; the site's own colours and layout stay untouched. */

/* ---- Decoration layer (never catches clicks) ---- */
/* Scenery sits behind the page (visible in the gaps around cards); only the bats fly above it. */
#hw-layer { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
#hw-bats { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
#hw-layer[hidden], #hw-bats[hidden] { display: none; }

.hw-moon { position: absolute; top: 140px; right: 6vw; width: 70px; height: 70px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff7e0, #ffd27a 55%, #e08a1e 100%);
    box-shadow: 0 0 40px 8px rgba(255, 196, 90, .25), 0 0 120px 40px rgba(255, 140, 40, .10); opacity: .55; }
.hw-moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle at 70% 60%, rgba(160, 90, 20, .35) 0 8%, transparent 9%),
                radial-gradient(circle at 40% 70%, rgba(160, 90, 20, .25) 0 6%, transparent 7%),
                radial-gradient(circle at 60% 30%, rgba(160, 90, 20, .25) 0 5%, transparent 6%); }

.hw-fog { position: absolute; left: -10%; right: -10%; bottom: -40px; height: 220px;
    background: radial-gradient(60% 70% at 20% 100%, rgba(167, 139, 250, .10), transparent 70%),
                radial-gradient(50% 60% at 70% 100%, rgba(255, 255, 255, .06), transparent 70%),
                radial-gradient(40% 50% at 45% 100%, rgba(124, 58, 237, .08), transparent 70%);
    animation: hw-fog 26s ease-in-out infinite alternate; }
@keyframes hw-fog { from { transform: translateX(-4%); } to { transform: translateX(4%); } }

.hw-web { position: absolute; width: 150px; height: 150px; opacity: .22; }
.hw-web.left { top: 116px; left: 0; }
.hw-web.right { top: 116px; right: 0; transform: scaleX(-1); }

.hw-spider { position: absolute; top: 116px; right: 2.2vw; width: 2px; transform-origin: top center; animation: hw-spider 9s ease-in-out infinite; }
.hw-spider::before { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: var(--len, 120px); background: rgba(209, 213, 219, .35); }
.hw-spider svg { position: absolute; left: -11px; top: var(--len, 120px); width: 24px; height: 24px; }
@keyframes hw-spider { 0%, 100% { --len: 70px; } 50% { --len: 150px; } }
@property --len { syntax: "<length>"; inherits: true; initial-value: 120px; }

.hw-bat { position: absolute; width: 46px; height: 24px; opacity: 0; }
.hw-bat svg { width: 100%; height: 100%; animation: hw-flap .28s ease-in-out infinite alternate; transform-origin: center; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(.45); } }
.hw-bat.fly { animation: hw-fly var(--dur, 9s) linear forwards; }
@keyframes hw-fly {
    0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s, 1)); }
    8% { opacity: .85; }
    50% { transform: translate(calc((var(--x0) + var(--x1)) / 2), calc(var(--y0) - 40px)) scale(var(--s, 1)); }
    92% { opacity: .85; }
    100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(var(--s, 1)); }
}

/* Jack-o'-lanterns in the bottom corners (behind the page, like the rest of the scenery) */
.hw-pumpkins { position: absolute; bottom: 8px; display: flex; align-items: flex-end; gap: 6px; }
.hw-pumpkins.left { left: 14px; }
.hw-pumpkins.right { right: 14px; flex-direction: row-reverse; }
.hw-pumpkins svg { filter: drop-shadow(0 0 10px rgba(255, 122, 26, .55)); animation: hw-glow 3.4s ease-in-out infinite; }
.hw-pumpkins svg:nth-child(2) { animation-delay: -1.3s; }
.hw-pumpkins svg:nth-child(3) { animation-delay: -2.1s; }
@keyframes hw-glow { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 122, 26, .45)); } 40% { filter: drop-shadow(0 0 16px rgba(255, 150, 40, .8)); } 55% { filter: drop-shadow(0 0 5px rgba(255, 122, 26, .35)); } }

/* A ghost that drifts across now and then (above the page, very transparent) */
.hw-ghost { position: absolute; width: 54px; height: 64px; opacity: 0; }
.hw-ghost svg { width: 100%; height: 100%; animation: hw-bob 1.6s ease-in-out infinite alternate; }
@keyframes hw-bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.hw-ghost.float { animation: hw-drift var(--dur, 16s) ease-in-out forwards; }
@keyframes hw-drift {
    0% { opacity: 0; transform: translate(var(--x0), var(--y0)); }
    12% { opacity: .55; }
    88% { opacity: .55; }
    100% { opacity: 0; transform: translate(var(--x1), var(--y1)); }
}

/* Footer switch */
.hw-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid rgba(255, 122, 26, .35);
    background: rgba(255, 122, 26, .08); color: #fdba74; font-size: 10px; font-weight: 700; letter-spacing: .04em; cursor: pointer; }
.hw-toggle:hover { background: rgba(255, 122, 26, .16); color: #fff; }

@media (max-width: 640px) {
    .hw-moon { width: 46px; height: 46px; top: 130px; }
    .hw-web { width: 90px; height: 90px; }
    .hw-spider { right: 4vw; }
    .hw-pumpkins svg { width: 30px; height: 30px; }
    .hw-pumpkins svg:nth-child(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hw-fog, .hw-spider, .hw-pumpkins svg, .hw-bat svg { animation: none !important; }
    .hw-bat, .hw-ghost { display: none; }
}

/* Pumpkin head instead of the server icon in the logo (only the icon; the logo box keeps the site's colours) */
.hw-pumpkin { width: 22px; height: 22px; filter: drop-shadow(0 0 5px rgba(255, 122, 26, .6)); animation: hw-flicker 3.2s infinite; }
@keyframes hw-flicker { 0%, 100% { filter: drop-shadow(0 0 5px rgba(255, 122, 26, .6)); } 45% { filter: drop-shadow(0 0 9px rgba(255, 150, 40, .9)); } 50% { filter: drop-shadow(0 0 3px rgba(255, 122, 26, .45)); } }
@media (prefers-reduced-motion: reduce) { .hw-pumpkin { animation: none; } }