body.halloween-theme {
    --primary-color: #ff7a24;
}

.header-main {
    position: relative;
    overflow: hidden;
}

.halloween-header-bats {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

body:not(.halloween-theme) .halloween-header-bats {
    display: none;
}

.header-main > .col-lg-3,
.header-main > .col-lg-6 {
    position: relative;
    z-index: 2;
}

.header-bat {
    position: absolute;
    top: var(--bat-top);
    left: -64px;
    width: var(--bat-size);
    overflow: visible;
    color: var(--bat-color);
    opacity: 0;
    animation: halloween-header-flight var(--bat-speed) linear infinite;
    animation-delay: var(--bat-delay);
}

.header-bat-one {
    --bat-top: 12%;
    --bat-size: 48px;
    --bat-color: #ffab4b;
    --bat-speed: 8s;
    --bat-delay: -2s;
}

.header-bat-two {
    --bat-top: 56%;
    --bat-size: 34px;
    --bat-color: #e5b6f3;
    --bat-speed: 11s;
    --bat-delay: -7s;
}

.header-bat-three {
    --bat-top: 30%;
    --bat-size: 26px;
    --bat-color: #ffc779;
    --bat-speed: 13s;
    --bat-delay: -10s;
}

.header-bat .bat-wing {
    transform-box: view-box;
    animation-duration: 180ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.header-bat .bat-wing-left {
    transform-origin: 25px 13px;
    animation-name: halloween-left-wing-flap;
}

.header-bat .bat-wing-right {
    transform-origin: 27px 13px;
    animation-name: halloween-right-wing-flap;
}

.header-bat .bat-body {
    transform-box: fill-box;
    transform-origin: center;
    animation: halloween-bat-body 360ms ease-in-out infinite alternate;
}

@keyframes halloween-header-flight {
    0% {
        left: -64px;
        opacity: 0;
        transform: translateY(7px) rotate(-8deg);
    }

    8%,
    88% {
        opacity: .9;
    }

    45% {
        transform: translateY(-8px) rotate(5deg);
    }

    100% {
        left: calc(100% + 64px);
        opacity: 0;
        transform: translateY(5px) rotate(-5deg);
    }
}

.bat-wing {
    transform-box: view-box;
    animation-duration: 180ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.bat-wing-left {
    transform-origin: 25px 13px;
    animation-name: halloween-left-wing-flap;
}

.bat-wing-right {
    transform-origin: 27px 13px;
    animation-name: halloween-right-wing-flap;
}

.bat-body {
    transform-box: fill-box;
    transform-origin: center;
    animation: halloween-bat-body 360ms ease-in-out infinite alternate;
}

@keyframes halloween-left-wing-flap {
    from { transform: rotate(-28deg) scaleY(.88); }
    to { transform: rotate(22deg) scaleY(1.04); }
}

@keyframes halloween-right-wing-flap {
    from { transform: rotate(28deg) scaleY(.88); }
    to { transform: rotate(-22deg) scaleY(1.04); }
}

@keyframes halloween-bat-body {
    from { transform: translateY(-1px) rotate(-2deg); }
    to { transform: translateY(1px) rotate(2deg); }
}

body.halloween-theme .header-section {
    background-color: #170f20 !important;
    box-shadow: 0 5px 24px rgb(19 10 28 / 25%);
}

body.halloween-theme .header-main {
    background-image: linear-gradient(110deg, #170f20, #341d4d) !important;
    border-color: rgb(255 154 73 / 35%) !important;
}

body.halloween-theme .navbar-section {
    background-color: #21142c;
    border-top: 1px solid rgb(255 255 255 / 5%);
}

body.halloween-theme .navbar-section .nav-link:hover,
body.halloween-theme .header-section a:hover,
body.halloween-theme .footer-section a:hover {
    color: #ff9a3c !important;
}

body.halloween-theme .footer-section {
    background:
        radial-gradient(ellipse at 90% 0%, rgb(107 48 133 / 22%), transparent 38%),
        #170f20 !important;
    border-top: 1px solid rgb(255 154 73 / 25%);
}

.halloween-toggle {
    position: fixed;
    z-index: 50001;
    bottom: 16px;
    left: 16px;
    display: flex;
    width: 164px;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 180ms ease;
}

.halloween-toggle:hover {
    transform: translateY(-4px) scale(1.03);
}

.halloween-toggle:focus-visible {
    outline: 3px solid #ffb36b;
    outline-offset: 3px;
}

.halloween-pumpkin {
    display: block;
    width: 148px;
    height: 148px;
    flex: 0 0 148px;
    transform-origin: 50% 85%;
    animation: pumpkin-bob 2.7s ease-in-out infinite, pumpkin-wiggle 6s ease-in-out infinite;
}

.halloween-pumpkin svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 7px 12px rgb(18 9 23 / 40%));
}

.halloween-toggle-label {
    position: relative;
    z-index: 1;
    margin-top: -8px;
    padding: 7px 12px;
    border: 1px solid rgb(255 153 72 / 65%);
    border-radius: 999px;
    background: linear-gradient(135deg, #281333, #160e1e);
    box-shadow: 0 5px 18px rgb(0 0 0 / 38%);
    white-space: nowrap;
}

.pumpkin-face {
    transform-origin: 40px 49px;
    animation: pumpkin-flicker 2.4s ease-in-out infinite;
}

.pumpkin-stem {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: pumpkin-stem-sway 3s ease-in-out infinite;
}

@keyframes pumpkin-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes pumpkin-wiggle {
    0%, 82%, 100% { rotate: 0deg; }
    86% { rotate: -9deg; }
    90% { rotate: 8deg; }
    94% { rotate: -5deg; }
    98% { rotate: 3deg; }
}

@keyframes pumpkin-flicker {
    0%, 100% { opacity: 1; }
    42% { opacity: .8; }
    47% { opacity: .45; }
    52% { opacity: 1; }
    78% { opacity: .72; }
    82% { opacity: 1; }
}

@keyframes pumpkin-stem-sway {
    0%, 100% { rotate: -4deg; }
    50% { rotate: 7deg; }
}

@media only screen and (max-width: 600px) {
    .halloween-toggle {
        bottom: 76px;
        left: 8px;
        width: 124px;
        font-size: 11px;
    }

    .halloween-pumpkin {
        width: 116px;
        height: 116px;
        flex-basis: 116px;
    }

    .halloween-toggle-label {
        padding: 6px 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-bat,
    .bat-wing,
    .bat-body,
    .halloween-pumpkin,
    .pumpkin-face,
    .pumpkin-stem {
        animation: none;
    }
}