/* === Halloween seasonal decorations === */
.halloween-decor {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.halloween-decor .hd {
    position: absolute;
    display: block;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
}

/* Паутина в верхних углах */
.hd-web-left  { top: -12px; left: -12px;  font-size: 76px; opacity: .45; color: #c9c9e2; }
.hd-web-right { top: -12px; right: -12px; font-size: 76px; opacity: .45; transform: scaleX(-1); color: #c9c9e2; }
.hd .svg-ico { width: 1em; height: 1em; vertical-align: 0; }
.hd-spider .venom-icon { width: 1.2em; height: auto; }
.hd-pumpkin-a, .hd-pumpkin-b { color: #ff7b00; }
.hd-ghost-a, .hd-ghost-b { color: #d9d9ee; }
.hd-bat-a, .hd-bat-b { color: #4a4370; }

/* Тыквы */
.hd-pumpkin-a {
    left: 3%; bottom: 13%;
    font-size: 46px;
    filter: drop-shadow(0 0 14px rgba(255, 123, 0, .45));
    animation: hdBob 5s ease-in-out infinite;
}
.hd-pumpkin-b {
    right: 4%; bottom: 30%;
    font-size: 32px;
    filter: drop-shadow(0 0 10px rgba(255, 123, 0, .35));
    animation: hdBob 6.4s .9s ease-in-out infinite;
}

/* Призраки */
.hd-ghost-a {
    top: 21%; right: 5%;
    font-size: 38px; opacity: .7;
    animation: hdDrift 7s ease-in-out infinite;
}
.hd-ghost-b {
    top: 57%; left: 4%;
    font-size: 28px; opacity: .55;
    animation: hdDrift 8.5s 1.6s ease-in-out infinite;
}

/* Летучие мыши */
.hd-bat-a {
    top: 9%; left: 18%;
    font-size: 26px; opacity: .8;
    animation: hdFlap 9s ease-in-out infinite;
}
.hd-bat-b {
    top: 14%; right: 15%;
    font-size: 21px; opacity: .7;
    animation: hdFlap 12s 2.2s ease-in-out infinite reverse;
}

/* Паук, висящий на паутинке */
.hd-spider {
    top: 58px; left: 9%;
    font-size: 24px;
    animation: hdSpiderSway 6s ease-in-out infinite;
    transform-origin: top center;
}
.hd-spider::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 1px;
    height: 58px;
    background: linear-gradient(rgba(255,255,255,.4), rgba(255,255,255,.12));
}

/* Праздничный бейдж */
.halloween-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 14px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 123, 0, .55);
    background: linear-gradient(90deg, rgba(255,123,0,.16), rgba(115,80,234,.18));
    color: #ffc98a;
    font-weight: 700;
    font-size: .82em;
    letter-spacing: .05em;
    text-transform: uppercase;
    box-shadow: 0 0 16px rgba(255,123,0,.2);
    animation: hdBadgePulse 3s ease-in-out infinite;
}

@keyframes hdBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes hdDrift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-12px, -16px); }
    75%      { transform: translate(10px, -8px); }
}
@keyframes hdFlap {
    0%, 100% { transform: translate(0, 0) rotate(-8deg); }
    50%      { transform: translate(16px, -10px) rotate(8deg); }
}
@keyframes hdSpiderSway {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}
@keyframes hdBadgePulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255,123,0,.18); }
    50%      { box-shadow: 0 0 28px rgba(255,123,0,.42); }
}

@media (max-width: 640px) {
    .hd-web-left,
    .hd-web-right { font-size: 46px; }
    .hd-pumpkin-b,
    .hd-ghost-b,
    .hd-bat-b { display: none; }
    .hd-pumpkin-a { font-size: 32px; }
    .hd-ghost-a { font-size: 28px; }
    .hd-spider { top: 44px; }
    .hd-spider::before { height: 44px; }
}