/**
 * Halloween Theme Styles
 * Spooky orange and black theme for October festivities 🎃
 */

[data-theme="halloween"] {
    /* Enhanced Halloween color palette - Rich Autumn & Gothic */
    --primary-bg: #0a0a0a;                     /* Deep void black */
    --secondary-bg: #1a0d0a;                   /* Dark burnt orange-black */
    --tertiary-bg: #2d1b0a;                    /* Rich dark amber */
    --text-primary: #ff7518;                   /* Vibrant jack-o'-lantern orange */
    --text-secondary: #ff5500;                 /* Intense orange-red */
    --text-muted: #b8860b;                     /* Dark goldenrod */
    --accent-color: #ff6347;                   /* Tomato red-orange */
    --accent-hover: #ff4500;                   /* Orange-red on hover */
    --border-color: #ff4500;                   /* Fiery orange borders */
    --shadow: 0 6px 30px rgba(255, 99, 71, 0.7); /* Intense orange-red glow */
    --success-color: #ff8c00;                  /* Success pumpkin orange */
    --warning-color: #ffd700;                  /* Gold warning */
    --danger-color: #8b0000;                   /* Dark blood red danger */
    --info-color: #daa520;                     /* Goldenrod info */

    /* Rich Halloween theme colors */
    --pumpkin-orange: #ff7518;                 /* Vibrant pumpkin */
    --jack-o-lantern: #ff6347;                 /* Glowing jack-o'-lantern */
    --halloween-black: #0a0a0a;                /* Deep void */
    --blood-red: #8b0000;                      /* Dark blood */
    --crimson: #dc143c;                        /* Bright crimson */
    --ghost-white: #f8f8ff;                    /* Ethereal white */
    --witch-purple: #4b0082;                   /* Deep indigo purple */
    --autumn-gold: #daa520;                    /* Rich autumn gold */
    --burnt-orange: #cc5500;                   /* Deep burnt orange */
    --candy-corn-yellow: #ffdc00;              /* Bright candy corn */
    --autumn-rust: #b7410e;                    /* Rusty autumn */
    --midnight-purple: #2e1065;                /* Dark mystical purple */
    --harvest-brown: #8b4513;                  /* Harvest brown */

    /* Glass morphism variables for Halloween theme */
    --glass-bg: rgba(10, 10, 10, 0.9);        /* Deep dark translucent */
    --glass-border: rgba(255, 99, 71, 0.6);   /* Intense orange-red glow */
    --text-white: #f8f8ff;                     /* Ghostly white text */
    --text-light: #ff7518;                     /* Vibrant orange light text */
    --text-glow: 0 0 25px rgba(255, 117, 24, 0.9); /* Intense pumpkin glow */

    /* Enhanced Halloween "neon" colors */
    --neon-pink: #ff1493;                      /* Hot pink accent */
    --neon-purple: #4b0082;                    /* Witch purple */
    --neon-blue: #191970;                      /* Midnight blue */
    --neon-green: #228b22;                     /* Forest green */
    --neon-yellow: #ffdc00;                    /* Bright candy corn */
    --neon-orange: #ff7518;                    /* Vibrant pumpkin orange */
    --neon-red: #dc143c;                       /* Bright crimson */
}

/* Epic Halloween theme background with animations */
html body[data-theme="halloween"],
body[data-theme="halloween"],
[data-theme="halloween"] body {
    background:
        /* Spooky night sky with stars */
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent),
        /* Moonlight */
        radial-gradient(circle at 85% 15%, rgba(248, 248, 255, 0.3) 0%, transparent 25%),
        /* Eerie fog at bottom */
        linear-gradient(to top, rgba(75, 0, 130, 0.4) 0%, transparent 30%),
        /* Blood moon glow */
        radial-gradient(circle at 90% 10%, rgba(139, 0, 0, 0.3) 0%, transparent 20%),
        /* Base dark night sky */
        linear-gradient(180deg, #0a0a0a 0%, #1a0d1a 30%, #2d0a2d 60%, #0f0a1a 100%) !important;
    color: var(--text-primary) !important;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    animation: halloweenAtmosphere 20s ease-in-out infinite;
}

/* Fix modal scrolling issues - when modal is open, allow scrolling */
[data-theme="halloween"] body.modal-open,
body[data-theme="halloween"].modal-open,
html body[data-theme="halloween"].modal-open {
    overflow: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-right: 0 !important;
    position: relative !important;
}

/* Enhanced modal styling for Halloween theme */
[data-theme="halloween"] .modal {
    z-index: 1060 !important;
}

[data-theme="halloween"] .modal-backdrop {
    z-index: 1050 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="halloween"] .modal-dialog {
    margin: 1.75rem auto !important;
    max-height: none !important;
    display: block !important;
    position: relative !important;
    width: auto !important;
    pointer-events: none !important;
}

[data-theme="halloween"] .modal-dialog .modal-content {
    pointer-events: auto !important;
    position: relative !important;
}

[data-theme="halloween"] .modal-content {
    max-height: 80vh !important;
    overflow-y: auto !important;
    background: rgba(26, 26, 46, 0.95) !important;
    border: 2px solid var(--pumpkin-orange) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 50px rgba(255, 140, 0, 0.8),
                0 0 100px rgba(139, 69, 19, 0.6) !important;
    backdrop-filter: blur(15px) !important;
}

[data-theme="halloween"] .modal-header {
    background: linear-gradient(135deg,
        rgba(255, 140, 0, 0.3),
        rgba(139, 69, 19, 0.2)) !important;
    border-bottom: 1px solid var(--pumpkin-orange) !important;
    border-radius: 18px 18px 0 0 !important;
}

[data-theme="halloween"] .modal-title {
    color: var(--pumpkin-orange) !important;
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.56) !important;
}

/* Additional modal scrolling fixes */
html[data-theme="halloween"],
html body[data-theme="halloween"] {
    overflow: auto !important;
    height: auto !important;
}

[data-theme="halloween"] .modal.show {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Force enable scrolling when any modal is visible */
[data-theme="halloween"] body:has(.modal.show),
[data-theme="halloween"] html:has(.modal.show) {
    overflow: auto !important;
    position: static !important;
}

/* Fallback for debugging - should show red if nothing else works */
body.debug-halloween {
    background: red !important;
}

/* Mystical Halloween atmosphere overlay */
[data-theme="halloween"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 99, 71, 0.2) 0%, transparent 35%),
        radial-gradient(circle at 85% 20%, rgba(139, 0, 0, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(255, 117, 24, 0.1) 0%, transparent 60%),
        radial-gradient(circle at 20% 80%, rgba(218, 165, 32, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 75% 85%, rgba(75, 0, 130, 0.1) 0%, transparent 35%);
    pointer-events: none;
    z-index: -2;
    animation: mysticalGlow 10s ease-in-out infinite alternate;
}

@keyframes mysticalGlow {
    0% { opacity: 0.6; }
    100% { opacity: 0.9; }
}

/* Epic floating Halloween creatures */
[data-theme="halloween"] body::after {
    content: '🧙‍♀️ 🐈‍⬛ 👻 🦇 🕷️ 🧙‍♂️ 🐱 👻 🦇 🕸️ 🧙‍♀️ 🐈‍⬛ 👻 🦇 🕷️ 🧙‍♂️ 🐱 👻 🦇 🕸️ 💀 🎃 🦉 🌙 ⚡ 🔮 🕯️ 🍂 🌑 🧙‍♀️ 🐈‍⬛ 👻 🦇 🕷️';
    position: fixed;
    top: -50px;
    left: -50px;
    right: -50px;
    bottom: -50px;
    font-size: 32px;
    color: rgba(255, 117, 24, 0.12);
    z-index: -1;
    pointer-events: none;
    animation: halloweenPartyFloat 50s linear infinite;
    letter-spacing: 100px;
    line-height: 160px;
    text-shadow: 0 0 25px rgba(255, 99, 71, 0.28);
}

@keyframes halloweenPartyFloat {
    0% {
        transform: translateY(110vh) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.12; }
    50% { opacity: 0.18; }
    90% { opacity: 0.12; }
    100% {
        transform: translateY(-30vh) rotate(360deg);
        opacity: 0;
    }
}

/* Additional spooky cobweb decorations */
[data-theme="halloween"] body {
    position: relative;
}

[data-theme="halloween"] body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        /* Spooky corner cobwebs */
        radial-gradient(circle at 0% 0%, rgba(139, 139, 139, 0.1) 0%, transparent 15%),
        radial-gradient(circle at 100% 0%, rgba(139, 139, 139, 0.1) 0%, transparent 15%),
        radial-gradient(circle at 0% 100%, rgba(139, 139, 139, 0.08) 0%, transparent 12%),
        radial-gradient(circle at 100% 100%, rgba(139, 139, 139, 0.08) 0%, transparent 12%),
        /* Eerie fog effect */
        radial-gradient(circle at 30% 70%, rgba(75, 0, 130, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, rgba(139, 0, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -3;
    animation: eerieAtmosphere 15s ease-in-out infinite alternate;
}

@keyframes eerieAtmosphere {
    0% {
        opacity: 0.3;
        transform: scale(1);
    }
    100% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

[data-theme="halloween"] .card {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 117, 24, 0.1) 0%, transparent 60%),
        var(--secondary-bg);
    border: 3px solid var(--jack-o-lantern);
    box-shadow:
        0 0 30px rgba(255, 99, 71, 0.8),
        inset 0 0 25px rgba(255, 117, 24, 0.15),
        0 8px 32px rgba(139, 0, 0, 0.3);
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}

/* Enhanced jack-o'-lantern glow effect */
[data-theme="halloween"] .card::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: conic-gradient(
        var(--jack-o-lantern) 0deg,
        var(--crimson) 60deg,
        var(--autumn-gold) 120deg,
        var(--burnt-orange) 180deg,
        var(--blood-red) 240deg,
        var(--candy-corn-yellow) 300deg,
        var(--jack-o-lantern) 360deg
    );
    border-radius: inherit;
    z-index: -1;
    opacity: 0.6;
    filter: blur(8px);
    animation: halloweenCardGlow 4s ease-in-out infinite alternate;
}

/* Flickering candle-like glow effect */
[data-theme="halloween"] .card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(255, 99, 71, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(218, 165, 32, 0.08) 0%, transparent 50%);
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
    animation: candleFlicker 2s ease-in-out infinite alternate;
}

@keyframes halloweenCardGlow {
    0% {
        opacity: 0.4;
        filter: blur(8px);
        transform: rotate(0deg);
    }
    100% {
        opacity: 0.8;
        filter: blur(12px);
        transform: rotate(1deg);
    }
}

@keyframes candleFlicker {
    0% { opacity: 0.1; }
    50% { opacity: 0.2; }
    100% { opacity: 0.05; }
}

[data-theme="halloween"] .btn-primary {
    background: linear-gradient(45deg,
        var(--jack-o-lantern) 0%,
        var(--autumn-gold) 25%,
        var(--burnt-orange) 50%,
        var(--candy-corn-yellow) 75%,
        var(--jack-o-lantern) 100%);
    border: 3px solid var(--crimson);
    color: var(--halloween-black) !important;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    box-shadow:
        0 6px 20px rgba(255, 99, 71, 0.7),
        inset 0 3px 6px rgba(255, 220, 0, 0.4),
        0 0 30px rgba(218, 165, 32, 0.5);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

[data-theme="halloween"] .btn-primary::before {
    content: '🎃';
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    opacity: 0.8;
    text-shadow: 0 0 10px rgba(255, 99, 71, 0.56);
    animation: pumpkinGlow 2s ease-in-out infinite alternate;
}

[data-theme="halloween"] .btn-primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 220, 0, 0.4),
        transparent);
    transition: left 0.5s ease;
}

[data-theme="halloween"] .btn-primary:hover {
    background: linear-gradient(45deg,
        var(--crimson) 0%,
        var(--jack-o-lantern) 25%,
        var(--autumn-gold) 50%,
        var(--burnt-orange) 75%,
        var(--crimson) 100%);
    box-shadow:
        0 8px 25px rgba(220, 20, 60, 0.8),
        inset 0 4px 8px rgba(255, 220, 0, 0.5),
        0 0 40px rgba(255, 99, 71, 0.7);
    transform: translateY(-4px) scale(1.02);
    border-color: var(--autumn-gold);
}

[data-theme="halloween"] .btn-primary:hover::after {
    left: 100%;
}

@keyframes halloweenButtonPulse {
    0%, 100% { transform: translateY(-4px) scale(1.02); }
    50% { transform: translateY(-4px) scale(1.06); }
}

[data-theme="halloween"] .navbar {
    background:
        linear-gradient(90deg,
            var(--halloween-black) 0%,
            var(--secondary-bg) 20%,
            var(--tertiary-bg) 50%,
            var(--secondary-bg) 80%,
            var(--halloween-black) 100%) !important;
    border-bottom: 4px solid var(--jack-o-lantern);
    box-shadow:
        0 6px 25px rgba(255, 99, 71, 0.6),
        inset 0 2px 0 rgba(218, 165, 32, 0.3),
        0 0 50px rgba(139, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}

[data-theme="halloween"] .navbar::before {
    content: '🦇 👻 🎃 🕷️ 💀 🕯️ 🎃 👻 🦇';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: var(--jack-o-lantern);
    opacity: 0.7;
    letter-spacing: 25px;
    text-shadow: 0 0 15px rgba(255, 99, 71, 0.56);
    animation: spookyFloat 6s ease-in-out infinite alternate;
}

[data-theme="halloween"] .navbar::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 99, 71, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(218, 165, 32, 0.08) 0%, transparent 50%);
    pointer-events: none;
    animation: mysticalNavGlow 8s ease-in-out infinite alternate;
}

@keyframes spookyFloat {
    0% {
        transform: translateX(-50%) translateY(0px);
        opacity: 0.7;
    }
    100% {
        transform: translateX(-50%) translateY(-5px);
        opacity: 0.9;
    }
}

@keyframes mysticalNavGlow {
    0% { opacity: 0.3; }
    100% { opacity: 0.6; }
}

[data-theme="halloween"] .modal-content {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 0 30px rgba(255, 102, 0, 0.5);
}

[data-theme="halloween"] .form-control {
    background: var(--tertiary-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

[data-theme="halloween"] .form-control:focus {
    background: var(--tertiary-bg);
    border-color: var(--accent-color);
    color: var(--text-primary);
    box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.25);
    text-shadow: 0 0 5px rgba(255, 149, 0, 0.35);
}

[data-theme="halloween"] .form-select {
    background: var(--tertiary-bg);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

/* Enhanced spooky Halloween headings */
[data-theme="halloween"] h1,
[data-theme="halloween"] h2,
[data-theme="halloween"] h3,
[data-theme="halloween"] h4,
[data-theme="halloween"] h5,
[data-theme="halloween"] h6 {
    color: var(--jack-o-lantern) !important;
    text-shadow:
        0 0 15px rgba(255, 99, 71, 1),
        0 0 30px rgba(255, 117, 24, 0.8),
        0 0 45px rgba(218, 165, 32, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.8);
    font-family: 'serif';
    font-weight: bold;
    position: relative;
    filter: drop-shadow(0 0 20px rgba(255, 99, 71, 0.5));
}


[data-theme="halloween"] h3::before,
[data-theme="halloween"] h4::before {
    content: '🦇 ';
    color: var(--crimson);
    text-shadow:
        0 0 15px rgba(220, 20, 60, 0.9),
        0 0 30px rgba(139, 0, 0, 0.7);
    animation: batWing 2s ease-in-out infinite alternate;
    margin-right: 6px;
}

[data-theme="halloween"] h5::before,
[data-theme="halloween"] h6::before {
    content: '🕷️ ';
    color: var(--blood-red);
    text-shadow: 0 0 10px rgba(139, 0, 0, 0.56);
    margin-right: 4px;
}

/* Large headings get extra spooky effects */
[data-theme="halloween"] h1,
[data-theme="halloween"] h2 {
    background: linear-gradient(45deg,
        var(--jack-o-lantern),
        var(--crimson),
        var(--autumn-gold),
        var(--jack-o-lantern));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: spookyTextFlow 4s ease-in-out infinite;
}

@keyframes jackOLanternGlow {
    0% {
        text-shadow:
            0 0 20px rgba(255, 99, 71, 1),
            0 0 40px rgba(255, 117, 24, 0.8);
        transform: scale(1);
    }
    100% {
        text-shadow:
            0 0 30px rgba(255, 99, 71, 1),
            0 0 60px rgba(255, 117, 24, 1),
            0 0 80px rgba(218, 165, 32, 0.8);
        transform: scale(1.1);
    }
}

@keyframes batWing {
    0% {
        transform: rotate(-5deg) scale(1);
        text-shadow:
            0 0 15px rgba(220, 20, 60, 0.9),
            0 0 30px rgba(139, 0, 0, 0.7);
    }
    100% {
        transform: rotate(5deg) scale(1.05);
        text-shadow:
            0 0 20px rgba(220, 20, 60, 1),
            0 0 40px rgba(139, 0, 0, 0.9);
    }
}

@keyframes spookyTextFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Chart container specific styling */
[data-theme="halloween"] .chart-container {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.3);
}

/* Halloween progress bars */
[data-theme="halloween"] .progress {
    background: var(--halloween-black);
    border: 2px solid var(--pumpkin-orange);
    border-radius: 10px;
    box-shadow:
        0 0 10px rgba(255, 140, 0, 0.4),
        inset 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    position: relative;
}

[data-theme="halloween"] .progress::before {
    content: '🎃🎃🎃🎃🎃🎃🎃🎃🎃🎃';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-size: 8px;
    line-height: 20px;
    opacity: 0.1;
    animation: halloweenProgressPattern 10s linear infinite;
    z-index: 0;
}

[data-theme="halloween"] .progress-bar {
    background: linear-gradient(90deg,
        var(--pumpkin-orange) 0%,
        var(--candy-corn-yellow) 50%,
        var(--pumpkin-orange) 100%);
    box-shadow:
        0 0 15px rgba(255, 140, 0, 0.8),
        inset 0 2px 4px rgba(255, 255, 153, 0.3);
    border-radius: 8px;
    position: relative;
    z-index: 1;
    animation: halloweenProgressGlow 2s ease-in-out infinite alternate;
}

@keyframes halloweenProgressPattern {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes halloweenProgressGlow {
    0% { box-shadow: 0 0 15px rgba(255, 140, 0, 0.6), inset 0 2px 4px rgba(255, 255, 153, 0.3); }
    100% { box-shadow: 0 0 25px rgba(255, 140, 0, 1), inset 0 2px 6px rgba(255, 255, 153, 0.5); }
}

/* Tables */
[data-theme="halloween"] .table {
    color: var(--text-primary);
}

[data-theme="halloween"] .table-dark {
    background: var(--secondary-bg);
}

/* Halloween-themed alerts */
[data-theme="halloween"] .alert-success {
    background: rgba(255, 149, 0, 0.1);
    border: 2px solid var(--success-color);
    color: var(--success-color);
    text-shadow: 0 0 5px rgba(255, 149, 0, 0.21);
}

[data-theme="halloween"] .alert-warning {
    background: rgba(255, 204, 0, 0.1);
    border: 2px solid var(--warning-color);
    color: var(--warning-color);
    text-shadow: 0 0 5px rgba(255, 204, 0, 0.21);
}

[data-theme="halloween"] .alert-danger {
    background: rgba(255, 0, 0, 0.1);
    border: 2px solid var(--danger-color);
    color: var(--danger-color);
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.21);
}

[data-theme="halloween"] .alert-info {
    background: rgba(255, 102, 0, 0.1);
    border: 2px solid var(--info-color);
    color: var(--info-color);
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.21);
}

/* Dropdown menus */
[data-theme="halloween"] .dropdown-menu {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    box-shadow: var(--shadow);
}

[data-theme="halloween"] .dropdown-item {
    color: var(--text-primary);
}

[data-theme="halloween"] .dropdown-item:hover {
    background: var(--tertiary-bg);
    color: var(--text-primary);
    text-shadow: 0 0 5px rgba(255, 149, 0, 0.35);
}

/* Scrollbars (Webkit) */
[data-theme="halloween"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="halloween"] ::-webkit-scrollbar-track {
    background: var(--primary-bg);
}

[data-theme="halloween"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--pumpkin-orange), var(--spooky-red));
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5);
}

[data-theme="halloween"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, var(--accent-hover), var(--spooky-red));
}

/* Chat/messaging specific */
[data-theme="halloween"] .message-container {
    background: var(--tertiary-bg);
    border: 2px solid var(--border-color);
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.3);
}

[data-theme="halloween"] .message-bubble {
    background: var(--secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.2);
}

/* Timer specific with Halloween effects */
[data-theme="halloween"] .timer-display {
    background: linear-gradient(135deg, var(--secondary-bg) 0%, var(--tertiary-bg) 100%);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
    box-shadow: 0 0 30px rgba(255, 102, 0, 0.4);
    text-shadow: 0 0 10px rgba(255, 149, 0, 0.56);
}

[data-theme="halloween"] #countdown {
    color: var(--pumpkin-orange) !important;
    text-shadow:
        0 0 20px rgba(255, 140, 0, 1),
        0 0 40px rgba(255, 140, 0, 0.8),
        0 0 60px rgba(255, 140, 0, 0.6);
    animation: halloweenCountdownPulse 1s ease-in-out infinite alternate;
    font-family: 'serif';
    font-weight: bold;
    position: relative;
}

[data-theme="halloween"] #countdown::before {
    content: '🎃';
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    animation: pumpkinSpin 3s linear infinite;
}

[data-theme="halloween"] #countdown::after {
    content: '🎃';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7em;
    animation: pumpkinSpin 3s linear infinite reverse;
}

@keyframes halloweenCountdownPulse {
    0% {
        text-shadow: 0 0 20px rgba(255, 140, 0, 0.7), 0 0 40px rgba(255, 140, 0, 0.56);
        transform: scale(1);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 140, 0, 0.7), 0 0 60px rgba(255, 140, 0, 0.7);
        transform: scale(1.05);
    }
}

@keyframes pumpkinSpin {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

[data-theme="halloween"] .timer-warning {
    color: var(--spooky-red) !important;
    text-shadow:
        0 0 20px rgba(139, 0, 0, 1),
        0 0 40px rgba(139, 0, 0, 0.8) !important;
    animation: halloweenWarningPulse 0.5s ease-in-out infinite alternate;
}

@keyframes halloweenWarningPulse {
    0% {
        color: var(--spooky-red);
        text-shadow: 0 0 20px rgba(139, 0, 0, 0.7), 0 0 40px rgba(139, 0, 0, 0.56);
    }
    100% {
        color: #ff0000;
        text-shadow: 0 0 30px rgba(255, 0, 0, 0.7), 0 0 60px rgba(255, 0, 0, 0.56);
    }
}

[data-theme="halloween"] .timer-penalty {
    color: var(--candy-corn-yellow) !important;
    text-shadow: 0 0 20px rgba(255, 255, 153, 0.56) !important;
}

/* Halloween pulse animation */
@keyframes halloweenPulse {
    from {
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.56);
        transform: scale(1);
    }
    to {
        text-shadow: 0 0 30px rgba(255, 0, 0, 0.7), 0 0 40px rgba(255, 102, 0, 0.35);
        transform: scale(1.05);
    }
}

/* Interactive elements */
[data-theme="halloween"] .btn-outline-primary {
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.21);
}

[data-theme="halloween"] .btn-outline-primary:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--halloween-black);
    box-shadow: 0 0 15px rgba(255, 102, 0, 0.6);
    text-shadow: none;
}

/* Text colors */
[data-theme="halloween"] .text-muted {
    color: var(--text-muted) !important;
}

[data-theme="halloween"] .text-secondary {
    color: var(--text-secondary) !important;
}

/* Links */
[data-theme="halloween"] a {
    color: var(--accent-color);
    text-shadow: 0 0 5px rgba(255, 102, 0, 0.21);
}

[data-theme="halloween"] a:hover {
    color: var(--accent-hover);
    text-shadow: 0 0 8px rgba(255, 133, 51, 0.35);
}

/* Badges and labels */
[data-theme="halloween"] .badge {
    background: linear-gradient(45deg, var(--accent-color), var(--spooky-red));
    color: var(--halloween-black);
    text-shadow: none;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.4);
}

/* Input groups */
[data-theme="halloween"] .input-group-text {
    background: var(--secondary-bg);
    border: 2px solid var(--border-color);
    color: var(--text-secondary);
}

/* Special Halloween hover effects */
[data-theme="halloween"] .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 25px rgba(255, 102, 0, 0.5);
}

[data-theme="halloween"] button:hover {
    transform: translateY(-1px);
}

/* Halloween theme picker specific styling */
[data-theme="halloween"] .theme-option.active {
    background: linear-gradient(45deg, var(--accent-color), var(--spooky-red));
    color: var(--halloween-black);
    text-shadow: none;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.6);
}

/* Spooky focus effects */
[data-theme="halloween"] *:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
    box-shadow: 0 0 10px rgba(255, 102, 0, 0.5) !important;
}

/* Epic Halloween Atmosphere Animation */
@keyframes halloweenAtmosphere {
    0% { filter: hue-rotate(0deg) brightness(0.9); }
    25% { filter: hue-rotate(10deg) brightness(1.1); }
    50% { filter: hue-rotate(-5deg) brightness(0.8); }
    75% { filter: hue-rotate(15deg) brightness(1.0); }
    100% { filter: hue-rotate(0deg) brightness(0.9); }
}

/* REMOVED - Individual ghosts added below */

@keyframes floatGhosts {
    0% { transform: translateX(-200px) translateY(0px) rotate(0deg); }
    25% { transform: translateX(25vw) translateY(-30px) rotate(5deg); }
    50% { transform: translateX(50vw) translateY(40px) rotate(-3deg); }
    75% { transform: translateX(75vw) translateY(-20px) rotate(8deg); }
    100% { transform: translateX(calc(100vw + 200px)) translateY(10px) rotate(0deg); }
}

/* REMOVED - Individual witches added below */

@keyframes floatWitches {
    0% { transform: translateX(300px) translateY(20px) rotate(10deg); }
    20% { transform: translateX(80vw) translateY(-40px) rotate(-5deg); }
    40% { transform: translateX(60vw) translateY(60px) rotate(15deg); }
    60% { transform: translateX(40vw) translateY(-20px) rotate(-8deg); }
    80% { transform: translateX(20vw) translateY(30px) rotate(12deg); }
    100% { transform: translateX(calc(-100vw - 300px)) translateY(-30px) rotate(-10deg); }
}

/* REMOVED - Individual bats added below */

@keyframes flyBats {
    0% { transform: translateX(-400px) translateY(10px) rotate(0deg) scale(1); }
    15% { transform: translateX(15vw) translateY(-50px) rotate(15deg) scale(1.2); }
    30% { transform: translateX(30vw) translateY(70px) rotate(-20deg) scale(0.8); }
    45% { transform: translateX(45vw) translateY(-30px) rotate(25deg) scale(1.1); }
    60% { transform: translateX(60vw) translateY(80px) rotate(-15deg) scale(0.9); }
    75% { transform: translateX(75vw) translateY(-60px) rotate(30deg) scale(1.3); }
    90% { transform: translateX(90vw) translateY(40px) rotate(-10deg) scale(1); }
    100% { transform: translateX(calc(100vw + 400px)) translateY(20px) rotate(0deg) scale(1); }
}

/* Black Cats Stalking */
[data-theme="halloween"] .card::after {
    content: '🐈‍⬛';
    position: fixed;
    bottom: 10px;
    left: -100px;
    font-size: 3rem;
    pointer-events: none;
    z-index: -1;
    animation: stalkingCat 40s linear infinite;
    opacity: 0.8;
}

@keyframes stalkingCat {
    0% { transform: translateX(-100px); }
    20% { transform: translateX(20vw); }
    21% { transform: translateX(20vw) scaleX(-1); }
    40% { transform: translateX(0px) scaleX(-1); }
    41% { transform: translateX(0px) scaleX(1); }
    60% { transform: translateX(60vw); }
    80% { transform: translateX(80vw); }
    100% { transform: translateX(calc(100vw + 100px)); }
}

/* Spooky Spiders Animation */
[data-theme="halloween"] body::before {
    content: '🕷️ 🕸️ 🕷️ 🕸️ 🕷️ 🕸️';
    position: fixed;
    top: 0;
    right: 0;
    font-size: 2rem;
    line-height: 4rem;
    word-spacing: 2rem;
    pointer-events: none;
    z-index: -1;
    animation: spiderDrop 25s linear infinite;
    opacity: 0.6;
}

@keyframes spiderDrop {
    0% { transform: translateY(-100px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(25vh) translateX(-30px) rotate(90deg); }
    50% { transform: translateY(50vh) translateX(20px) rotate(180deg); }
    75% { transform: translateY(75vh) translateX(-15px) rotate(270deg); }
    100% { transform: translateY(100vh) translateX(0px) rotate(360deg); }
}

/* Individual Random Floating Halloween Creatures */
[data-theme="halloween"] .main::after {
    content: '👻';
    position: fixed;
    top: 20%;
    left: 10%;
    font-size: 4rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat1 15s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .container::after {
    content: '🦇';
    position: fixed;
    top: 15%;
    right: 20%;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat6 12s ease-in-out infinite;
    opacity: 0.8;
}

[data-theme="halloween"] .row::before {
    content: '🧙‍♀️';
    position: fixed;
    top: 70%;
    left: 5%;
    font-size: 3rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat7 18s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .col::after {
    content: '👻';
    position: fixed;
    bottom: 20%;
    right: 10%;
    font-size: 3.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat8 22s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .card::before {
    content: '🕷️';
    position: fixed;
    top: 50%;
    right: 30%;
    font-size: 2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat9 16s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .halloween-decoration-btn::after {
    content: '🦇';
    position: fixed;
    top: 80%;
    left: 15%;
    font-size: 2.8rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat10 14s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .form::before {
    content: '🧙‍♂️';
    position: fixed;
    top: 35%;
    left: 80%;
    font-size: 3.2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat11 20s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .input-group::after {
    content: '🐈‍⬛';
    position: fixed;
    bottom: 40%;
    left: 25%;
    font-size: 2.7rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat12 24s ease-in-out infinite;
    opacity: 0.8;
}

[data-theme="halloween"] .modal::before {
    content: '👻';
    position: fixed;
    top: 60%;
    right: 40%;
    font-size: 3.8rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat13 17s ease-in-out infinite;
    opacity: 0.4;
}

[data-theme="halloween"] .navbar-nav::after {
    content: '🦇';
    position: fixed;
    top: 25%;
    left: 60%;
    font-size: 2.3rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat14 13s ease-in-out infinite;
    opacity: 0.9;
}

[data-theme="halloween"] .content::before {
    content: '🧙‍♀️';
    position: fixed;
    top: 60%;
    right: 15%;
    font-size: 3.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat2 20s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .navbar::after {
    content: '🦇';
    position: fixed;
    top: 80%;
    left: 70%;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat3 12s ease-in-out infinite;
    opacity: 0.8;
}

[data-theme="halloween"] .footer::before {
    content: '🐈‍⬛';
    position: fixed;
    bottom: 30%;
    left: 80%;
    font-size: 3rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat4 25s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .header::after {
    content: '🕷️';
    position: fixed;
    top: 40%;
    left: 5%;
    font-size: 2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat5 18s ease-in-out infinite;
    opacity: 0.6;
}

/* Additional Halloween Floating Creatures - 20x More! */
[data-theme="halloween"] .container::before {
    content: '🎃';
    position: fixed;
    top: 15%;
    left: 85%;
    font-size: 3rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat15 12s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .container::after {
    content: '👻';
    position: fixed;
    top: 65%;
    left: 90%;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat16 15s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .row::before {
    content: '🦇';
    position: fixed;
    top: 25%;
    left: 8%;
    font-size: 2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat17 18s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .row::after {
    content: '🕸️';
    position: fixed;
    top: 55%;
    left: 75%;
    font-size: 3.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat18 20s ease-in-out infinite;
    opacity: 0.4;
}

[data-theme="halloween"] .col::before {
    content: '🧙‍♀️';
    position: fixed;
    top: 45%;
    left: 95%;
    font-size: 2.8rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat19 16s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .col::after {
    content: '🐈‍⬛';
    position: fixed;
    top: 75%;
    left: 12%;
    font-size: 2.3rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat20 14s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .card::before {
    content: '💀';
    position: fixed;
    top: 35%;
    left: 82%;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: -2;
    animation: randomFloat21 17s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .glass-card::before {
    content: '🍂';
    position: fixed;
    top: 85%;
    left: 88%;
    font-size: 2rem;
    pointer-events: none;
    z-index: -2;
    animation: randomFloat22 19s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .glass-card::after {
    content: '🔮';
    position: fixed;
    top: 10%;
    left: 25%;
    font-size: 2.8rem;
    pointer-events: none;
    z-index: -2;
    animation: randomFloat23 13s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .navbar::before {
    content: '🌙';
    position: fixed;
    top: 8%;
    left: 70%;
    font-size: 3rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat24 21s ease-in-out infinite;
    opacity: 0.8;
}

[data-theme="halloween"] .navbar::after {
    content: '⭐';
    position: fixed;
    top: 12%;
    left: 60%;
    font-size: 1.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat25 11s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .main::before {
    content: '🕷️';
    position: fixed;
    top: 68%;
    left: 28%;
    font-size: 2.2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat26 16s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .main::after {
    content: '🧛‍♂️';
    position: fixed;
    top: 22%;
    left: 45%;
    font-size: 3.2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat27 22s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .content::before {
    content: '🎭';
    position: fixed;
    top: 52%;
    left: 5%;
    font-size: 2.6rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat28 18s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .content::after {
    content: '🦴';
    position: fixed;
    top: 78%;
    left: 65%;
    font-size: 2.4rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat29 15s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .footer::before {
    content: '🧟‍♂️';
    position: fixed;
    top: 88%;
    left: 35%;
    font-size: 2.7rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat30 20s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .footer::after {
    content: '🕯️';
    position: fixed;
    top: 92%;
    left: 55%;
    font-size: 2.1rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat31 14s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .section::before {
    content: '🎃';
    position: fixed;
    top: 42%;
    left: 92%;
    font-size: 2.9rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat32 17s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .section::after {
    content: '👻';
    position: fixed;
    top: 18%;
    left: 15%;
    font-size: 2.3rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat33 19s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .wrapper::before {
    content: '🦇';
    position: fixed;
    top: 62%;
    left: 48%;
    font-size: 2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat34 16s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .wrapper::after {
    content: '🕸️';
    position: fixed;
    top: 72%;
    left: 78%;
    font-size: 3.8rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat35 21s ease-in-out infinite;
    opacity: 0.4;
}

[data-theme="halloween"] .layout::before {
    content: '🧙‍♀️';
    position: fixed;
    top: 32%;
    left: 68%;
    font-size: 2.5rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat36 18s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .layout::after {
    content: '🐈‍⬛';
    position: fixed;
    top: 58%;
    left: 18%;
    font-size: 2.2rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat37 15s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .page::before {
    content: '💀';
    position: fixed;
    top: 48%;
    left: 85%;
    font-size: 2.8rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat38 20s ease-in-out infinite;
    opacity: 0.5;
}

[data-theme="halloween"] .page::after {
    content: '🍂';
    position: fixed;
    top: 15%;
    left: 38%;
    font-size: 1.8rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat39 13s ease-in-out infinite;
    opacity: 0.6;
}

[data-theme="halloween"] .app::before {
    content: '🔮';
    position: fixed;
    top: 75%;
    left: 8%;
    font-size: 3.1rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat40 22s ease-in-out infinite;
    opacity: 0.7;
}

[data-theme="halloween"] .app::after {
    content: '🌙';
    position: fixed;
    top: 5%;
    left: 45%;
    font-size: 2.6rem;
    pointer-events: none;
    z-index: -1;
    animation: randomFloat41 16s ease-in-out infinite;
    opacity: 0.8;
}

/* Random Float Animations */
@keyframes randomFloat1 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(-40px) translateX(30px) rotate(10deg); }
    50% { transform: translateY(20px) translateX(-20px) rotate(-5deg); }
    75% { transform: translateY(-10px) translateX(40px) rotate(15deg); }
}

@keyframes randomFloat2 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    20% { transform: translateY(30px) translateX(-40px) rotate(-10deg); }
    40% { transform: translateY(-20px) translateX(20px) rotate(5deg); }
    60% { transform: translateY(40px) translateX(-30px) rotate(-15deg); }
    80% { transform: translateY(-30px) translateX(10px) rotate(8deg); }
}

@keyframes randomFloat3 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    30% { transform: translateY(-60px) translateX(50px) rotate(20deg) scale(1.2); }
    60% { transform: translateY(40px) translateX(-30px) rotate(-25deg) scale(0.8); }
}

@keyframes randomFloat4 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    33% { transform: translateY(-25px) translateX(-50px) rotate(5deg); }
    66% { transform: translateY(35px) translateX(25px) rotate(-8deg); }
}

@keyframes randomFloat5 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    40% { transform: translateY(50px) translateX(60px) rotate(180deg); }
    80% { transform: translateY(-40px) translateX(-20px) rotate(90deg); }
}

@keyframes randomFloat6 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-30px) translateX(-40px) rotate(45deg) scale(1.3); }
    50% { transform: translateY(60px) translateX(30px) rotate(-30deg) scale(0.7); }
    75% { transform: translateY(-20px) translateX(50px) rotate(60deg) scale(1.1); }
}

@keyframes randomFloat7 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    30% { transform: translateY(40px) translateX(-30px) rotate(-15deg); }
    70% { transform: translateY(-50px) translateX(20px) rotate(20deg); }
}

@keyframes randomFloat8 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    20% { transform: translateY(-35px) translateX(45px) rotate(12deg); }
    60% { transform: translateY(25px) translateX(-35px) rotate(-18deg); }
}

@keyframes randomFloat9 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    45% { transform: translateY(70px) translateX(40px) rotate(270deg); }
    90% { transform: translateY(-30px) translateX(-25px) rotate(135deg); }
}

@keyframes randomFloat10 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    35% { transform: translateY(-45px) translateX(-20px) rotate(-40deg) scale(1.4); }
    65% { transform: translateY(55px) translateX(35px) rotate(25deg) scale(0.6); }
}

@keyframes randomFloat11 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    25% { transform: translateY(30px) translateX(-50px) rotate(8deg); }
    75% { transform: translateY(-40px) translateX(15px) rotate(-12deg); }
}

@keyframes randomFloat12 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    40% { transform: translateY(-25px) translateX(60px) rotate(6deg); }
    80% { transform: translateY(45px) translateX(-40px) rotate(-10deg); }
}

@keyframes randomFloat13 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    50% { transform: translateY(35px) translateX(-45px) rotate(15deg); }
}

@keyframes randomFloat14 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    30% { transform: translateY(-60px) translateX(25px) rotate(-35deg) scale(1.2); }
    70% { transform: translateY(40px) translateX(-30px) rotate(40deg) scale(0.8); }
}

@keyframes randomFloat15 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-50px) translateX(40px) rotate(15deg) scale(1.1); }
    75% { transform: translateY(30px) translateX(-25px) rotate(-20deg) scale(0.9); }
}

@keyframes randomFloat16 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    40% { transform: translateY(-35px) translateX(-40px) rotate(-25deg) scale(1.3); }
    80% { transform: translateY(45px) translateX(20px) rotate(30deg) scale(0.7); }
}

@keyframes randomFloat17 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    35% { transform: translateY(-65px) translateX(30px) rotate(40deg) scale(1.2); }
    65% { transform: translateY(25px) translateX(-35px) rotate(-15deg) scale(0.8); }
}

@keyframes randomFloat18 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    20% { transform: translateY(-40px) translateX(-30px) rotate(-30deg) scale(1.4); }
    60% { transform: translateY(50px) translateX(35px) rotate(25deg) scale(0.6); }
}

@keyframes randomFloat19 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-55px) translateX(15px) rotate(35deg) scale(1.1); }
    90% { transform: translateY(35px) translateX(-40px) rotate(-40deg) scale(0.9); }
}

@keyframes randomFloat20 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    30% { transform: translateY(-45px) translateX(-20px) rotate(-20deg) scale(1.3); }
    70% { transform: translateY(40px) translateX(30px) rotate(35deg) scale(0.7); }
}

@keyframes randomFloat21 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    45% { transform: translateY(-70px) translateX(25px) rotate(45deg) scale(1.2); }
    85% { transform: translateY(20px) translateX(-30px) rotate(-25deg) scale(0.8); }
}

@keyframes randomFloat22 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-30px) translateX(-35px) rotate(-35deg) scale(1.4); }
    75% { transform: translateY(55px) translateX(20px) rotate(20deg) scale(0.6); }
}

@keyframes randomFloat23 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    40% { transform: translateY(-60px) translateX(35px) rotate(30deg) scale(1.1); }
    80% { transform: translateY(30px) translateX(-25px) rotate(-35deg) scale(0.9); }
}

@keyframes randomFloat24 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    35% { transform: translateY(-50px) translateX(-40px) rotate(-40deg) scale(1.3); }
    65% { transform: translateY(45px) translateX(30px) rotate(25deg) scale(0.7); }
}

@keyframes randomFloat25 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    20% { transform: translateY(-75px) translateX(20px) rotate(40deg) scale(1.2); }
    60% { transform: translateY(25px) translateX(-35px) rotate(-30deg) scale(0.8); }
}

@keyframes randomFloat26 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-40px) translateX(-30px) rotate(-25deg) scale(1.4); }
    90% { transform: translateY(50px) translateX(40px) rotate(35deg) scale(0.6); }
}

@keyframes randomFloat27 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    30% { transform: translateY(-65px) translateX(25px) rotate(45deg) scale(1.1); }
    70% { transform: translateY(35px) translateX(-40px) rotate(-20deg) scale(0.9); }
}

@keyframes randomFloat28 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    45% { transform: translateY(-55px) translateX(-25px) rotate(-35deg) scale(1.3); }
    85% { transform: translateY(40px) translateX(35px) rotate(30deg) scale(0.7); }
}

@keyframes randomFloat29 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-45px) translateX(30px) rotate(25deg) scale(1.2); }
    75% { transform: translateY(55px) translateX(-20px) rotate(-40deg) scale(0.8); }
}

@keyframes randomFloat30 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    40% { transform: translateY(-70px) translateX(-35px) rotate(-45deg) scale(1.4); }
    80% { transform: translateY(20px) translateX(25px) rotate(20deg) scale(0.6); }
}

@keyframes randomFloat31 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    35% { transform: translateY(-50px) translateX(40px) rotate(35deg) scale(1.1); }
    65% { transform: translateY(45px) translateX(-30px) rotate(-25deg) scale(0.9); }
}

@keyframes randomFloat32 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    20% { transform: translateY(-60px) translateX(-20px) rotate(-30deg) scale(1.3); }
    60% { transform: translateY(30px) translateX(35px) rotate(40deg) scale(0.7); }
}

@keyframes randomFloat33 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-75px) translateX(30px) rotate(50deg) scale(1.2); }
    90% { transform: translateY(25px) translateX(-40px) rotate(-35deg) scale(0.8); }
}

@keyframes randomFloat34 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    30% { transform: translateY(-40px) translateX(-35px) rotate(-40deg) scale(1.4); }
    70% { transform: translateY(50px) translateX(20px) rotate(25deg) scale(0.6); }
}

@keyframes randomFloat35 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    45% { transform: translateY(-65px) translateX(35px) rotate(30deg) scale(1.1); }
    85% { transform: translateY(35px) translateX(-25px) rotate(-45deg) scale(0.9); }
}

@keyframes randomFloat36 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    25% { transform: translateY(-55px) translateX(-30px) rotate(-25deg) scale(1.3); }
    75% { transform: translateY(40px) translateX(40px) rotate(35deg) scale(0.7); }
}

@keyframes randomFloat37 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    40% { transform: translateY(-45px) translateX(25px) rotate(40deg) scale(1.2); }
    80% { transform: translateY(55px) translateX(-35px) rotate(-20deg) scale(0.8); }
}

@keyframes randomFloat38 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    35% { transform: translateY(-70px) translateX(-40px) rotate(-35deg) scale(1.4); }
    65% { transform: translateY(20px) translateX(30px) rotate(30deg) scale(0.6); }
}

@keyframes randomFloat39 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    20% { transform: translateY(-50px) translateX(35px) rotate(45deg) scale(1.1); }
    60% { transform: translateY(45px) translateX(-20px) rotate(-30deg) scale(0.9); }
}

@keyframes randomFloat40 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    50% { transform: translateY(-60px) translateX(-25px) rotate(-40deg) scale(1.3); }
    90% { transform: translateY(30px) translateX(40px) rotate(25deg) scale(0.7); }
}

@keyframes randomFloat41 {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    30% { transform: translateY(-75px) translateX(20px) rotate(50deg) scale(1.2); }
    70% { transform: translateY(25px) translateX(-30px) rotate(-45deg) scale(0.8); }
}