/* ═══ ЖИВОЕ НЕБО ПОВЕРХ НАРИСОВАННОГО ═════════════════════════
 *
 * Картинку рисует художник, движение добавляем мы. Слоёв семь,
 * каждый отвечает за одно, и все они привязаны к КАРТИНКЕ,
 * а не к рамке — иначе блик на реке уехал бы с неё на первом
 * же телефоне другой ширины.
 *
 * Ради этого картинка лежит не в <img object-fit:cover>, а внутри
 * сцены с её собственными пропорциями: сцена сама выбирает, чем
 * покрывать рамку — шириной или высотой, — а слои считают проценты
 * от неё. Тогда «луна на 56 %» означает луну, а не точку экрана.
 *
 * ПОЧЕМУ ЗДЕСЬ ВЕЗДЕ `!important`. Woodmart красит и раскладывает
 * всё подряд, и спор с ней решается силой, а не порядком файлов:
 * наш файл встаёт в очередь на `wp_head` рано, тема позже. На этом
 * уже погорели прилипшая кнопка «назад» и серые кнопки окна счёта.
 * Правило записано в CLAUDE.md: всё, что мы рисуем поверх темы,
 * помечается с первой строки, а не после снимка от владельца.
 */

/*
 * ШАПКА — КОЛОНКА ФЛЕКСА, И ЭТО ГЛАВНОЕ ЗДЕСЬ.
 *
 * `.bm-hero` объявлена `display:flex; flex-direction:column`. Небо
 * с `position:relative` встало в эту колонку обычным блоком, а всё
 * его содержимое позиционировано абсолютно — то есть высота его
 * содержимого равна нулю. Небо схлопнулось в полоску, шапка осталась
 * белой, и ни одной ошибки нигде.
 *
 * Прежнее векторное небо было `position:absolute; inset:0` — я это
 * потерял при переносе. Признак беды в браузере один: у `.bmsky`
 * высота 0 при живой шапке.
 */
.bmsky{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  overflow:hidden !important;
  isolation:isolate !important;
  /*
   * `container-type:size` работает, ТОЛЬКО когда у элемента есть
   * определённый размер по обеим осям. У схлопнутого неба его нет,
   * и запрос ниже не срабатывал бы никогда — вторая половина той же
   * беды.
   */
  container-type:size;
  /*
   * ПЕРВЫЙ КАДР — РАЗМЫТАЯ КОПИЯ ТОЙ ЖЕ КАРТИНКИ.
   *
   * Она уезжает в разметку строкой `data:` (140–220 байт) и потому
   * видна ДО единого запроса. Однотонный фон соврал бы цветом,
   * а векторная заготовка — всем сразу: три захода на неё владелец
   * забраковал, и правильно.
   *
   * `blur` поверх 32 пикселей не нужен: растянутые до ширины экрана,
   * они и так размыты самим масштабированием.
   */
  background:#10131f var(--lqip, none) center/cover no-repeat !important;
  /* Координаты сняты с самой картинки, поэтому живут здесь,
     а не разбросаны по правилам. Меняется набор — меняются они. */
  --moon-x:56%; --moon-y:22%;
  --river-x:27%; --river-y:73%; --river-w:19%; --river-h:24%;
  --lamp-y:58%;
}

/* Сцена: пропорции картинки, покрывает рамку целиком. */
.bmsky__stage{
  position:absolute !important;
  top:50% !important; left:50% !important; translate:-50% -50% !important;
  aspect-ratio:1376/768 !important;
  height:100% !important; width:auto !important;
  animation:bmsky-ken 64s ease-in-out infinite alternate !important;
  transform-origin:42% 62% !important;   /* мост, а не центр кадра */
}
@container (min-aspect-ratio: 1376/768){
  .bmsky__stage{ width:100% !important; height:auto !important; }
}
/* Размах уменьшен с 5,5 до 4 %: на широком экране пять с половиной
   заметны как движение, а не как жизнь в кадре. */
@keyframes bmsky-ken{ from{scale:1.005;} to{scale:1.045;} }

.bmsky__art{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important; display:block !important;
  /* Тема и оптимизаторы любят навесить `max-width` и `height:auto`
     на любую картинку. Здесь это дало бы сцену не по размеру рамки. */
  max-width:none !important; max-height:none !important;
  object-fit:cover !important;
}
.bmsky__stage > div{ position:absolute !important; pointer-events:none !important; }

/* ── 1. Воздух: светлая пелена идёт поперёк неба ──────────────
   Облака нарисованы и с места не сдвинутся; движется дымка
   между ними — этого хватает, чтобы небо перестало быть стоп-кадром. */
.bmsky__haze{
  inset:0 0 42% 0 !important; mix-blend-mode:screen !important; opacity:.5 !important;
  background:
    radial-gradient(46% 62% at 18% 40%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(38% 54% at 72% 26%, rgba(255,255,255,.12), transparent 72%) !important;
  animation:bmsky-haze 96s linear infinite alternate !important;
}
@keyframes bmsky-haze{ from{transform:translateX(-7%);} to{transform:translateX(7%);} }

/* ── 2. Ореол луны ─────────────────────────────────────────── */
.bmsky__moon{
  left:var(--moon-x) !important; top:var(--moon-y) !important;
  width:0 !important; height:0 !important; opacity:0 !important;
  mix-blend-mode:screen !important;
}
.bmsky[data-t="night"][data-w="clear"] .bmsky__moon{
  opacity:1 !important;
  box-shadow:0 0 90px 46px rgba(196,220,255,.22), 0 0 34px 14px rgba(226,238,255,.2) !important;
  animation:bmsky-moon 15s ease-in-out infinite alternate !important;
}
@keyframes bmsky-moon{ from{opacity:.62;} to{opacity:1;} }

/* ── 3. Звёзды: мерцают только те, что мы добавили ─────────── */
.bmsky__stars{
  inset:0 0 58% 0 !important; opacity:0 !important; mix-blend-mode:screen !important;
  background-image:
    radial-gradient(1.5px 1.5px at 11% 24%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 24% 12%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 38% 31%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 47% 9%,  #fff, transparent),
    radial-gradient(1.4px 1.4px at 66% 20%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 79% 36%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 88% 14%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 95% 29%, #fff, transparent) !important;
}
.bmsky[data-t="night"] .bmsky__stars{ opacity:1 !important; animation:bmsky-tw 7s ease-in-out infinite alternate !important; }
.bmsky[data-t="night"][data-w="cloudy"] .bmsky__stars{ opacity:0 !important; }
@keyframes bmsky-tw{ from{opacity:.3;} to{opacity:1;} }

/* ── 4. Фонари и окна дышат ────────────────────────────────── */
.bmsky__lamps{
  inset:38% 0 26% 0 !important; opacity:0 !important; mix-blend-mode:screen !important;
  background:
    radial-gradient(9% 22% at 10% 62%, rgba(255,198,112,.5), transparent 70%),
    radial-gradient(8% 20% at 19% 60%, rgba(255,198,112,.42), transparent 72%),
    radial-gradient(8% 20% at 32% 60%, rgba(255,198,112,.4),  transparent 72%),
    radial-gradient(8% 20% at 45% 60%, rgba(255,198,112,.42), transparent 72%),
    radial-gradient(9% 22% at 53% 60%, rgba(255,198,112,.44), transparent 70%),
    radial-gradient(16% 30% at 72% 40%, rgba(255,190,104,.34), transparent 74%),
    radial-gradient(13% 26% at 88% 44%, rgba(255,190,104,.28), transparent 74%),
    radial-gradient(12% 26% at 15% 34%, rgba(255,190,104,.3),  transparent 74%) !important;
  animation:bmsky-lamp 9s ease-in-out infinite alternate !important;
}
.bmsky[data-t="night"] .bmsky__lamps{ opacity:1 !important; }
.bmsky[data-t="dusk"]  .bmsky__lamps{ opacity:.6 !important; }
@keyframes bmsky-lamp{ from{opacity:.55;} to{opacity:1;} }

/* ── 5. Блик по реке ───────────────────────────────────────────
   Коробка посажена ровно на реку и повёрнута по её течению.
   Внутри едет светлая полоса — на воде это и есть блик. */
.bmsky__glint{
  left:var(--river-x) !important; top:var(--river-y) !important;
  width:var(--river-w) !important; height:var(--river-h) !important;
  overflow:hidden !important; mix-blend-mode:screen !important; opacity:.75 !important;
}
.bmsky__glint::before{
  content:"" !important; position:absolute !important; inset:-40% !important;
  background:linear-gradient(127deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%) !important;
  filter:blur(5px) !important;
  animation:bmsky-glint 11s ease-in-out infinite !important;
}
@keyframes bmsky-glint{
  0%,100%{ transform:translate3d(-38%,-30%,0); }
  50%    { transform:translate3d(34%,26%,0); }
}
.bmsky[data-w="cloudy"] .bmsky__glint{ opacity:.34 !important; }
.bmsky[data-w="rain"] .bmsky__glint,
.bmsky[data-w="fog"]  .bmsky__glint{ opacity:.18 !important; }

/* ── 6. Дождь и снег ───────────────────────────────────────────
   Капля высотой во всю сцену, а сама черта нарисована фоном
   у её верха. Так `translateY(100%)` означает «через весь кадр»,
   а не «на свою длину»: проценты в transform считаются ОТ САМОГО
   элемента, и маленькая капля пролетала бы только свою длину.

   Наклон дождя задан поворотом всей коробки — тогда капли и падают
   вдоль наклона, а не висят вертикально в косом полёте. */
.bmsky__drops{ inset:-20% -14% !important; overflow:hidden !important; }
.bmsky[data-w="rain"] .bmsky__drops{ transform:rotate(8deg) !important; }
.bmsky__drops i{
  position:absolute !important; display:block !important;
  top:0 !important; height:100% !important;
  background-repeat:no-repeat !important; will-change:transform;
}
.bmsky__drops .dp{
  width:1.5px !important;
  background-image:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92)) !important;
  background-size:100% var(--len,34px) !important; background-position:50% 0 !important;
  animation:bmsky-fall linear infinite !important;
}
.bmsky__drops .fl{
  width:var(--s,4px) !important;
  background-image:radial-gradient(circle, #fff 0 46%, rgba(255,255,255,0) 62%) !important;
  background-size:var(--s,4px) var(--s,4px) !important; background-position:50% 0 !important;
  animation:bmsky-flake linear infinite !important;
}
@keyframes bmsky-fall{
  from{ transform:translate3d(0,-100%,0); }
  to  { transform:translate3d(-34px,100%,0); }
}
@keyframes bmsky-flake{
  0%  { transform:translate3d(0,-100%,0); }
  50% { transform:translate3d(22px,0%,0); }
  100%{ transform:translate3d(-14px,100%,0); }
}

/* Ливень слегка глушит картинку — как настоящий за окном. */
.bmsky[data-w="rain"] .bmsky__art{ filter:saturate(.86) brightness(.94) !important; }
.bmsky[data-w="snow"] .bmsky__art{ filter:saturate(.9) brightness(1.03) !important; }

/* ── 7. Туман: лежит в долине и дышит ──────────────────────── */
.bmsky__fog{
  inset:34% -6% 0 -6% !important; opacity:0 !important;
  background:
    linear-gradient(180deg, transparent 0%, rgba(226,234,240,.34) 44%, rgba(226,234,240,.6) 100%),
    radial-gradient(52% 42% at 30% 62%, rgba(255,255,255,.36), transparent 72%),
    radial-gradient(44% 36% at 74% 74%, rgba(255,255,255,.3), transparent 74%) !important;
  filter:blur(2px) !important;
}
.bmsky[data-w="fog"] .bmsky__fog{ opacity:1 !important; animation:bmsky-fog 52s ease-in-out infinite alternate !important; }
@keyframes bmsky-fog{
  from{ transform:translate3d(-3%,1%,0) scaleX(1); }
  to  { transform:translate3d(3%,-1%,0) scaleX(1.08); }
}

/* ── подложка под приветствие ──────────────────────────────── */
.bmsky__scrim{
  position:absolute !important; inset:auto 0 0 0 !important;
  height:46% !important; z-index:2 !important; pointer-events:none !important;
  background:linear-gradient(180deg, transparent, rgba(8,10,18,.55)) !important;
}

/* ── СИНЯЯ КРОМКА СВЕРХУ — ТОЛЬКО В ПРИЛОЖЕНИИ ────────────────
 *
 * В обёртке полоса над экраном (часы, сеть, батарея) покрашена
 * в `#517dfc` настройкой самого приложения, и под небо её не подвинуть.
 * Поэтому верх шапки красим тем же цветом и растворяем его в картинке:
 * иначе поперёк экрана идёт чужая синяя черта.
 *
 * В браузере полосы часов нет вовсе, и там кромка только отнимала бы
 * место у картинки. Условие — класс `bm-in-app` на `<html>`, который
 * ставит PART 50: признак «мы в приложении» считается ровно в одном
 * месте, и спрашивать строку браузера здесь нельзя — ответ запёкся бы
 * в общий кэш и достался следующему.
 */
html.bm-in-app .bmsky::after{
  content:"" !important; position:absolute !important; z-index:3 !important;
  inset:0 0 auto 0 !important; height:74px !important; pointer-events:none !important;
  /* Сплошного цвета ровно на высоту полосы часов, дальше быстрый
     переход в картинку. Числа взяты у прежнего неба — они подобраны
     по живому приложению, и подбирать их заново значило бы делать
     ту же работу второй раз. */
  background:linear-gradient(180deg,
    var(--bm-blue,#517dfc) 0,
    var(--bm-blue,#517dfc) 30px,
    rgba(var(--bm-blue-rgb,81,125,252), .5) 50px,
    rgba(var(--bm-blue-rgb,81,125,252), 0) 74px) !important;
}

@media (prefers-reduced-motion: reduce){
  .bmsky *{ animation:none !important; }
}