/* Хэллоуин 2026 — декорации сайта и значок трофея.
   Разметку создаёт halloween2026.js, картинки лежат в /storage/cache/img/hw2026/.

   Слоёв два:
     .hw26-back  (z-index: -1) — фон праздника: паутина, гирлянда, луна.
                 Лежит ПОД интерфейсом сайта, поэтому ничего не перекрывает:
                 кнопки шапки всегда рисуются поверх.
     .hw26-layer (z-index: 90) — только то, что нужно ловить: тыква, паук,
                 ведьма, призрак. Каждый стоит в свободном месте макета. */

.hw26-back,
.hw26-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    /* --hw26-left — правый край сайдбара, --hw26-right — правая колонка. */
    --hw26-left: 0px;
    --hw26-right: 0px;
}

.hw26-back {
    z-index: -1;
}

.hw26-layer {
    z-index: 90;
}

.hw26-back img,
.hw26-layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

.hw26-click {
    pointer-events: auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Мягкая подсветка сверху, чтобы декор не висел в пустоте. */
.hw26-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: radial-gradient(60% 100% at 50% 0, rgba(255, 122, 26, .14), transparent 72%);
}

/* --- Паутина с гирляндой по углам --------------------------------------- */

.hw26-web {
    position: absolute;
    top: 0;
    width: 210px;
    height: 210px;
    opacity: .95;
    /* Паутина нарисована почти чёрной — на тёмном шаблоне её не видно,
       поэтому осветляем и слегка подсвечиваем оранжевым. */
    filter: brightness(2.2) saturate(1.1) drop-shadow(0 0 8px rgba(255, 122, 26, .3));
}

.hw26-web--l {
    left: var(--hw26-left, 0px);
    transition: left .25s;
}

.hw26-web--r {
    right: var(--hw26-right, 0px);
    transform: scaleX(-1);
    transition: right .25s;
}

/* --- Луна (только украшение, не ловится) -------------------------------- */

.hw26-moon {
    position: absolute;
    width: 44px;
    height: 44px;
    translate: 0 -50%;
    animation: hw26-moonglow 6s ease-in-out infinite;
}

/* --- Паук (ловится) ----------------------------------------------------- */

.hw26-spider {
    position: absolute;
    top: 0;
    right: calc(var(--hw26-right, 0px) + 14px);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: right .25s;
    animation: hw26-drop 9s ease-in-out infinite;
}

.hw26-spider__thread {
    width: 1px;
    height: 100px;
    background: linear-gradient(180deg, rgba(255, 236, 220, 0), rgba(255, 236, 220, .75));
}

.hw26-spider__body {
    width: 58px;
    height: 58px;
    margin-top: -2px;
    transform-origin: 50% 0;
    animation: hw26-sway 3.4s ease-in-out infinite;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6));
}

.hw26-spider.is-fled {
    animation: hw26-flee 6s ease-in-out forwards;
}

.hw26-spider.is-fled .hw26-spider__body {
    animation: hw26-panic .18s linear infinite;
}

/* --- Ведьма (ловится) --------------------------------------------------- */

.hw26-sky {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
}

.hw26-witch {
    position: absolute;
    top: 0;
    left: -170px;
    animation: hw26-fly 35s linear 5s infinite;
}

.hw26-witch__body {
    position: relative;
    width: 108px;
    height: 108px;
    animation: hw26-bob 1.6s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(255, 122, 26, .45));
}

.hw26-witch__body.is-spin {
    animation: hw26-loop .9s ease-in-out;
}

.hw26-witch__trail {
    position: absolute;
    top: 76px;
    left: 12px;
}

.hw26-star {
    position: absolute;
    border-radius: 50%;
    background: #ffd27a;
    box-shadow: 0 0 6px rgba(255, 210, 122, .9);
    animation: hw26-trail 1.1s linear infinite;
    opacity: 0;
}

.hw26-star--mint {
    background: #ff7a1a;
    box-shadow: 0 0 6px rgba(255, 122, 26, .9);
}

/* --- Призрак (ловится) -------------------------------------------------- */

.hw26-ghost {
    position: absolute;
    bottom: 0;
    right: calc(var(--hw26-right, 0px) + 230px);
    transform: translateY(115%);
    transition: right .25s;
    animation: hw26-peek 18s ease-in-out -12s infinite;
}

.hw26-ghost__body {
    width: 104px;
    height: 104px;
    animation: hw26-wobble 2.6s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(255, 230, 190, .35));
}

.hw26-ghost.is-scared {
    animation: hw26-flyaway 1.6s ease-in forwards;
}

.hw26-ghost__boo {
    position: absolute;
    bottom: 100%;
    left: 50%;
    translate: -50%;
    white-space: nowrap;
    font-size: 26px;
    font-weight: 800;
    color: #fff4e3;
    text-shadow: 0 0 12px rgba(255, 122, 26, .9), 0 2px 0 rgba(0, 0, 0, .6);
    animation: hw26-boo 1.6s ease-out forwards;
}

/* --- Тыква (ловится) ---------------------------------------------------- */

.hw26-pumpkin {
    position: absolute;
    width: 40px;
    height: 40px;
    translate: 0 -50%;
    transform-origin: 50% 100%;
    animation: hw26-pumpglow 3.2s ease-in-out infinite, hw26-pumpwobble 5s ease-in-out infinite;
}

.hw26-pumpkin.is-laugh {
    animation: hw26-pumpglow 3.2s ease-in-out infinite, hw26-laugh .9s ease-out;
}

/* --- Конфетти при клике ------------------------------------------------- */

.hw26-burst {
    position: absolute;
    width: 0;
    height: 0;
}

.hw26-burst__x {
    position: absolute;
    animation: hw26-burst-x .9s ease-out forwards;
}

.hw26-burst__y {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--hw26-c, #ff7a1a);
    animation: hw26-burst-y .9s cubic-bezier(.2, .7, .3, 1) forwards;
}

.hw26-burst__y.is-star {
    border-radius: 50%;
}

/* --- Плашка прогресса --------------------------------------------------- */

.hw26-hud {
    position: fixed;
    left: 50%;
    bottom: 26px;
    translate: -50%;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 92vw;
    padding: 12px 18px;
    border-radius: 14px;
    border: 1px solid rgba(255, 122, 26, .45);
    background: rgba(18, 12, 8, .95);
    color: #ffe9d4;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .55);
    pointer-events: none;
    z-index: 10060;
    animation: hw26-hud-in .3s ease-out;
}

.hw26-hud.is-earned {
    border-color: rgba(255, 122, 26, .95);
    box-shadow: 0 12px 40px rgba(255, 122, 26, .35), 0 12px 34px rgba(0, 0, 0, .55);
}

.hw26-hud__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: block;
    animation: hw26-laugh .9s ease-out;
}

.hw26-hud__dots {
    display: flex;
    gap: 5px;
    margin-left: 4px;
}

.hw26-hud__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 233, 212, .25);
}

.hw26-hud__dot.is-on {
    background: #ff7a1a;
    box-shadow: 0 0 8px rgba(255, 122, 26, .8);
}

/* --- Значок трофея на аватарке ------------------------------------------ */

.hw26-avahost {
    position: relative;
}

/* Значок живёт внутри чужих блоков (аватарка в профиле, в чате, в топе),
   поэтому гасим всё, что на img может навесить шаблон: фон, рамку, скругление,
   обрезку по cover. Размер и координаты ставит скрипт инлайном. */
.hw26-badge {
    position: absolute;
    display: block !important;
    pointer-events: none;
    z-index: 4;
    object-fit: contain !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    filter: drop-shadow(0 0 5px rgba(255, 122, 26, .9));
    animation: hw26-badge-in .35s ease-out;
}

/* --- Анимации ----------------------------------------------------------- */

@keyframes hw26-drop {

    0%,
    100% {
        transform: translateY(-16px);
    }

    45%,
    64% {
        transform: translateY(0);
    }
}

@keyframes hw26-sway {

    0%,
    100% {
        rotate: -5deg;
    }

    50% {
        rotate: 5deg;
    }
}

@keyframes hw26-flee {
    0% {
        transform: translateY(0);
    }

    16%,
    84% {
        transform: translateY(-130px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes hw26-panic {

    0%,
    100% {
        rotate: -9deg;
    }

    50% {
        rotate: 9deg;
    }
}

@keyframes hw26-fly {
    0% {
        transform: translate(0, 0) rotate(-3deg);
    }

    7% {
        transform: translate(55vw, 22px) rotate(3deg);
    }

    14%,
    100% {
        transform: translate(calc(100vw + 200px), -6px) rotate(-5deg);
    }
}

@keyframes hw26-bob {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -9px;
    }
}

@keyframes hw26-loop {
    0% {
        rotate: 0deg;
        scale: 1;
    }

    50% {
        rotate: 180deg;
        scale: 1.12;
    }

    100% {
        rotate: 360deg;
        scale: 1;
    }
}

@keyframes hw26-trail {
    0% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }

    15% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-80px, var(--hw26-dy, 0px)) scale(.3);
    }
}

@keyframes hw26-moonglow {

    0%,
    100% {
        filter: drop-shadow(0 0 10px rgba(255, 196, 92, .45));
        translate: 0 -50%;
    }

    50% {
        filter: drop-shadow(0 0 20px rgba(255, 196, 92, .85));
        translate: 0 calc(-50% - 4px);
    }
}

@keyframes hw26-peek {

    0%,
    66%,
    100% {
        transform: translateY(115%);
    }

    72% {
        transform: translateY(-4%);
    }

    86% {
        transform: translateY(0);
    }

    93% {
        transform: translateY(115%);
    }
}

@keyframes hw26-wobble {

    0%,
    100% {
        translate: 0 0;
        rotate: -5deg;
    }

    50% {
        translate: 0 -10px;
        rotate: 5deg;
    }
}

@keyframes hw26-flyaway {
    0% {
        opacity: 1;
        translate: 0 0;
        scale: 1;
    }

    100% {
        opacity: 0;
        translate: 40px -240px;
        scale: .6;
    }
}

@keyframes hw26-boo {
    0% {
        opacity: 0;
        scale: .4;
    }

    35% {
        opacity: 1;
        scale: 1.1;
    }

    100% {
        opacity: 0;
        scale: 1.3;
        translate: -50% -30px;
    }
}

@keyframes hw26-pumpglow {

    0%,
    100% {
        filter: drop-shadow(0 0 7px rgba(255, 122, 26, .5));
    }

    50% {
        filter: drop-shadow(0 0 15px rgba(255, 122, 26, .95));
    }
}

@keyframes hw26-pumpwobble {

    0%,
    88%,
    100% {
        rotate: 0deg;
    }

    92% {
        rotate: -9deg;
    }

    96% {
        rotate: 9deg;
    }
}

@keyframes hw26-laugh {
    0% {
        scale: 1;
        rotate: 0deg;
    }

    30% {
        scale: 1.3;
        rotate: -12deg;
    }

    60% {
        scale: 1.15;
        rotate: 10deg;
    }

    100% {
        scale: 1;
        rotate: 0deg;
    }
}

@keyframes hw26-burst-x {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(var(--hw26-vx, 0px));
    }
}

@keyframes hw26-burst-y {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    45% {
        opacity: 1;
        transform: translateY(calc(var(--hw26-up, 50px) * -1)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(46px) scale(.4);
    }
}

@keyframes hw26-hud-in {
    0% {
        opacity: 0;
        translate: -50% 14px;
    }

    100% {
        opacity: 1;
        translate: -50% 0;
    }
}

@keyframes hw26-badge-in {
    0% {
        opacity: 0;
        scale: .4;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}

/* --- Адаптив ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .hw26-web {
        width: 150px;
        height: 150px;
    }

    .hw26-spider__thread {
        height: 74px;
    }

    .hw26-spider__body {
        width: 48px;
        height: 48px;
    }

    .hw26-witch__body {
        width: 86px;
        height: 86px;
    }

    .hw26-witch__trail {
        top: 60px;
        left: 10px;
    }

    .hw26-ghost {
        right: calc(var(--hw26-right, 0px) + 120px);
    }

    .hw26-ghost__body {
        width: 84px;
        height: 84px;
    }
}

/* На узких экранах декора нет: в тесной вёрстке он лез бы на интерфейс.
   Значки трофея при этом показываются везде, в том числе на телефоне. */
@media (max-width: 768px) {

    .hw26-back,
    .hw26-layer,
    .hw26-hud {
        display: none !important;
    }
}

/* Если система просит не анимировать — ничего не прячем, иначе трофей стал бы
   недостижимым. Просто ставим всех по местам без движения. */
@media (prefers-reduced-motion: reduce) {

    .hw26-spider,
    .hw26-spider__body,
    .hw26-witch,
    .hw26-witch__body,
    .hw26-moon,
    .hw26-pumpkin,
    .hw26-ghost,
    .hw26-ghost__body,
    .hw26-star,
    .hw26-burst__x,
    .hw26-burst__y {
        animation: none !important;
    }

    .hw26-witch {
        left: auto;
        right: calc(var(--hw26-right, 0px) + 260px);
        top: 2px;
    }

    .hw26-ghost {
        transform: translateY(0);
    }

    .hw26-star {
        display: none;
    }
}