/* Анимации лендинга (первый экран, солнышки во 2-м блоке и «Поздравлялочке»).
   Тайминги и амплитуды сняты с Rive-исходника
   «Моё солнышко 25 лет — Анимация на входе» (артборд 460x1017, Timeline 1, 5 с, 60 fps).
   Замеры: шарики — подъём 51/38/31 px при высоте ~200 px (17–26 % высоты элемента),
   снос по горизонтали 8–9 px (11–12 % ширины), цикл 5 с;
   пламя — размах высоты 26–50 %, наклон до ±6°, цикл ~2 с (слои огня в вёрстке штатные);
   искры — видимы с 36 % до 84 % цикла, пик на 60 % (цикл ускорен до 2.5 с против 5 с в исходнике). */

/* --- Шарики: подъём с боковым сносом --- */
@-webkit-keyframes ms-balloon-float {
  0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  50% { -webkit-transform: translate3d(var(--ms-float-x), var(--ms-float-y), 0); transform: translate3d(var(--ms-float-x), var(--ms-float-y), 0); }
}
@keyframes ms-balloon-float {
  0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
  50% { -webkit-transform: translate3d(var(--ms-float-x), var(--ms-float-y), 0); transform: translate3d(var(--ms-float-x), var(--ms-float-y), 0); }
}

.sectionOne__balloon-item {
  --ms-float-x: 0;
  --ms-float-y: -18%;
  -webkit-animation: ms-balloon-float 5s ease-in-out infinite;
          animation: ms-balloon-float 5s ease-in-out infinite;
  will-change: transform;
}
/* Левая пара (1 и 2) качается в такт: общий период, сдвиг фазы всего 0.35 с.
   Разная скорость внутри цикла задана кривой, а не длительностью, — иначе
   шарики за минуту расползлись бы в противофазу. */
.sectionOne__balloon-1 {
  --ms-float-x: -12%; --ms-float-y: -18%;
  -webkit-animation-timing-function: cubic-bezier(.42, 0, .58, 1);
          animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
.sectionOne__balloon-2 {
  --ms-float-x: 6%; --ms-float-y: -14%;
  -webkit-animation-delay: -0.35s;
          animation-delay: -0.35s;
  -webkit-animation-timing-function: cubic-bezier(.37, 0, .63, 1);
          animation-timing-function: cubic-bezier(.37, 0, .63, 1);
}
/* Розовый шарик справа проходит поверх мерцающих искр: .sectionOne__decor идёт
   в разметке последним и по умолчанию перекрывает его. Заднее облако при этом
   не трогаем — с шариком оно пересекается только на 1.9 % (кончик нити в нижней
   фазе), а подъём облака над .sectionOne__decor скрыл бы одну из искр на мобильном. */
.sectionOne__balloon-3 { z-index: 1; }

.sectionOne__balloon-3 {
  --ms-float-x: 11%; --ms-float-y: -26%;
  -webkit-animation-duration: 5.6s;
          animation-duration: 5.6s;
  -webkit-animation-delay: -3.1s;
          animation-delay: -3.1s;
}

/* --- Объёмные звёзды: покачивание с поворотом --- */
@-webkit-keyframes ms-star-bob {
  0%, 100% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(1); transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { -webkit-transform: translate3d(0, var(--ms-bob-y), 0) rotate(var(--ms-bob-a)) scale(var(--ms-bob-s)); transform: translate3d(0, var(--ms-bob-y), 0) rotate(var(--ms-bob-a)) scale(var(--ms-bob-s)); }
}
@keyframes ms-star-bob {
  0%, 100% { -webkit-transform: translate3d(0, 0, 0) rotate(0deg) scale(1); transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { -webkit-transform: translate3d(0, var(--ms-bob-y), 0) rotate(var(--ms-bob-a)) scale(var(--ms-bob-s)); transform: translate3d(0, var(--ms-bob-y), 0) rotate(var(--ms-bob-a)) scale(var(--ms-bob-s)); }
}

.sectionOne__stars-item {
  --ms-bob-y: -18%;
  --ms-bob-a: 16deg;
  --ms-bob-s: 1.08;
  -webkit-animation: ms-star-bob 5s ease-in-out infinite;
          animation: ms-star-bob 5s ease-in-out infinite;
  will-change: transform;
}
.sectionOne__stars-2 {
  --ms-bob-a: -14deg;
  -webkit-animation-duration: 5.6s;
          animation-duration: 5.6s;
  -webkit-animation-delay: -2.2s;
          animation-delay: -2.2s;
}
.sectionOne__stars-3 {
  --ms-bob-y: -15%; --ms-bob-a: 13deg;
  -webkit-animation-duration: 5.2s;
          animation-duration: 5.2s;
  -webkit-animation-delay: -4.4s;
          animation-delay: -4.4s;
}
.sectionOne__stars-4 {
  --ms-bob-a: -18deg;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s;
}

/* --- Пламя свечей: пульсация высоты и наклон от основания.
   Слои огня и их координаты — штатные, из вёрстки (.sectionOne__fire-*),
   мы только добавляем движение. --- */
.sectionOne__fire-item {
  /* Анимация с will-change делает слой контекстом наложения, из-за чего z-index:3
     его картинки (правило .sectionOne__img img) перестаёт действовать наружу и
     огонёк уходит под цифру «25». Поднимаем сам слой в тот же уровень. */
  z-index: 3;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-animation: ms-flame 2s ease-in-out infinite;
          animation: ms-flame 2s ease-in-out infinite;
  will-change: transform;
}
.sectionOne__fire-2 {
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.sectionOne__fire-3 {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
  -webkit-animation-delay: -1.3s;
          animation-delay: -1.3s;
}

@-webkit-keyframes ms-flame {
  0%, 100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); opacity: 1; }
  20% { -webkit-transform: rotate(5deg) scale(1.06, 1.17); transform: rotate(5deg) scale(1.06, 1.17); opacity: 1; }
  45% { -webkit-transform: rotate(-2deg) scale(0.94, 0.87); transform: rotate(-2deg) scale(0.94, 0.87); opacity: 0.92; }
  70% { -webkit-transform: rotate(-5deg) scale(1.05, 1.12); transform: rotate(-5deg) scale(1.05, 1.12); opacity: 1; }
  85% { -webkit-transform: rotate(2deg) scale(0.96, 0.93); transform: rotate(2deg) scale(0.96, 0.93); opacity: 0.96; }
}
@keyframes ms-flame {
  0%, 100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); opacity: 1; }
  20% { -webkit-transform: rotate(5deg) scale(1.06, 1.17); transform: rotate(5deg) scale(1.06, 1.17); opacity: 1; }
  45% { -webkit-transform: rotate(-2deg) scale(0.94, 0.87); transform: rotate(-2deg) scale(0.94, 0.87); opacity: 0.92; }
  70% { -webkit-transform: rotate(-5deg) scale(1.05, 1.12); transform: rotate(-5deg) scale(1.05, 1.12); opacity: 1; }
  85% { -webkit-transform: rotate(2deg) scale(0.96, 0.93); transform: rotate(2deg) scale(0.96, 0.93); opacity: 0.96; }
}

/* --- Солнышки: лёгкое покачивание вокруг своей оси.
   Размах подъёма задаётся --ms-sun-bob в процентах высоты самого слоя,
   поэтому у слоя-спрайта в «Поздравлялочке» он свой. --- */
@-webkit-keyframes ms-sun-sway {
  0%, 100% { -webkit-transform: translate3d(0, 0, 0) rotate(-4deg); transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { -webkit-transform: translate3d(0, var(--ms-sun-bob), 0) rotate(4deg); transform: translate3d(0, var(--ms-sun-bob), 0) rotate(4deg); }
}
@keyframes ms-sun-sway {
  0%, 100% { -webkit-transform: translate3d(0, 0, 0) rotate(-4deg); transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { -webkit-transform: translate3d(0, var(--ms-sun-bob), 0) rotate(4deg); transform: translate3d(0, var(--ms-sun-bob), 0) rotate(4deg); }
}

/* Второй экран: солнышко — самостоятельная картинка, качаем её целиком. */
.sectionTwo__title-img-1 {
  --ms-sun-bob: -3%;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-animation: ms-sun-sway 5s ease-in-out infinite;
          animation: ms-sun-sway 5s ease-in-out infinite;
  will-change: transform;
}

/* «Поздравлялочка»: в макете солнышко запечено в общий спрайт декора вместе
   с сердечком, звездой и серпантином. Спрайт разложен на два слоя с тем же
   холстом — s6-decor*-nosun (остальной декор) и s6-decor*-sunonly (солнышко),
   поэтому слой ложится поверх один в один и координаты не нужны.
   transform-origin — центр солнышка в процентах холста спрайта
   (десктоп 1449x1439, мобайл 384x622), у брейкпоинтов он разный. */
.sectionSix__sun {
  --ms-sun-bob: -0.5%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-transform-origin: 90.9% 40.8%;
      -ms-transform-origin: 90.9% 40.8%;
          transform-origin: 90.9% 40.8%;
  -webkit-animation: ms-sun-sway 5s ease-in-out infinite;
          animation: ms-sun-sway 5s ease-in-out infinite;
  will-change: transform;
}
@media (max-width: 480px) {
  .sectionSix__sun {
    --ms-sun-bob: -1%;
    -webkit-transform-origin: 65.9% 79.0%;
        -ms-transform-origin: 65.9% 79.0%;
            transform-origin: 65.9% 79.0%;
  }
}

/* --- Свечение и лучи вокруг солнышек.
   Оба слоя — псевдоэлементы под картинкой солнышка (z-index: -1), поэтому
   качаются вместе с ней и ничего не добавляют в разметку.
   ::before — мягкое радиальное свечение, «дышит» в такт покачиванию (5 с).
   ::after  — лучи: repeating-conic-gradient, маской вырезана сердцевина под
   диском солнышка и растушёван внешний край; вращается сам по себе, 34 с.
   Нули альфы в градиентах прописаны тем же цветом, а не transparent: иначе
   в части браузеров кромка уходит в серый.
   Геометрия: коробка обоих слоёв — квадрат со стороной в два диаметра
   солнышка, отцентрованный по нему, поэтому closest-side считает от его края. --- */
@-webkit-keyframes ms-sun-glow {
  0%, 100% { opacity: 0.78; -webkit-transform: scale(0.96); transform: scale(0.96); }
  50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); }
}
@keyframes ms-sun-glow {
  0%, 100% { opacity: 0.78; -webkit-transform: scale(0.96); transform: scale(0.96); }
  50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); }
}
@-webkit-keyframes ms-sun-rays {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes ms-sun-rays {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

.sectionTwo__title-img-1::before,
.sectionTwo__title-img-1::after,
.sectionSix__sun::before,
.sectionSix__sun::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.sectionTwo__title-img-1::before,
.sectionSix__sun::before {
  opacity: 0.85;
  background: radial-gradient(closest-side circle,
    rgba(255, 250, 224, 0.62) 0%,
    rgba(255, 242, 190, 0.40) 40%,
    rgba(255, 230, 140, 0.22) 62%,
    rgba(255, 218, 100, 0.09) 80%,
    rgba(255, 214, 90, 0) 100%);
  -webkit-animation: ms-sun-glow 5s ease-in-out infinite;
          animation: ms-sun-glow 5s ease-in-out infinite;
  will-change: transform, opacity;
}
/* 12 лучей: период 30°, сам луч растушёван на 14° */
.sectionTwo__title-img-1::after,
.sectionSix__sun::after {
  display: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 246, 205, 0) 0deg,
    rgba(255, 246, 205, 0.52) 6deg,
    rgba(255, 246, 205, 0) 12deg,
    rgba(255, 246, 205, 0) 30deg);
  -webkit-mask-image: radial-gradient(closest-side circle, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 46%, rgba(0, 0, 0, 0) 80%);
          mask-image: radial-gradient(closest-side circle, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 1) 46%, rgba(0, 0, 0, 0) 80%);
  -webkit-animation: ms-sun-rays 34s linear infinite;
          animation: ms-sun-rays 34s linear infinite;
  will-change: transform;
}
/* без маски вместо лучей получилась бы вертушка с жёстким краем — тогда их просто нет */
@supports ((-webkit-mask-image: radial-gradient(#000, rgba(0, 0, 0, 0))) or (mask-image: radial-gradient(#000, rgba(0, 0, 0, 0)))) {
  .sectionTwo__title-img-1::after,
  .sectionSix__sun::after {
    display: block;
  }
}

/* Второй экран: солнышко занимает 91 % кадра и отцентровано в нём. */
.sectionTwo__title-img-1::before,
.sectionTwo__title-img-1::after {
  left: -41%;
  top: -41%;
  width: 182%;
  height: 182%;
}
/* «Поздравлялочка»: проценты от холста спрайта, как и transform-origin.
   Десктоп 1449x1439, солнышко 235x231 с центром (1317.5, 586.5). */
.sectionSix__sun::before,
.sectionSix__sun::after {
  left: 74.71%;
  top: 24.43%;
  width: 32.44%;
  height: 32.66%;
}
@media (max-width: 480px) {
  /* мобайл 384x622, солнышко 236x231 с центром (253, 491.5) */
  .sectionSix__sun::before,
  .sectionSix__sun::after {
    left: 4.43%;
    top: 41.08%;
    width: 122.92%;
    height: 75.88%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sectionOne__balloon-item,
  .sectionOne__stars-item,
  .sectionOne__fire-item,
  .sectionTwo__title-img-1,
  .sectionTwo__title-img-1::before,
  .sectionTwo__title-img-1::after,
  .sectionSix__sun,
  .sectionSix__sun::before,
  .sectionSix__sun::after {
    -webkit-animation: none;
            animation: none;
  }
}

/* ============================================================
   Восьмой блок «Загадайте желание»: свечи, дым, салют.
   Логика (сколько раз дунули) — в static/js/candles.js, здесь только внешний вид
   состояний. Тап по зоне .sectionEight__fire дует сразу на все три свечи. Классы, которые ставит JS:
     .sectionEight__fire.is-blow-1 / .is-blow-2 / .is-blow-3 — сколько раз дунули (форма огоньков);
     .sectionEight__fire.is-out — все погасли, зона больше не кликается;
     .sectionEight__fire-item.is-gust-r / .is-gust-l — вздрагивание огонька (0.5 с);
     .sectionEight__fire-item.is-out — огонёк погас;
     .sectionEight__fire-back.is-out — свечение погасшей свечи;
     .sectionEight__dim.is-on        — дым над погасшей свечой;
     .sectionEight.is-finale         — все свечи задуты, идёт салют.
   Переменные: --ms-fs — размер свечения (1 → 1.3 → 0.7 по тапам, ставит JS),
   --ms-fb — множитель размера огоньков (на мобильном 0.7, как img у верстальщика).
   Тайминги мерцания — те же, что у пламени первого экрана (ms-flame).
   ============================================================ */

/* --- Общая зона тапа над всеми тремя свечами (обработчик в candles.js висит на ней).
   .sectionEight__fire в вёрстке не позиционирован, поэтому ::before считается
   от .sectionEight__img-main — в той же системе координат, что и огоньки. --- */
.sectionEight__fire {
  cursor: pointer;
  -ms-touch-action: manipulation;
      touch-action: manipulation; /* без задержки и double-tap zoom при быстрых тапах */
  -webkit-tap-highlight-color: transparent;
}
.sectionEight__fire::before {
  content: "";
  position: absolute;
  left: 11rem;
  top: 14rem;
  width: 13rem;
  height: 6.5rem;
  border-radius: 1rem;
}
.sectionEight__fire.is-out {
  cursor: default;
  pointer-events: none;
}

/* --- Огоньки: три состояния из макета (векторы огоньков из Figma, мобильная раскадровка):
   1 — прямой (bfire-N-up.svg, форма кадра 3), 2 — согнут ветром (bfire-N-bent.svg, кадр 2),
   3 — маленький (та же прямая форма, меньше). Все три лежат в .sectionEight__fire-item,
   видно одно — по классу зоны .is-blow-1 / .is-blow-2.
   Фитиль в боксе верстальщика не по центру: bfire-N.png — полумесяц, растущий из левого
   нижнего угла. Координаты фитилей сняты с outro-img.png (кончики фитилей относительно
   боксов .sectionEight__fire-N): --ms-wx — отступ фитиля от левого края бокса,
   --ms-wy — от нижнего края (с заходом основания огонька на фитиль на 2 px).
   Основание формы (33 % ширины у прямой, 20/15/8 % у согнутой) ставится на фитиль
   через margin-left. Мерцание — ms-flame первого экрана. --- */
.sectionEight__fire-item {
  --ms-fb: 1; /* множитель размера огоньков: на мобильном 0.7, как у верстальщика */
  --ms-wx: 0.29rem;
  --ms-wy: -0.08rem;
  -webkit-transform-origin: var(--ms-wx) calc(100% - var(--ms-wy));
      -ms-transform-origin: var(--ms-wx) calc(100% - var(--ms-wy));
          transform-origin: var(--ms-wx) calc(100% - var(--ms-wy));
}
/* Высоты боксов = высоте bfire-N.png верстальщика (13×24, 16×22, 22×22): слои внутри
   абсолютные, без этого бокс схлопывается и низ (фитиль) уезжает вверх. */
.sectionEight__fire-1 { height: 1.5rem; }
.sectionEight__fire-2 { height: 1.375rem; --ms-wx: 0.27rem; --ms-wy: -0.08rem; }
.sectionEight__fire-3 { height: 1.375rem; --ms-wx: 0.27rem; --ms-wy: -0.2rem; }
.sectionEight__fire-state {
  position: absolute;
  left: var(--ms-wx);
  bottom: var(--ms-wy);
  opacity: 0;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
  -webkit-animation: ms-flame8 2s ease-in-out infinite;
          animation: ms-flame8 2s ease-in-out infinite;
  will-change: transform;
}
/* Как ms-flame первого экрана, но без opacity: прозрачностью переключаются состояния */
@-webkit-keyframes ms-flame8 {
  0%, 100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  20% { -webkit-transform: rotate(5deg) scale(1.06, 1.17); transform: rotate(5deg) scale(1.06, 1.17); }
  45% { -webkit-transform: rotate(-2deg) scale(0.94, 0.87); transform: rotate(-2deg) scale(0.94, 0.87); }
  70% { -webkit-transform: rotate(-5deg) scale(1.05, 1.12); transform: rotate(-5deg) scale(1.05, 1.12); }
  85% { -webkit-transform: rotate(2deg) scale(0.96, 0.93); transform: rotate(2deg) scale(0.96, 0.93); }
}
@keyframes ms-flame8 {
  0%, 100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  20% { -webkit-transform: rotate(5deg) scale(1.06, 1.17); transform: rotate(5deg) scale(1.06, 1.17); }
  45% { -webkit-transform: rotate(-2deg) scale(0.94, 0.87); transform: rotate(-2deg) scale(0.94, 0.87); }
  70% { -webkit-transform: rotate(-5deg) scale(1.05, 1.12); transform: rotate(-5deg) scale(1.05, 1.12); }
  85% { -webkit-transform: rotate(2deg) scale(0.96, 0.93); transform: rotate(2deg) scale(0.96, 0.93); }
}
.sectionEight__fire-2 .sectionEight__fire-state {
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.sectionEight__fire-3 .sectionEight__fire-state {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
  -webkit-animation-delay: -1.3s;
          animation-delay: -1.3s;
}
.sectionEight__fire-state-1,
.sectionEight__fire.is-blow-1 .sectionEight__fire-state-2,
.sectionEight__fire.is-blow-2 .sectionEight__fire-state-3 {
  opacity: 1;
}
.sectionEight__fire.is-blow-1 .sectionEight__fire-state-1,
.sectionEight__fire.is-blow-2 .sectionEight__fire-state-1 {
  opacity: 0;
}
.sectionEight__fire-1 .sectionEight__fire-state-1 { width: calc(var(--ms-fb) * 0.47rem); height: calc(var(--ms-fb) * 1.5rem);   margin-left: calc(var(--ms-fb) * -0.16rem); }
.sectionEight__fire-1 .sectionEight__fire-state-2 { width: calc(var(--ms-fb) * 0.6rem);  height: calc(var(--ms-fb) * 0.95rem);  margin-left: calc(var(--ms-fb) * -0.12rem); }
.sectionEight__fire-1 .sectionEight__fire-state-3 { width: calc(var(--ms-fb) * 0.26rem); height: calc(var(--ms-fb) * 0.82rem);  margin-left: calc(var(--ms-fb) * -0.09rem); }
.sectionEight__fire-2 .sectionEight__fire-state-1 { width: calc(var(--ms-fb) * 0.43rem); height: calc(var(--ms-fb) * 1.375rem); margin-left: calc(var(--ms-fb) * -0.14rem); }
.sectionEight__fire-2 .sectionEight__fire-state-2 { width: calc(var(--ms-fb) * 0.85rem); height: calc(var(--ms-fb) * 1.05rem);  margin-left: calc(var(--ms-fb) * -0.13rem); }
.sectionEight__fire-2 .sectionEight__fire-state-3 { width: calc(var(--ms-fb) * 0.27rem); height: calc(var(--ms-fb) * 0.85rem);  margin-left: calc(var(--ms-fb) * -0.09rem); }
.sectionEight__fire-3 .sectionEight__fire-state-1 { width: calc(var(--ms-fb) * 0.43rem); height: calc(var(--ms-fb) * 1.375rem); margin-left: calc(var(--ms-fb) * -0.14rem); }
.sectionEight__fire-3 .sectionEight__fire-state-2 { width: calc(var(--ms-fb) * 1.46rem); height: calc(var(--ms-fb) * 0.73rem);  margin-left: calc(var(--ms-fb) * -0.12rem); }
.sectionEight__fire-3 .sectionEight__fire-state-3 { width: calc(var(--ms-fb) * 0.29rem); height: calc(var(--ms-fb) * 0.92rem);  margin-left: calc(var(--ms-fb) * -0.1rem); }

/* --- Дуновение: огоньки вздрагивают от основания в сторону, куда их гнёт ветер, и возвращаются --- */
.sectionEight__fire-item.is-gust-r {
  -webkit-animation: ms-gust-r 0.5s ease-out;
          animation: ms-gust-r 0.5s ease-out;
}
.sectionEight__fire-item.is-gust-l {
  -webkit-animation: ms-gust-l 0.5s ease-out;
          animation: ms-gust-l 0.5s ease-out;
}
@-webkit-keyframes ms-gust-r {
  0%   { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  30%  { -webkit-transform: rotate(22deg) scale(0.9, 1.08); transform: rotate(22deg) scale(0.9, 1.08); }
  65%  { -webkit-transform: rotate(-6deg) scale(1, 0.97); transform: rotate(-6deg) scale(1, 0.97); }
  100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
}
@keyframes ms-gust-r {
  0%   { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  30%  { -webkit-transform: rotate(22deg) scale(0.9, 1.08); transform: rotate(22deg) scale(0.9, 1.08); }
  65%  { -webkit-transform: rotate(-6deg) scale(1, 0.97); transform: rotate(-6deg) scale(1, 0.97); }
  100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
}
@-webkit-keyframes ms-gust-l {
  0%   { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  30%  { -webkit-transform: rotate(-22deg) scale(0.9, 1.08); transform: rotate(-22deg) scale(0.9, 1.08); }
  65%  { -webkit-transform: rotate(6deg) scale(1, 0.97); transform: rotate(6deg) scale(1, 0.97); }
  100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
}
@keyframes ms-gust-l {
  0%   { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  30%  { -webkit-transform: rotate(-22deg) scale(0.9, 1.08); transform: rotate(-22deg) scale(0.9, 1.08); }
  65%  { -webkit-transform: rotate(6deg) scale(1, 0.97); transform: rotate(6deg) scale(1, 0.97); }
  100% { -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
}

/* --- Погас: огонёк схлопывается к фитилю --- */
.sectionEight__fire-item.is-out {
  -webkit-animation: ms-flame-out 0.4s ease-in forwards;
          animation: ms-flame-out 0.4s ease-in forwards;
  pointer-events: none;
  cursor: default;
}
.sectionEight__fire-item.is-out img {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}
@-webkit-keyframes ms-flame-out {
  0%   { opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  100% { opacity: 0; -webkit-transform: rotate(18deg) scale(0.5, 0.15); transform: rotate(18deg) scale(0.5, 0.15); }
}
@keyframes ms-flame-out {
  0%   { opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); transform: rotate(0deg) scale(1, 1); }
  100% { opacity: 0; -webkit-transform: rotate(18deg) scale(0.5, 0.15); transform: rotate(18deg) scale(0.5, 0.15); }
}

/* --- Свечение вокруг огонька: пульсирует в такт, уменьшается вместе с огоньком, гаснет --- */
.sectionEight__fire-back {
  --ms-fs: 1;
  -webkit-transform-origin: 50% 85%;
      -ms-transform-origin: 50% 85%;
          transform-origin: 50% 85%;
  -webkit-transform: scale(var(--ms-fs));
      -ms-transform: scale(var(--ms-fs));
          transform: scale(var(--ms-fs));
  -webkit-transition: opacity 0.6s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.6s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.6s ease, transform 0.4s ease;
  transition: opacity 0.6s ease, transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-animation: ms-glow8 2s ease-in-out infinite;
          animation: ms-glow8 2s ease-in-out infinite;
}
.sectionEight__fire-back-2 {
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s;
}
.sectionEight__fire-back-3 {
  -webkit-animation-duration: 1.8s;
          animation-duration: 1.8s;
  -webkit-animation-delay: -1.3s;
          animation-delay: -1.3s;
}
.sectionEight__fire-back.is-out {
  -webkit-animation: none;
          animation: none;
  opacity: 0;
}
/* В макете эллипс свечения центрирован на огоньке; в вёрстке он стоял на 9–15 px выше */
.sectionEight__fire-back-1 { top: 15.06rem; }
.sectionEight__fire-back-2 { top: 14.7rem; }
.sectionEight__fire-back-3 { top: 15.17rem; }
@-webkit-keyframes ms-glow8 {
  0%, 100% { opacity: 0.6; }
  20%  { opacity: 0.72; }
  45%  { opacity: 0.5; }
  70%  { opacity: 0.68; }
}
@keyframes ms-glow8 {
  0%, 100% { opacity: 0.6; }
  20%  { opacity: 0.72; }
  45%  { opacity: 0.5; }
  70%  { opacity: 0.68; }
}

/* --- Дым. В вёрстке один слой dim.png на три свечи; JS клонирует его под каждую,
   а струйки разделяются clip-path (границы сняты с прозрачности картинки).
   mix-blend-mode: screen с img не работает: анимированный слой — stacking context,
   а .sectionEight__img-main (z-index) изолирует группу, а сам dim.png тёмный (яркость ~65).
   Поэтому в разметке подставлен dim-light.png/webp: та же альфа, цвет 185–255 по яркости
   исходника — серовато-белый дым, как в макете, обычным наложением без фильтров. --- */
.sectionEight__dim {
  margin-left: 0.7rem; /* основания струек в dim.png — точно под фитилями */
  will-change: transform, opacity;
}
.sectionEight__dim img {
  mix-blend-mode: normal;
}
/* Каждая струйка растёт от своего фитиля: origin — основание струйки в dim.png */
.sectionEight__dim-1 {
  -webkit-clip-path: inset(0 54% 0 0);
          clip-path: inset(0 54% 0 0);
  -webkit-transform-origin: 39% 85%;
      -ms-transform-origin: 39% 85%;
          transform-origin: 39% 85%;
}
.sectionEight__dim-2 {
  -webkit-clip-path: inset(0 22.5% 0 46%);
          clip-path: inset(0 22.5% 0 46%);
  -webkit-transform-origin: 67% 85%;
      -ms-transform-origin: 67% 85%;
          transform-origin: 67% 85%;
}
.sectionEight__dim-3 {
  -webkit-clip-path: inset(0 0 0 77.5%);
          clip-path: inset(0 0 0 77.5%);
  -webkit-transform-origin: 88% 85%;
      -ms-transform-origin: 88% 85%;
          transform-origin: 88% 85%;
}
.sectionEight__dim.is-on {
  -webkit-animation: ms-smoke8 5s ease-out forwards;
          animation: ms-smoke8 5s ease-out forwards;
}
@-webkit-keyframes ms-smoke8 {
  0%   { opacity: 0;   -webkit-transform: translate3d(0, 4%, 0) scale(0.7); transform: translate3d(0, 4%, 0) scale(0.7); }
  15%  { opacity: 0.9; }
  60%  { opacity: 0.7; }
  100% { opacity: 0;   -webkit-transform: translate3d(-3%, -30%, 0) scale(1.6); transform: translate3d(-3%, -30%, 0) scale(1.6); }
}
@keyframes ms-smoke8 {
  0%   { opacity: 0;   -webkit-transform: translate3d(0, 4%, 0) scale(0.7); transform: translate3d(0, 4%, 0) scale(0.7); }
  15%  { opacity: 0.9; }
  60%  { opacity: 0.7; }
  100% { opacity: 0;   -webkit-transform: translate3d(-3%, -30%, 0) scale(1.6); transform: translate3d(-3%, -30%, 0) scale(1.6); }
}

/* --- Салют: пять кадров раскадровки дизайнера (salut-f1…f5.svg — экспорт из Figma,
   из 2-го и 3-го вырезан растровый фон 2 МБ). Кадры лежат друг над другом в квадратном
   слое так, что центры вспышек совпадают (центр — 50 % / 50 %), и сменяются
   кроссфейдом: 1 точка → 2 растёт → 3 пик → 4 уходит в прозрачность → 5 гаснет.
   Слой лежит ниже .sectionEight__img-main, поэтому салют появляется из-за цифр.
   Сердцевины в SVG нарисованы под screen (чёрный край радиального градиента),
   поэтому наложение screen стоит на слое — ровно как в Figma над синим фоном.
   Размеры и позиции — по макету (кадр пика). --- */
.sectionEight__salut-item {
  aspect-ratio: 1 / 1;
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.sectionEight__salut-frame {
  position: absolute;
  height: auto;
  opacity: 0;
  will-change: transform, opacity;
}
/* transform-origin каждого кадра — центр его вспышки, чтобы рост не сдвигал салют */
.sectionEight__salut-frame-1 { width: 50.5%; left: 26.2%; top: 28.2%; -webkit-transform-origin: 47% 43%; transform-origin: 47% 43%; }
.sectionEight__salut-frame-2 { width: 86.6%; left: 10.4%; top: 10.4%; -webkit-transform-origin: 46% 48%; transform-origin: 46% 48%; }
.sectionEight__salut-frame-3 { width: 95%;   left: 0;     top: 9.9%;  -webkit-transform-origin: 53% 40%; transform-origin: 53% 40%; }
.sectionEight__salut-frame-4 { width: 72.3%; left: 13.4%; top: 17.3%; -webkit-transform-origin: 51% 45%; transform-origin: 51% 45%; }
.sectionEight__salut-frame-5 { width: 72.3%; left: 12.4%; top: 17.8%; -webkit-transform-origin: 52% 44%; transform-origin: 52% 44%; }
/* Салютов шесть: два из вёрстки (слева от «2» и справа от «5» — по кадру пика макета),
   ещё четыре клонирует candles.js: угол справа сверху, слева снизу, из-за центра цифр,
   справа снизу. Залпы идут по очереди с шагом ~0.35 с. */
.sectionEight__salut-1 {
  width: 24rem;
  left: 12.1rem;
  top: 22.6rem;
}
.sectionEight__salut-2 {
  width: 26rem;
  right: 13.5rem;
  top: 16.9rem;
}
.sectionEight__salut-3 {
  width: 18rem;
  right: 1rem;
  top: 10rem;
}
.sectionEight__salut-4 {
  width: 16rem;
  left: 1rem;
  top: 32rem;
}
.sectionEight__salut-5 {
  width: 20rem;
  left: calc(50% - 10rem);
  top: 20rem;
}
.sectionEight__salut-6 {
  width: 16rem;
  right: 2rem;
  top: 34rem;
}
.sectionEight__salut-7 {
  width: 18rem;
  left: 1rem;
  top: 10rem;
}
/* Быстро и без «полок»: кадры идут сплошными кроссфейдами (в каждый момент видны два
   соседних, один гаснет — другой проявляется), внутри своего окна каждый кадр ещё чуть
   подрастает, а слой целиком растёт к пику одной кривой и слегка сжимается к концу.
   Так смена рисунка лучей читается как движение, а не как переключение картинок. */
/* Каждый салют проигрывается дважды (iteration-count 2): на стыке все кадры прозрачны,
   поэтому сброс масштаба слоя не виден. */
.sectionEight.is-finale .sectionEight__salut-item {
  opacity: 1;
  -webkit-animation: ms-salut8 3s 2 forwards;
          animation: ms-salut8 3s 2 forwards;
}
.sectionEight.is-finale .sectionEight__salut-frame {
  -webkit-animation: ms-salut8-f1 3s linear 2 forwards;
          animation: ms-salut8-f1 3s linear 2 forwards;
}
.sectionEight.is-finale .sectionEight__salut-frame-2 { -webkit-animation-name: ms-salut8-f2; animation-name: ms-salut8-f2; }
.sectionEight.is-finale .sectionEight__salut-frame-3 { -webkit-animation-name: ms-salut8-f3; animation-name: ms-salut8-f3; }
.sectionEight.is-finale .sectionEight__salut-frame-4 { -webkit-animation-name: ms-salut8-f4; animation-name: ms-salut8-f4; }
.sectionEight.is-finale .sectionEight__salut-frame-5 { -webkit-animation-name: ms-salut8-f5; animation-name: ms-salut8-f5; }
.sectionEight.is-finale .sectionEight__salut-1,
.sectionEight.is-finale .sectionEight__salut-1 .sectionEight__salut-frame {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.sectionEight.is-finale .sectionEight__salut-2,
.sectionEight.is-finale .sectionEight__salut-2 .sectionEight__salut-frame {
  -webkit-animation-delay: 0.65s;
          animation-delay: 0.65s;
}
.sectionEight.is-finale .sectionEight__salut-3,
.sectionEight.is-finale .sectionEight__salut-3 .sectionEight__salut-frame {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.sectionEight.is-finale .sectionEight__salut-7,
.sectionEight.is-finale .sectionEight__salut-7 .sectionEight__salut-frame {
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
}
.sectionEight.is-finale .sectionEight__salut-4,
.sectionEight.is-finale .sectionEight__salut-4 .sectionEight__salut-frame {
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}
.sectionEight.is-finale .sectionEight__salut-5,
.sectionEight.is-finale .sectionEight__salut-5 .sectionEight__salut-frame {
  -webkit-animation-delay: 1.85s;
          animation-delay: 1.85s;
}
.sectionEight.is-finale .sectionEight__salut-6,
.sectionEight.is-finale .sectionEight__salut-6 .sectionEight__salut-frame {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
@-webkit-keyframes ms-salut8 {
  0%   { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40%  { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: linear; animation-timing-function: linear; }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); }
}
@keyframes ms-salut8 {
  0%   { -webkit-transform: scale(0.7); transform: scale(0.7); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
  40%  { -webkit-transform: scale(1); transform: scale(1); -webkit-animation-timing-function: linear; animation-timing-function: linear; }
  100% { -webkit-transform: scale(0.9); transform: scale(0.9); }
}
/* Окна кадров (доли 3 с): 1 — 0–20 %, 2 — 8–38 %, 3 — 20–62 %, 4 — 38–82 %, 5 — 62–100 %;
   пик прозрачности — в середине окна, соседние окна перекрываются целиком. */
@-webkit-keyframes ms-salut8-f1 { 0% { opacity: 0; -webkit-transform: scale(0.85); transform: scale(0.85); } 8% { opacity: 1; } 20%, 100% { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); } }
@keyframes ms-salut8-f1 { 0% { opacity: 0; -webkit-transform: scale(0.85); transform: scale(0.85); } 8% { opacity: 1; } 20%, 100% { opacity: 0; -webkit-transform: scale(1.1); transform: scale(1.1); } }
@-webkit-keyframes ms-salut8-f2 { 0%, 8% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } 20% { opacity: 1; } 38%, 100% { opacity: 0; -webkit-transform: scale(1.08); transform: scale(1.08); } }
@keyframes ms-salut8-f2 { 0%, 8% { opacity: 0; -webkit-transform: scale(0.9); transform: scale(0.9); } 20% { opacity: 1; } 38%, 100% { opacity: 0; -webkit-transform: scale(1.08); transform: scale(1.08); } }
@-webkit-keyframes ms-salut8-f3 { 0%, 20% { opacity: 0; -webkit-transform: scale(0.92); transform: scale(0.92); } 38% { opacity: 1; } 62%, 100% { opacity: 0; -webkit-transform: scale(1.06); transform: scale(1.06); } }
@keyframes ms-salut8-f3 { 0%, 20% { opacity: 0; -webkit-transform: scale(0.92); transform: scale(0.92); } 38% { opacity: 1; } 62%, 100% { opacity: 0; -webkit-transform: scale(1.06); transform: scale(1.06); } }
@-webkit-keyframes ms-salut8-f4 { 0%, 38% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 62% { opacity: 1; } 82%, 100% { opacity: 0; -webkit-transform: scale(1.04); transform: scale(1.04); } }
@keyframes ms-salut8-f4 { 0%, 38% { opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); } 62% { opacity: 1; } 82%, 100% { opacity: 0; -webkit-transform: scale(1.04); transform: scale(1.04); } }
@-webkit-keyframes ms-salut8-f5 { 0%, 62% { opacity: 0; -webkit-transform: scale(0.96); transform: scale(0.96); } 82% { opacity: 0.9; } 100% { opacity: 0; -webkit-transform: scale(1.03); transform: scale(1.03); } }
@keyframes ms-salut8-f5 { 0%, 62% { opacity: 0; -webkit-transform: scale(0.96); transform: scale(0.96); } 82% { opacity: 0.9; } 100% { opacity: 0; -webkit-transform: scale(1.03); transform: scale(1.03); } }

@media (max-width: 480px) {
  /* В вёрстке img огонька был уменьшен до 0.7 относительно центра, то есть фитиль —
     на 85 % высоты бокса. Сохраняем эту точку, а размер задаём множителем, не transform. */
  .sectionEight__fire-item {
    --ms-fb: 0.7;
  }
  .sectionEight__fire-item img {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  /* фитили сняты с outro-img-m.png; у верстальщика мобильный img был уменьшен
     от центра, поэтому низ бокса здесь ниже фитиля */
  .sectionEight__fire-1 { --ms-wx: 0.3rem;  --ms-wy: 0.19rem; }
  .sectionEight__fire-2 { --ms-wx: 0.22rem; --ms-wy: 0.19rem; }
  .sectionEight__fire-3 { --ms-wx: 0.38rem; --ms-wy: 0.06rem; }
  .sectionEight__fire::before {
    left: 6.5rem;
    top: 8.25rem;
    width: 9rem;
    height: 5rem;
  }
  .sectionEight__dim {
    margin-left: 0.6rem;
  }
  .sectionEight__fire-back-1 { top: 10.06rem; }
  .sectionEight__fire-back-2 { top: 9.84rem; }
  .sectionEight__fire-back-3 { top: 10.11rem; }
  /* Салюты крупнее, чем в макете (просьба заказчика), часть уходит за края экрана */
  .sectionEight__salut-1 {
    width: 14rem;
    left: -4.5rem;
    top: 13.5rem;
  }
  .sectionEight__salut-2 {
    width: 15rem;
    right: -5rem;
    top: 8.5rem;
  }
  .sectionEight__salut-3 {
    width: 12rem;
    right: -3rem;
    top: 17rem;
  }
  .sectionEight__salut-4 {
    width: 11rem;
    left: -3rem;
    top: 20rem;
  }
  .sectionEight__salut-5 {
    width: 13rem;
    left: calc(50% - 6.5rem);
    top: 10rem;
  }
  .sectionEight__salut-6 {
    width: 10rem;
    right: -2rem;
    top: 24rem;
  }
  .sectionEight__salut-7 {
    width: 12rem;
    left: -4rem;
    top: 9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sectionEight__fire-item img,
  .sectionEight__fire-back,
  .sectionEight__fire-item.is-gust-r,
  .sectionEight__fire-item.is-gust-l {
    -webkit-animation: none;
            animation: none;
  }
}