/* Новогоднее оформление. Всё работает только при классе html.ny: его ставит _head.html на время праздников
   (с 1 ноября по 14 января). Цвета — те же, что у сайта: голубой, золотой, белый на графитовом фоне.
   Снежинки рисует static/fx.js, гирлянду, ёлку, счётчик и салют добавляет static/newyear.js. */
html.ny {
  --ny-fir: #2f4468;                     /* ёлки — цвет --accent-bg */
  --ny-snow: #e6ecfa;                    /* снеговик и снег на ёлке */
  /* снежная шапка на карточках */
  --ny-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath fill='%23e6ecfa' d='M0 14C2 6 8 3 16 4 30 6 40 1 58 2 74 3 84 7 100 5 118 3 130 0 150 2 168 4 178 7 186 5 194 4 199 8 200 14 180 10 170 13 150 11 130 9 120 13 100 11 80 9 66 13 50 11 34 9 20 13 0 14Z'/%3E%3C/svg%3E");
  /* шапка Деда Мороза: голубая, как акцент сайта */
  --ny-hat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath fill='%235f90e8' d='M6 28C7 13 16 3 28 5c7 1 10 8 11 15l-5 0c-1-4-3-7-6-7 3 4 4 9 4 15z'/%3E%3Cpath fill='%238ab4ff' d='M12 27C13 16 19 8 28 7c-7 3-10 11-10 20z'/%3E%3Crect x='2' y='26' width='33' height='9' rx='4.5' fill='%23f4f5f8'/%3E%3Ccircle cx='38' cy='23' r='5' fill='%23f4f5f8'/%3E%3C/svg%3E");
}

/* ===== гирлянда ===== */
.ny-garland { display: none; }
html.ny .ny-garland { display: block; position: absolute; left: 0; right: 0; top: 0; height: 30px; overflow: hidden; pointer-events: none; z-index: 1; }
html.ny .ny-garland.ny-top { top: env(safe-area-inset-top); }
html.ny .ny-garland i { position: absolute; inset: 0; background-repeat: repeat-x; background-size: 80px 30px; }
/* провод и приглушённые лампочки */
html.ny .ny-garland .w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cpath d='M0 1Q40 27 80 1' fill='none' stroke='%236b7385' stroke-width='1.2'/%3E%3Cg fill='%236b7385'%3E%3Ccircle cx='20' cy='13' r='3'/%3E%3Ccircle cx='40' cy='16' r='3'/%3E%3Ccircle cx='60' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"); }
/* горящие лампочки: три цвета в трёх слоях, каждый мерцает по-своему (меняется только прозрачность слоя — это дёшево) */
html.ny .ny-garland .a { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%238ab4ff' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%238ab4ff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='13' r='11' fill='url(%23g)'/%3E%3Ccircle cx='20' cy='13' r='3.4' fill='%238ab4ff'/%3E%3C/svg%3E"); animation: ny-blink 2.6s ease-in-out infinite; }
html.ny .ny-garland .b { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffd36e' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23ffd36e' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='40' cy='16' r='11' fill='url(%23g)'/%3E%3Ccircle cx='40' cy='16' r='3.4' fill='%23ffd36e'/%3E%3C/svg%3E"); animation: ny-blink 3.3s ease-in-out .8s infinite; }
html.ny .ny-garland .c { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='13' r='11' fill='url(%23g)'/%3E%3Ccircle cx='60' cy='13' r='3.4' fill='%23f4f5f8'/%3E%3C/svg%3E"); animation: ny-blink 2.1s ease-in-out .4s infinite; }
@keyframes ny-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

/* ===== шапка на логотипе ===== */
html.ny .pages a.logo, html.ny .mbar .logo { position: relative; }
html.ny .pages a.logo::after, html.ny .mbar .logo::after {
  content: ""; position: absolute; pointer-events: none; background: var(--ny-hat) center / contain no-repeat; }
html.ny .pages a.logo::after { width: 21px; height: 17px; left: -7px; top: -11px; transform: rotate(-10deg); }
html.ny .mbar .logo::after { width: 18px; height: 15px; left: -6px; top: -9px; transform: rotate(-10deg); }
/* и на странице входа */
html.ny .login form { position: relative; }
html.ny .login form::after { content: ""; position: absolute; pointer-events: none; left: 50%; top: 13px; width: 40px; height: 33px;
  margin-left: -33px; transform: rotate(-8deg); background: var(--ny-hat) center / contain no-repeat; }
html.ny .ny-greet { text-align: center; color: var(--total); font-weight: 600; font-size: 14px; }

/* ===== снежные шапки на карточках ===== */
html.ny .kpi, html.ny .fblock, html.ny .login form { position: relative; }
html.ny .kpi::before, html.ny .fblock::before, html.ny .login form::before {
  content: ""; position: absolute; left: 9px; right: 9px; top: -5px; height: 9px; pointer-events: none; opacity: .92;
  background: var(--ny-cap) center / 100% 100% no-repeat; }
html.ny .fblock::before { top: -6px; }

/* ===== счётчик до Нового года ===== */
html.ny .ny-chip { margin-left: 10px; padding: 3px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  color: var(--total); background: var(--total-bg); border-color: transparent; cursor: pointer; }
html.ny .ny-chip:hover { border-color: var(--total); background: var(--total-bg); }
html.ny .ny-chip-m { display: none; }

/* ===== зимняя картинка внизу экрана, позади всего ===== */
html.ny .ny-scene { position: fixed; left: 0; right: 0; bottom: 0; height: 200px; z-index: -1; pointer-events: none; overflow: hidden; opacity: .8; }
html.ny .ny-scene svg { position: absolute; bottom: 0; display: block; }
/* цвета рисунка — классами: переменные внутри атрибута fill работают не во всех браузерах */
html.ny .ny-scene .fr { fill: var(--ny-fir); }
html.ny .ny-scene .sn { fill: var(--ny-snow); }
html.ny .ny-scene .ac { fill: var(--accent); }
html.ny .ny-scene .gd { fill: var(--total); }
html.ny .ny-scene .d1 { fill: rgba(var(--fx-rgb), .13); }
html.ny .ny-scene .d2 { fill: rgba(var(--fx-rgb), .2); }
html.ny .ny-firs { left: 2%; height: 130px; width: 260px; }
html.ny .ny-tree, html.ny .ny-lit { right: 2.5%; height: 190px; width: 146px; }
html.ny .ny-lit { animation: ny-blink 3s ease-in-out infinite; }
html.ny .ny-lit.two { animation-duration: 3.8s; animation-delay: 1s; }
html.ny .ny-drift { left: 0; width: 100%; height: 76px; }

/* загрузка данных */
html.ny .banner.fx-loading::before { content: "⛄ "; }

/* ===== телефон: всё статичное, медленно проявляются только две нити гирлянды ===== */
@media (max-width: 700px) {
  html.ny .ny-garland.ny-desk { display: none; }
  html.ny .mbar .ny-garland { top: 100%; height: 22px; }
  html.ny .ny-garland i { background-size: 59px 22px; }
  html.ny .ny-garland .a { animation-duration: 4s; }
  html.ny .ny-garland .b { animation-duration: 5s; }
  html.ny .ny-garland .c { animation: none; opacity: .75; }
  html.ny .ny-chip { display: none; }
  /* карточка в меню: отсчёт до Нового года и пожелание */
  html.ny .ny-chip-m { display: block; margin: 16px 0 0; padding: 12px 12px 11px; border-radius: 16px; text-align: center;
    border: 1px solid var(--line); background: linear-gradient(135deg, var(--total-bg), var(--card)); box-shadow: var(--shadow); }
  html.ny .ny-chip-m::before { content: ""; position: absolute; left: 10px; right: 10px; top: -5px; height: 9px; pointer-events: none; opacity: .92;
    background: var(--ny-cap) center / 100% 100% no-repeat; }
  html.ny .ny-chip-m .t { color: var(--total); font-weight: 700; font-size: 15px; }
  html.ny .ny-cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
  html.ny .ny-cd > div { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 6px 0 5px; min-width: 0; }
  html.ny .ny-cd b { display: block; font-size: 22px; line-height: 1.15; color: var(--text); font-variant-numeric: tabular-nums; }
  html.ny .ny-cd span { display: block; font-size: 11px; color: var(--muted); }
  html.ny .ny-chip-m .w { margin-top: 9px; font-size: 13px; color: var(--muted); }
  /* меню на телефоне: внизу — зимняя картинка, по ней идёт снег, карточки меню поверх всего этого */
  html.ny .mmenu > * { position: relative; z-index: 2; }
  html.ny .mmenu > .fx-dust { position: fixed; z-index: 1; }
  html.ny .ny-scene { height: 130px; opacity: .42; }  /* бледнее: на узком экране поверх картинки часто лежит текст */
  html.ny .ny-firs { left: 0; height: 78px; width: 156px; }
  html.ny .ny-tree, html.ny .ny-lit { right: 6px; height: 118px; width: 91px; }
  html.ny .ny-lit { animation: none; }
  html.ny .ny-lit.two { display: none; }
  html.ny .ny-drift { height: 38px; }
  html.ny .mmenu > .ny-mscene { position: fixed; z-index: 0; height: 150px; opacity: 1; }
  html.ny .ny-mscene .ny-firs { height: 92px; width: 184px; }
  html.ny .ny-mscene .ny-tree, html.ny .ny-mscene .ny-lit { right: 8px; height: 135px; width: 104px; }
  html.ny .ny-mscene .ny-lit { animation: ny-blink 3s ease-in-out infinite; }
  html.ny .ny-mscene .ny-lit.two { display: block; animation-duration: 3.8s; animation-delay: 1s; }
  html.ny .ny-mscene .ny-drift { height: 46px; }
  /* строка «кто вошёл / Выйти» — карточкой: на низком экране она ложится поверх картинки */
  html.ny .mmenu-user { margin-top: 10px; padding: 8px 8px 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
}

@media print { html.ny .ny-garland, html.ny .ny-scene, html.ny .ny-chip, .ny-salute { display: none !important; } }
