/* Моушн-оформление открытки (app/motion.py, static/motion.js): ролик 4:5,
   поверх - имя из «Кому». Одно и то же на странице открытки, в черновике и в
   просмотре стиля в форме.

   Размеры - в долях ширины сцены (cqw): кадр всегда 4:5, и имя встаёт в ту
   полосу кадра, которую сцена под него оставила, на любом экране. Где cqw не
   знают, - сначала пиксели. */

/* Шрифты имени - те же, что у заголовков в роликах. Лицензия - OFL
   (ds/assets/fonts/OFL-cormorant-unbounded.txt). */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("ds/assets/fonts/cormorant-garamond-cyrillic-wght-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("ds/assets/fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("ds/assets/fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("ds/assets/fonts/unbounded-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Шрифты имени у Дня рождения - тоже из роликов. Лицензия - OFL
   (ds/assets/fonts/OFL-marck-playfair-greatvibes.txt). */
@font-face {
  font-family: "Marck Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ds/assets/fonts/marck-script-cyrillic-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Marck Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ds/assets/fonts/marck-script-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("ds/assets/fonts/playfair-display-cyrillic-700-italic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("ds/assets/fonts/playfair-display-latin-700-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ds/assets/fonts/great-vibes-cyrillic-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Great Vibes";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ds/assets/fonts/great-vibes-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Детские буквы сюжета «Рисунок, который вырос» (stories.js) - те же, что в
   ролике. Лицензия - OFL (ds/assets/fonts/OFL-neucha.txt). */
@font-face {
  font-family: "Neucha";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ds/assets/fonts/neucha-cyrillic-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Neucha";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("ds/assets/fonts/neucha-latin-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.motion-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  container-type: inline-size;
  isolation: isolate;
  background: #070914;
  -webkit-tap-highlight-color: transparent;
}
.motion-stage[data-style="elka"] { background: #e8f0f7; }
.motion-stage[data-style="zoloto"] { background: #0b0805; }
/* Светлые ролики Дня рождения - цвет их первого кадра */
.motion-stage[data-style="podarki"] { background: #fff7f1; }
.motion-stage[data-style="retro"] { background: #f4ead2; }
.motion-stage[data-style="tush"] { background: #ece8ee; }
/* Светлые ролики «Любимым» - тоже цвет первого кадра */
.motion-stage[data-style="shariki"] { background: #e0dfeb; }
.motion-stage[data-style="akvarel"] { background: #f6eee4; }
.motion-stage[data-style="lepestki"] { background: #f6e0dc; }
.motion-stage[data-style="osen"] { background: #c98e3b; }
/* Оформления остальных поводов (20.10.2026) - тоже цвет первого кадра; у
   тёмных - свой, затемнение у них общее, тёмное */
.motion-stage[data-style="uchitel"] { background: #2a4737; }
.motion-stage[data-style="salyut"] { background: #12254f; }
.motion-stage[data-style="yubiley"] { background: #2d140a; }
.motion-stage[data-style="mama"] { background: #efe0dc; }
.motion-stage[data-style="mimoza"] { background: #f1f3e9; }
.motion-stage[data-style="koltsa"] { background: #f8ecdd; }
.motion-stage[data-style="spasibo"] { background: #bf9e79; }
.motion-stage[data-style="solnce"] { background: #909791; }
.motion-stage[data-style="puzyri"] { background: #deecdf; }
/* Сюжет «Лишняя деталь» (app/stories.py) - бумага инструкции */
.motion-stage[data-style="detal"] { background: #e8e7e1; }
.motion-stage[data-style="pismo"] { background: #3b2a1a; }
.motion-stage[data-style="chernoviki"] { background: #2b1d12; }
/* «День рождения» (18.10.2026): тёмная комната, подоконник в сумерках,
   дверца холодильника */
.motion-stage[data-style="svechki"] { background: #0b090b; }
.motion-stage[data-style="banka"] { background: #6a5244; }
.motion-stage[data-style="risunok"] { background: #c8bbaf; }
/* «Новый год» (22-23.10.2026): подоконник с мандарином, дом ночью, часы */
.motion-stage[data-style="mandarin"] { background: #2a1a10; }
.motion-stage[data-style="okno"] { background: #1a2433; }
.motion-stage[data-style="kuranty"] { background: #24170d; }

.motion-stage__poster,
.motion-stage__part {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.motion-stage__part { opacity: 0; transition: opacity 0.35s ease; }
.motion-stage__part.is-on { opacity: 1; }
.motion-stage.is-still .motion-stage__part { display: none; }

/* Имя - в своей полосе кадра. Пока в ролике собирается заголовок, имени нет:
   оно проявляется следом (motion.js, is-unnamed). */
.motion-stage__name {
  position: absolute;
  top: var(--motion-name-top, 30%);
  left: 7%;
  right: 7%;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.motion-stage.is-unnamed .motion-stage__name {
  opacity: 0;
  transform: translateY(-30%);
  transition-duration: 0.2s;
}

/* Имя сюжета рисует static/stories.js на холсте поверх ролика - по дорожке
   ролика, вместе с обложкой и биркой (motion.js) */
.motion-stage__names {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* «Полночь»: над заголовком, под сиянием - тёплым светом, как окна домика */
.motion-stage[data-style="polnoch"] .motion-stage__name {
  --motion-name-top: 29.5%;
  font: italic 700 34px / 1.05 "Cormorant Garamond", Georgia, serif;
  font-size: 9.5cqw;
  color: #fff4e2;
  text-shadow: 0 0 0.3em rgba(255, 214, 150, 0.55), 0 0.04em 0.4em rgba(0, 0, 0, 0.55);
}
/* «Ёлка»: между ёлкой и заголовком - красным, как «!» в заголовке */
.motion-stage[data-style="elka"] .motion-stage__name {
  --motion-name-top: 71%;
  font: 700 22px / 1.1 "Unbounded", system-ui, sans-serif;
  font-size: 6cqw;
  color: #e4513a;
}
/* «Золото»: над цифрами - золотом с блеском */
.motion-stage[data-style="zoloto"] .motion-stage__name {
  --motion-name-top: 23%;
  font: italic 700 34px / 1.1 "Cormorant Garamond", Georgia, serif;
  font-size: 9.5cqw;
  color: #f2cf86;
  background: linear-gradient(180deg, #fff4d4 12%, #f0c979 48%, #c38b36 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 0.16em rgba(255, 196, 102, 0.5));
}
.motion-stage[data-style="polnoch"] .motion-stage__name--long,
.motion-stage[data-style="zoloto"] .motion-stage__name--long { font-size: 26px; font-size: 7.2cqw; }
.motion-stage[data-style="polnoch"] .motion-stage__name--longer,
.motion-stage[data-style="zoloto"] .motion-stage__name--longer { font-size: 20px; font-size: 5.6cqw; }
.motion-stage[data-style="elka"] .motion-stage__name--long { font-size: 17px; font-size: 4.6cqw; }
.motion-stage[data-style="elka"] .motion-stage__name--longer { font-size: 14px; font-size: 3.7cqw; }

/* День рождения (решение владельца от 12.10.2026): место и вид имени - как в
   прототипе, который смотрел владелец. */
/* «Звёзды»: между надписью и созвездием-тортом - звёздным светом */
.motion-stage[data-style="zvezdy"] .motion-stage__name {
  --motion-name-top: 44.5%;
  font: italic 700 34px / 1.05 "Playfair Display", Georgia, serif;
  font-size: 9.5cqw;
  color: #fbf5ff;
  text-shadow: 0 0 0.25em rgba(190, 160, 255, 0.85), 0 0 0.8em rgba(150, 110, 255, 0.45);
}
/* «Подарки»: между надписью и коробками - розовым, с белой каймой, как буквы */
.motion-stage[data-style="podarki"] .motion-stage__name {
  --motion-name-top: 45.5%;
  font: 700 27px / 1.1 "Unbounded", system-ui, sans-serif;
  font-size: 7.4cqw;
  color: #e85d9a;
  text-shadow: 0 0.06em 0 #fffaf2, 0.05em 0 0 #fffaf2, -0.05em 0 0 #fffaf2, 0 -0.05em 0 #fffaf2,
    0 0.14em 0.2em rgba(150, 60, 40, 0.25);
}
/* «Огни»: над надписью - тёплым светом огня */
.motion-stage[data-style="ogni"] .motion-stage__name {
  --motion-name-top: 27%;
  font: 400 54px / 1 "Marck Script", cursive;
  font-size: 15cqw;
  color: #ffe2b0;
  text-shadow: 0 0 0.12em rgba(255, 170, 80, 0.9), 0 0 0.45em rgba(255, 130, 50, 0.55);
}
/* «Ретро-открытка»: под надписью - как подпись от руки, чернилами.
   Под имя одна строка: вторая налезла бы на надпись. Длинное имя мельчает
   по числу букв (--motion-name-len ставит motion.js; буква Marck Script -
   около 0,55 кегля), очень длинное - в две строки мелко. */
.motion-stage[data-style="retro"] .motion-stage__name {
  --motion-name-top: 42%;
  font: 400 47px / 1 "Marck Script", cursive;
  font-size: max(6cqw, min(13cqw, 150cqw / var(--motion-name-len, 4)));
  color: #2b3a67;
  transform: translateY(-50%) rotate(-3deg);
}
.motion-stage[data-style="retro"].is-unnamed .motion-stage__name { transform: translateY(-30%) rotate(-3deg); }
/* «Тушь»: в рамке под надписью - тушью, тем же почерком. Рамка узкая: имя -
   между её боковыми завитками и мельчает по числу букв, чтобы встать в одну
   строку (буква Great Vibes - около 0,5 кегля); очень длинное - в две. */
.motion-stage[data-style="tush"] .motion-stage__name {
  --motion-name-top: 42%;
  left: 17%;
  right: 17%;
  font: 400 50px / 1 "Great Vibes", cursive;
  font-size: max(6cqw, min(14cqw, 125cqw / var(--motion-name-len, 4)));
  color: #1d3649;
}
.motion-stage[data-style="zvezdy"] .motion-stage__name--long { font-size: 26px; font-size: 7.2cqw; }
.motion-stage[data-style="zvezdy"] .motion-stage__name--longer { font-size: 20px; font-size: 5.6cqw; }
.motion-stage[data-style="podarki"] .motion-stage__name--long { font-size: 20px; font-size: 5.6cqw; }
.motion-stage[data-style="podarki"] .motion-stage__name--longer { font-size: 16px; font-size: 4.4cqw; }
.motion-stage[data-style="ogni"] .motion-stage__name--long { font-size: 40px; font-size: 11cqw; }
.motion-stage[data-style="ogni"] .motion-stage__name--longer { font-size: 31px; font-size: 8.6cqw; }

/* «Любимым» (решения владельца от 16.10.2026): имя под надписью «Люблю тебя»,
   тем же почерком, место и цвет - как в образцах, которые смотрел владелец
   (prototypes/lyubimym-styles/preview.py). Длинное имя мельчает по числу букв
   (буква Marck Script - около 0,55 кегля), очень длинное - в две строки. */
.motion-stage[data-style="fonariki"] .motion-stage__name,
.motion-stage[data-style="shariki"] .motion-stage__name,
.motion-stage[data-style="akvarel"] .motion-stage__name,
.motion-stage[data-style="neon"] .motion-stage__name,
.motion-stage[data-style="lepestki"] .motion-stage__name,
.motion-stage[data-style="gorod"] .motion-stage__name,
.motion-stage[data-style="osen"] .motion-stage__name {
  font: 400 35px / 1 "Marck Script", cursive;
  font-size: max(5.5cqw, min(9.6cqw, 150cqw / var(--motion-name-len, 4)));
}
/* «Фонарики»: тёплым светом фонарика */
.motion-stage[data-style="fonariki"] .motion-stage__name {
  --motion-name-top: 31.1%;
  color: #ffe2b0;
  text-shadow: 0 0.03em 0.06em rgba(128, 64, 16, 0.55), 0 0 0.35em rgba(255, 170, 80, 0.45);
}
/* «Шарики»: красным, как шары, с белой тенью */
.motion-stage[data-style="shariki"] .motion-stage__name {
  --motion-name-top: 27.4%;
  color: #c8304f;
  text-shadow: 0 0.03em 0 rgba(255, 255, 255, 0.67);
}
/* «Акварель»: краской сердца */
.motion-stage[data-style="akvarel"] .motion-stage__name {
  --motion-name-top: 26.7%;
  color: #9c2a4a;
}
/* «Неон»: розовой трубкой */
.motion-stage[data-style="neon"] .motion-stage__name {
  --motion-name-top: 28.1%;
  color: #ffd2ea;
  text-shadow: 0 0 0.1em rgba(255, 60, 150, 0.9), 0 0 0.4em rgba(255, 60, 150, 0.6);
}
/* «Лепестки»: цветом надписи, с белой тенью */
.motion-stage[data-style="lepestki"] .motion-stage__name {
  --motion-name-top: 26.7%;
  color: #a3243f;
  text-shadow: 0 0.03em 0 rgba(255, 255, 255, 0.67);
}
/* «Ночной город»: тёплым светом окон */
.motion-stage[data-style="gorod"] .motion-stage__name {
  --motion-name-top: 27.4%;
  color: #fff1d6;
  text-shadow: 0 0 0.3em rgba(255, 154, 90, 0.6);
}
/* «Осень в парке»: цветом надписи, со светлым ореолом */
.motion-stage[data-style="osen"] .motion-stage__name {
  --motion-name-top: 25.9%;
  color: #8a2412;
  text-shadow: 0 0 0.25em rgba(255, 248, 224, 0.9);
}

/* Остальные поводы (решение владельца от 20.10.2026): имя под надписью
   повода, шрифтом и цветом из образцов, которые смотрел владелец
   (prototypes/prazdniki-motion/preview.py). Длинное имя мельчает по числу
   букв, как у «Любимым» (имя из 17 букв - уже мельче короткого); у широкого
   Unbounded - раньше. */
.motion-stage[data-style="uchitel"] .motion-stage__name,
.motion-stage[data-style="mama"] .motion-stage__name,
.motion-stage[data-style="mimoza"] .motion-stage__name,
.motion-stage[data-style="salyut"] .motion-stage__name,
.motion-stage[data-style="koltsa"] .motion-stage__name,
.motion-stage[data-style="yubiley"] .motion-stage__name,
.motion-stage[data-style="spasibo"] .motion-stage__name,
.motion-stage[data-style="solnce"] .motion-stage__name,
.motion-stage[data-style="puzyri"] .motion-stage__name {
  --motion-name-top: 27.4%;
  font: 400 35px / 1 "Marck Script", cursive;
  font-size: max(5.5cqw, min(9.8cqw, 150cqw / var(--motion-name-len, 4)));
}
/* «Школьная доска»: мелом */
.motion-stage[data-style="uchitel"] .motion-stage__name {
  font-family: "Neucha", cursive;
  font-size: max(5.5cqw, min(8.5cqw, 140cqw / var(--motion-name-len, 4)));
  color: #f6f4ec;
  text-shadow: 0 0.03em 0.08em rgba(0, 0, 0, 0.4);
}
.motion-stage[data-style="mama"] .motion-stage__name {
  color: #b0365a;
  text-shadow: 0 0 0.15em rgba(255, 255, 255, 0.9);
}
.motion-stage[data-style="mimoza"] .motion-stage__name {
  color: #c43b62;
  text-shadow: 0 0 0.15em rgba(255, 255, 255, 0.9);
}
/* «Звезда и салют», «Кольца», «Золото и шампанское» - антиквой надписи */
.motion-stage[data-style="salyut"] .motion-stage__name,
.motion-stage[data-style="koltsa"] .motion-stage__name,
.motion-stage[data-style="yubiley"] .motion-stage__name {
  font: italic 700 35px / 1 "Cormorant Garamond", Georgia, serif;
  font-size: max(5.5cqw, min(10cqw, 160cqw / var(--motion-name-len, 4)));
}
.motion-stage[data-style="salyut"] .motion-stage__name {
  color: #ffe296;
  text-shadow: 0 0 0.15em rgba(0, 0, 20, 0.8);
}
.motion-stage[data-style="koltsa"] .motion-stage__name {
  font-size: max(5.5cqw, min(8.9cqw, 140cqw / var(--motion-name-len, 4)));
  color: #966424;
  text-shadow: 0 0 0.15em rgba(255, 255, 255, 0.9);
}
.motion-stage[data-style="yubiley"] .motion-stage__name {
  font-size: max(5.5cqw, min(8.9cqw, 140cqw / var(--motion-name-len, 4)));
  color: #f6d27a;
  text-shadow: 0 0 0.15em rgba(40, 20, 0, 0.85);
}
/* «Бумажная открытка»: тушью */
.motion-stage[data-style="spasibo"] .motion-stage__name {
  color: #3a2214;
  text-shadow: 0 0 0.12em rgba(255, 240, 220, 0.5);
}
.motion-stage[data-style="solnce"] .motion-stage__name {
  color: #dc5c1e;
  text-shadow: 0 0 0.2em rgba(255, 255, 255, 0.95);
}
/* «Мыльные пузыри»: круглыми буквами «Привет!» */
.motion-stage[data-style="puzyri"] .motion-stage__name {
  font: 700 35px / 1 "Unbounded", sans-serif;
  font-size: max(4.4cqw, min(7.8cqw, 105cqw / var(--motion-name-len, 4)));
  color: #3a9bdc;
  text-shadow: 0 0 0.12em #fff;
}

/* Загрузка: ролик грузится целиком до начала поздравления (motion.js), а пока
   - золотое кольцо с ходом загрузки и бегущей искрой. Доля - в --доля от 0
   до 1. Быстро загрузилось - кольца не видно вовсе.
   Обложка под кольцом размыта и притушена: заголовок обложки не спорит с
   кольцом ни в одном стиле, а догрузилось - ролик проявляется. */
.motion-stage__loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2.4cqw;
  background: radial-gradient(circle at 50% 50%, rgba(4, 6, 18, 0.62), rgba(4, 6, 18, 0.42) 70%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff4e2;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
  pointer-events: none;
}
.motion-stage.is-loading .motion-stage__loader,
.motion-stage.is-waiting .motion-stage__loader,
.motion-stage.is-stalled .motion-stage__loader {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease;
}
.motion-stage__loader svg {
  width: 26cqw;
  height: 26cqw;
  overflow: visible;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 1.6cqw rgba(255, 205, 120, 0.55));
}
.motion-stage__track { fill: none; stroke: rgba(255, 244, 226, 0.18); stroke-width: 3; }
.motion-stage__done {
  fill: none;
  stroke: #f0c979;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--доля, 0) * 100) 100;
  /* При 0 % круглый конец пустой дуги - точка на верхушке кольца */
  opacity: clamp(0, calc(var(--доля, 0) * 50), 1);
  transition: stroke-dasharray 0.3s ease;
}
/* Искра бежит по кольцу, пока оно на экране: видно, что загрузка идёт, даже
   когда доля долго не меняется */
.motion-stage__spark {
  fill: none;
  stroke: #fff8ea;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 0.6 99.4;
  transform-origin: 50px 50px;
}
.motion-stage__percent {
  margin-top: -18.5cqw;
  margin-bottom: 9cqw;
  font: 600 16px / 1 var(--font-text, system-ui), system-ui, sans-serif;
  font-size: 4.6cqw;
  font-variant-numeric: tabular-nums;
}
.motion-stage__wait {
  font: 600 13px / 1.2 var(--font-text, system-ui), system-ui, sans-serif;
  font-size: 3.6cqw;
  letter-spacing: 0.04em;
  text-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.6);
}
/* Нажали «Слушать» раньше, чем ролик загрузился: кольцо ещё и дышит -
   поздравление начнётся само */
@media (prefers-reduced-motion: no-preference) {
  .motion-stage.is-loading .motion-stage__spark,
  .motion-stage.is-waiting .motion-stage__spark,
  .motion-stage.is-stalled .motion-stage__spark { animation: motion-spin 2.2s linear infinite; }
  .motion-stage.is-waiting .motion-stage__loader svg { animation: motion-breath 1.6s ease-in-out infinite; }
}
/* Голос подвис посреди игры: всё загружено, процент ни к чему - только
   кольцо с искрой */
.motion-stage.is-stalled .motion-stage__percent { visibility: hidden; }
@keyframes motion-spin {
  to { transform: rotate(360deg); }
}
@keyframes motion-breath {
  50% { filter: drop-shadow(0 0 3.2cqw rgba(255, 215, 140, 0.85)); }
}

/* Финал доиграл - затемнение, и снова живая петля (решение владельца от
   04.10.2026): сцена не стоит стоп-кадром */
.motion-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #03040a;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease;
}
.motion-stage.is-dip::after { opacity: 1; transition-duration: 0.6s; }
/* Светлая «Ёлка» уходит в светлое: чёрная вспышка на ней резала глаз
   (проверка владельца 09.10.2026). Светлые ролики Дня рождения - так же. */
.motion-stage[data-style="elka"]::after { background: #e8f0f7; }
.motion-stage[data-style="podarki"]::after { background: #fff7f1; }
.motion-stage[data-style="retro"]::after { background: #f4ead2; }
.motion-stage[data-style="tush"]::after { background: #ece8ee; }
.motion-stage[data-style="shariki"]::after { background: #e0dfeb; }
.motion-stage[data-style="akvarel"]::after { background: #f6eee4; }
.motion-stage[data-style="lepestki"]::after { background: #f6e0dc; }
.motion-stage[data-style="osen"]::after { background: #c98e3b; }
.motion-stage[data-style="mama"]::after { background: #efe0dc; }
.motion-stage[data-style="mimoza"]::after { background: #f1f3e9; }
.motion-stage[data-style="koltsa"]::after { background: #f8ecdd; }
.motion-stage[data-style="spasibo"]::after { background: #bf9e79; }
.motion-stage[data-style="solnce"]::after { background: #909791; }
.motion-stage[data-style="puzyri"]::after { background: #deecdf; }

@media (prefers-reduced-motion: reduce) {
  .motion-stage__part,
  .motion-stage__name,
  .motion-stage::after { transition: none; }
}