/* ==========================================================================
   ОСЕННЕЕ ОФОРМЛЕНИЕ — листопад на главной и листики в шапке
   --------------------------------------------------------------------------
   Листья и сердечки — сами нарисованы в SVG линией и заливкой в assets/js/autumn.js.
   Цвет берётся из палитры ниже: красный, жёлтый, оранжевый и полутона
   (охра, корица, медный, терракота, тыква, медовая оливка). Каждый элемент
   получает свой оттенок случайно, со своим сдвигом тона и яркости.

   Файл подключается только на главной: листопад живёт на своей странице,
   а листики в шапке выводятся разметкой только там (см. index.php).
   ========================================================================== */

/* Набор цветов: красный, жёлтый, оранжевый и полутона — от охры и корицы
   до пшеничного и пыльной розы. Каждый лист получает свой оттенок. */
/*
 * Палитра лежит на <body>, а не на :root: файл подключается после style.css,
 * и здесь перекрываются только собственные имена — прежние переменные
 * системы движка остаются нетронутыми.
 */
body {
  /* Каждый цвет — основа для двух тонов линейного градиента листа */
  --sk-autumn-1: #cf3a2c;   /* красный            */
  --sk-autumn-2: #e2483a;   /* красный тёплый     */
  --sk-autumn-3: #b8402f;   /* кирпичный красный  */
  --sk-autumn-4: #e8a01c;   /* жёлтый             */
  --sk-autumn-5: #f2c14e;   /* золотой            */
  --sk-autumn-6: #d9b23f;   /* медово-жёлтый      */
  --sk-autumn-7: #e2742a;   /* оранжевый          */
  --sk-autumn-8: #f08a3c;   /* оранжевый светлый  */
  --sk-autumn-9: #c2601f;   /* охра               */
  --sk-autumn-10: #a85a2b;  /* корица             */
  --sk-autumn-11: #b35a3c;  /* терракота          */
  --sk-autumn-12: #c98a5a;  /* карамель           */
  --sk-autumn-13: #d4a05a;  /* пшеничный          */
  --sk-autumn-14: #9c6b34;  /* медный             */
  --sk-autumn-15: #a5451f;  /* тыква              */
  --sk-autumn-16: #b8873a;  /* латунь             */
  --sk-autumn-17: #8f4a2e;  /* ржавчина           */
  --sk-autumn-18: #d16a5a;  /* коралловый полутон */
  --sk-autumn-19: #d98b73;  /* пыльная роза       */
  --sk-autumn-20: #caa06b;  /* медовая оливка     */
}

/* ── Слой, по которому летят листья ──────────────────────────────────────── */
/*
 * Слой стоит поверх страницы, но не мешает работе: мышь и палец проходят
 * сквозь него. z-index ниже шапки (1030) и попапов (1040+), поэтому
 * листья летят за шапкой, а не поверх неё.
 */
.sk-leaves {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  overflow: hidden;
  /* Свой слой отрисовки: анимации сотни листьев не дёргают остальную страницу */
  contain: strict;
}

.sk-leaf {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  line-height: 0;
  will-change: transform, opacity;
}

/*
 * Ширина листа задаётся в JS переменной --sk-size и дублируется полями:
 * .sk-leaf стоит на месте (0,0), а летит и поворачивается через transform
 * в скрипте, поэтому rotate не раздувает габариты элемента.
 */
.sk-leaf > span { width: var(--sk-size, 24px) !important; }

.sk-leaf svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/*
 * Мягкая тень и лёгкая подсветка изнутри придают листу объём —
 * на светлом фоне страницы он не выглядит плоской наклейкой.
 */
.sk-leaf svg .leaf-shape {
  filter: drop-shadow(0 1px 2px rgba(90, 47, 24, .16));
}

/*
 * Листопад по экрану — только на главной. Остальные страницы подключают
 * этот же файл ради листьев в шапке, но слоя листьев у них нет.
 */
html:not([data-autumn-fall]) .sk-leaves { display: none; }

@media (prefers-reduced-motion: reduce) {
  /* Движение отключаем — оставляем красоту без анимации */
  .sk-leaves { display: none; }
}

/* ── Листья в шапке ──────────────────────────────────────────────────────── */
/*
 * Осенние листья живут на каждой странице, потому что шапка у сайта одна.
 *
 * Листья стоят ПОВЕРХ шапки (z-index: 1031) и прямо под надписью «Студия
 * высокой печати»: их верхушки заходят под сам текст надписи, а хвостики
 * свисают на шапку и заходят на полосу меню. Это декоративная ветка,
 * прилипшая к шапке.
 *
 * Слой не держит мышь (pointer-events: none): бренд, меню и иконки
 * нажимаются сквозь листья.
 *
 * Верх листьев считается от надписи, а не от левого или правого края:
 * точки считает скрипт (js/autumn.js, buildUnderBrand), поэтому ветка
 * всегда начинается ровно под надписью.
 */
.head-leaves {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  /* Ниже шапки листья уходят на 34 px против картинок первого экрана */
  height: calc(100% + 34px);
  /* Точка отсчёта листьев — левый верхний угол слоя, без полей */
  box-sizing: border-box;
  pointer-events: none;
  /* Поверх строки бренда и полосы меню */
  z-index: 1031;
  overflow: hidden;
}

.head-leaves .ha-leaf {
  position: absolute;
  line-height: 0;
  transform-origin: 50% 50%;
  animation: ha-sway 7s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(64, 28, 42, .22));
}

.head-leaves .ha-leaf svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.head-leaves .ha-leaf svg .leaf-shape { filter: none; }

/*
 * ── Телефон: шапка ниже на 20% ────────────────────────────────────────────
 *
 * Было 74 px:
 *     57 px строка бренда (11 сверху + 42 бренд + 3 снизу + 1 бордер)
 *    + 17 px строка «Минимальный заказ» (9 текст + 4 отступ + 3 + 1)
 * Минус 20% — это 15 px. Снимаем отступы, а сами элементы не трогаем,
 * и опускаем строку «Минимальный заказ» вплотную к бордеру:
 *     11 → 3 px сверху строки бренда;
 *      3 → 0 px снизу строки бренда;
 *      4 → 0 px отступ строки «Минимальный заказ».
 * Бренд, бургер, номер и иконки остаются прежнего размера. Итог — 59 px.
 */
@media (max-width: 767.98px) {
  .head-mobile .head-main { padding: 3px 0 0; }
  .head-min-note { margin-bottom: 0; padding-bottom: 0; }
}

@keyframes ha-sway {
  0%, 100% { transform: rotate(var(--ha-rot, 0deg)) translateY(0); }
  50%     { transform: rotate(calc(var(--ha-rot, 0deg) + 3.5deg)) translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .head-leaves .ha-leaf { animation: none; }
}