/* Thematic: Halloween. Loaded only when thematic_halloween_active is on; scope rules to body.thematic-halloween. */

/* Palette */
body.thematic-halloween {
    --ele-gray-page: #121212;
    --ele-gray-surface: #1d1d1d;
    --ele-gray-border: #2c2c2c;
    --ele-gray-input: #2a2a2a;
    --ele-gray-input-focus: #333333;
    --body-bg-color-dark: #121212;
    --header-background: #1b1b1b;
    --header-background-dark: #1b1b1b;
    --main-link: #ff9a3c;
    --main-btn: #ff8a1f;
    --main-btn-hover: #ff9f45;
    --main-btn-rgb: 255, 138, 31;
    --plyr-color-main: #ff8a1f;
    --nova-btn-gradient: linear-gradient(135deg, #ff9f45 0%, #ff8a1f 100%);
    --nova-btn-gradient-hover: linear-gradient(135deg, #ffb86b 0%, #ff9f45 100%);
    --ele-nav-icon-active: #ff8a1f;
    background: radial-gradient(1200px 500px at 50% -200px, #2a1a3a 0%, #121212 70%) no-repeat #121212 !important;
}

/* The design is dark only, so the day/night switch is hidden while the theme is on */
body.thematic-halloween .js_theme-mode {
    display: none !important;
}

body.thematic-halloween a:hover {
    color: #ffb86b;
}

body.thematic-halloween .btn-primary {
    color: #1b1009 !important;
}

/* Header */
body.thematic-halloween .ele_navbar_top {
    background-color: #1b1b1b !important;
    border-bottom-color: #2a2a2a !important;
    box-shadow: 0 1px 0 rgba(255, 138, 31, .25) !important;
}

.ele_hw_boo {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 6px;
    border-radius: 6px;
    background: #ff8a1f;
    color: #1b1b1b;
    font-family: 'Gilroy', Roboto, sans-serif;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    transform: rotate(-6deg);
}

/* Left menu */
body.thematic-halloween .ele_sidebar_left .sidebar_innr > .btn.active {
    background: linear-gradient(90deg, #3a2312, #2a1a2e);
    box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .25);
    color: #ff9a3c !important;
}

body.thematic-halloween .ele_sidebar_left .sidebar_innr > .btn.active:before {
    opacity: 0 !important;
}

/* Right menu */
body.thematic-halloween .ele_feed_nav_item_halloween,
body.thematic-halloween .ele_feed_nav_item_halloween:hover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #ff9a3c;
    font-weight: 700;
}

.ele_feed_nav_item_halloween span {
    color: #8e6a4a;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

/* Stories: the outline marks new stories only, same as the regular style */
body.thematic-halloween .profile-header.profile .profile-avatar-wrapper.has-active-story {
    background: #ff8a1f;
}

body.thematic-halloween .ele_home_stories .stories .story:not(.seen) > .items a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    border-radius: 10px;
    box-shadow: inset 0 0 0 2px #ff8a1f;
    pointer-events: none;
}

/* Posts */
body.thematic-halloween .post-text a {
    color: #ff9a3c;
}

body.thematic-halloween .post-actions .post-reactions-like-group {
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid #3a2a20;
    border-radius: 20px;
}

body.thematic-halloween .post-actions .reactions-wrapper.js_unreact-post .post-reactions-like-group {
    background: #3a2312;
}

body.thematic-halloween .post-actions .post-reactions-count {
    color: #ececec;
    font-size: 15px;
}

body.thematic-halloween .post-actions .post-reactions-like-icon:not(.is-emoji) svg {
    display: none;
}

body.thematic-halloween .post-actions .post-reactions-like-icon:not(.is-emoji):before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c-1-3 1-4 2-4' stroke='%236b8f3a' stroke-width='2' fill='none'/%3E%3Cellipse cx='7.5' cy='14' rx='5' ry='7' fill='%234a4a4a'/%3E%3Cellipse cx='16.5' cy='14' rx='5' ry='7' fill='%234a4a4a'/%3E%3Cellipse cx='12' cy='14' rx='5' ry='7.5' fill='%235a5a5a'/%3E%3Cpath d='M9 12l1.5 1.5L9 14zM15 12l-1.5 1.5L15 14zM9 17q3 2 6 0' fill='%232a1505' stroke='%232a1505' stroke-width='.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.thematic-halloween .post-actions .post-reactions-like-icon.is-active:not(.is-emoji):before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6c-1-3 1-4 2-4' stroke='%236b8f3a' stroke-width='2' fill='none'/%3E%3Cellipse cx='7.5' cy='14' rx='5' ry='7' fill='%23e5741a'/%3E%3Cellipse cx='16.5' cy='14' rx='5' ry='7' fill='%23e5741a'/%3E%3Cellipse cx='12' cy='14' rx='5' ry='7.5' fill='%23ff8a1f'/%3E%3Cpath d='M9 12l1.5 1.5L9 14zM15 12l-1.5 1.5L15 14zM9 17q3 2 6 0' fill='%232a1505' stroke='%232a1505' stroke-width='.6'/%3E%3C/svg%3E");
}

/* Trending */
body.thematic-halloween .trending-item-halloween {
    background: #2a1a0e;
    box-shadow: 0 0 0 1px #ff8a1f;
}

body.thematic-halloween .trending-item-halloween .hash {
    color: #ff9a3c;
}

body.thematic-halloween .trending-item-halloween .frequency {
    color: #b08a6a;
}

/* Messenger (messenger.css loads later, so these selectors are more specific) */
body.thematic-halloween.night-mode .msg2-app {
    --msg2-accent: #ff8a1f;
    --msg2-accent-2: #e5741a;
    --msg2-mine: linear-gradient(140deg, #ff9f45, #ff8a1f);
    --msg2-theirs: #262626;
    --msg2-panel: #1d1d1d;
    --msg2-border: #2c2c2c;
    --msg2-input: #242424;
    --msg2-muted: #8e8e8e;
}

body.thematic-halloween.night-mode .msg2-messages {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 150' fill='none' stroke='%23e8dcff' stroke-opacity='.28' stroke-width='1'%3E%3Cpath d='M150 0L40 110M150 0L80 140M150 0L10 60M150 0L150 150M150 0L0 0'/%3E%3Cpath d='M130 0Q128 18 150 20M108 0Q104 38 150 42M84 0Q80 62 150 68M60 0Q56 88 150 96'/%3E%3C/svg%3E") top right / 170px 170px no-repeat,
        radial-gradient(520px 260px at 85% 110%, rgba(255, 138, 31, .14), transparent 70%);
}

body.thematic-halloween.night-mode .msg2-thread-item.active {
    background: rgba(255, 138, 31, .12);
}

body.thematic-halloween .msg2-thread-head-status.is-offline {
    color: #ff9a3c;
}

body.thematic-halloween .msg2-bubble.mine:not(.sticker-only):not(.image-only) .msg2-bubble-body {
    box-shadow: 0 6px 18px rgba(255, 138, 31, .25);
    color: #1b1009;
}

body.thematic-halloween .msg2-bubble.mine:not(.sticker-only):not(.image-only) .msg2-bubble-meta,
body.thematic-halloween .msg2-bubble.mine:not(.sticker-only):not(.image-only) .msg2-msg-time {
    color: rgba(27, 16, 9, .7);
}

body.thematic-halloween.night-mode .msg2-bubble.theirs .msg2-bubble-body {
    background: #262626;
    border-color: #333333;
}

body.thematic-halloween .msg2-reaction-chip.is-mine {
    border-color: rgba(255, 138, 31, .55);
    background: rgba(255, 138, 31, .16);
}

body.thematic-halloween .msg2-composer-input:focus-within {
    border-color: rgba(255, 138, 31, .5);
}

body.thematic-halloween .msg2-send-btn {
    box-shadow: 0 8px 20px rgba(255, 138, 31, .35);
    color: #1b1009;
}

.msg2-hw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.msg2-hw-chip {
    height: 32px;
    padding: 0 14px;
    border: 1px solid #3a3a3a;
    border-radius: 16px;
    background: transparent;
    color: #e6e8ea;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.msg2-hw-chip:hover {
    border-color: #ff8a1f;
}

.msg2-hw-chip-boo {
    border-color: #ff8a1f;
    background: #2a1a0e;
    color: #ff9a3c;
}

/* Bats burst from a "Бу" message */
.msg2-boo-fx {
    position: fixed;
    z-index: 2000;
    width: 0;
    height: 0;
    pointer-events: none;
}

.msg2-boo-bat {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--boo-size);
    height: calc(var(--boo-size) / 2);
    margin: calc(var(--boo-size) / -4) 0 0 calc(var(--boo-size) / -2);
    opacity: 0;
    animation: msg2_boo_fly 1.5s cubic-bezier(.2, .7, .3, 1) var(--boo-delay) forwards;
}

.msg2-boo-bat svg {
    display: block;
    width: 100%;
    height: 100%;
    color: #0a0a0a;
    filter: drop-shadow(0 0 6px rgba(255, 138, 31, .85));
    transform-origin: center;
    animation: ele_hw_flap .25s ease-in-out infinite;
}

@keyframes msg2_boo_fly {
    0% { opacity: 0; transform: translate(0, 0) scale(.3); }
    12% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--boo-x), var(--boo-y)) scale(1.15); }
}

/* Bats */
.ele_hw_bats {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    overflow: hidden;
    pointer-events: none;
}

.ele_hw_bat {
    position: absolute;
    left: 0;
    opacity: .55;
    animation: ele_hw_batfly 22s linear infinite;
}

.ele_hw_bat svg {
    display: block;
    color: #0a0a0a;
    transform-origin: center;
    animation: ele_hw_flap .35s ease-in-out infinite;
}

.ele_hw_bat_2 {
    animation-delay: 7s;
    animation-duration: 30s;
}

.ele_hw_bat_3 {
    animation-delay: 14s;
    animation-duration: 26s;
}

@keyframes ele_hw_batfly {
    0% { transform: translate(-10vw, 0) scale(.9); }
    25% { transform: translate(25vw, -30px) scale(1); }
    50% { transform: translate(55vw, 20px) scale(.85); }
    75% { transform: translate(85vw, -20px) scale(1); }
    100% { transform: translate(115vw, 0) scale(.9); }
}

@keyframes ele_hw_flap {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(.45); }
}

/* Below 1200px the logo collapses to the icon and there is no room for the tag */
@media (max-width: 1199px) {
    .ele_hw_boo {
        display: none;
    }
}

@media (max-width: 767px) {
    .msg2-hw-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ele_hw_bats {
        display: none;
    }
}