/* =========================================================================
   HALLOWEEN SPOOKY ATMOSPHERE & FESTIVE EFFECTS MODULE
   Corner Web Weavers, Descending Silk Spiders, Midnight Blue Bats & Flying Ghosts
   ========================================================================= */

/* Top Halloween Garland with Glowing Pumpkins & Ghosts */
.halloween-lights {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 52px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 99995;
    pointer-events: none;
    animation: halloweenSwing 6s ease-in-out infinite;
}

.halloween-lights .pumpkin,
.halloween-lights .ghost {
    font-size: 28px;
    filter: drop-shadow(0 0 10px #ff7518);
    animation: halloweenGlow 1.8s infinite alternate;
    user-select: none;
}

.halloween-lights .pumpkin {
    text-shadow: 0 0 16px #ff7518, 0 0 32px #ff4500;
    animation-delay: 0.2s;
}

.halloween-lights .ghost {
    text-shadow: 0 0 16px #aafaff, 0 0 32px #66e0ff;
    animation-delay: 0.8s;
}

@keyframes halloweenGlow {
    from {
        opacity: 0.75;
        transform: scale(0.92);
        filter: brightness(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1.12);
        filter: brightness(1.4);
    }
}

@keyframes halloweenSwing {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(1.2deg);
    }
}

/* =========================================================================
   1. CORNER SPIDERWEBS WITH BIG WEAVING SPIDERS (IN ALL 4 CORNERS)
   ========================================================================= */
.halloween-corner-webs {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99996;
    overflow: hidden;
}

.corner-web-box {
    position: absolute;
    width: 190px;
    height: 190px;
    pointer-events: none;
}

/* Web Positions */
.corner-web-tl { top: 0; left: 0; }
.corner-web-tr { top: 0; right: 0; transform: scaleX(-1); }
.corner-web-bl { bottom: 0; left: 0; transform: scaleY(-1); }
.corner-web-br { bottom: 0; right: 0; transform: scale(-1, -1); }

.corner-web-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
}

/* Big Animated Weaving Spiders */
.corner-spider-unit {
    position: absolute;
    width: 52px;
    height: 52px;
    pointer-events: none;
    filter: drop-shadow(0 0 12px rgba(37, 99, 235, 0.95)) drop-shadow(0 0 4px #1d4ed8);
}

.corner-web-tl .corner-spider-unit {
    top: 45px;
    left: 45px;
    animation: spiderWeaveTL 9s ease-in-out infinite alternate;
}

.corner-web-tr .corner-spider-unit {
    top: 45px;
    left: 45px;
    animation: spiderWeaveTR 11s ease-in-out infinite alternate;
}

.corner-web-bl .corner-spider-unit {
    top: 45px;
    left: 45px;
    animation: spiderWeaveBL 10s ease-in-out infinite alternate;
}

.corner-web-br .corner-spider-unit {
    top: 45px;
    left: 45px;
    animation: spiderWeaveBR 12s ease-in-out infinite alternate;
}

.corner-spider-svg {
    width: 100%;
    height: 100%;
}

/* Spider Leg Twitching Animation */
.spider-leg {
    transform-origin: center;
    animation: spiderLegTwitch 2.2s ease-in-out infinite alternate;
}

.spider-leg.leg-1, .spider-leg.leg-5 { animation-delay: 0.1s; }
.spider-leg.leg-2, .spider-leg.leg-6 { animation-delay: 0.35s; }
.spider-leg.leg-3, .spider-leg.leg-7 { animation-delay: 0.2s; }
.spider-leg.leg-4, .spider-leg.leg-8 { animation-delay: 0.5s; }

@keyframes spiderLegTwitch {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(4deg) scale(0.97); }
    100% { transform: rotate(-3deg) scale(1.03); }
}

/* Spider Weaving Trajectories in Corners */
@keyframes spiderWeaveTL {
    0%   { transform: translate(0, 0) rotate(25deg); }
    25%  { transform: translate(35px, 20px) rotate(45deg); }
    50%  { transform: translate(20px, 45px) rotate(15deg); }
    75%  { transform: translate(45px, 35px) rotate(60deg); }
    100% { transform: translate(10px, 15px) rotate(30deg); }
}

@keyframes spiderWeaveTR {
    0%   { transform: translate(0, 0) rotate(-20deg); }
    30%  { transform: translate(30px, 35px) rotate(-45deg); }
    60%  { transform: translate(45px, 15px) rotate(-10deg); }
    100% { transform: translate(15px, 40px) rotate(-35deg); }
}

@keyframes spiderWeaveBL {
    0%   { transform: translate(0, 0) rotate(15deg); }
    40%  { transform: translate(35px, 25px) rotate(40deg); }
    70%  { transform: translate(15px, 40px) rotate(5deg); }
    100% { transform: translate(40px, 35px) rotate(30deg); }
}

@keyframes spiderWeaveBR {
    0%   { transform: translate(0, 0) rotate(-25deg); }
    35%  { transform: translate(25px, 40px) rotate(-50deg); }
    65%  { transform: translate(40px, 20px) rotate(-15deg); }
    100% { transform: translate(10px, 30px) rotate(-40deg); }
}

/* =========================================================================
   2. DESCENDING SPIDERS ON SILK WEB THREADS
   ========================================================================= */
.halloween-descending-spiders {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 99997;
    overflow: hidden;
}

.descending-spider-wrapper {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-90%);
    animation: spiderDescendCycle 16s ease-in-out infinite;
}

.spider-silk-line {
    width: 1.5px;
    height: 380px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(147, 197, 253, 0.85));
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.75), 0 0 10px rgba(59, 130, 246, 0.4);
}

.descending-spider-body {
    width: 36px;
    height: 36px;
    margin-top: -2px;
    filter: drop-shadow(0 0 8px rgba(37, 99, 235, 0.9));
    animation: spiderPendulumSwing 3.5s ease-in-out infinite alternate;
    transform-origin: top center;
}

@keyframes spiderPendulumSwing {
    0%   { transform: rotate(-8deg); }
    100% { transform: rotate(8deg); }
}

@keyframes spiderDescendCycle {
    0% {
        transform: translateY(-95%);
    }
    20% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(15%);
    }
    75% {
        transform: translateY(-30%);
    }
    100% {
        transform: translateY(-95%);
    }
}

/* =========================================================================
   3. MIDNIGHT BLACK BATS WITH DARK BLUE BORDER & GLOW
   ========================================================================= */
.halloween-bats-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 99998;
}

.halloween-bat {
    position: absolute;
    width: 46px;
    height: 28px;
    /* Midnight black body with dark blue stroke (#1d4ed8) and blue eyes (#38bdf8) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cpath d='M60 32 C54 14 36 8 18 20 C6 28 2 44 12 52 C22 45 34 44 46 50 C51 52 55 57 60 60 C65 57 69 52 74 50 C86 44 98 45 108 52 C118 44 114 28 102 20 C84 8 66 14 60 32 Z' fill='%2305070f' stroke='%231d4ed8' stroke-width='3' stroke-linejoin='round' /%3E%3Cpolygon points='54,28 50,15 57,22' fill='%2305070f' stroke='%232563eb' stroke-width='2' /%3E%3Cpolygon points='66,28 70,15 63,22' fill='%2305070f' stroke='%232563eb' stroke-width='2' /%3E%3Ccircle cx='53' cy='28' r='3' fill='%2338bdf8' /%3E%3Ccircle cx='67' cy='28' r='3' fill='%2338bdf8' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    /* Dark Blue Aura Glow */
    filter: drop-shadow(0 0 9px rgba(37, 99, 235, 0.95)) drop-shadow(0 0 3px #1d4ed8);
    animation: batFlyPath 15s linear infinite;
    opacity: 0.92;
}

/* Bat Flapping Animation */
@keyframes batFlyPath {
    0% {
        transform: translateX(-15vw) translateY(0) scale(0.9) scaleY(1);
    }
    15% {
        transform: translateX(18vw) translateY(-40px) scale(1.05) scaleY(0.7) rotate(8deg);
    }
    35% {
        transform: translateX(45vw) translateY(35px) scale(0.95) scaleY(1.1) rotate(-6deg);
    }
    55% {
        transform: translateX(72vw) translateY(-25px) scale(1) scaleY(0.75) rotate(7deg);
    }
    75% {
        transform: translateX(95vw) translateY(20px) scale(1.05) scaleY(1) rotate(-4deg);
    }
    100% {
        transform: translateX(120vw) translateY(-10px) scale(0.9) scaleY(0.85);
    }
}

/* =========================================================================
   4. FLYING SPOOKY GHOSTS (FLOAT & GLIDE ACROSS VIEWPORT)
   ========================================================================= */
.halloween-ghosts-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 99998;
}

.halloween-flying-ghost {
    position: absolute;
    width: 58px;
    height: 72px;
    /* Ethereal sheet ghost with cyan glow and dark hollow eyes/mouth */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cpath d='M50 15 C30 15 20 30 20 50 C20 70 15 85 22 105 C26 95 32 98 38 105 C44 95 50 98 56 105 C62 95 68 98 74 105 C78 95 82 70 82 50 C82 30 70 15 50 15 Z' fill='rgba(240, 249, 255, 0.88)' stroke='%2338bdf8' stroke-width='2.5' /%3E%3Cpath d='M22 55 Q5 60 12 70 Q20 68 24 62' fill='rgba(240, 249, 255, 0.88)' stroke='%2338bdf8' stroke-width='2' /%3E%3Cpath d='M78 55 Q95 60 88 70 Q80 68 76 62' fill='rgba(240, 249, 255, 0.88)' stroke='%2338bdf8' stroke-width='2' /%3E%3Cellipse cx='40' cy='46' rx='4.5' ry='6.5' fill='%23080c14' /%3E%3Cellipse cx='60' cy='46' rx='4.5' ry='6.5' fill='%23080c14' /%3E%3Cellipse cx='50' cy='62' rx='5' ry='8' fill='%23080c14' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 0 18px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 35px rgba(99, 102, 241, 0.5));
    animation: ghostGlidePath 22s ease-in-out infinite;
    opacity: 0.88;
}

.halloween-flying-ghost.reverse {
    animation-name: ghostGlidePathReverse;
}

@keyframes ghostGlidePath {
    0% {
        transform: translateX(-15vw) translateY(0) scale(0.9) rotate(0deg);
    }
    25% {
        transform: translateX(25vw) translateY(-45px) scale(1.05) rotate(6deg);
    }
    50% {
        transform: translateX(55vw) translateY(35px) scale(0.95) rotate(-5deg);
    }
    75% {
        transform: translateX(85vw) translateY(-30px) scale(1) rotate(4deg);
    }
    100% {
        transform: translateX(120vw) translateY(15px) scale(0.9) rotate(0deg);
    }
}

@keyframes ghostGlidePathReverse {
    0% {
        transform: translateX(115vw) translateY(10px) scaleX(-1) scale(0.9);
    }
    25% {
        transform: translateX(80vw) translateY(-40px) scaleX(-1) scale(1.05) rotate(-6deg);
    }
    50% {
        transform: translateX(50vw) translateY(30px) scaleX(-1) scale(0.95) rotate(5deg);
    }
    75% {
        transform: translateX(20vw) translateY(-25px) scaleX(-1) scale(1) rotate(-4deg);
    }
    100% {
        transform: translateX(-15vw) translateY(0) scaleX(-1) scale(0.9);
    }
}

/* =========================================================================
   5. FALLING SPOOKY PARTICLES (🎃 👻 💣 🧨 🕷️)
   ========================================================================= */
.halloweenfall {
    position: fixed;
    top: -30px;
    font-size: 1.2em;
    opacity: 0.9;
    pointer-events: none;
    z-index: 99994;
    user-select: none;
    animation: halloweenFall linear forwards;
    filter: drop-shadow(0 0 8px rgba(255, 117, 24, 0.45));
}

@keyframes halloweenFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.95;
    }
    100% {
        transform: translateY(105vh) rotate(360deg);
        opacity: 0.35;
    }
}

/* Spooky Spiderweb Subtle Pattern Overlay */
body.halloween-active::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 10% 20%, rgba(255, 117, 24, 0.04) 0%, transparent 40%),
                      radial-gradient(circle at 90% 70%, rgba(37, 99, 235, 0.05) 0%, transparent 45%);
    pointer-events: none;
    z-index: 0;
}

/* Spooky Glowing Accents */
body.halloween-active .home-hero-section {
    border-color: rgba(255, 117, 24, 0.25) !important;
    box-shadow: 0 10px 40px rgba(255, 117, 24, 0.12) !important;
}

body.halloween-active .stat-card:hover,
body.halloween-active .glass-card:hover,
body.halloween-active .server-card:hover {
    border-color: #ff7518 !important;
    box-shadow: 0 0 25px rgba(255, 117, 24, 0.28) !important;
}

body.halloween-active .hero-title {
    text-shadow: 0 0 25px rgba(255, 117, 24, 0.5) !important;
}

/* ==========================================================================
   HALLOWEEN NAVBAR TOGGLE BUTTON
   ========================================================================== */
.holiday-halloween-navbar-btn {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #7c3aed 0%, #ea580c 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #fff !important;
    font-size: 16px !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.45) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    z-index: 100 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}

.holiday-halloween-navbar-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.holiday-halloween-navbar-btn:active {
    transform: scale(0.95);
}

.holiday-halloween-navbar-btn.halloween-off {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    box-shadow: none !important;
    opacity: 0.65;
}

.holiday-halloween-navbar-btn.halloween-off i {
    color: #94a3b8 !important;
}

@media (max-width: 768px) {
    .holiday-halloween-navbar-btn {
        width: 32px;
        height: 32px;
        font-size: 14px !important;
        border-radius: 8px !important;
    }
}