/* =====================================================================
   «Тонкая ночь 2026»: the site's Halloween look.
   Loaded only while the event lasts (bot/web/thin_night_site.py adds the
   theme-halloween class and this file). It only overrides the Silent Night
   tokens and adds a few pieces: removing the class is the usual site again.
   ===================================================================== */

html.theme-halloween.dark,
html.theme-halloween.light {
    --sn-ice: #ffa94d;
    --sn-ice-2: #f97316;
    --sn-ice-3: #c2410c;
    --sn-ice-soft: #ffd8a8;
    --sn-on-ice: #1c0a02;
    --sn-aurora: #b07cff;
    --sn-ice-a08: rgb(249 115 22 / 0.08);
    --sn-ice-a14: rgb(249 115 22 / 0.14);
    --sn-ice-a30: rgb(249 115 22 / 0.32);
    --sn-glow: 0 0 0 1px rgb(249 115 22 / 0.34), 0 18px 40px -18px rgb(249 115 22 / 0.6);
    --hn-pumpkin: #f97316;
    --hn-violet: #8b5cf6;
}
html.theme-halloween.dark {
    --sn-bg: #0b0816;
    --sn-bg-deep: #06040d;
    --sn-s1: #140f22;
    --sn-s2: #1c152d;
    --sn-s3: #261c3a;
    --sn-line: #2f2445;
    --sn-line-2: #463660;
    --sn-header-bg: rgb(11 8 22 / 0.84);
    --sn-muted: #b3a9c4;
    --sn-subtle: #7d7290;
}
html.theme-halloween.light {
    --sn-ice-3: #c2410c;
    --sn-on-ice: #fff7ed;
}

/* the sky: a violet night with an orange moon */
html.theme-halloween .sn-sky__glow {
    background: radial-gradient(closest-side, rgb(139 92 246 / 0.20), rgb(249 115 22 / 0.06) 55%, transparent);
}
html.theme-halloween .sn-sky__ribbon {
    background:
        radial-gradient(60% 50% at 30% 50%, rgb(139 92 246 / 0.14), transparent 70%),
        radial-gradient(45% 45% at 72% 40%, rgb(249 115 22 / 0.10), transparent 70%);
}
html.theme-halloween .sn-sky::after {
    content: "";
    position: absolute;
    top: 9vh;
    right: 8vw;
    width: clamp(70px, 9vw, 130px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 36%, #ffe2b8, #ffb15c 45%, #e8661c 80%);
    box-shadow: 0 0 60px 12px rgb(249 115 22 / 0.25), 0 0 160px 40px rgb(139 92 246 / 0.12);
    opacity: 0.55;
}
html.theme-halloween.light .sn-sky::after { opacity: 0.35; }
html.theme-halloween .brand-avatar-ring {
    box-shadow: 0 0 0 1px rgb(249 115 22 / 0.5), 0 0 18px -2px rgb(249 115 22 / 0.7) !important;
}

/* the strip above the header */
.hn-strip {
    position: relative;
    z-index: 51;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.45rem 1rem;
    font-size: 0.8rem;
    color: #ffe8cc;
    text-align: center;
    background: linear-gradient(90deg, #2a0f3d, #4a1d0c 50%, #2a0f3d);
    border-bottom: 1px solid rgb(249 115 22 / 0.35);
}
.hn-strip b { color: #ffb15c; font-weight: 700; }
.hn-strip__go { color: #ffb15c; font-weight: 600; white-space: nowrap; }
.hn-strip:hover .hn-strip__go { text-decoration: underline; }
@media (max-width: 640px) { .hn-strip__text { display: none; } }

/* bats (halloween.js puts a few in; none when the visitor asked for less motion) */
.hn-bats { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hn-bat {
    position: absolute;
    left: -60px;
    width: 34px;
    height: 16px;
    opacity: 0.55;
    animation: hn-fly var(--dur, 22s) linear var(--delay, 0s) infinite;
}
.hn-bat svg { width: 100%; height: 100%; fill: #1a1026; animation: hn-flap 0.35s ease-in-out infinite alternate; }
html.light .hn-bat svg { fill: #4c3a63; }
@keyframes hn-fly {
    0% { transform: translate(0, 0) scale(var(--s, 1)); }
    25% { transform: translate(28vw, -4vh) scale(var(--s, 1)); }
    50% { transform: translate(55vw, 3vh) scale(var(--s, 1)); }
    75% { transform: translate(82vw, -3vh) scale(var(--s, 1)); }
    100% { transform: translate(112vw, 2vh) scale(var(--s, 1)); }
}
@keyframes hn-flap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }
@media (prefers-reduced-motion: reduce) { .hn-bats { display: none; } }
.hn-toggle {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 60;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgb(249 115 22 / 0.4);
    background: rgb(20 15 34 / 0.85);
    display: grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
}
.hn-toggle img { width: 26px; height: 26px; }
html.hn-calm .hn-bats { display: none; }
html.hn-calm .hn-toggle { opacity: 0.6; }