/*
 * Halloween Party 2026 — оформление (спека docs/superpowers/specs/2026-10-10-halloween-party-design.md).
 * Подключается в views/layout.ejs только пока res.locals.halloween.themeActive (до 01.11.2026 00:00 UTC+7)
 * и не на KID'S-страницах. Все правила привязаны к своим классам (.hw-*), чужие страницы не задевают.
 *
 *   1. Сцена «Проклятая ночь» (#hwScene, public/js/halloween-scene.js) — главная, /halloween, форма вечеринки.
 *   2. Главная: карточка вечеринки (.hw-card) и полоска внизу на узких экранах (.hw-mini-bar), halloween-card.js.
 *   3. /halloween (views/halloween.ejs) + глаза в темноте (#hwEyes, halloween-eyes.js).
 *   4. Форма записи на вечеринку (.booking-container.hw-event) + существа над блоками (halloween-form.js).
 *   5. Лёгкий слой остальных страниц: мыши, паутина в шапке, туман (halloween-overlay.js).
 *
 * prefers-reduced-motion и html.qq-lite (слабое устройство / медленная сеть) — без анимации.
 */

/* ===== 1. Сцена ===== */
#hwScene { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }

/* ===== 2. Главная ===== */
.hw-home .home-page-bg, .hw-home .home-page-overlay { display: none !important; }
.hw-home .hero { min-height: calc(100vh - 80px); }
/* Карточка вечеринки всегда на экране: на первом экране — справа от логотипа, дальше — компактно в углу. */
.hw-card { position: fixed; right: 4vw; top: 50%; transform: translateY(-50%); width: 380px; padding: 22px; border-radius: 16px; z-index: 900;
           background: rgba(12,6,10,.82); border: 1px solid rgba(255,90,40,.35); box-shadow: 0 0 40px rgba(196,30,30,.35); text-align: left;
           -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
           transition: top .5s ease, transform .5s ease, width .5s ease, padding .5s ease; }
.hw-card .hw-kicker { color: #ff8a3d; font-size: 12px; letter-spacing: 3px; text-transform: uppercase; }
.hw-card h2 { margin: 6px 0 4px; font-size: 30px; letter-spacing: 1px; font-family: Georgia, 'Times New Roman', serif; color: #fff; line-height: 1.1; transition: font-size .5s; }
.hw-card p { margin: 0 0 14px; color: #ccc; font-size: 14px; line-height: 1.4; max-height: 60px; overflow: hidden; transition: max-height .5s, margin .5s, opacity .3s; }
.hw-card .hw-count { display: flex; gap: 10px; margin-bottom: 16px; }
.hw-card .hw-count div { flex: 1; text-align: center; background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px 0; transition: padding .5s; }
.hw-card .hw-count b { display: block; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; transition: font-size .5s; }
.hw-card .hw-count span { font-size: 11px; color: #aaa; }
.hw-card .btn { display: inline-block; }
.hw-card.hw-card--mini { top: calc(100% - 20px); transform: translateY(-100%); width: 300px; padding: 14px 16px; }
.hw-card.hw-card--mini h2 { font-size: 22px; }
.hw-card.hw-card--mini p { max-height: 0; margin: 0; opacity: 0; }
.hw-card.hw-card--mini .hw-count { gap: 6px; margin-bottom: 10px; }
.hw-card.hw-card--mini .hw-count div { padding: 4px 0; }
.hw-card.hw-card--mini .hw-count b { font-size: 17px; }
.hw-card.hw-card--mini .btn { padding: 8px 14px; font-size: 14px; }
.hw-mini-bar { display: none; }
@media (max-width: 1360px) {
    .hw-home .hero { flex-direction: column; }
    .hw-card { position: relative; right: auto; top: auto; transform: none; margin: 36px auto 0; width: min(380px, calc(100vw - 32px)); transition: none; }
    .hw-card.hw-card--mini { top: auto; transform: none; width: min(380px, calc(100vw - 32px)); padding: 22px; }
    .hw-card.hw-card--mini h2 { font-size: 30px; }
    .hw-card.hw-card--mini p { max-height: 60px; margin: 0 0 14px; opacity: 1; }
    .hw-card.hw-card--mini .hw-count { gap: 10px; margin-bottom: 16px; }
    .hw-card.hw-card--mini .hw-count div { padding: 8px 0; }
    .hw-card.hw-card--mini .hw-count b { font-size: 24px; }
    .hw-card.hw-card--mini .btn { padding: 12px 28px; font-size: 1rem; }
    .hw-mini-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 900; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px;
                   border-radius: 14px; background: rgba(12,6,10,.9); border: 1px solid rgba(255,90,40,.4); box-shadow: 0 0 30px rgba(196,30,30,.45);
                   -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
                   transform: translateY(140%); transition: transform .4s ease; max-width: 560px; margin: 0 auto; }
    .hw-mini-bar.is-visible { transform: none; }
    .hw-mini-bar .hw-mini-title { font-family: Georgia, serif; color: #fff; font-size: 16px; line-height: 1.1; }
    .hw-mini-bar .hw-mini-count { color: #ffb38a; font-size: 13px; font-variant-numeric: tabular-nums; }
    .hw-mini-bar .btn { margin-left: auto; padding: 9px 14px; font-size: 14px; white-space: nowrap; min-height: 0; }
}

/* ===== 3. Страница /halloween ===== */
#hwEyes { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.hw-page { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; padding: 120px 20px 60px; color: #ddd; }
.hw-panel { background: rgba(10,5,8,.8); border: 1px solid rgba(255,90,40,.22); border-radius: 16px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hw-hero { display: grid; grid-template-columns: minmax(0, 420px) 1fr; gap: 36px; align-items: center; }
.hw-poster img { width: 100%; height: auto; display: block; border-radius: 16px; box-shadow: 0 0 60px rgba(196,30,30,.45); border: 1px solid rgba(255,90,40,.35); }
.hw-hero-text { padding: 30px; }
.hw-page .hw-kicker { color: #ff8a3d; font-size: 13px; letter-spacing: 3px; text-transform: uppercase; }
.hw-title { margin: 8px 0 12px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(38px, 6vw, 64px); letter-spacing: 2px; color: #fff; line-height: 1.02;
            text-shadow: 0 0 24px rgba(255,80,40,.45); }
.hw-lead { font-size: 17px; line-height: 1.55; color: #ddd; margin: 0 0 20px; }
.hw-page .hw-count { display: flex; gap: 10px; margin-bottom: 20px; max-width: 420px; }
.hw-page .hw-count div { flex: 1; text-align: center; background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 0; }
.hw-page .hw-count b { display: block; font-size: 28px; color: #fff; font-variant-numeric: tabular-nums; }
.hw-page .hw-count span { font-size: 11px; color: #aaa; }
.hw-facts { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.hw-facts li { background: rgba(196,30,30,.12); border: 1px solid rgba(196,30,30,.35); border-radius: 12px; padding: 10px 12px; }
.hw-facts b { display: block; color: #fff; font-size: 17px; }
.hw-facts span { font-size: 12px; color: #bbb; }
.hw-section { margin-top: 70px; }
.hw-h2 { font-family: Georgia, serif; font-size: clamp(26px, 3.4vw, 38px); color: #fff; text-align: center; margin: 0 0 10px; letter-spacing: 1px; }
.hw-sub { text-align: center; color: #f1e6e6; max-width: 760px; margin: 14px auto 30px; padding: 16px 24px; font-size: 18px; line-height: 1.55;
          background: rgba(10,5,8,.82); border: 1px solid rgba(255,90,40,.25); border-left: 4px solid #c41e1e; border-radius: 12px;
          box-shadow: 0 0 30px rgba(196,30,30,.25); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.hw-accent { color: #ff9a5a; font-weight: 700; text-shadow: 0 0 14px rgba(255,110,50,.55); }
.hw-closed { text-align: center; color: #ffb38a; font-size: 17px; margin: 0 auto 24px; max-width: 760px; }
.hw-universes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.hw-universe { overflow: hidden; display: flex; flex-direction: column; }
/* Постеры разной ориентации (4:3 и 3:4) показываются целиком: блок 4:3, постер вписан (contain),
   пустые края закрывает размытая копия того же файла. */
.hw-universe-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0d0606; }
.hw-universe-img img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hw-universe-backdrop { object-fit: cover; filter: blur(22px) brightness(.45) saturate(1.2); transform: scale(1.2); }
.hw-universe-poster { object-fit: contain; }
/* Постеры открываются на весь экран (public/js/photo-viewer.js, атрибут data-photo-viewer). */
.hw-poster img, .hw-universe-poster { cursor: zoom-in; }
.hw-universe-body { flex: 1; display: flex; flex-direction: column; padding: 20px 22px 24px; }
.hw-universe-body .hw-sessions { margin-top: auto; }
.hw-universe h3 { margin: 0 0 6px; color: #fff; font-size: 21px; }
.hw-addr { margin: 0 0 16px; color: #aaa; font-size: 14px; }
.hw-sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hw-session { display: block; text-decoration: none; text-align: center; padding: 12px 10px; border-radius: 12px; background: #c41e1e; color: #fff; transition: transform .2s, box-shadow .2s; }
.hw-session:hover { transform: translateY(-2px); box-shadow: 0 0 22px rgba(196,30,30,.6); color: #fff; }
.hw-session b { display: block; font-size: 22px; }
.hw-session span { font-size: 13px; opacity: .9; }
.hw-session--few span { color: #ffd38a; opacity: 1; }
.hw-session--full, .hw-session--full:hover { background: rgba(255,255,255,.06); color: #777; cursor: not-allowed; transform: none; box-shadow: none; }
.hw-program { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.hw-item { padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.hw-item i { font-style: normal; font-size: 30px; }
.hw-item b { color: #fff; font-size: 16px; }
.hw-item span { color: #bbb; font-size: 14px; line-height: 1.45; }
.hw-dress { position: relative; text-align: center; padding: 34px 20px; border-radius: 18px; overflow: hidden;
            background: linear-gradient(135deg, rgba(120,10,10,.85), rgba(40,5,25,.9)); border: 1px solid rgba(255,120,60,.5); box-shadow: 0 0 50px rgba(196,30,30,.4); }
.hw-dress-label { font-size: 14px; letter-spacing: 6px; text-transform: uppercase; color: #ffb38a; }
.hw-dress-text { margin-top: 8px; font-family: Georgia, serif; font-size: clamp(24px, 3.6vw, 40px); color: #fff; text-shadow: 0 0 20px rgba(255,90,40,.6); }
.hw-final { text-align: center; padding: 34px 24px; }
.hw-final p { margin: 0 0 10px; font-size: 18px; color: #eee; }
.hw-final .hw-warn { color: #ff8a6a; font-style: italic; }
.hw-final .hw-tag { color: #bbb; font-size: 15px; margin-bottom: 22px; }
.hw-btn-off, .hw-btn-off:hover { background: rgba(255,255,255,.08); color: #888; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 900px) {
    .hw-hero { grid-template-columns: 1fr; }
    .hw-poster { max-width: 420px; margin: 0 auto; }
    .hw-universes { grid-template-columns: 1fr; }
    .hw-facts { grid-template-columns: repeat(2, 1fr); }
    .hw-page { padding-top: 100px; }
}
@media (max-width: 480px) {
    .hw-page { padding: 100px 16px 40px; }
    .hw-hero-text { padding: 22px 18px; }
    .hw-page .hw-count b { font-size: 24px; }
}

/* ===== 4. Форма записи на вечеринку ===== */
.booking-container.hw-event { position: relative; z-index: 2; }
.hwb-universes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hwb-universe { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: rgba(255,255,255,.02); }
.hwb-universe.is-selected { border-color: rgba(255,90,40,.6); box-shadow: 0 0 22px rgba(196,30,30,.3); }
.hwb-u-title { color: #fff; font-weight: 700; margin-bottom: 4px; }
.hwb-u-addr { color: var(--text-secondary); font-size: .9rem; margin-bottom: 12px; }
/* margin-top: auto — кнопки сеансов внизу карточки: длинное название одной вселенной не сдвигает их ниже, чем у соседней. */
.hwb-sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; }
.hwb-session { border: 1px solid rgba(196,30,30,.5); background: transparent; color: #fff; border-radius: 10px; padding: 10px 6px; cursor: pointer; font: inherit; }
.hwb-session b { display: block; font-size: 1.25rem; }
.hwb-session span { font-size: .8rem; color: var(--text-secondary); }
.hwb-session.is-selected { background: #c41e1e; border-color: #c41e1e; }
.hwb-session.is-selected span { color: #fff; }
.hwb-few span { color: #ffb38a; }
.hwb-full, .hwb-session:disabled { opacity: .4; cursor: not-allowed; }
.hwb-note { text-align: center; color: var(--text-secondary); font-size: .9rem; margin-top: 12px; }
.hwb-note.is-closed { color: #ffb38a; font-weight: 700; }
.hwb-seats { color: #ffb38a; }
.hwb-dress { margin: 0 0 24px; padding: 14px 18px; border-radius: 12px; text-align: center; color: #fff;
             background: linear-gradient(135deg, rgba(120,10,10,.75), rgba(40,5,25,.85)); border: 1px solid rgba(255,120,60,.45); }
@media (max-width: 760px) { .hwb-universes { grid-template-columns: 1fr; } }

/* Блоки формы — по-хэллоуински: винный градиент, светящаяся рамка, существа над краем. */
.booking-container.hw-event .booking-step {
    position: relative; overflow: visible;
    background: linear-gradient(165deg, rgba(42,9,17,.94) 0%, rgba(20,6,14,.95) 55%, rgba(11,4,10,.96) 100%) !important;
    border: 1px solid rgba(255,90,40,.3) !important;
    box-shadow: 0 0 34px rgba(196,30,30,.2), inset 0 0 50px rgba(120,10,20,.22) !important;
}
.booking-container.hw-event .booking-step + .booking-step, .booking-container.hw-event .hwb-dress + .booking-step { margin-top: 62px; }
.booking-container.hw-event .hwb-dress { margin-top: 30px; }
.booking-container.hw-event .booking-step [style*="var(--bg-card)"], .booking-container.hw-event .contact-level-option,
.booking-container.hw-event .hwb-universe, .booking-container.hw-event .messenger-option, .booking-container.hw-event .call-notice {
    background: rgba(0,0,0,.32) !important; border-color: rgba(255,90,40,.22) !important;
}
.booking-container.hw-event .hwb-universe.is-selected { border-color: rgba(255,90,40,.6) !important; }
.booking-container.hw-event .contact-level-option.selected, .booking-container.hw-event .messenger-option.is-selected { border-color: var(--accent) !important; }
.booking-container.hw-event .form-control, .booking-container.hw-event .contact-info-input,
.booking-container.hw-event input[type="text"], .booking-container.hw-event input[type="tel"] {
    background: rgba(0,0,0,.45) !important; border-color: rgba(255,90,40,.28) !important; color: #fff !important;
}
.booking-container.hw-event .booking-step h3 { color: #ff6a3d; text-shadow: 0 0 14px rgba(255,80,40,.35); }
.booking-container.hw-event #stepUniverse { margin-top: 70px; }

.hw-peek { position: absolute; bottom: 100%; margin-bottom: -8px; z-index: 3; pointer-events: none;
           transform-origin: 50% 100%; animation: hwPeek 7s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.hw-peek.left { left: 34px; } .hw-peek.right { right: 34px; } .hw-peek.center { left: 50%; margin-left: -40px; }
.hw-peek:nth-of-type(odd) { animation-delay: -2.5s; }
.booking-step:hover .hw-peek { animation: hwStartle .5s ease-out; }
.hw-peek .hw-eye { transform-box: fill-box; transform-origin: center; animation: hwBlink 5.5s infinite; }
.hw-peek.ghost .hw-glow { filter: drop-shadow(0 0 10px rgba(255,255,255,.55)); }
.hw-peek.hand { margin-bottom: -34px; animation-duration: 9s; }
.hw-peek svg { height: auto; display: block; }
.hw-peek.cat svg, .hw-peek.ghost svg { width: 128px; } .hw-peek.pumpkin svg { width: 132px; }
.hw-peek.hand svg { width: 116px; } .hw-peek.bat svg { width: 112px; }
.hw-spider svg { width: 60px; height: auto; display: block; }
.hw-spider { position: absolute; top: 0; right: 46px; z-index: 3; pointer-events: none; transform-origin: top center; animation: hwSpider 4.5s ease-in-out infinite; }
.hw-web { position: absolute; top: 0; width: 70px; height: 70px; opacity: .35; pointer-events: none; }
.hw-web.tl { left: 0; } .hw-web.tr { right: 0; transform: scaleX(-1); }
@keyframes hwPeek { 0%, 62%, 100% { transform: translateY(0); } 70% { transform: translateY(14px); } 78% { transform: translateY(0); } }
@keyframes hwStartle { 0% { transform: translateY(0); } 35% { transform: translateY(-9px) rotate(-3deg); } 70% { transform: translateY(2px) rotate(2deg); } 100% { transform: translateY(0); } }
@keyframes hwBlink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes hwSpider { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(16px); } }
@media (max-width: 760px) { .hw-peek { transform: scale(.8); } .hw-peek.left { left: 14px; } .hw-peek.right { right: 14px; } }

/* ===== 5. Лёгкий слой остальных страниц ===== */
/* Летучие мыши: изредка пролетают над страницей (halloween-overlay.js), ниже шапки, клики не ловят. */
.hw-ov-bats { position: fixed; inset: 0; z-index: 950; pointer-events: none; overflow: hidden; }
.hw-ov-bat { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.hw-ov-bat svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 5px rgba(255,60,40,.5)); }
.hw-ov-bat .hw-ov-wing { transform-box: fill-box; transform-origin: 50% 70%; animation: hwOvFlap .16s ease-in-out infinite alternate; }
@keyframes hwOvFlap { from { transform: scaleY(1); } to { transform: scaleY(-.5); } }
/* Паутина в углах шапки: под логотипом и меню (z-index -1 внутри фиксированной шапки). */
.hw-nav-web { position: absolute; top: 0; width: 66px; height: 66px; opacity: .22; pointer-events: none; z-index: -1; }
.hw-nav-web--l { left: 0; }
.hw-nav-web--r { right: 0; transform: scaleX(-1); }
.hw-nav-web svg { display: block; width: 100%; height: 100%; }
/* Лёгкий туман у нижнего края: прозрачный, к верху сходит на нет. */
.hw-ov-fog { position: fixed; left: 0; right: 0; bottom: 0; height: 110px; z-index: 5; pointer-events: none; overflow: hidden;
             -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%);
             mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,.6) 45%, transparent 100%); }
.hw-ov-fog::before, .hw-ov-fog::after { content: ''; position: absolute; left: 0; bottom: -24px; width: 200%; height: 150px;
    background-image:
        radial-gradient(ellipse 34% 55% at 18% 72%, rgba(170,140,160,.14), transparent 70%),
        radial-gradient(ellipse 30% 45% at 52% 82%, rgba(150,120,140,.12), transparent 70%),
        radial-gradient(ellipse 36% 50% at 84% 70%, rgba(170,140,160,.13), transparent 70%);
    background-size: 50% 100%; background-repeat: repeat-x;
    animation: hwOvFog 70s linear infinite; }
.hw-ov-fog::after { bottom: -40px; opacity: .8; animation-duration: 110s; animation-direction: reverse; }
@keyframes hwOvFog { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 760px) { .hw-ov-fog { height: 70px; } .hw-nav-web { width: 48px; height: 48px; } }

/* ===== Без анимации: prefers-reduced-motion и qq-lite ===== */
@media (prefers-reduced-motion: reduce) {
    .hw-card, .hw-card *, .hw-mini-bar { transition: none !important; }
    .hw-peek, .hw-spider, .hw-peek .hw-eye, .hw-ov-fog::before, .hw-ov-fog::after, .hw-ov-bat .hw-ov-wing { animation: none !important; }
    .hw-ov-bats { display: none; }
}
html.qq-lite .hw-card, html.qq-lite .hw-card *, html.qq-lite .hw-mini-bar { transition: none !important; }
html.qq-lite .hw-peek, html.qq-lite .hw-spider, html.qq-lite .hw-peek .hw-eye,
html.qq-lite .hw-ov-fog::before, html.qq-lite .hw-ov-fog::after, html.qq-lite .hw-ov-bat .hw-ov-wing { animation: none !important; }
html.qq-lite .hw-ov-bats { display: none; }
html.qq-lite .hw-card, html.qq-lite .hw-mini-bar, html.qq-lite .hw-panel, html.qq-lite .hw-sub { -webkit-backdrop-filter: none; backdrop-filter: none; }