/* =========================================================================
   Halloween: base.html.twig marks <html class="halloween"> from 24 October
   to 1 November (Moscow time), so the theme switches itself on and off.
   Night palette with pumpkin orange, the hero thermal camera in ironbow
   (the SVG filter is in base.html.twig), ghosts on it (js/battlefield/halloween.js).
   ========================================================================= */
.halloween {
    --bg-0: #0b090c;
    --bg-1: #120f14;
    --bg-2: #19141c;
    --bg-3: #231c27;
    --muted: #978d9c;
    --accent: #ff7a1a;
    --accent-2: #ffb02e;
    --pumpkin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.2 6.4c-.2-1.9.4-3.6 1.9-4.6l1.2 1c-1 .8-1.3 2-1.1 3.6Z' fill='%237c8a4d'/%3E%3Cg fill='%23ff7a1a'%3E%3Cellipse cx='7.8' cy='14.2' rx='5.8' ry='7.3'/%3E%3Cellipse cx='16.2' cy='14.2' rx='5.8' ry='7.3'/%3E%3C/g%3E%3Cellipse cx='12' cy='14' rx='5' ry='7.8' fill='%23ff8f33'/%3E%3Cpath d='M6.4 12.2 8.6 9l1.9 3.2Zm7.1 0L15.4 9l2.2 3.2ZM6 15.4h12l-1.4 2.6-1.6-1.1-1.5 1.7-1.5-1.5-1.5 1.5-1.5-1.7-1.6 1.1Z' fill='%231b1408'/%3E%3C/svg%3E");
}

/* A jack-o'-lantern instead of the square in the logo, flickering like a candle */
.halloween .brand::before { width: 20px; height: 20px; background: var(--pumpkin) center / contain no-repeat; box-shadow: none; animation: candle 4s steps(1) infinite; }
@keyframes candle {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(255, 122, 26, .8)); }
    21% { filter: drop-shadow(0 0 4px rgba(255, 122, 26, .55)); }
    27% { filter: drop-shadow(0 0 7px rgba(255, 176, 46, .85)); }
    58% { filter: drop-shadow(0 0 5px rgba(255, 122, 26, .65)); }
    63% { filter: drop-shadow(0 0 8px rgba(255, 122, 26, .9)); }
}
.halloween .ticker__item::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 9px; vertical-align: -2px; background: var(--pumpkin) center / contain no-repeat; }

/* Hero: a purple night sky, the thermal camera in ironbow — a real palette that happens to be purple and orange */
.halloween .hero { background: radial-gradient(120% 80% at 70% 20%, #24142f 0%, var(--bg-0) 60%); }
.halloween .hero__field { filter: url(#ironbow) saturate(.85) contrast(1.05); }
.halloween .hero__scan { background: linear-gradient(90deg, transparent, rgba(255, 122, 26, .55), transparent); }
/* A cobweb with a spider in the top left HUD corner */
.halloween .hero__hud {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath fill='none' stroke='%23c9b98a' stroke-opacity='.3' stroke-width='.7' d='M0 0L107.9 3.8M0 0L102.1 35.2M0 0L87.4 63.5M0 0L63.5 87.4M0 0L35.2 102.1M0 0L3.8 107.9M16 .6Q13.8 2.6 15.7 5.4Q12.2 6.4 12.6 9.1Q9.5 9.5 9.3 12.8Q6.4 12.4 5.4 15.7Q2.5 13.7 .5 15.6M31.2 1.1Q25.8 4.8 28.2 9.7Q23.5 12.2 25.7 18.7Q19.3 19.3 18.5 25.5Q12.2 23.4 9.7 28.1Q4.8 25.9 1.1 31.5M47.4 1.7Q41.2 7.6 47.2 16.2Q36.9 19.2 38 27.6Q28.6 28.6 27.6 38Q19.2 36.9 16.2 47.2Q7.6 41.2 1.7 47.4M68.1 2.4Q56 10.4 60.8 20.9Q50.5 26.3 55.1 40Q41.6 41.6 40.4 55.6Q26.4 50.8 21 60.9Q10.3 55.7 2.4 67.4M86.1 3Q75.1 13.9 86.5 29.8Q68.1 35.4 70.4 51.1Q52.4 52.4 50.2 69.1Q35.1 67.3 29.7 86.2Q14 75.8 3.1 87.9M55.1 40V92'/%3E%3Cg fill='none' stroke='%23c9b98a' stroke-opacity='.6' stroke-width='.8'%3E%3Cpath d='M53.4 95l-4-3-2-4M53.4 96.5l-5-1-3-3M53.4 98l-5 1-3 3M53.4 99.5l-4 3-2 4M56.8 95l4-3 2-4M56.8 96.5l5-1 3-3M56.8 98l5 1 3 3M56.8 99.5l4 3 2 4'/%3E%3C/g%3E%3Cg fill='%23c9b98a' fill-opacity='.7'%3E%3Ccircle cx='55.1' cy='93.6' r='2'/%3E%3Cellipse cx='55.1' cy='98.6' rx='3' ry='3.8'/%3E%3C/g%3E%3C/svg%3E") top left / 120px no-repeat;
}

@media (max-width: 640px) { .halloween .hero__hud { background-size: 84px; } }
/* Folded hero: a hint that the battlefield is haunted now */
.halloween .hero--folded .hero__fold::after { content: " · замечены призраки"; color: var(--accent); }
@media (max-width: 640px) { .halloween .hero--folded .hero__fold::after { content: "Замечены призраки"; display: block; margin-top: 4px; } }

/* Cards light up from inside, like a lantern */
.halloween .card:hover::after { box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .55), inset 0 0 48px rgba(255, 122, 26, .1); }