/* AURIX VPN — зимний слой.
   Всё здесь работает только при атрибуте data-winter на <html>, который
   ставит boot.js по календарю (или ?winter=light|medium|off для проверки).
   Без атрибута файл ничего не меняет — весной слой снимается сам.

   light  — морозный фон, иней на логотипе, редкий снег (winter.js);
   medium — то же плюс сугробы у шапки и подвала, снежные шапки на главных
            кнопках, снежинка вместо точки в плашке hero, снег гуще. */

/* ---------------------------------------------------------- токены */

:root[data-winter] {
  --drift-front: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 22' preserveAspectRatio='none'%3E%3Cpath d='M0 22V14C14 14 22 6 40 6S66 13 82 13 102 9 116 9 138 15 152 15 176 3 198 3 228 12 246 12 266 8 280 8 304 14 320 14V22Z'/%3E%3C/svg%3E");
  --blob-1: rgba(160, 225, 255, .13);
  --blob-2: rgba(1, 170, 212, .1);
  --blob-3: rgba(170, 190, 255, .09);

  --snow-rgb: 235, 245, 255;
  --snow-cap: #eef6ff;
  --snow-cap-shade: rgba(150, 200, 230, .55);
  --snow-shade: #a9c6dc;
}

:root[data-winter][data-theme="light"] {
  --blob-1: rgba(150, 215, 245, .3);
  --blob-2: rgba(1, 170, 212, .18);
  --blob-3: rgba(170, 190, 255, .2);

  --snow-rgb: 140, 185, 215;
  --snow-cap: #ffffff;
  --snow-cap-shade: rgba(120, 165, 200, .45);
  --snow-shade: #aecbe2;
}

/* ---------------------------------------------------------- снег (canvas из winter.js) */

/* Над контентом, но под шапкой (50) и модалками (100); клики проходят насквозь. */
.snow-layer {
  position: fixed; inset: 0; z-index: 40;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* Кнопка-снежинка в шапке (показывает winter.js). Снег включён — иконка
   в акцентном цвете, выключен — приглушена и перечёркнута. */
.snow-toggle[aria-pressed="true"] { color: var(--accent-2); }
.snow-toggle[aria-pressed="false"] svg { opacity: .55; }
.snow-toggle { position: relative; }
.snow-toggle[aria-pressed="false"]::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 22px; height: 1.8px; border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------------------------------------------------------- иней на логотипе */

:root[data-winter] .brand-mark {
  filter: drop-shadow(0 0 8px rgba(200, 235, 255, .55)) drop-shadow(0 4px 12px rgba(2, 215, 243, .3));
}
:root[data-winter][data-theme="light"] .brand-mark {
  filter: drop-shadow(0 0 6px rgba(120, 190, 230, .55)) drop-shadow(0 4px 12px rgba(2, 215, 243, .3));
}

/* ======================================================== medium */

/* Сугробы — SVG-силуэты в маске, цвет и объём даёт градиент под ней,
   поэтому оттенки следуют теме. Края плиток совпадают по высоте —
   повтор по горизонтали без шва. */

/* Под шапкой (на сайте — .header, в кабинете — .topbar): снежный карниз
   с неровным краем и редкими сосульками. */
:root[data-winter="medium"] :is(.header, .topbar)::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: 14px; pointer-events: none;
  background: linear-gradient(var(--snow-cap) 35%, var(--snow-shade));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V5C192 5 188 7 182 7S173 4.5 166 4.5 158 6.5 152 6.5L151 11Q150 13 149 11L148 6.4C140 6 134 3.5 126 3.5S114 6 106 6 95 4 88 4 79 7 72 7L71.2 9.5Q70.5 11 69.8 9.5L69 7C62 6.8 58 4.2 50 4.2S38 6.2 30 6.2 18 4 10 4C5 4 3 5 0 5Z'/%3E%3C/svg%3E") 0 0 / 200px 14px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M0 0H200V5C192 5 188 7 182 7S173 4.5 166 4.5 158 6.5 152 6.5L151 11Q150 13 149 11L148 6.4C140 6 134 3.5 126 3.5S114 6 106 6 95 4 88 4 79 7 72 7L71.2 9.5Q70.5 11 69.8 9.5L69 7C62 6.8 58 4.2 50 4.2S38 6.2 30 6.2 18 4 10 4C5 4 3 5 0 5Z'/%3E%3C/svg%3E") 0 0 / 200px 14px repeat-x;
  opacity: .92;
}

/* Над подвалом: два ряда холмов — дальний бледнее и другого шага,
   чтобы повтор не читался. ::before рисуется раньше, поэтому он дальний. */
:root[data-winter="medium"] .footer { position: relative; }
:root[data-winter="medium"] .footer::before,
:root[data-winter="medium"] .footer::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  pointer-events: none;
}
:root[data-winter="medium"] .footer::before {
  height: 26px;
  background: linear-gradient(var(--snow-shade), var(--snow-cap));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V12C18 12 28 4 50 4S80 14 100 14 126 7 146 7 176 16 196 16 222 9 240 9C250 9 254 12 260 12V26Z'/%3E%3C/svg%3E") 70px 0 / 260px 26px repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26V12C18 12 28 4 50 4S80 14 100 14 126 7 146 7 176 16 196 16 222 9 240 9C250 9 254 12 260 12V26Z'/%3E%3C/svg%3E") 70px 0 / 260px 26px repeat-x;
  opacity: .45;
}
:root[data-winter="medium"] .footer::after {
  height: 22px;
  background: linear-gradient(var(--snow-cap) 30%, var(--snow-shade));
  -webkit-mask: var(--drift-front) 0 0 / 320px 22px repeat-x;
          mask: var(--drift-front) 0 0 / 320px 22px repeat-x;
  opacity: .92;
}

/* Снежная шапка на главных кнопках (hero, шапка, финальный призыв).
   В модалке и кабинете кнопки не трогаем. */
:root[data-winter="medium"] :is(.header, .hero, .cta) .btn-primary { position: relative; }
:root[data-winter="medium"] :is(.header, .hero, .cta) .btn-primary::before {
  content: ""; position: absolute; top: -5px; left: 8px; right: 8px;
  height: 11px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 11' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 6.5C0 2 3 0 8 0h84c5 0 8 2 8 6.5 0 1.2-1.4 1.8-3 1.4-2.2-.5-3.3.6-4.6 1.2-1.6.7-3-1-5.2-.9-2.6.1-3.6 2.7-6.6 2.7-2.6 0-3-2.5-5.6-2.4-3 .1-4.5.8-8 .7-3.6-.1-4.2-1-7.4-.9-2.4.1-3.4 1.6-5.6 1.6-2.4 0-2.8-1.8-5.6-1.6-3.2.2-4.4.9-8.2.8-3.4-.1-4.6-1-7.2-.8-2 .1-3 1.5-5.2 1.5-2.4 0-2.6-1.6-5-1.4C3 8.8 0 9 0 6.5z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1.5px var(--snow-cap-shade));
}

/* Снежинка вместо пульсирующей точки в плашке hero. */
:root[data-winter="medium"] .hero .pill-dot {
  width: 13px; height: 13px; border-radius: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302d7f3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M3.3 7l17.4 10M3.3 17L20.7 7M9 3.5l3 2.5 3-2.5M9 20.5l3-2.5 3 2.5M3.6 10.6l3.7-.6-1.3-3.6M20.4 13.4l-3.7.6 1.3 3.6M6 17.6l1.3-3.6-3.7-.6M18 6.4l-1.3 3.6 3.7.6'/%3E%3C/svg%3E") center / contain no-repeat;
  box-shadow: none;
  animation: winterSpin 12s linear infinite;
}
@keyframes winterSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  :root[data-winter="medium"] .hero .pill-dot { animation: none; }
}

/* ======================================================== кабинет */

/* В кабинете работают, а не любуются: снег реже (winter.js) и идёт под
   верхней панелью, а снежных шапок на кнопках нет — их там слишком много.
   Остаются карниз под панелью и сугроб над нижним меню на телефоне. */
.cabinet .snow-layer { z-index: 15; }

/* Нижнее меню видно только на узких экранах (styles.css), там и сугроб. */
:root[data-winter="medium"] .cabinet .tabbar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: 14px; pointer-events: none;
  background: linear-gradient(var(--snow-cap) 30%, var(--snow-shade));
  -webkit-mask: var(--drift-front) 0 0 / 240px 14px repeat-x;
          mask: var(--drift-front) 0 0 / 240px 14px repeat-x;
  opacity: .9;
}