/* Seasonal look «Хелловін» (19.10 — 9.11, core/constants.py SEASONAL_*). Loaded last, only while
   the event is on (or in a superuser preview). Everything hangs off html[data-event="halloween"], so
   removing the attribute (the preview switch) returns the normal look instantly.
   How much of it, where (Fiobs 2026-10-10, second round — «атмосфера повинна відчуватися фоново»):
   - the app: the chrome (sidebar, phone top bar, bottom nav), the accent buttons, a few props in the page header and the ground in empty
     cells of the service pages — data pages stay as they are; the look lies over the user's theme (dark — a night, light — a light one)
     and goes off with the menu item «Вимкнути прикраси» (navbar.html, Fiobs 2026-10-18);
   - sign in / sign up: the whole night scene — no work data there, the décor is welcome;
   - the landing: orange accents, a moon over the hero, pumpkins at the mockups, the «Свята» block.
   Decorations: static/js/event-halloween.js; drawings: templates/partials/events/halloween/*.svg.
   Plan: docs/superpowers/plans/2026-10-10-seasonal-events.md */

/* Illustration colours: the night ones, and lighter ground and thread in the light theme (Fiobs 2026-10-18: «додати святкову
   світлу» — the holiday follows the user's theme instead of switching light users to the night) */
html[data-event="halloween"] {
    --hw-bat: #1C110B;
    --hw-hill-back: #1D110B;
    --hw-hill: #120A07;
    --hw-tree: #0C0705;
    --hw-thread: rgba(255, 214, 180, 0.28);
}
html[data-event="halloween"][data-theme="light"] {
    --hw-bat: #2A1A12;
    --hw-hill-back: #EEDFCF;
    --hw-hill: #E3CDB6;
    --hw-tree: #5E4636;
    --hw-thread: rgba(94, 60, 36, 0.4);
}

/* ── App chrome: a night-orange sidebar and top bar (in the light theme — warm cream with burnt-orange accents) ───────────
   Tokens are overridden on the chrome elements themselves, so the active item, the logo's «tun»
   and «Активувати модуль» turn orange, while the page next to them keeps its usual palette. */
html[data-event="halloween"]:not([data-theme="light"]) :is(.hub-sidebar, .hub-topbar) {
    --surface:        #1B110C;
    --surface-hover:  rgba(255, 190, 140, 0.05);
    --border:         rgba(255, 170, 110, 0.12);
    --text-primary:   #F3E9E1;
    --text-muted:     #AA9B8E;
    --accent:         #FB923C;
    --accent-hover:   #FDBA74;
    --accent-dim:     rgba(251, 146, 60, 0.13);
    --text-on-accent: #170C05;
    --focus-ring:     rgba(251, 146, 60, 0.40);
}
html[data-event="halloween"]:not([data-theme="light"]) .hub-sidebar {
    background:
        radial-gradient(130% 34% at 50% 100%, rgba(251, 146, 60, 0.13), transparent 72%),
        linear-gradient(180deg, #1F130D 0%, #170E0A 100%);
}
html[data-event="halloween"][data-theme="light"] :is(.hub-sidebar, .hub-topbar) {
    --surface:        #FFF5EC;
    --surface-hover:  rgba(194, 65, 12, 0.06);
    --border:         rgba(194, 65, 12, 0.14);
    --text-muted:     #8A6F5C;
    --accent:         #C2410C;
    --accent-hover:   #9A3412;
    --accent-dim:     rgba(234, 88, 12, 0.11);
    --text-on-accent: #FFFFFF;
    --focus-ring:     rgba(194, 65, 12, 0.30);
}
html[data-event="halloween"][data-theme="light"] .hub-sidebar {
    background:
        radial-gradient(130% 34% at 50% 100%, rgba(251, 146, 60, 0.18), transparent 72%),
        linear-gradient(180deg, #FFF7F0 0%, #FFEEDF 100%);
}

/* ── Phone: the bottom panel like the PC side menu — a night-orange surface with pumpkin accents (Fiobs 2026-10-18: «на пк layout
   виглядає просто неймовірно… а на телефоні деякі частини інтерфейсу стали дійсно не виразні»; the all-orange panel of the day
   before washed out the module icons in the drawers). Everything that is one surface with it — the row of page buttons above
   (.hub-ext) and the drawers that slide out of it — the same; the ball, «+» and the active label are pumpkin. A tone lighter than
   the side menu, as the normal panel is lighter than the cards — the bump over the ball stays visible. ── */
html[data-event="halloween"]:not([data-theme="light"]) :is(.hub-bottom-nav, .hub-ext, .hub-drawer) {
    --surface:         #22160F;
    --surface-raised:  #2B1C13;
    --surface-hover:   rgba(255, 190, 140, 0.06);
    --surface-hover-strong: rgba(255, 190, 140, 0.10);
    --border:          rgba(255, 170, 110, 0.12);
    --border-strong:   rgba(255, 170, 110, 0.20);
    --text-primary:    #F3E9E1;
    --text-secondary:  #CDBFB3;
    --text-muted:      #AA9B8E;
    --accent:          #FB923C;
    --accent-hover:    #FDBA74;
    --accent-dim:      rgba(251, 146, 60, 0.16);
    --text-on-accent:  #170C05;
    --focus-ring:      rgba(251, 146, 60, 0.40);
}
html[data-event="halloween"][data-theme="light"] :is(.hub-bottom-nav, .hub-ext, .hub-drawer) {
    --surface:         #FFF3E8;
    --surface-raised:  #FFF9F4;
    --surface-hover:   rgba(194, 65, 12, 0.06);
    --surface-hover-strong: rgba(194, 65, 12, 0.10);
    --border:          rgba(194, 65, 12, 0.14);
    --border-strong:   rgba(194, 65, 12, 0.24);
    --text-muted:      #8A6F5C;
    --accent:          #C2410C;
    --accent-hover:    #9A3412;
    --accent-dim:      rgba(234, 88, 12, 0.12);
    --text-on-accent:  #FFFFFF;
    --focus-ring:      rgba(194, 65, 12, 0.30);
}
/* the warm glow at the bottom, as at the foot of the side menu — on the panel itself, so the bump over the ball stays one tone */
html[data-event="halloween"] .hub-bottom-nav { background: radial-gradient(120% 70% at 50% 100%, rgba(251, 146, 60, 0.14), transparent 72%), var(--surface); }

/* ── The dashboard's icon is a line pumpkin in the style of the other icons (navbar.html, Fiobs 2026-10-17: «окрема тиква, яка
   була б у стилі інших іконок») — on while the festive look is on; the bats have their own pumpkin next to the logo ── */
.hw-dash-ic { display: none; }
html[data-event="halloween"] [data-hw-dash] > .hw-dash-ic { display: block; }
html[data-event="halloween"] [data-hw-dash] > .hw-house { display: none; }

/* ── Accent buttons: pumpkin instead of teal — the rest of the page keeps teal ── */
html[data-event="halloween"] :is(.btn-primary, .add-submit-btn, .edit-submit-btn, .mod-toggle-btn.enable,
    .modal-confirm.is-accent, .dash-push-ask-btn, .cm-next) {
    --accent:         #FB923C;
    --accent-hover:   #FDBA74;
    --accent-glow:    rgba(251, 146, 60, 0.26);
    --text-on-accent: #170C05;
}
html[data-event="halloween"][data-theme="light"] :is(.btn-primary, .add-submit-btn, .edit-submit-btn, .mod-toggle-btn.enable,
    .modal-confirm.is-accent, .dash-push-ask-btn, .cm-next) {
    --accent:         #C2410C;
    --accent-hover:   #9A3412;
    --accent-glow:    rgba(194, 65, 12, 0.18);
    --text-on-accent: #FFFFFF;
}

/* ── Pumpkin next to the logo (side menu, phone top bar, landing): the button that lets the bats out ── */
.hw-pumpkin { display: none; }
html[data-event="halloween"] .hw-pumpkin {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0; flex-shrink: 0;
    margin: 0 auto 0 -18px;
    background: none; border: none; border-radius: var(--radius-sm);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* The glow — a still gradient behind the drawing, not a CSS filter on it: a drop-shadow on an SVG that is being transformed made
   iPhone draw a square around the pumpkin (Fiobs 2026-10-19, the client portal) */
html[data-event="halloween"] .hw-pumpkin::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(251, 146, 60, 0.32), transparent);
}
html[data-event="halloween"] .hw-pumpkin svg { position: relative; width: 24px; height: 24px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
/* Hover — only for a mouse: on a phone a tap left the pumpkin «hovered», stopped half-turned (Fiobs: «анімація не програється до
   кінця, а завмирає») */
@media (hover: hover) { html[data-event="halloween"] .hw-pumpkin:hover svg { transform: rotate(-12deg) scale(1.12); } }
html[data-event="halloween"] .hw-pumpkin:active svg { transform: scale(0.92); }
html[data-event="halloween"] .hub-topbar .hub-topbar-brand { margin-right: 0; }
html[data-event="halloween"] .hub-topbar .hw-pumpkin { margin: 0 auto 0 4px; }
/* ПК: лише в розгорнутому меню — за «Vistun» (Fiobs 2026-10-20: «ховай гарбуз коло лого, на пк версії, коли layout згорнутий. Показуй
   тільки коли розгорнутий»); у складеній смужці його немає й натиснути його не можна. Телефон — завжди (верхня панель, нижче) */
html[data-event="halloween"] body.nav-side .hub-sidebar-head .hw-pumpkin {
    position: absolute; z-index: 2; top: 8px; left: 33px; margin: 0;
    opacity: 0; pointer-events: none; transform: translateX(36px) scale(0.6); transform-origin: 0 50%;
    transition: opacity 0.2s ease, transform 0.26s var(--nav-ease, ease);
}
html[data-event="halloween"] body.nav-side .hub-sidebar:is(:hover, :focus-within, .is-open) .hub-sidebar-head .hw-pumpkin { opacity: 1; pointer-events: auto; transform: translateX(50px); }

/* Ambient motion — only for decorations on screen: static/js/event-halloween.js marks them .hw-live with an
   IntersectionObserver, so off-screen props cost nothing per frame. No CSS filters on anything that moves:
   a drop-shadow re-rasterises the drawing every frame (Fiobs 2026-10-10: «Болі» and «Аналітика» lost frames). */
.hw-flame { transform-box: fill-box; transform-origin: 50% 100%; }
html[data-event="halloween"] .hw-live .hw-flame { animation: hw-flicker 2.6s ease-in-out infinite; }
html[data-event="halloween"] .hw-live .hw-glow { animation: hw-glow 2.6s ease-in-out infinite; }
html[data-event="halloween"] .hw-live g:nth-child(odd) > .hw-obj--candle .hw-flame,
html[data-event="halloween"] .hw-live g:nth-child(odd) > .hw-obj--candle .hw-glow { animation-delay: -1.1s; }
@keyframes hw-flicker {
    0%, 100% { transform: scale(1, 1) rotate(0deg); }
    22%      { transform: scale(0.94, 1.06) rotate(-2deg); }
    48%      { transform: scale(1.03, 0.95) rotate(1.5deg); }
    71%      { transform: scale(0.97, 1.04) rotate(-1deg); }
}
@keyframes hw-glow {
    0%, 100% { opacity: 0.85; }
    40%      { opacity: 1; }
    70%      { opacity: 0.75; }
}
.lp-deco.hw-live, .lp-ev-art.hw-live, .lp-hw-sky.hw-live, .ae-scene.hw-live { will-change: transform; }

/* ── Bats: a flock that crosses the screen in under two seconds (once an hour, or from the pumpkin) ── */
.hw-bats {
    position: fixed; inset: 0; z-index: 150;
    pointer-events: none; overflow: hidden;
}
html:not([data-event="halloween"]) .hw-bats { display: none; }
.hw-bat {
    position: absolute; left: 0; top: 0;
    color: var(--hw-bat);
    /* Backlit by the moon: a dark body with a warm rim, so the bats read on a dark background */
    filter: drop-shadow(0 0 1.5px rgba(255, 170, 90, 0.9)) drop-shadow(0 0 8px rgba(251, 146, 60, 0.35));
    will-change: transform;
}
.hw-bat svg { display: block; width: 100%; height: auto; overflow: visible; }
.hw-wings { transform-box: fill-box; transform-origin: 50% 40%; }
.hw-bat .hw-wings { animation: hw-flap 0.22s ease-in-out infinite alternate; }
html[data-event="halloween"] .hw-live .hw-wings { animation: hw-flap 0.3s ease-in-out infinite alternate; }
@keyframes hw-flap { to { transform: scaleY(0.35); } }

@media (prefers-reduced-motion: reduce) {
    html[data-event="halloween"] .hw-live .hw-flame,
    html[data-event="halloween"] .hw-live .hw-glow,
    html[data-event="halloween"] .hw-live .hw-wings,
    html[data-event="halloween"] .hw-live .hw-sway,
    html[data-event="halloween"] .hw-live .lp-ev-bulbs circle,
    html[data-event="halloween"] .hw-live .hw-bulb-glow,
    .hw-bat .hw-wings { animation: none; }
    html[data-event="halloween"] .hw-pumpkin { transition: none; }
}

/* ── Sign in / sign up (templates/auth/entry.html): the whole page dressed for the night ── */
html[data-event="halloween"] .ae {
    --bg:             #0F0C0B;
    --surface:        #181311;
    --surface-raised: #221A16;
    --text-primary:   #EFE7E0;
    --text-secondary: #BFB3A8;
    --text-muted:     #968A80;
    --text-on-accent: #170C05;
    --accent:         #FB923C;
    --accent-hover:   #FDBA74;
    --border:         rgba(255, 214, 180, 0.075);
    --border-strong:  rgba(255, 214, 180, 0.15);
    --border-focus:   #FB923C;
    --focus-ring:     rgba(251, 146, 60, 0.40);
    --accent-dim:     rgba(251, 146, 60, 0.11);
    --accent-glow:    rgba(251, 146, 60, 0.24);
    --border-accent:  rgba(251, 146, 60, 0.35);
    --input-bg:       rgba(255, 214, 180, 0.04);
    --surface-hover-strong: rgba(255, 214, 180, 0.08);
}
html[data-event="halloween"] .ae-sky {
    background:
        radial-gradient(70% 45% at 78% 24%, rgba(255, 170, 80, 0.16), transparent 70%),
        linear-gradient(180deg, #120B09 0%, #1B0F0A 55%, #2B160B 100%);
}
html[data-event="halloween"] .ae-nums { display: none; }
html[data-event="halloween"] .ae-scene {
    display: block;
    position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
    width: 100%; height: 62%;
    overflow: visible; /* the moon glow spills above the scene's box */
    pointer-events: none; /* only the props (.hw-obj) take the pointer */
}
/* The halves lie over the scene: in the night they let the pointer through to it, their own content stays clickable */
html[data-event="halloween"] .ae-half { pointer-events: none; }
html[data-event="halloween"] .ae-half--top > * { pointer-events: auto; }
.hw-tree { stroke: var(--hw-tree, #0C0705); }
.ae-hill-back { fill: var(--hw-hill-back, #1D110B); }
.ae-hill { fill: var(--hw-hill, #120A07); }
.hw-still-bat { color: #0A0605; }
/* the bat on the branch hangs against the dark tree — a warm rim, as on the landing */
.ae-scene .hw-obj--hang .hw-still-bat path { stroke: rgba(255, 170, 90, 0.55); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.hw-bob { transform-box: view-box; }
html[data-event="halloween"] .hw-live .hw-bob { animation: hw-bob 4.2s ease-in-out infinite; }
html[data-event="halloween"] .hw-live .hw-bob--late { animation-delay: -1.6s; }
html[data-event="halloween"] .hw-live .hw-bob--slow { animation-duration: 5.6s; animation-delay: -3s; }
@keyframes hw-bob { 50% { transform: translateY(-7px); } }
html[data-event="halloween"] .ae-ghost:hover { border-color: var(--accent); }

/* Phone: the same night as a strip above the switch */
@media (max-width: 860px) {
    html[data-event="halloween"] .ae-strip { display: block; position: absolute; inset: 0 0 auto 0; width: 100%; height: 112px; z-index: -1; }
    html[data-event="halloween"] .ae-mhead { isolation: isolate; }
    html[data-event="halloween"] .ae-seg { margin-top: 58px; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-event="halloween"] .hw-live .hw-bob { animation: none; }
}

/* ── Landing (templates/landing.html, body.landing) ─────────────────────── */
html[data-event="halloween"] body.landing {
    --brand-teal:   #FB923C;   /* glitch copies, outlined buttons, small accents of the landing */
    --accent:       #FB923C;
    --accent-hover: #FDBA74;
    --accent-dim:   rgba(251, 146, 60, 0.11);
    --text-on-accent: #170C05;
}
html[data-event="halloween"] body.landing .hero-word {
    background: linear-gradient(92deg, #FB923C 0%, #FFCF8A 45%, var(--brand-violet) 100%);
    -webkit-background-clip: text; background-clip: text;
}
html[data-event="halloween"] body.landing .nav-brand .hw-pumpkin { margin: 0 0 0 4px; }
.lp-hw { display: none; }
html[data-event="halloween"] .lp-hw { display: block; }
/* Moon and bats behind the hero word */
html[data-event="halloween"] .hero { position: relative; }
/* the moon may reach past the screen edge on narrow screens — never a sideways scroll */
html[data-event="halloween"] section[data-track="hero"] { overflow-x: clip; }
html[data-event="halloween"] .hero > :not(.lp-hw) { position: relative; z-index: 1; }
.lp-hw-sky {
    position: absolute; z-index: 0; pointer-events: none;
    top: -40px; right: max(-60px, calc(50% - 640px)); width: 420px; height: 320px;
}
/* Pumpkins and candles in front of the mockups */
html[data-event="halloween"] .hero-duo { position: relative; }
.lp-deco.lp-deco--front { z-index: 3; }
.lp-deco--hero-pumpkins { left: -4%; bottom: -3%; width: clamp(120px, 15vw, 196px); }
.lp-deco--hero-candles { left: 50%; bottom: -2%; width: clamp(64px, 7.4vw, 104px); }
@media (max-width: 900px) { .lp-deco--hero-candles { display: none; } }
/* phone: the moon goes up into the corner — behind the subtitle it ate the contrast */
@media (max-width: 600px) { .lp-hw-sky { top: -14px; right: -84px; width: 220px; height: 168px; } }

/* Landing decorations (partials/events/halloween/_landing_prop.html) — behind the content of their
   section (sections are stacking contexts), in the side margins, so they accompany every block
   without covering it (Fiobs 2026-10-10: «прикраси повинні супроводжувати різні блоки увесь час») */
.lp-deco { position: absolute; z-index: -1; pointer-events: none; overflow: visible; height: auto; }
/* The props sit behind the content: let clicks pass through the empty parts of a section's wrapper to them
   (the wrapper spans the whole width; its own children stay clickable as before) */
html[data-event="halloween"] body.landing .section-wrap { pointer-events: none; }
html[data-event="halloween"] body.landing .section-wrap > * { pointer-events: auto; }
.lp-deco .hw-still-bat { color: #0B0807; }
/* a warm rim, as if lit by the moon — a stroke, not a CSS filter (filters re-rasterize every frame) */
.lp-deco .hw-still-bat path, .lp-ev-art .hw-still-bat path { stroke: rgba(255, 170, 90, 0.55); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.lp-deco--hang { width: 44px; top: -1px; }
.hw-thread { stroke: var(--hw-thread, rgba(255, 214, 180, 0.28)); }
/* light theme: cream wax on light sand and white pages got lost — a thin warm outline */
html[data-event="halloween"][data-theme="light"] .hw-obj--candle [fill="url(#hw-wax-g)"] { stroke: rgba(120, 84, 44, 0.45); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.lp-deco--flight { width: 200px; }
.lp-deco--pumpkins { width: 176px; }
.lp-deco--pumpkins-b { width: 150px; }
.lp-deco--candles { width: 104px; }
.lp-deco--candles-b { width: 80px; }
.lp-deco--moon { width: 260px; }
.hw-sway { transform-box: view-box; transform-origin: 30px 0; }
.lp-ev-art .hw-sway { transform-origin: 166px 56px; }
html[data-event="halloween"] .hw-live .hw-sway { animation: hw-sway 4s ease-in-out infinite; }
@keyframes hw-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

.lp-deco--who-hang { left: 8%; }
.lp-deco--who-flight { right: 7%; top: 30px; }
.lp-deco--pains-candles { right: 9%; bottom: 0; }
.lp-deco--pains-pumpkins { left: 4%; bottom: 0; }
.lp-deco--how-flight { left: 6%; top: 40px; }
.lp-deco--how-hang { right: 10%; }
.lp-deco--modules-hang { left: 5%; }
.lp-deco--modules-pumpkins { right: 3%; bottom: 0; }
.lp-deco--analytics-moon { right: 6%; top: 60px; }
.lp-deco--analytics-flight { left: 7%; top: 140px; }
.lp-deco--themes-candles { left: 6%; bottom: 0; }
.lp-deco--themes-pumpkins { right: 5%; bottom: 0; }
.lp-deco--about-hang { right: 14%; }
.lp-deco--about-candles { left: 14%; bottom: 0; }
.lp-deco--pricing-hang { left: 9%; }
.lp-deco--pricing-pumpkins { right: 6%; bottom: 0; }
.lp-deco--faq-flight { left: 6%; top: 50px; }
.lp-deco--cta-moon { right: 8%; top: 10px; width: 220px; }

/* ── Page header (partials/events/halloween/_page_deco.html, in page_head.html — every app page with the shared header): a few pumpkins
   and candles next to the title, a bat on a thread in the empty middle (Fiobs 2026-10-18: «такий собі мінімум, він не заважає… на будь
   якій сторінці»). The holder takes only the free space between the title and the buttons (flex 1 from 0, a size container), so the
   title never shrinks for the décor; where the space is short the props hide (container queries). Not on the phone — no header there ── */
.hw-page-deco { display: none; }
html[data-event="halloween"] .hw-page-deco {
    display: block; position: relative; flex: 1 1 0; min-width: 0; align-self: stretch;
    container-type: inline-size; -webkit-user-select: none; user-select: none;
}
.hw-page-deco .lp-deco { z-index: auto; }
.hw-page-deco .hw-page-props { left: 6px; bottom: 5px; width: 82px; }
.hw-page-deco .hw-page-hang { left: 64%; top: -18px; width: 32px; }
@container (max-width: 120px) { .hw-page-deco .hw-page-props { display: none; } }
@container (max-width: 300px) { .hw-page-deco .hw-page-hang { display: none; } }
@media (max-width: 768px) { html[data-event="halloween"] .hw-page-deco { display: none; } }

/* ── Ground (prop "ground", _landing_prop.html): the end of the landing (footer), the Tariffs page and empty cells of the service pages
   (Fiobs 2026-10-18: «на сторінці тарифів додати землю як у кінці лендінгу… поміж віджетів ще якісь прикраси»). A strip of hills
   across the whole width — the hills stretch, nothing is cropped at the sides (the old single picture lost its props at the edges of
   wide screens and on the phone) — and separate groups of props in their own proportions, placed per spot. --soil — how deep the
   soil is under the line the props stand on. Groups: g1, g5 — pumpkins; g2, g6 — candles; g3, g7 — small pumpkins; g4 — two candles. ── */
.hw-ground { display: none; }
html[data-event="halloween"] .hw-ground { display: block; position: relative; pointer-events: none; --soil: 22px; }
.hw-ground-hill { position: absolute; left: 0; width: 100%; height: 64px; bottom: calc(var(--soil) - 20px); }
.hw-ground-base { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--soil) - 19px); background: var(--hw-hill); }
.hw-ground > .lp-deco.hw-ground-item { display: none; z-index: auto; bottom: calc(var(--soil) - 3px); }
.hw-ground-tree { position: absolute; display: none; bottom: calc(var(--soil) - 8px); height: 140px; aspect-ratio: 124 / 226; }
.hw-ground-tree > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the bat hangs from the end of the long branch */
.hw-ground-tree > .lp-deco--hang { display: block; z-index: auto; top: 22%; left: calc(87% - 12px); width: 24px; }

/* The landing's footer — the ground closes the page (Fiobs: under the CTA it looked cut off). PC: the text stands on the ground
   between the groups; the groups keep to the edges and spread over wide screens */
html[data-event="halloween"] footer.landing-footer { isolation: isolate; padding-top: 170px; border-top-color: transparent; }
html[data-event="halloween"] .hw-ground--footer { position: absolute; inset: 0; z-index: -1; --soil: 84px; }
.hw-ground--footer > :is(.hw-g1, .hw-g2, .hw-g3, .hw-g4, .hw-g5).lp-deco, .hw-ground--footer > .hw-ground-tree { display: block; }
.hw-ground--footer > .hw-g1 { left: 2%; width: 176px; }
.hw-ground--footer > .hw-g2 { left: calc(2% + 196px); width: 104px; }
.hw-ground--footer > .hw-g3 { left: calc(2% + 318px); width: 140px; }
.hw-ground--footer > .hw-g4 { right: calc(2% + 334px); width: 80px; }
.hw-ground--footer > .hw-g5 { right: calc(2% + 128px); width: 176px; }
.hw-ground--footer > .hw-ground-tree { right: 2%; height: 170px; }
@media (min-width: 1700px) {
    .hw-ground--footer > :is(.hw-g6, .hw-g7).lp-deco { display: block; }
    .hw-ground--footer > .hw-g6 { left: calc(2% + 500px); width: 104px; }
    .hw-ground--footer > .hw-g7 { right: calc(2% + 454px); width: 140px; }
}
@media (min-width: 901px) and (max-width: 1280px) { .hw-ground--footer > :is(.hw-g3, .hw-g4).lp-deco { display: none; } }
/* Phone: the line of props above the text, the text on the soil under it — nothing lies on the links */
@media (max-width: 768px) {
    /* the moon over the word, not behind the subtitle; the pumpkins by the monitor, not over the phone */
    html[data-event="halloween"] .lp-hw-sky { top: -44px; right: -74px; width: 180px; height: 137px; }
    html[data-event="halloween"] .lp-deco--hero-pumpkins { left: auto; right: -2%; bottom: -4%; width: 118px; }
    /* Props of the phone sections — on the floor of each block (its bottom padding) and hanging from its top, small; candles too */
    html[data-event="halloween"] body.landing > section > :is(.lp-deco--pumpkins, .lp-deco--candles) { display: block; bottom: 4px; }
    html[data-event="halloween"] body.landing > section > .lp-deco--pumpkins { width: 92px; }
    html[data-event="halloween"] body.landing > section > .lp-deco--pumpkins-b { width: 84px; }
    html[data-event="halloween"] body.landing > section > .lp-deco--candles { width: 52px; }
    html[data-event="halloween"] body.landing > section > .lp-deco--candles-b { width: 46px; }
    html[data-event="halloween"] body.landing > section > .lp-deco--hang { display: block; width: 28px; }
}
@media (max-width: 900px) {
    html[data-event="halloween"] footer.landing-footer { padding-top: 120px; }
    html[data-event="halloween"] .hw-ground--footer { --soil: calc(100% - 104px); }
    .hw-ground--footer > :is(.hw-g2, .hw-g5).lp-deco, .hw-ground--footer > .hw-ground-tree { display: none; }
    .hw-ground--footer > .hw-g1 { left: 3%; width: 112px; }
    .hw-ground--footer > .hw-g4 { left: calc(50% - 28px); right: auto; width: 56px; }
    .hw-ground--footer > .hw-g3 { left: auto; right: 3%; width: 96px; }
}
@media (min-width: 560px) and (max-width: 900px) {
    .hw-ground--footer > :is(.hw-g2, .hw-g5).lp-deco { display: block; }
    .hw-ground--footer > .hw-g2 { left: calc(3% + 132px); width: 62px; }
    .hw-ground--footer > .hw-g5 { right: calc(3% + 112px); width: 112px; }
}

/* The app: a strip 112 px high, sized props; how many groups — by the strip's own width (container queries) */
html[data-event="halloween"] .hw-ground--app { height: 112px; flex-shrink: 0; container-type: inline-size; }
.hw-ground--app > :is(.hw-g1, .hw-g5) { width: 124px; }
.hw-ground--app > :is(.hw-g2, .hw-g6) { width: 66px; }
.hw-ground--app > :is(.hw-g3, .hw-g7) { width: 106px; }
.hw-ground--app > .hw-g4 { width: 56px; }
.hw-ground--app > .hw-ground-tree { height: 108px; }
/* the strip fades out at its ends — a mound in the empty place, not a plinth (only the still hills: a mask over moving props would
   re-composite every frame) */
.hw-ground--app > :is(.hw-ground-hill, .hw-ground-base) {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* «Тарифи»: under the plans, across the pane */
html[data-event="halloween"] .hw-ground--plans { height: 84px; }
html[data-event="halloween"] .bp-wrap:has(+ .hw-ground--plans) { padding-bottom: 4px; }   /* the ground below is the end of the page now */
.hw-ground--plans > :is(.hw-g1, .hw-g4).lp-deco, .hw-ground--plans > .hw-ground-tree { display: block; }
.hw-ground--plans > .hw-g1 { left: 3%; }
.hw-ground--plans > .hw-g4 { left: calc(3% + 138px); }
.hw-ground--plans > .hw-ground-tree { right: 3%; }
@container (min-width: 560px) {
    .hw-ground--plans > .hw-g5.lp-deco { display: block; }
    .hw-ground--plans > .hw-g5 { right: calc(3% + 72px); }
}
@container (min-width: 760px) {
    .hw-ground--plans > :is(.hw-g2, .hw-g3).lp-deco { display: block; }
    .hw-ground--plans > .hw-g3 { left: 30%; }
    .hw-ground--plans > .hw-g2 { right: 31%; }
}
@container (min-width: 1100px) {
    .hw-ground--plans > .hw-g6.lp-deco { display: block; }
    .hw-ground--plans > .hw-g6 { left: calc(50% - 33px); }
}
/* Empty cells of the frame pages — under the blocks that end early («Бізнес», «Підписка», «Відгук»). The strip comes first in the
   grid, so a block that reaches into the cell lies over it; only the big layout — on a narrow or low screen the blocks go one
   under another and the cells are gone */
.hw-ground--cell > :is(.hw-g3, .hw-g4).lp-deco, .hw-ground--cell > .hw-ground-tree { display: block; }
.hw-ground--cell > .hw-g3 { left: 7%; }
.hw-ground--cell > .hw-g4 { left: calc(7% + 118px); }
.hw-ground--cell > .hw-ground-tree { right: 7%; }
@container (min-width: 600px) {
    .hw-ground--cell > .hw-g2.lp-deco { display: block; }
    .hw-ground--cell > .hw-g2 { right: calc(7% + 86px); }
}
@container (min-width: 900px) {
    .hw-ground--cell > .hw-g1.lp-deco { display: block; }
    .hw-ground--cell > .hw-g1 { left: 42%; }
}
@container (min-width: 1200px) {
    .hw-ground--cell > :is(.hw-g6, .hw-g7).lp-deco { display: block; }
    .hw-ground--cell > .hw-g6 { left: 28%; }
    .hw-ground--cell > .hw-g7 { right: 26%; }
}
html[data-event="halloween"] .hw-ground--sb { grid-column: 1; grid-row: 3; align-self: end; }
html[data-event="halloween"] .hw-ground--fb { grid-column: 2; grid-row: 2; align-self: end; }
html[data-event="halloween"] .hw-ground--main { grid-column: 3; grid-row: 2; align-self: end; }
html[data-event="halloween"] .hw-ground--dev { grid-column: 2 / 4; grid-row: 1; align-self: end; }
html[data-event="halloween"] .bs-notif.is-on { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
html[data-event="halloween"] .hw-ground--notif { grid-column: 1 / -1; grid-row: 3; align-self: end; }
@media (max-width: 1023px), (max-height: 599px) { html[data-event="halloween"] .hw-ground--cell { display: none; } }

/* ── Edges: props standing on the top edge of a block («Що нового» — on «Версії», right of its name) ── */
.hw-edge { display: none; }
@media (min-width: 1024px) and (min-height: 600px) {
    html[data-event="halloween"] .hw-edge { display: block; z-index: 3; }
    .hw-edge--versions { top: 0; right: 14px; width: 58px; transform: translateY(-100%); }
}

/* ── The client's page of a project (templates/projects/public.html) — while the event is on and the business keeps «Хелловін для
   клієнта» on (Проєкти → Налаштування, on by default; web/views.project_public_page): the business's clients see the holiday too (Fiobs
   2026-10-19: «аби люди… давали можливість побачити своїм клієнтам свято»). Only decorations — the page keeps Vistun's own colours, no
   pumpkin accent (Fiobs the same day: «святковість повинна бути на фоні… усе повинно залишатися у звичайному стилі вістуна, тільки
   додати декорації»). PC: the pumpkin by «Vistun» lets the bats out, pumpkins and candles by the title and a bat in the header (as on
   the app's pages), props standing on the top edges of the blocks; the side walls of a wide screen — the moon, bats, pumpkins and
   candles. Phone: the props at the top of each section page, the ground at the end of «Огляд» with «Створено у Vistun» on the soil ── */
html[data-event="halloween"] .pjp-top .hw-pumpkin { margin: 0 auto 0 2px; }

/* Props on the top edges of the upper blocks — standing on the frame, right of the block's name, in the gap under the header; the
   files' — when they are the upper block (no estimate without «бачити гроші»). The lower blocks have none: the gap between the rows
   is lower than a pumpkin, it would lean on the block above. Only the big layout: on a narrow or low screen the blocks go one under
   another */
.pjp-hw-edge, .pjp-hw-wall { display: none; }
html[data-event="halloween"] .hw-ground--pjp { display: none; }   /* the phone's — below */
@media (min-width: 1024px) and (min-height: 600px) {
    html[data-event="halloween"] :is(.pjp-hw-edge--stages, .pjp-hw-edge--estimate, .pjp-grid.no-est .pjp-hw-edge--files) {
        display: block; z-index: 3; top: 0; transform: translateY(-100%);
    }
    .pjp-hw-edge--stages, .pjp-hw-edge--files { right: 16px; width: 60px; }
    .pjp-hw-edge--estimate { right: 22px; width: 38px; }
}
/* The side walls of a wide screen (where «Vistun» stands sideways): the moon and bats up, pumpkins and candles down, each at the
   middle of its wall */
@media (min-width: 1700px) {
    html[data-event="halloween"] .pjp-hw-wall { display: block; position: fixed; z-index: 0; --wall: calc((100vw - 1480px) / 4); }
    .pjp-hw-moon { top: 28px; right: var(--wall); width: clamp(110px, calc(var(--wall) * 1.6), 200px); transform: translateX(50%); }
    .pjp-hw-flight { top: 120px; left: var(--wall); width: clamp(110px, calc(var(--wall) * 1.5), 190px); transform: translateX(-50%); }
    .pjp-hw-wall-l { bottom: 24px; left: var(--wall); width: clamp(96px, calc(var(--wall) * 1.3), 170px); transform: translateX(-50%); }
    .pjp-hw-wall-r { bottom: 24px; right: var(--wall); width: clamp(60px, calc(var(--wall) * 0.8), 100px); transform: translateX(50%); }
}
@media (max-width: 768px) {
    /* Phone: each section page has its props at the top right, across from its name */
    html[data-event="halloween"] .pjp-hw-edge { display: block; z-index: 1; top: 8px; right: 18px; }
    .pjp-hw-edge--stages, .pjp-hw-edge--files { width: 62px; }
    .pjp-hw-edge--estimate { width: 38px; }
    .pjp-hw-edge--history { width: 78px; }
    /* The end of «Огляд»: the ground across the screen, «Створено у Vistun» on the soil down to the bottom of the page (under the bar) */
    html[data-event="halloween"] .hw-ground--pjp { display: block; flex-shrink: 0; height: 104px; margin: 14px -18px 0; --soil: 20px; }
    .hw-ground--pjp > :is(.hw-g1, .hw-g3, .hw-g4).lp-deco, .hw-ground--pjp > .hw-ground-tree { display: block; }
    .hw-ground--pjp > .hw-g1 { left: 4%; width: 112px; }
    .hw-ground--pjp > .hw-g4 { left: calc(4% + 120px); width: 50px; }
    .hw-ground--pjp > .hw-g3 { right: calc(4% + 66px); width: 88px; }
    .hw-ground--pjp > .hw-ground-tree { right: 3%; height: 100px; }
    html[data-event="halloween"] .pjp-grid > [data-area="overview"] > .pjp-mob-foot { margin: 0 -18px; padding: 4px 18px 0; background: var(--hw-hill); }
    html[data-event="halloween"] .pjp-grid > [data-area="overview"]::after { margin: 0 -18px; background: var(--hw-hill); }
    /* the ground is as wide as the page and the bat on the tree swings past its edge — clipped sideways, or the page itself scrolled
       sideways under the finger instead of turning to the next section (Fiobs 2026-10-19: «не можу свайпнути… сам екран переміщується») */
    .hw-ground--pjp { overflow-x: clip; }
}
@media (max-width: 359px) { .hw-ground--pjp > .hw-g4.lp-deco { display: none; } }

/* ── The holiday page («Хелловін», templates/achievements/index.html; a stub — plan, step 2.1): the page is the holiday itself, so
   unlike the work pages it wears the pumpkin accent all over, and its top block is a night scene — the sky, the garland and the moon
   (two props of «Мисливець» that live only here), bats and the ground with pumpkins and candles. Light theme — a warm dusk. Without
   the festive look («Вимкнути прикраси») none of this is on: a plain frame page ── */
html[data-event="halloween"] .hd {
    --accent:         #FB923C;
    --accent-hover:   #FDBA74;
    --accent-dim:     rgba(251, 146, 60, 0.13);
    --text-on-accent: #170C05;
    --focus-ring:     rgba(251, 146, 60, 0.40);
}
html[data-event="halloween"][data-theme="light"] .hd {
    --accent:         #C2410C;
    --accent-hover:   #9A3412;
    --accent-dim:     rgba(234, 88, 12, 0.11);
    --text-on-accent: #FFFFFF;
    --focus-ring:     rgba(194, 65, 12, 0.30);
}
html[data-event="halloween"] .hd-hero {
    --wbg: #140C09;
    background: radial-gradient(42% 70% at 80% 18%, rgba(255, 170, 80, 0.14), transparent 70%), linear-gradient(180deg, #120B09 0%, #2A160B 100%);
    border-color: rgba(255, 170, 110, 0.16);
}
html[data-event="halloween"][data-theme="light"] .hd-hero {
    --wbg: #FFF8F1;
    background: radial-gradient(42% 70% at 80% 18%, rgba(251, 146, 60, 0.16), transparent 70%), linear-gradient(180deg, #FFF8F1 0%, #FFE4CC 100%);
    border-color: rgba(194, 65, 12, 0.16);
}
/* the menu item of the page — the drawn pumpkin, a touch bigger than the line icons (it is a picture, not a glyph) */
body.nav-side .hub-sidebar-item.hub-holiday > svg, .hub-sidebar-item.hub-holiday > svg { width: 20px; height: 20px; }
.hub-drawer-tile.hub-holiday > svg { width: 26px; height: 26px; }
html[data-event="halloween"] .hd-hero-body { pointer-events: none; }
html[data-event="halloween"] .hd-hero-body > * { pointer-events: auto; }
html[data-event="halloween"] .hd-scene { display: block; position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
/* the text stands between the garland (its height follows the block's width — cqw) and the ground */
html[data-event="halloween"] .hd-hero-body { padding: calc(4.7cqw + 4px) 0 calc(clamp(70px, 12vh, 112px) - 14px) clamp(6px, 1vw, 16px); }
.hd-scene .lp-deco--garland { top: 0; }
/* light dusk: the cream moon got lost on the peach sky — a whiter disc with a thin warm rim */
html[data-event="halloween"][data-theme="light"] .hd-moon .hw-obj--moon > circle:first-of-type { fill: #FFFDF8; stroke: rgba(194, 65, 12, 0.28); stroke-width: 1.5px; }
.hd-scene .hd-moon { right: 15%; top: 10%; width: clamp(120px, 21vh, 220px); }
.hd-scene .hd-flight { right: 3%; top: 34%; width: clamp(100px, 10vw, 170px); }
html[data-event="halloween"] .hd-scene .hw-ground--hd { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(70px, 12vh, 112px); --soil: 14px; }
.hw-ground--hd > :is(.hw-g1, .hw-g3, .hw-g4).lp-deco, .hw-ground--hd > .hw-ground-tree { display: block; }
.hw-ground--hd > .hw-g3 { left: 2%; }
.hw-ground--hd > .hw-g4 { right: calc(2% + 250px); }
.hw-ground--hd > .hw-g1 { right: calc(2% + 104px); }
.hw-ground--hd > .hw-ground-tree { right: 2%; }
@container (min-width: 1000px) {
    .hw-ground--hd > .hw-g2.lp-deco { display: block; }
    .hw-ground--hd > .hw-g2 { left: 44%; }
}
@container (min-width: 1400px) {
    .hw-ground--hd > :is(.hw-g5, .hw-g7).lp-deco { display: block; }
    .hw-ground--hd > .hw-g5 { right: calc(2% + 330px); }
    .hw-ground--hd > .hw-g7 { left: 30%; }
}
/* The calendar's candles burn while they are lit — the same flicker as the props */
html[data-event="halloween"] .hd-day.is-lit .hw-flame { animation: hw-flicker 2.6s ease-in-out infinite; }
html[data-event="halloween"] .hd-day.is-lit .hw-glow { animation: hw-glow 2.6s ease-in-out infinite; }
html[data-event="halloween"] .hd-day.is-lit:nth-child(odd) :is(.hw-flame, .hw-glow) { animation-delay: -1.1s; }
@media (prefers-reduced-motion: reduce) { html[data-event="halloween"] .hd-day.is-lit :is(.hw-flame, .hw-glow) { animation: none; } }
/* Phone: the first page is the night itself — the sky edge to edge, the garland on top, the ground at the bottom over the bar */
@media (max-width: 768px) {
    html[data-event="halloween"] .pl-pages > .hd-hero { border-radius: 0; padding-top: 58px; }
    html[data-event="halloween"] .hd-hero-body { padding: 14px 0 0; }
    .hd-scene .hd-moon { right: 4%; top: auto; bottom: 23%; width: 150px; }
    .hd-scene .hd-flight { right: auto; left: 6%; top: auto; bottom: 27%; width: 150px; }
    html[data-event="halloween"] .hd-scene .hw-ground--hd { height: 112px; }
    .hw-ground--hd > .hw-g4 { right: auto; left: calc(2% + 110px); }
    .hw-ground--hd > .hw-g1 { right: calc(2% + 70px); width: 104px; }
    .hw-ground--hd > .hw-ground-tree { right: -2%; height: 96px; }
}

/* ── Hidden creatures of «Мисливець за прикрасами» (partials/events/halloween/_find.html, {% holiday_find "<kind>" "<place>" %}):
   nine, each on a page the person has to walk to (Fiobs 2026-10-20: «це дійсно повинно бути полювання») — a witch's hat in the
   dashboard header, a spider in «Клієнти» → «Налаштування», a ghost in «Оплати» → «Про модуль», a cat on the ground of «Бізнес» →
   «Сповіщення», a cauldron in «Підписка», an owl at the end of 1.7.0 in «Що нового», a raven in «Відгук», a crystal ball in the
   notifications panel, the pumpkin next to the logo. Places: head / tabs / cell — PC; end / bar — phone; tail / panel — both.
   Quiet motion only while on screen (.hw-live), transform/opacity only ── */
.hw-find { display: none; }
html[data-event="halloween"] .hw-find {
    display: block; flex-shrink: 0; overflow: visible; pointer-events: none;
    -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.hw-find .hw-obj { transform-origin: 50% 100%; }
.hw-find--head { width: 38px; height: 38px; align-self: flex-end; margin: 0 2px -2px; }
.hw-find--bar { width: 34px; height: 34px; margin: 0 auto 0 0; }
.hub-topbar .hw-pumpkin + .hw-find--bar, .hub-topbar-brand + .hw-find--bar { margin-left: 6px; }
/* the line of a module's tabs: the spider hangs from it over the card, the ghost floats on it — right of the tabs */
.page-tabs:has(> .hw-find) { position: relative; }
html[data-event="halloween"] .hw-find--tabs { position: absolute; right: 26%; width: 36px; height: 36px; z-index: 3; }
.hw-find--tabs.hw-find--spider { top: calc(100% - 1px); clip-path: inset(0 -24px -60px -24px); }
.hw-find--tabs.hw-find--ghost { bottom: 2px; }
/* the ground of an empty cell (the same cell as the ground strip, «Ground» below), standing on its line */
html[data-event="halloween"] .hw-find--cell { width: 46px; height: 46px; align-self: end; justify-self: start; margin: 0 0 19px var(--find-x, 56%); z-index: 1; }
.bs-notif > .hw-find--cell { grid-column: 1 / -1; grid-row: 3; --find-x: 60%; }
.sb > .hw-find--cell { grid-column: 1; grid-row: 3; --find-x: 46%; }
.fb-grid > .hw-find--cell { grid-column: 2; grid-row: 2; --find-x: 52%; }
/* the phone: the end of the section (where the cells are gone); the end of the content and the notifications panel — everywhere */
html[data-event="halloween"] .hw-find--end { width: 52px; height: 52px; margin: 22px 6px 8px auto; }
html[data-event="halloween"] .hw-find--tail { width: 50px; height: 50px; margin: 16px 0 0 auto; }
html[data-event="halloween"] .hw-find--panel { width: 30px; height: 30px; margin: 2px 14px 8px auto; }
@media (min-width: 1024px) and (min-height: 600px) { html[data-event="halloween"] .hw-find--end { display: none; } }
@media (max-width: 1023px), (max-height: 599px) { html[data-event="halloween"] :is(.hw-find--cell, .hw-find--tabs) { display: none; } }
@media (max-width: 768px) { html[data-event="halloween"] .hw-find--head { display: none; } }
.hw-find-thread { stroke: var(--hw-thread, rgba(255, 214, 180, 0.28)); }
/* the dark ones (spider, cat) on the night pages — a warm rim, as the bats have (a stroke, not a filter): hidden, but findable */
html[data-event="halloween"]:not([data-theme="light"]) .hw-find :is([fill="#1A0F0A"], [fill="#160D09"], [fill="#24150E"], [fill="#140D0A"]) { stroke: rgba(255, 170, 90, 0.5); stroke-width: 1px; vector-effect: non-scaling-stroke; }
html[data-event="halloween"]:not([data-theme="light"]) .hw-find--spider g[stroke="#1A0F0A"] { stroke: #5A3826; }
html[data-event="halloween"]:not([data-theme="light"]) .hw-find--cat .hw-find-tail { stroke: #3A2418; }
.hw-find--spider.hw-find--bar .hw-find-thread { display: none; }   /* у верхній панелі нитці немає звідки звисати */
/* light theme: the ghost — a thin warm outline on light pages is already in the drawing; dark creatures read as they are */
.hw-find-sway { transform-box: view-box; transform-origin: 32px 22px; }
.hw-find-tail { transform-box: view-box; transform-origin: 43px 61px; }
.hw-find--raven .hw-find-tail { transform-origin: 45px 46px; }
.hw-find-mist { transform-box: view-box; transform-origin: 32px 31px; }
.hw-find-eyes { transform-box: fill-box; transform-origin: 50% 50%; }
.hw-find-bubbles circle { transform-box: fill-box; transform-origin: 50% 50%; }
html[data-event="halloween"] .hw-live .hw-find-sway { animation: hw-find-spider 5s ease-in-out infinite; }
html[data-event="halloween"] .hw-live.hw-find--ghost .hw-obj--find { animation: hw-bob 4.2s ease-in-out infinite; }
html[data-event="halloween"] .hw-live .hw-find-tail { animation: hw-find-tail 3.2s ease-in-out infinite; }
html[data-event="halloween"] .hw-live .hw-find-eyes { animation: hw-find-blink 5.5s ease-in-out infinite; }
html[data-event="halloween"] .hw-live .hw-find-bubbles circle { animation: hw-find-bubble 2.4s ease-in infinite; }
html[data-event="halloween"] .hw-live .hw-find-mist { animation: hw-find-mist 6s linear infinite; }
html[data-event="halloween"] .hw-live .hw-find-bubbles circle:nth-child(2) { animation-delay: -0.8s; }
html[data-event="halloween"] .hw-live .hw-find-bubbles circle:nth-child(3) { animation-delay: -1.6s; }
@keyframes hw-find-spider { 0%, 100% { transform: translateY(0) rotate(0deg); } 30% { transform: translateY(-4px) rotate(3deg); } 70% { transform: translateY(2px) rotate(-3deg); } }
@keyframes hw-find-tail { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-10deg); } }
@keyframes hw-find-blink { 0%, 46%, 52%, 100% { transform: scaleY(1); } 49% { transform: scaleY(0.1); } }
@keyframes hw-find-mist { 0% { transform: rotate(0deg); opacity: 0.7; } 50% { opacity: 1; } 100% { transform: rotate(360deg); opacity: 0.7; } }
@keyframes hw-find-bubble { 0% { transform: translateY(4px) scale(0.6); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateY(-9px) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    html[data-event="halloween"] .hw-live :is(.hw-find-sway, .hw-find-tail, .hw-find-eyes, .hw-find-bubbles circle, .hw-find-mist),
    html[data-event="halloween"] .hw-live.hw-find--ghost .hw-obj--find { animation: none; }
}

/* The story of a find (static/js/event-halloween.js, holidays FIND_STORIES) — instead of «3 з 6» (Fiobs 2026-10-20): a card at the
   bottom with the creature and two sentences; a tap or a few seconds close it. On the phone — above the bottom panel */
.hw-story {
    position: fixed; left: 50%; bottom: 24px; z-index: 1250; box-sizing: border-box; width: min(380px, calc(100vw - 32px));
    display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 14px 16px;
    border: 1px solid rgba(255, 170, 110, 0.28); border-radius: 16px; cursor: pointer;
    background: radial-gradient(120% 90% at 0% 100%, rgba(251, 146, 60, 0.16), transparent 70%), #1B110C;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); color: #F3E9E1;
    opacity: 0; transform: translate(-50%, 14px); transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-story.is-on { opacity: 1; transform: translate(-50%, 0); }
.hw-story svg { grid-row: 1 / 3; width: 52px; height: 52px; overflow: visible; }
html[data-event="halloween"] .hw-story .hw-story-pic { display: block; margin: 0; clip-path: none; }
.hw-story-pic .hw-find-thread { display: none; }
.hw-story b { font-size: 15px; font-weight: 800; color: #FDBA74; }
.hw-story p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #E7DDD3; }
html[data-theme="light"] .hw-story { background: radial-gradient(120% 90% at 0% 100%, rgba(251, 146, 60, 0.18), transparent 70%), #FFF7F0; color: #2A1A12; border-color: rgba(194, 65, 12, 0.24); box-shadow: 0 16px 40px rgba(60, 30, 10, 0.18); }
html[data-theme="light"] .hw-story b { color: #C2410C; }
html[data-theme="light"] .hw-story p { color: #4A3426; }
@media (max-width: 768px) { .hw-story { bottom: calc(var(--dock-space, 96px) + var(--hub-ext-h, 0px) + 12px); } }
@media (prefers-reduced-motion: reduce) { .hw-story { transition: none; } }

/* «Свята» (partials/events/halloween/_landing_section.html) — the most dressed-up block */
.lp-deco--ev-moon { left: 3%; top: 30px; width: 280px; }
.lp-deco--ev-flight { right: 6%; top: 60px; }
.lp-deco--ev-pumpkins { left: 5%; bottom: 0; }
.lp-deco--ev-candles { right: 7%; bottom: 0; }
.lp-events .section-wrap { padding-bottom: 120px; }
/* Slides behind the veil (_landing_veil.html): the picture is the real card, blurred in its pixels; the words lie over it on a soft
   night scrim. The name is for the carousel's pill only */
.lp-ev-veil { display: block; position: relative; }
.lp-ev-veil-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-ev-veil picture, .lp-ev-veil img { display: block; width: 100%; height: auto; }
.lp-ev-veil img { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.lp-ev-veil-text {
    position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 24px; text-align: center; font-size: 1.05rem; line-height: 1.5; color: var(--text-secondary);
    background: radial-gradient(48% 42% at 50% 50%, rgba(12, 8, 6, 0.72), transparent 100%);
}
.lp-ev-veil-text b { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-primary); }
@media (max-width: 768px) {
    .lp-ev-veil-text { font-size: 0.92rem; background: radial-gradient(60% 40% at 50% 50%, rgba(12, 8, 6, 0.75), transparent 100%); }
    .lp-ev-veil-text b { font-size: 1.3rem; }
}
/* The garland: a wire in four swags with bulbs; a third of them breathe, a click runs a wave of light along it */
.lp-deco--garland { left: 0; top: -1px; width: 100%; }
.hw-bulb-glow { transform-box: fill-box; transform-origin: center; }
html[data-event="halloween"] .hw-live .hw-bulb:nth-child(3n) .hw-bulb-glow { animation: hw-glow 2.4s ease-in-out infinite; }
html[data-event="halloween"] .hw-live .hw-bulb:nth-child(3n+1) .hw-bulb-glow { animation: hw-glow 2.4s ease-in-out -1.2s infinite; }
.lp-ev-art { display: block; width: 100%; height: auto; }
.lp-ev-tag { background: color-mix(in srgb, var(--mod-color) 14%, transparent); color: var(--mod-color); }
.lp-ev-coin-num { font: 800 32px var(--font-sans); fill: #4A2508; }
.lp-ev-logo { font: 800 19px var(--font-sans); fill: #F3E9E1; }
.lp-ev-logo tspan { fill: #FB923C; }
.lp-ev-price { font: 800 11px var(--font-sans); fill: #2A140A; }
.lp-ev-violet-bat { color: #C084FC; }
html[data-event="halloween"] .hw-live .lp-ev-bulbs circle:nth-child(4n+1) { animation: hw-glow 2.2s ease-in-out infinite; }
html[data-event="halloween"] .hw-live .lp-ev-bulbs circle:nth-child(4n+3) { animation: hw-glow 2.2s ease-in-out -1.1s infinite; }


/* The landing ends with the ground (the footer): pulled past the end — the elastic overscroll of phones and trackpads — the page
   shows more soil, not the night sky (Fiobs 2026-10-18: «остання декорація має розтягуватися разом зі сторінкою»). The canvas
   (the root background, what browsers paint past the page) takes the soil colour while the reader is in the lower half of the page
   (.lp-at-end, event-halloween.js) — the top stays the page colour; the page itself keeps its own (body paints its box) */
html[data-event="halloween"].lp-at-end { background-color: var(--hw-hill); }

/* Touchable props (static/js/event-halloween.js): a pumpkin wobbles and hops, a candle throws sparks,
   a hanging bat swings, the moon calls the flock */
.hw-obj { pointer-events: auto; cursor: pointer; transform-box: fill-box; transform-origin: 50% 100%; }
.hw-obj--hang { transform-box: view-box; transform-origin: 30px 0; }
.hw-obj--moon { transform-origin: 50% 50%; }
/* No text selection around the props — quick clicks would otherwise select the slide next to them */
:is(.lp-deco, .lp-ev-art, .lp-hw-sky, .ae-scene, .ae-strip) { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
/* Bats from behind the moon (event-halloween.js moonBats): the same dark bats with a warm rim, flapping fast */
.hw-moon-bat path { stroke: rgba(255, 170, 90, 0.6); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hw-moon-bat .hw-wings { animation: hw-flap 0.15s ease-in-out infinite alternate; }
.hw-spark {
    position: fixed; left: 0; top: 0; z-index: 160; pointer-events: none;
    width: 4px; height: 4px; border-radius: 50%;
    background: #FFE2A8; box-shadow: 0 0 6px 2px rgba(255, 150, 50, 0.7);
}

@media (max-width: 900px) {
    /* phone: no room in the margins — only pumpkins stay by the sections (moons would sit behind the titles); the footer's ground has its own */
    body.landing section > :is(.lp-deco--hang, .lp-deco--flight, .lp-deco--candles, .lp-deco--moon) { display: none; }
    body.landing section > :is(.lp-deco--pumpkins, .lp-deco--pumpkins-b) { width: 100px; }
    .lp-events .section-wrap { padding-bottom: 80px; }
    .lp-deco--garland { height: 44px; }   /* the middle of the garland at a readable size, the sides cropped */
}

/* Gradients used by the inline SVGs — the holder must not be display:none (gradients would stop rendering) */
.hw-defs { position: absolute; width: 0; height: 0; overflow: hidden; }