/* ═══════════════════════════════════════════════════════════════
   БЕЙБИ ЛЕНД — сцените на стаите (ns1…ns7)
   Всяка анимация тръгва чак когато app.js сложи .play на картата
   (виждаш я → тя оживява). Никога преди — пести батерия.
   ═══════════════════════════════════════════════════════════════ */

.scene [class*="n1-"], .scene [class*="n2-"], .scene [class*="n3-"],
.scene [class*="n4-"], .scene [class*="n5-"], .scene [class*="n6-"],
.scene [class*="n7-"], .scene [class*="n8-"], .scene [class*="n9-"] {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}


.n2-lbl { font-size: 9px; font-weight: 700; fill: #a87d92; }
.n6-bt  { font-size: 12px; font-weight: 800; fill: #fff; }


/* ───────────────────────────────────────────────────────────────
   1 ▸ БРЕМЕННОСТ — ХВЪРЧИЛОТО
   Мама държи конеца долу вляво. Бебето-хвърчило се носи в небето,
   а всеки ритник дърпа конеца и пуска сърчице. Вие сте свързани.
   ─────────────────────────────────────────────────────────────── */
.play .ns1 .n1-kite   { animation: n1fly 6s ease-in-out infinite; }
.play .ns1 .n1-kbody  { animation: n1tilt 3s ease-in-out infinite; }
.play .ns1 .n1-string { animation: n1tug 6s ease-in-out infinite; }
.play .ns1 .n1-belly  { animation: n1breathe 4.2s ease-in-out infinite; }
.play .ns1 .n1-arm    { animation: n1hold 6s ease-in-out infinite; }
.play .ns1 .n1-kick   { animation: n1kick 6s ease-in-out infinite; }
.play .ns1 .n1-bow.b1 { animation: n1bow 1.6s ease-in-out infinite; }
.play .ns1 .n1-bow.b2 { animation: n1bow 1.6s ease-in-out infinite .18s; }
.play .ns1 .n1-bow.b3 { animation: n1bow 1.6s ease-in-out infinite .36s; }
.play .ns1 .n1-cl.a   { animation: n1drift 26s linear infinite; }
.play .ns1 .n1-cl.b   { animation: n1driftBack 34s linear infinite; }

@keyframes n1fly {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(6px, -7px) rotate(4deg); }
  50%      { transform: translate(-2px, 3px) rotate(-3deg); }
  62%      { transform: translate(3px, -9px) rotate(6deg); }  /* ритникът дръпва */
  80%      { transform: translate(-4px, -2px) rotate(-2deg); }
}
@keyframes n1tilt {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
/* конецът увисва и се изопва — на 62% ритникът го дръпва */
@keyframes n1tug {
  0%, 100% { d: path("M78 101 Q 122 88 168 62"); }
  50%      { d: path("M78 101 Q 120 96 166 66"); }
  62%      { d: path("M78 101 Q 124 84 170 56"); }
}
@keyframes n1breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes n1hold {
  0%, 100% { transform: rotate(0deg); }
  62%      { transform: rotate(-4deg); }
}
@keyframes n1kick {
  0%, 52%  { opacity: 0; transform: translate(0, 0) scale(0.5); }
  62%      { opacity: 1; transform: translate(4px, -6px) scale(1.15); }
  78%      { opacity: 0; transform: translate(9px, -18px) scale(0.8); }
  100%     { opacity: 0; }
}
@keyframes n1bow {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(10deg); }
}
@keyframes n1drift     { from { transform: translateX(-30px); } to { transform: translateX(300px); } }
@keyframes n1driftBack { from { transform: translateX(0); }     to { transform: translateX(-320px); } }

/* ───────────────────────────────────────────────────────────────
   2 ▸ МОЕТО БЕБЕ — ФИЛМОВАТА ЛЕНТА
   Кадрите минават като истинско филмче: 1м → 3м → 6м → 9м.
   Отдолу линията на растежа се чертае сама. Ти пазиш всеки кадър.
   ─────────────────────────────────────────────────────────────── */
.play .ns2 .n2-strip { animation: n2roll 14s cubic-bezier(.7,0,.3,1) infinite; }
.play .ns2 .n2-holes { animation: n2holes 1.4s linear infinite; }
.play .ns2 .n2-grow  { animation: n2draw 14s ease-in-out infinite; }
.play .ns2 .n2-dot   { animation: n2dot 14s ease-in-out infinite; }
.play .ns2 .n2-frame { animation: n2pulse 14s ease-in-out infinite; }

/* 8 кадъра, стъпка по стъпка — на -280px кадрите 5-8 стоят точно там,
   където бяха 1-4, затова връщането в 0 е невидимо. Лентата няма край. */
@keyframes n2roll {
  0%, 13%   { transform: translateX(0); }
  20%, 33%  { transform: translateX(-70px); }
  40%, 53%  { transform: translateX(-140px); }
  60%, 73%  { transform: translateX(-210px); }
  80%, 100% { transform: translateX(-280px); }
}
@keyframes n2holes {
  from { transform: translateX(0); }
  to   { transform: translateX(-20px); }
}
@keyframes n2draw {
  0%   { stroke-dashoffset: 180; }
  70%  { stroke-dashoffset: 0; }
  92%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 180; opacity: 0.4; }
}
@keyframes n2dot {
  0%, 6%   { opacity: 0; transform: scale(0.4); }
  70%, 92% { opacity: 1; transform: scale(1); }
  80%      { transform: scale(1.4); }
  100%     { opacity: 0; transform: scale(0.4); }
}
@keyframes n2pulse {
  0%, 100% { opacity: 1; }
  20%, 45%, 70%, 95% { opacity: 1; }
}

/* ───────────────────────────────────────────────────────────────
   3 ▸ ЗАХРАНВАНЕ — ДЪГАТА ОТ ВКУСОВЕ
   От кошницата литва плод по плод. Всеки изписва зад себе си своята
   цветна лента и се излива в купичката. Бебето чака в другия край и
   се засмива, щом дъгата се затвори. Точно това е тази стая: цвят по
   цвят, вкус по вкус, докато седмицата стане пълна.
   ─────────────────────────────────────────────────────────────── */
.ns3 .n3-em { font-size: 13px; }
.ns3 .n3-band { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.ns3 .n3-ride { opacity: 0; offset-rotate: 0deg; }
/* купичката се пълни отдолу нагоре, затова мери от дъното ѝ */
.ns3 .n3-fill { transform-box: view-box; transform-origin: 186px 150px; transform: scaleY(0.02); }

.play .ns3 .n3-band.a1 { animation: n3drawa1 12s ease-in-out infinite; }
.play .ns3 .n3-band.a2 { animation: n3drawa2 12s ease-in-out infinite; }
.play .ns3 .n3-band.a3 { animation: n3drawa3 12s ease-in-out infinite; }
.play .ns3 .n3-band.a4 { animation: n3drawa4 12s ease-in-out infinite; }
.play .ns3 .n3-band.a5 { animation: n3drawa5 12s ease-in-out infinite; }
.ns3 .n3-ride.a1 { offset-path: path("M26 142 A 92 92 0 0 1 210 142"); }
.play .ns3 .n3-ride.a1 { animation: n3ridea1 12s ease-in-out infinite; }
.ns3 .n3-ride.a2 { offset-path: path("M38 142 A 80 80 0 0 1 198 142"); }
.play .ns3 .n3-ride.a2 { animation: n3ridea2 12s ease-in-out infinite; }
.ns3 .n3-ride.a3 { offset-path: path("M50 142 A 68 68 0 0 1 186 142"); }
.play .ns3 .n3-ride.a3 { animation: n3ridea3 12s ease-in-out infinite; }
.ns3 .n3-ride.a4 { offset-path: path("M62 142 A 56 56 0 0 1 174 142"); }
.play .ns3 .n3-ride.a4 { animation: n3ridea4 12s ease-in-out infinite; }
.ns3 .n3-ride.a5 { offset-path: path("M74 142 A 44 44 0 0 1 162 142"); }
.play .ns3 .n3-ride.a5 { animation: n3ridea5 12s ease-in-out infinite; }
.play .ns3 .n3-fill   { animation: n3fill 12s ease-out infinite; }
.play .ns3 .n3-baby   { animation: n3joy 12s ease-in-out infinite; }
.play .ns3 .n3-mouth2 { animation: n3smile 12s ease-in-out infinite; }
.play .ns3 .n3-eyes   { animation: n3blink 5.2s ease-in-out infinite; }
.play .ns3 .n3-spoon  { animation: n3spoon 4s ease-in-out infinite; }
.play .ns3 .n3-basket { animation: n3basket 12s ease-in-out infinite; }
.play .ns3 .n3-cl     { animation: n1driftBack 32s linear infinite; }

@keyframes n3drawa1 {
  0%, 0%   { stroke-dashoffset: 100; opacity: 0; }
  1%       { stroke-dashoffset: 100; opacity: 0.85; }
  12%       { stroke-dashoffset: 0; opacity: 0.85; }
  80%       { stroke-dashoffset: 0; opacity: 0.85; }
  88%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3ridea1 {
  0%, 0%   { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  1%       { offset-distance: 0%; opacity: 1; transform: scale(1); }
  12%       { offset-distance: 100%; opacity: 1; transform: scale(1); }
  15%       { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%      { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3drawa2 {
  0%, 13%   { stroke-dashoffset: 100; opacity: 0; }
  14%       { stroke-dashoffset: 100; opacity: 0.85; }
  25%       { stroke-dashoffset: 0; opacity: 0.85; }
  80%       { stroke-dashoffset: 0; opacity: 0.85; }
  88%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3ridea2 {
  0%, 13%   { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  14%       { offset-distance: 0%; opacity: 1; transform: scale(1); }
  25%       { offset-distance: 100%; opacity: 1; transform: scale(1); }
  28%       { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%      { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3drawa3 {
  0%, 26%   { stroke-dashoffset: 100; opacity: 0; }
  27%       { stroke-dashoffset: 100; opacity: 0.85; }
  38%       { stroke-dashoffset: 0; opacity: 0.85; }
  80%       { stroke-dashoffset: 0; opacity: 0.85; }
  88%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3ridea3 {
  0%, 26%   { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  27%       { offset-distance: 0%; opacity: 1; transform: scale(1); }
  38%       { offset-distance: 100%; opacity: 1; transform: scale(1); }
  41%       { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%      { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3drawa4 {
  0%, 39%   { stroke-dashoffset: 100; opacity: 0; }
  40%       { stroke-dashoffset: 100; opacity: 0.85; }
  51%       { stroke-dashoffset: 0; opacity: 0.85; }
  80%       { stroke-dashoffset: 0; opacity: 0.85; }
  88%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3ridea4 {
  0%, 39%   { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  40%       { offset-distance: 0%; opacity: 1; transform: scale(1); }
  51%       { offset-distance: 100%; opacity: 1; transform: scale(1); }
  54%       { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%      { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3drawa5 {
  0%, 52%   { stroke-dashoffset: 100; opacity: 0; }
  53%       { stroke-dashoffset: 100; opacity: 0.85; }
  64%       { stroke-dashoffset: 0; opacity: 0.85; }
  80%       { stroke-dashoffset: 0; opacity: 0.85; }
  88%       { stroke-dashoffset: 0; opacity: 0; }
  100%      { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3ridea5 {
  0%, 52%   { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  53%       { offset-distance: 0%; opacity: 1; transform: scale(1); }
  64%       { offset-distance: 100%; opacity: 1; transform: scale(1); }
  67%       { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%      { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3fill {
  0%, 12%   { transform: scaleY(0.02); }
  15%, 25%  { transform: scaleY(0.22); }
  28%, 38%  { transform: scaleY(0.42); }
  41%, 51%  { transform: scaleY(0.62); }
  54%, 64%  { transform: scaleY(0.8); }
  67%, 86%  { transform: scaleY(1); }
  94%, 100% { transform: scaleY(0.02); }
}
@keyframes n3joy {
  0%, 64%   { transform: translateY(0) rotate(0deg); }
  69%       { transform: translateY(-5px) rotate(-3deg); }
  73%       { transform: translateY(0) rotate(0deg); }
  77%       { transform: translateY(-3px) rotate(2deg); }
  81%, 100% { transform: translateY(0) rotate(0deg); }
}
@keyframes n3smile {
  0%, 64%   { d: path("M247 113 q 5 5 10 0"); }
  70%, 86%  { d: path("M245 112 q 7 9 14 0"); }
  100%      { d: path("M247 113 q 5 5 10 0"); }
}
@keyframes n3blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}
@keyframes n3spoon {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes n3basket {
  0%, 100% { transform: translateY(0) scaleY(1); }
  1%, 14%, 27%, 40%, 53%  { transform: translateY(0) scaleY(0.94); }
  5%, 18%, 31%, 44%, 57%  { transform: translateY(0) scaleY(1); }
}

/* ───────────────────────────────────────────────────────────────
   4 ▸ ЗДРАВЕ И SOS — ФАРЪТ
   Морето се люлее, но лъчът обикаля и намира лодката всеки път.
   Когато я освети — тя завива към брега. Ти никога не си сама в бурята.
   ─────────────────────────────────────────────────────────────── */
/* лъчът се върти около самата лампа — затова мери в координатите на viewBox */
.ns4 .n4-beam { transform-box: view-box; transform-origin: 84px 44px; }
.play .ns4 .n4-beam  { animation: n4sweep 8s cubic-bezier(.45,0,.55,1) infinite; }
.play .ns4 .n4-lamp  { animation: n4lamp 8s ease-in-out infinite; }
.play .ns4 .n4-heart { animation: n4heart 3.4s ease-in-out infinite; }
.play .ns4 .n4-boat  { animation: n4boat 8s ease-in-out infinite; }
.play .ns4 .n4-w.w1  { animation: n4wave 5s ease-in-out infinite; }
.play .ns4 .n4-w.w2  { animation: n4wave 6.5s ease-in-out infinite reverse; }
.play .ns4 .n4-cl    { animation: n1drift 30s linear infinite; }
.play .ns4 .n4-house { animation: n4stand 6s ease-in-out infinite; }

@keyframes n4sweep {
  0%, 100% { transform: rotate(-14deg); opacity: 0.35; }
  40%      { transform: rotate(16deg);  opacity: 0.9; }
  55%      { transform: rotate(22deg);  opacity: 0.75; }
}
@keyframes n4lamp {
  0%, 100% { r: 5;   opacity: 0.7; }
  42%      { r: 7.5; opacity: 1; }
}
@keyframes n4heart {
  0%, 100% { transform: scale(1); }
  25%      { transform: scale(1.22); }
  40%      { transform: scale(1); }
}
@keyframes n4boat {
  0%       { transform: translate(38px, 2px) rotate(6deg); }
  40%      { transform: translate(10px, -2px) rotate(-3deg); }   /* лъчът я хваща */
  70%      { transform: translate(-14px, 1px) rotate(-6deg); }   /* завива към фара */
  100%     { transform: translate(38px, 2px) rotate(6deg); }
}
@keyframes n4wave {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%      { transform: translateX(-18px) translateY(2px); }
}
@keyframes n4stand {
  0%, 100% { transform: rotate(-0.5deg); }
  50%      { transform: rotate(0.5deg); }
}

/* ───────────────────────────────────────────────────────────────
   5 ▸ ДНЕВНИК НА МАМА — ДУМИТЕ СТАВАТ СЪЗВЕЗДИЕ
   Мама седи подпряна и гледа нагоре. Думите ѝ се откъсват една по
   една, литват и стават звезди, а между тях се чертае сърце. Щом то
   се затвори, тя си поема дъх и до нея грейва сърчице. Това прави
   тази стая: няколко думи вечер — и от тях остава нещо, което свети.
   ─────────────────────────────────────────────────────────────── */
.ns5 .n5-heart { stroke-dasharray: 100; stroke-dashoffset: 100; }
.ns5 .n5-word  { opacity: 0; }
.ns5 .n5-star  { opacity: 0; }
.ns5 .n5-luv   { opacity: 0; }

.play .ns5 .w1          { animation: n5flyw1 14s var(--bl-ease-in-out) infinite; }
.play .ns5 .w1 .n5-pill { animation: n5pillw1 14s ease-in-out infinite; }
.play .ns5 .w1 .n5-star { animation: n5starw1 14s ease-out infinite; }
.play .ns5 .w2          { animation: n5flyw2 14s var(--bl-ease-in-out) infinite; }
.play .ns5 .w2 .n5-pill { animation: n5pillw2 14s ease-in-out infinite; }
.play .ns5 .w2 .n5-star { animation: n5starw2 14s ease-out infinite; }
.play .ns5 .w3          { animation: n5flyw3 14s var(--bl-ease-in-out) infinite; }
.play .ns5 .w3 .n5-pill { animation: n5pillw3 14s ease-in-out infinite; }
.play .ns5 .w3 .n5-star { animation: n5starw3 14s ease-out infinite; }
.play .ns5 .w4          { animation: n5flyw4 14s var(--bl-ease-in-out) infinite; }
.play .ns5 .w4 .n5-pill { animation: n5pillw4 14s ease-in-out infinite; }
.play .ns5 .w4 .n5-star { animation: n5starw4 14s ease-out infinite; }
.play .ns5 .w5          { animation: n5flyw5 14s var(--bl-ease-in-out) infinite; }
.play .ns5 .w5 .n5-pill { animation: n5pillw5 14s ease-in-out infinite; }
.play .ns5 .w5 .n5-star { animation: n5starw5 14s ease-out infinite; }
.play .ns5 .n5-heart   { animation: n5heart 14s ease-in-out infinite; }
.play .ns5 .n5-body    { animation: n5breathe 5.2s ease-in-out infinite; }
.play .ns5 .n5-head    { animation: n5gaze 14s ease-in-out infinite; }
.play .ns5 .n5-luv     { animation: n5luv 14s ease-out infinite; }
.play .ns5 .n5-dust.d1 { animation: n5float 9s ease-in-out infinite; }
.play .ns5 .n5-dust.d2 { animation: n5float 11s ease-in-out infinite 1.5s; }
.play .ns5 .n5-dust.d3 { animation: n5float 10s ease-in-out infinite 3s; }
.play .ns5 .n5-dust.d4 { animation: n5float 12s ease-in-out infinite 4.5s; }
.play .ns5 .n5-dust.d5 { animation: n5float 8.5s ease-in-out infinite 2.2s; }

@keyframes n5flyw1 {
  0%, 12%  { opacity: 0; transform: translate(-89px, 29px) scale(0.7); }
  14%      { opacity: 1; transform: translate(-89px, 29px) scale(1); }
  23%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  99%      { opacity: 0; transform: translate(0, 0) scale(1); }
  100%     { opacity: 0; transform: translate(-89px, 29px) scale(0.7); }
}
@keyframes n5pillw1 {
  0%, 20%  { opacity: 0.9; }
  23%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes n5starw1 {
  0%, 20%  { opacity: 0; transform: scale(0.3) rotate(0deg); }
  23%      { opacity: 1; transform: scale(1.6) rotate(60deg); }
  26%, 92% { opacity: 1; transform: scale(1) rotate(90deg); }
  100%     { opacity: 0; transform: scale(1) rotate(90deg); }
}
@keyframes n5flyw2 {
  0%, 21%  { opacity: 0; transform: translate(-105px, 53px) scale(0.7); }
  23%      { opacity: 1; transform: translate(-105px, 53px) scale(1); }
  32%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  99%      { opacity: 0; transform: translate(0, 0) scale(1); }
  100%     { opacity: 0; transform: translate(-105px, 53px) scale(0.7); }
}
@keyframes n5pillw2 {
  0%, 29%  { opacity: 0.9; }
  32%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes n5starw2 {
  0%, 29%  { opacity: 0; transform: scale(0.3) rotate(0deg); }
  32%      { opacity: 1; transform: scale(1.6) rotate(60deg); }
  35%, 92% { opacity: 1; transform: scale(1) rotate(90deg); }
  100%     { opacity: 0; transform: scale(1) rotate(90deg); }
}
@keyframes n5flyw3 {
  0%, 30%  { opacity: 0; transform: translate(-139px, 53px) scale(0.7); }
  32%      { opacity: 1; transform: translate(-139px, 53px) scale(1); }
  41%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  99%      { opacity: 0; transform: translate(0, 0) scale(1); }
  100%     { opacity: 0; transform: translate(-139px, 53px) scale(0.7); }
}
@keyframes n5pillw3 {
  0%, 38%  { opacity: 0.9; }
  41%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes n5starw3 {
  0%, 38%  { opacity: 0; transform: scale(0.3) rotate(0deg); }
  41%      { opacity: 1; transform: scale(1.6) rotate(60deg); }
  44%, 92% { opacity: 1; transform: scale(1) rotate(90deg); }
  100%     { opacity: 0; transform: scale(1) rotate(90deg); }
}
@keyframes n5flyw4 {
  0%, 39%  { opacity: 0; transform: translate(-155px, 29px) scale(0.7); }
  41%      { opacity: 1; transform: translate(-155px, 29px) scale(1); }
  50%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  99%      { opacity: 0; transform: translate(0, 0) scale(1); }
  100%     { opacity: 0; transform: translate(-155px, 29px) scale(0.7); }
}
@keyframes n5pillw4 {
  0%, 47%  { opacity: 0.9; }
  50%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes n5starw4 {
  0%, 47%  { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.6) rotate(60deg); }
  53%, 92% { opacity: 1; transform: scale(1) rotate(90deg); }
  100%     { opacity: 0; transform: scale(1) rotate(90deg); }
}
@keyframes n5flyw5 {
  0%, 48%  { opacity: 0; transform: translate(-121px, -5px) scale(0.7); }
  50%      { opacity: 1; transform: translate(-121px, -5px) scale(1); }
  59%, 92% { opacity: 1; transform: translate(0, 0) scale(1); }
  99%      { opacity: 0; transform: translate(0, 0) scale(1); }
  100%     { opacity: 0; transform: translate(-121px, -5px) scale(0.7); }
}
@keyframes n5pillw5 {
  0%, 56%  { opacity: 0.9; }
  59%      { opacity: 0; }
  100%     { opacity: 0; }
}
@keyframes n5starw5 {
  0%, 56%  { opacity: 0; transform: scale(0.3) rotate(0deg); }
  59%      { opacity: 1; transform: scale(1.6) rotate(60deg); }
  62%, 92% { opacity: 1; transform: scale(1) rotate(90deg); }
  100%     { opacity: 0; transform: scale(1) rotate(90deg); }
}
@keyframes n5heart {
  0%, 62%  { stroke-dashoffset: 100; opacity: 0; }
  64%      { stroke-dashoffset: 100; opacity: 0.9; }
  78%, 94% { stroke-dashoffset: 0; opacity: 0.9; }
  99%      { stroke-dashoffset: 0; opacity: 0; }
  100%     { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n5breathe {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-0.8px) scaleY(1.02); }
}
/* щом сърцето се затвори, тя вдига поглед още малко */
@keyframes n5gaze {
  0%, 60%   { transform: rotate(0deg); }
  70%       { transform: rotate(-5deg); }
  80%, 92%  { transform: rotate(-7deg); }
  100%      { transform: rotate(0deg); }
}
@keyframes n5luv {
  0%, 78%  { opacity: 0; transform: translateY(0) scale(0.4); }
  84%      { opacity: 1; transform: translateY(-4px) scale(1.2); }
  92%      { opacity: 1; transform: translateY(-6px) scale(1); }
  99%      { opacity: 0; transform: translateY(-12px) scale(0.8); }
  100%     { opacity: 0; }
}
@keyframes n5float {
  0%, 100% { opacity: 0.3; transform: translate(0, 0); }
  50%      { opacity: 0.9; transform: translate(4px, -6px); }
}

/* ───────────────────────────────────────────────────────────────
   6 ▸ РАЗВИТИЕ И ИГРИ — КУЛАТА ОТ КУБЧЕТА
   Ръчичката слага кубче по кубче, кулата расте до звездата,
   после се събаря — и пак отначало. Точно това е ученето.
   ─────────────────────────────────────────────────────────────── */
.play .ns6 .n6-blk.k1 { animation: n6stack1 9s ease-out infinite; }
.play .ns6 .n6-blk.k2 { animation: n6stack2 9s ease-out infinite; }
.play .ns6 .n6-blk.k3 { animation: n6stack3 9s ease-out infinite; }
.play .ns6 .n6-blk.k4 { animation: n6stack4 9s ease-out infinite; }
.play .ns6 .n6-blk.k5 { animation: n6stack5 9s ease-out infinite; }
.play .ns6 .n6-crown  { animation: n6crown 9s ease-in-out infinite; }
.play .ns6 .n6-hand   { animation: n6hand 9s ease-in-out infinite; }
.play .ns6 .n6-fb.f1  { animation: n6tumble 9s ease-in infinite; }
.play .ns6 .n6-fb.f2  { animation: n6tumble2 9s ease-in infinite; }
.play .ns6 .n6-pop.p1 { animation: n6pop 9s ease-out infinite; }
.play .ns6 .n6-pop.p2 { animation: n6pop 9s ease-out infinite .2s; }

@keyframes n6stack1 {
  0%, 0%  { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
  4%      { opacity: 1; transform: translateY(0) rotate(0deg); }
  6%      { transform: translateY(0) scaleY(0.88); }
  8%, 78% { opacity: 1; transform: translateY(0) scaleY(1) rotate(0deg); }
  85%      { opacity: 1; transform: translateY(2px) rotate(4deg); }
  93%      { opacity: 0; transform: translateY(32px) rotate(19deg); }
  100%     { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
}
@keyframes n6stack2 {
  0%, 7%  { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
  11%      { opacity: 1; transform: translateY(0) rotate(0deg); }
  13%      { transform: translateY(0) scaleY(0.88); }
  15%, 78% { opacity: 1; transform: translateY(0) scaleY(1) rotate(0deg); }
  85%      { opacity: 1; transform: translateY(2px) rotate(4deg); }
  93%      { opacity: 0; transform: translateY(32px) rotate(8deg); }
  100%     { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
}
@keyframes n6stack3 {
  0%, 14%  { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
  18%      { opacity: 1; transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(0) scaleY(0.88); }
  22%, 78% { opacity: 1; transform: translateY(0) scaleY(1) rotate(0deg); }
  85%      { opacity: 1; transform: translateY(2px) rotate(4deg); }
  93%      { opacity: 0; transform: translateY(32px) rotate(-3deg); }
  100%     { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
}
@keyframes n6stack4 {
  0%, 21%  { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
  25%      { opacity: 1; transform: translateY(0) rotate(0deg); }
  27%      { transform: translateY(0) scaleY(0.88); }
  29%, 78% { opacity: 1; transform: translateY(0) scaleY(1) rotate(0deg); }
  85%      { opacity: 1; transform: translateY(2px) rotate(4deg); }
  93%      { opacity: 0; transform: translateY(32px) rotate(-14deg); }
  100%     { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
}
@keyframes n6stack5 {
  0%, 28%  { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
  32%      { opacity: 1; transform: translateY(0) rotate(0deg); }
  34%      { transform: translateY(0) scaleY(0.88); }
  36%, 78% { opacity: 1; transform: translateY(0) scaleY(1) rotate(0deg); }
  85%      { opacity: 1; transform: translateY(2px) rotate(4deg); }
  93%      { opacity: 0; transform: translateY(32px) rotate(-25deg); }
  100%     { opacity: 0; transform: translateY(-26px) rotate(-14deg); }
}
@keyframes n6crown {
  0%, 34%  { opacity: 0; transform: scale(0.4); }
  40%      { opacity: 1; transform: scale(1.5); }
  46%, 78% { opacity: 1; transform: scale(1); }
  88%      { opacity: 0; transform: scale(0.6) rotate(40deg); }
  100%     { opacity: 0; }
}
/* ръчичката подава кубче след кубче — все по-нависоко */
@keyframes n6hand {
  0%       { transform: translate(-42px, 38px) rotate(-8deg); }
  4%, 6%   { transform: translate(0, 0) rotate(0deg); }
  11%      { transform: translate(-42px, 16px) rotate(-8deg); }
  13%      { transform: translate(0, 0) rotate(0deg); }
  18%      { transform: translate(-42px, -6px) rotate(-8deg); }
  20%      { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-42px, -28px) rotate(-9deg); }
  27%      { transform: translate(0, 0) rotate(0deg); }
  32%      { transform: translate(-40px, -50px) rotate(-10deg); }
  36%, 80% { transform: translate(0, 0) rotate(0deg); }
  86%      { transform: translate(4px, 5px) rotate(7deg); }
  100%     { transform: translate(0, 0) rotate(0deg); }
}
@keyframes n6tumble {
  0%, 86%  { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  92%      { opacity: 1; transform: translate(-6px, 4px) rotate(120deg); }
  99%      { opacity: 0; transform: translate(-16px, 10px) rotate(300deg); }
  100%     { opacity: 0; }
}
@keyframes n6tumble2 {
  0%, 86%  { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  93%      { opacity: 1; transform: translate(8px, 6px) rotate(-140deg); }
  99%      { opacity: 0; transform: translate(20px, 12px) rotate(-320deg); }
  100%     { opacity: 0; }
}
@keyframes n6pop {
  0%, 36%  { opacity: 0; transform: scale(0.3); }
  44%      { opacity: 1; transform: scale(1.2) rotate(45deg); }
  58%      { opacity: 0; transform: scale(0.6) rotate(90deg); }
  100%     { opacity: 0; }
}


/* ───────────────────────────────────────────────────────────────
   7 ▸ ИНСТРУМЕНТИ — ШАПКАТА НА ФОКУСНИКА
   Пръчицата чуква, лъхва облаче — и отвътре изскача точно каквото ти
   трябва: линийка, шишенце, календар, фенерче, касичка, изненада.
   Кутия с чудесии, буквално: не знаеш какво има вътре, но винаги е
   там, когато го потърсиш.
   ─────────────────────────────────────────────────────────────── */
.ns7 .n7-em { font-size: 21px; }
/* прибрани дълбоко в шапката; корпусът ги крие, защото е нарисуван върху тях */
.ns7 .n7-item { opacity: 0; transform: translateY(62px) scale(0.5); }
.ns7 .n7-puff { transform-box: view-box; transform-origin: 150px 72px; opacity: 0; }
.ns7 .n7-wand { transform-box: view-box; transform-origin: 252px 134px; }
.ns7 .n7-hat  { transform-box: view-box; transform-origin: 150px 130px; }
.ns7 .n7-halo { transform-box: view-box; transform-origin: 150px 62px; }

.play .ns7 .n7-item.i1 { animation: n7pop 12s ease-out infinite 0s; }
.play .ns7 .n7-item.i2 { animation: n7pop 12s ease-out infinite 2s; }
.play .ns7 .n7-item.i3 { animation: n7pop 12s ease-out infinite 4s; }
.play .ns7 .n7-item.i4 { animation: n7pop 12s ease-out infinite 6s; }
.play .ns7 .n7-item.i5 { animation: n7pop 12s ease-out infinite 8s; }
.play .ns7 .n7-item.i6 { animation: n7pop 12s ease-out infinite 10s; }
.play .ns7 .n7-wand   { animation: n7wand 2s ease-in-out infinite; }
.play .ns7 .n7-puff   { animation: n7puff 2s ease-out infinite; }
.play .ns7 .n7-hat    { animation: n7hat 2s ease-in-out infinite; }
.play .ns7 .n7-halo   { animation: n7halo 26s linear infinite; }
.play .ns7 .n7-spk.s1 { animation: n7spk 2s ease-out infinite .1s; }
.play .ns7 .n7-spk.s2 { animation: n7spk 2s ease-out infinite .25s; }
.play .ns7 .n7-spk.s3 { animation: n7spk 2s ease-out infinite .4s; }

/* изскача → показва се → гмурва се обратно; следващият идва след 2s */
@keyframes n7pop {
  0%   { opacity: 0; transform: translateY(62px) scale(0.5); }
  2%   { opacity: 1; transform: translateY(30px) scale(0.8); }
  5%   { transform: translateY(-8px) scale(1.22); }
  7%   { transform: translateY(0) scale(1); }
  14%  { transform: translateY(-4px) scale(1); }
  17%  { opacity: 1; transform: translateY(0) scale(1); }
  20%  { opacity: 0; transform: translateY(62px) scale(0.5); }
  100% { opacity: 0; transform: translateY(62px) scale(0.5); }
}
@keyframes n7wand {
  0%   { transform: rotate(-20deg); }
  10%  { transform: rotate(8deg); }
  22%  { transform: rotate(0deg); }
  70%  { transform: rotate(-4deg); }
  100% { transform: rotate(-20deg); }
}
@keyframes n7puff {
  0%, 6% { opacity: 0; transform: scale(0.3); }
  12%    { opacity: 0.9; transform: scale(1); }
  42%    { opacity: 0; transform: scale(2.1) translateY(-8px); }
  100%   { opacity: 0; transform: scale(2.1) translateY(-8px); }
}
@keyframes n7hat {
  0%, 100% { transform: scaleY(1); }
  11%      { transform: scaleY(0.95); }
  22%      { transform: scaleY(1.03); }
  36%      { transform: scaleY(1); }
}
@keyframes n7halo { to { transform: rotate(360deg); } }
@keyframes n7spk {
  0%, 8% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  16%    { opacity: 1; transform: scale(1.2) rotate(50deg); }
  46%    { opacity: 0; transform: scale(0.5) rotate(90deg); }
  100%   { opacity: 0; }
}

/* ───────────────────────────────────────────────────────────────
   8 ▸ ЖЕНАТА В МЕН — ОГЛЕДАЛОТО
   Мама държи бебето и гледа в огледалото. В отражението е ТЯ — с рокля,
   с коса, изправена. Отражението диша по СВОЙ такт, различен от нейния —
   това е целият фокус: щом двете дишат различно, отражението оживява.
   Накрая ѝ намига. „Тя е още тук."
   ─────────────────────────────────────────────────────────────── */
.ns8 .n8-heart, .ns8 .n8-shine { opacity: 0; }
.ns8 .n8-eyeL { transform-box: view-box; transform-origin: 207px 76px; }
.ns8 .n8-eyeR { transform-box: view-box; transform-origin: 215px 76px; }

.play .ns8 .n8-real   { animation: n8sway 6s ease-in-out infinite; }
.play .ns8 .n8-bundle { animation: n8rock 3.4s ease-in-out infinite; }
.play .ns8 .n8-refl   { animation: n8alive 4.4s ease-in-out infinite; }
.play .ns8 .n8-arm    { animation: n8wave 9s ease-in-out infinite; }
.play .ns8 .n8-eyeR   { animation: n8wink 9s ease-in-out infinite; }
.play .ns8 .n8-shine  { animation: n8shine 9s ease-in-out infinite; }
.play .ns8 .n8-heart  { animation: n8luv 9s ease-out infinite; }
.play .ns8 .n8-tw.a   { animation: n8twk 3.6s ease-in-out infinite; }
.play .ns8 .n8-tw.b   { animation: n8twk 3.6s ease-in-out infinite 1.4s; }

/* тя се люлее уморено, с бебето на ръце */
@keyframes n8sway {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(1deg) translateY(-1px); }
}
@keyframes n8rock {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
/* отражението — свой ритъм, оттам идва ефектът */
@keyframes n8alive {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-1.6px) scale(1.015); }
}
@keyframes n8wave {
  0%, 62%, 100% { transform: rotate(0deg); }
  70%           { transform: rotate(-12deg); }
  76%           { transform: rotate(4deg); }
  84%           { transform: rotate(-6deg); }
}
@keyframes n8wink {
  0%, 66%, 100% { transform: scaleY(1); }
  72%, 76%      { transform: scaleY(0.12); }
  80%           { transform: scaleY(1); }
}
@keyframes n8shine {
  0%, 24% { opacity: 0; transform: translateX(0); }
  30%     { opacity: 0.5; }
  46%     { opacity: 0; transform: translateX(150px); }
  100%    { opacity: 0; transform: translateX(150px); }
}
@keyframes n8luv {
  0%, 76% { opacity: 0; transform: scale(0.4); }
  84%     { opacity: 1; transform: scale(1.25); }
  92%     { opacity: 1; transform: scale(1); }
  99%     { opacity: 0; transform: scale(0.9) translateY(-4px); }
  100%    { opacity: 0; }
}
@keyframes n8twk {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1; transform: scale(1.15) rotate(45deg); }
}

/* ───────────────────────────────────────────────────────────────
   9 ▸ ЛАБОРАТОРИЯТА — ДЪСКАТА С УЛИКИТЕ
   Листчетата се забождат едно по едно, с леко залюляване. Червеният конец
   ги свързва и се чертае сам. Щом стигне до отговора — крушката пламва и
   „?" става „!". После всичко избледнява и започва нов случай.
   ─────────────────────────────────────────────────────────────── */
.ns9 .n9-t    { font-size: 7px; font-weight: 700; fill: #8a6a44; }
.ns9 .n9-big  { font-size: 15px; font-weight: 800; fill: #a8712a; }
.ns9 .n9-e    { font-size: 13px; }
.ns9 .n9-mark { font-size: 26px; font-weight: 800; fill: #d64545; }
.ns9 .n9-thread { stroke-dasharray: 100; stroke-dashoffset: 100; }
.ns9 .n9-note, .ns9 .n9-ans { opacity: 0; }
.ns9 .n9-lamp, .ns9 .n9-x { opacity: 0; }

.play .ns9 .n9-note.n1c { animation: n9pin1 13s ease-out infinite; }
.play .ns9 .n9-note.n2c { animation: n9pin2 13s ease-out infinite; }
.play .ns9 .n9-note.n3c { animation: n9pin3 13s ease-out infinite; }
.play .ns9 .n9-ans      { animation: n9pin4 13s ease-out infinite; }
.play .ns9 .n9-thread   { animation: n9thread 13s ease-in-out infinite; }
.play .ns9 .n9-lamp     { animation: n9lamp 13s ease-out infinite; }
.play .ns9 .n9-q        { animation: n9q 13s ease-out infinite; }
.play .ns9 .n9-x        { animation: n9x 13s ease-out infinite; }

@keyframes n9pin1 {
  0%, 2%   { opacity: 0; transform: translateY(-12px) rotate(-14deg); }
  8%       { opacity: 1; transform: translateY(0) rotate(2deg); }
  11%      { transform: translateY(0) rotate(-1deg); }
  14%, 90% { opacity: 1; transform: translateY(0) rotate(0deg); }
  98%      { opacity: 0; transform: translateY(0) rotate(0deg); }
  100%     { opacity: 0; transform: translateY(-12px) rotate(-14deg); }
}
@keyframes n9pin2 {
  0%, 14%  { opacity: 0; transform: translateY(-12px) rotate(12deg); }
  20%      { opacity: 1; transform: translateY(0) rotate(-2deg); }
  23%      { transform: translateY(0) rotate(1deg); }
  26%, 90% { opacity: 1; transform: translateY(0) rotate(0deg); }
  98%      { opacity: 0; }
  100%     { opacity: 0; transform: translateY(-12px) rotate(12deg); }
}
@keyframes n9pin3 {
  0%, 26%  { opacity: 0; transform: translateY(-12px) rotate(-10deg); }
  32%      { opacity: 1; transform: translateY(0) rotate(3deg); }
  35%      { transform: translateY(0) rotate(-1deg); }
  38%, 90% { opacity: 1; transform: translateY(0) rotate(0deg); }
  98%      { opacity: 0; }
  100%     { opacity: 0; transform: translateY(-12px) rotate(-10deg); }
}
@keyframes n9pin4 {
  0%, 38%  { opacity: 0; transform: translateY(-12px) rotate(10deg); }
  44%      { opacity: 1; transform: translateY(0) rotate(-2deg); }
  48%, 90% { opacity: 1; transform: translateY(0) rotate(0deg); }
  98%      { opacity: 0; }
  100%     { opacity: 0; transform: translateY(-12px) rotate(10deg); }
}
/* конецът тръгва чак когато вече има какво да свързва */
@keyframes n9thread {
  0%, 48%  { stroke-dashoffset: 100; opacity: 0; }
  50%      { stroke-dashoffset: 100; opacity: 0.9; }
  70%, 92% { stroke-dashoffset: 0; opacity: 0.9; }
  99%      { stroke-dashoffset: 0; opacity: 0; }
  100%     { stroke-dashoffset: 100; opacity: 0; }
}
/* крушката пламва точно щом конецът стигне до отговора */
@keyframes n9lamp {
  0%, 70%  { opacity: 0; transform: scale(0.5); }
  76%      { opacity: 1; transform: scale(1.25); }
  82%, 92% { opacity: 1; transform: scale(1); }
  99%      { opacity: 0; }
  100%     { opacity: 0; transform: scale(0.5); }
}
@keyframes n9q {
  0%, 72% { opacity: 1; transform: scale(1) rotate(0deg); }
  78%     { opacity: 0; transform: scale(0.4) rotate(-30deg); }
  100%    { opacity: 0; }
}
@keyframes n9x {
  0%, 74%  { opacity: 0; transform: scale(0.4) rotate(20deg); }
  80%      { opacity: 1; transform: scale(1.4) rotate(0deg); }
  86%, 92% { opacity: 1; transform: scale(1); }
  99%      { opacity: 0; }
  100%     { opacity: 0; }
}

/* ───────────────────────────────────────────────────────────────
   Тишина за тези, които не искат движение
   ─────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .play .ns1 *, .play .ns2 *, .play .ns3 *, .play .ns4 *,
  .play .ns5 *, .play .ns6 *, .play .ns7 * {
    animation: none !important;
  }
  .ns2 .n2-grow { stroke-dashoffset: 0; }
  .ns6 .n6-blk, .ns6 .n6-crown { opacity: 1 !important; }
  .ns3 .n3-band, .ns5 .n5-heart { stroke-dashoffset: 0; opacity: 0.85; }
  .ns3 .n3-ride, .ns5 .n5-pill, .ns7 .n7-puff { opacity: 0; }
  .ns3 .n3-fill { transform: scaleY(1); }
  .ns5 .n5-word, .ns5 .n5-star, .ns5 .n5-luv { opacity: 1; transform: none; }
  .ns7 .n7-item.i1 { opacity: 1; transform: translateY(0) scale(1); }
  .ns8 .n8-shine, .ns8 .n8-heart { opacity: 0; }
  .ns9 .n9-note, .ns9 .n9-ans, .ns9 .n9-lamp { opacity: 1; transform: none; }
  .ns9 .n9-thread { stroke-dashoffset: 0; opacity: 0.9; }
  .ns9 .n9-q { opacity: 0; }
  .ns9 .n9-x { opacity: 1; }
  
}

/* Преди .play — статичен, спретнат кадър (никакво трепване при зареждане):
   кулата стои готова, ножчето е прибрано, летящите дреболии чакат реда си. */
.ns6 .n6-fb, .ns6 .n6-pop, .ns1 .n1-kick, .ns2 .n2-dot { opacity: 0; }
.ns2 .n2-grow { stroke-dashoffset: 180; }


/* ════════════════════════════════════════════════════════════
   🎨 ПРЕМИУМ СЦЕНИ v2 (флот 22.07) — пресъздадени: дълбочина, история,
   живот. По-долните правила печелят по каскада над старите за същите nsN.
   ════════════════════════════════════════════════════════════ */

/* ─── ns1 ─── */
/* ns1 — Бременност: биещата утроба */
.play .ns1 .n1-womb   { animation: n1beat 2.6s ease-in-out infinite; }
.play .ns1 .n1-glow   { animation: n1glow 2.6s ease-in-out infinite; }
.play .ns1 .n1-baby   { animation: n1float 7s ease-in-out infinite; }
.play .ns1 .n1-spark  { animation: n1travel 4.6s ease-in-out infinite; }
.play .ns1 .n1-tw.t1  { animation: n1tw 3.2s ease-in-out infinite; }
.play .ns1 .n1-tw.t2  { animation: n1tw 4s ease-in-out infinite .8s; }
.play .ns1 .n1-cl.a   { animation: n1clA 32s linear infinite; }
.play .ns1 .n1-cl.b   { animation: n1clB 44s linear infinite; }
.play .ns1 .n1-chip   { animation: n1chip 5s ease-in-out infinite; }
.play .ns1 .n1-bok.b1 { animation: n1bok 7.5s ease-in-out infinite; }
.play .ns1 .n1-bok.b2 { animation: n1bok 9.5s ease-in-out infinite 2s; }

@keyframes n1beat {
  0%   { transform: scale(1); }
  6%   { transform: scale(1.05); }   /* лъб */
  12%  { transform: scale(1.0); }
  19%  { transform: scale(1.065); }  /* дъб */
  27%  { transform: scale(1.0); }
  100% { transform: scale(1); }      /* тиха почивка */
}
@keyframes n1glow {
  0%,100% { opacity: 0.35; transform: scale(1); }
  6%      { opacity: 0.6;  transform: scale(1.06); }
  19%     { opacity: 0.72; transform: scale(1.1); }
  27%     { opacity: 0.4;  transform: scale(1.0); }
}
@keyframes n1float {
  0%,100% { transform: translate(0,0) rotate(-3deg); }
  50%     { transform: translate(1.5px,-2px) rotate(3deg); }
}
@keyframes n1travel {
  0%   { transform: translate(0,0) scale(0.4);        opacity: 0; }
  14%  { transform: translate(14px,-5px) scale(1);    opacity: 1; }
  50%  { transform: translate(48px,-11px) scale(1.05);opacity: 1; }
  86%  { transform: translate(80px,8px) scale(0.9);   opacity: 1; }
  100% { transform: translate(92px,15px) scale(0.4);  opacity: 0; }
}
@keyframes n1tw {
  0%,100% { opacity: 0.3; transform: scale(0.7); }
  50%     { opacity: 1;   transform: scale(1.1); }
}
@keyframes n1chip {
  0%,100% { transform: translateY(0);    opacity: 0.85; }
  50%     { transform: translateY(-3px); opacity: 1; }
}
@keyframes n1bok {
  0%   { transform: translate(0,0);       opacity: 0; }
  22%  { opacity: 0.7; }
  80%  { opacity: 0.5; }
  100% { transform: translate(6px,-30px); opacity: 0; }
}
@keyframes n1clA { from { transform: translateX(-40px); } to { transform: translateX(360px); } }
@keyframes n1clB { from { transform: translateX(0); }     to { transform: translateX(-380px); } }

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

/* ─── ns2 ─── */
/* ns2 — Моето бебе: премиум растеж-морф по дъга */
/* fill беше #b06a86 = 3.77:1 върху бялото чипче (под 4.5:1); същото розово, но по-дълбоко */
.ns2 .gchip-t { font-size: 11px; font-weight: 700; fill: #a04f70; letter-spacing: .2px; }
.ns2 .n2-sh { fill: #5a3c50; opacity: 0.13; }

/* статично състояние (без .play / reduced-motion): чист единичен герой */
.ns2 .n2-pose { opacity: 0; }
.ns2 .n2-p3   { opacity: 1; }
.ns2 .n2-arc  { stroke-dashoffset: 0; }
.ns2 .n2-dot, .ns2 .n2-leaf { opacity: 0; }
.ns2 .n2-sprout { transform-box: fill-box; transform-origin: bottom center; }

/* offset-path за пътуващата точка по дъгата */
.ns2 .n2-dot {
  offset-path: path("M40 118 Q102 112 150 90 Q206 66 258 50");
  offset-rotate: 0deg;
}

/* --- анимации: само при .play --- */
.play .ns2 .n2-arc    { animation: n2draw 13s ease-in-out infinite; }
.play .ns2 .n2-dot    { animation: n2dot 13s ease-in-out infinite; }
.play .ns2 .n2-pose   { animation: n2pose 13s ease-in-out infinite backwards; }
.play .ns2 .n2-p1 { animation-delay: 0s; }
.play .ns2 .n2-p2 { animation-delay: 2.6s; }
.play .ns2 .n2-p3 { animation-delay: 5.2s; }
.play .ns2 .n2-p4 { animation-delay: 7.8s; }
.play .ns2 .n2-p5 { animation-delay: 10.4s; }
.play .ns2 .n2-leaf   { animation: n2leaf 13s ease-in-out infinite; }
.play .ns2 .n2-sprout { animation: n2sway 5s ease-in-out infinite; }
.play .ns2 .n2-hills  { animation: n2drift 17s ease-in-out infinite; }
.play .ns2 .n2-spark  { animation: n2tw 3.2s ease-in-out infinite; }
/* ПОПРАВКА: .gchip стои на opacity:0 и се показва само от chipIn (style.css).
   Тук n2float заместваше целия shorthand и чипчето „Расте пред очите ти"
   никога не се появяваше. Пускаме и двете — chipIn вдига видимостта,
   n2float поема носенето след 1.8s. */
.play .ns2 .gc1       { animation: chipIn 0.7s var(--bl-ease-spring) 1.1s forwards,
                                   n2float 6s ease-in-out 1.8s infinite; }

@keyframes n2pose {
  0%   { opacity: 0; transform: scale(.8) translateY(4px); }
  4%   { opacity: 1; transform: scale(1) translateY(0); }
  9%   { transform: scale(1.05) translateY(-1px); }
  14%  { transform: scale(1) translateY(0); }
  18%  { opacity: 1; }
  23%  { opacity: 0; transform: scale(.9) translateY(-2px); }
  100% { opacity: 0; }
}
@keyframes n2draw {
  0%   { stroke-dashoffset: 100; opacity: .55; }
  8%   { opacity: 1; }
  55%  { stroke-dashoffset: 0; }
  88%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 100; opacity: .55; }
}
@keyframes n2dot {
  0%   { offset-distance: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  55%  { offset-distance: 100%; opacity: 1; }
  66%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 0%;   opacity: 0; }
}
@keyframes n2leaf {
  0%, 56%  { opacity: 0; transform: translate(0,0) rotate(0deg); }
  61%      { opacity: 1; }
  84%      { opacity: 1; transform: translate(-7px,46px) rotate(135deg); }
  94%,100% { opacity: 0; transform: translate(-9px,56px) rotate(158deg); }
}
@keyframes n2sway {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes n2drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@keyframes n2tw {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50%      { opacity: 1;  transform: scale(1.1); }
}
@keyframes n2float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

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

/* ─── ns3 ─── */
.ns3 .n3-em { font-size: 13px; }

/* ---- base (no .play) = завършена красива сцена → reduce застива красиво ---- */
.ns3 .n3-band  { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 0.9; }
.ns3 .n3-ride  { opacity: 0; offset-rotate: 0deg; }
.ns3 .n3-feed  { opacity: 0; offset-rotate: 0deg; }
.ns3 .n3-steam { stroke-dasharray: 100; stroke-dashoffset: 0; opacity: 0; }
.ns3 .n3-cheek { opacity: 0.35; }
.ns3 .n3-fill  { transform-box: view-box; transform-origin: 186px 150px; transform: scaleY(1); }

.ns3 .n3-ride.a1, .ns3 .n3-feed { offset-path: path("M26 142 A 92 92 0 0 1 210 142"); }
.ns3 .n3-ride.a2 { offset-path: path("M38 142 A 80 80 0 0 1 198 142"); }
.ns3 .n3-ride.a3 { offset-path: path("M50 142 A 68 68 0 0 1 186 142"); }
.ns3 .n3-ride.a4 { offset-path: path("M62 142 A 56 56 0 0 1 174 142"); }
.ns3 .n3-ride.a5 { offset-path: path("M74 142 A 44 44 0 0 1 162 142"); }
.ns3 .n3-feed    { offset-path: path("M206 122 Q 232 92 250 113"); }

/* ---- animations (само под .play) ---- */
.play .ns3 .n3-band.a1 { animation: n3drawa1 12s ease-in-out infinite; }
.play .ns3 .n3-band.a2 { animation: n3drawa2 12s ease-in-out infinite; }
.play .ns3 .n3-band.a3 { animation: n3drawa3 12s ease-in-out infinite; }
.play .ns3 .n3-band.a4 { animation: n3drawa4 12s ease-in-out infinite; }
.play .ns3 .n3-band.a5 { animation: n3drawa5 12s ease-in-out infinite; }
.play .ns3 .n3-ride.a1 { animation: n3ridea1 12s ease-in-out infinite; }
.play .ns3 .n3-ride.a2 { animation: n3ridea2 12s ease-in-out infinite; }
.play .ns3 .n3-ride.a3 { animation: n3ridea3 12s ease-in-out infinite; }
.play .ns3 .n3-ride.a4 { animation: n3ridea4 12s ease-in-out infinite; }
.play .ns3 .n3-ride.a5 { animation: n3ridea5 12s ease-in-out infinite; }
.play .ns3 .n3-fill    { animation: n3fill 12s ease-out infinite; }
.play .ns3 .n3-feed    { animation: n3feed 12s ease-in-out infinite; }
.play .ns3 .n3-baby    { animation: n3joy 12s ease-in-out infinite; }
.play .ns3 .n3-mouth2  { animation: n3smile 12s ease-in-out infinite; }
.play .ns3 .n3-cheek   { animation: n3cheek 12s ease-in-out infinite; }
.play .ns3 .n3-eyes    { animation: n3blink 5.2s ease-in-out infinite; }
.play .ns3 .n3-spoon   { animation: n3spoon 4s ease-in-out infinite; }
.play .ns3 .n3-basket  { animation: n3basket 12s ease-in-out infinite; }
.play .ns3 .n3-steam.s1 { animation: n3steam 6s ease-in-out infinite; }
.play .ns3 .n3-steam.s2 { animation: n3steam 6s ease-in-out infinite 2.4s; }
.play .ns3 .n3-cl      { animation: n3drift 34s ease-in-out infinite; }
.play .ns3 .n3-cl2     { animation: n3drift 26s ease-in-out infinite reverse; }

@keyframes n3drawa1 {
  0%     { stroke-dashoffset: 100; opacity: 0; }
  1%     { stroke-dashoffset: 100; opacity: 0.9; }
  12%    { stroke-dashoffset: 0; opacity: 0.9; }
  86%    { stroke-dashoffset: 0; opacity: 0.9; }
  94%    { stroke-dashoffset: 0; opacity: 0; }
  100%   { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3drawa2 {
  0%, 13% { stroke-dashoffset: 100; opacity: 0; }
  14%    { stroke-dashoffset: 100; opacity: 0.9; }
  25%    { stroke-dashoffset: 0; opacity: 0.9; }
  86%    { stroke-dashoffset: 0; opacity: 0.9; }
  94%    { stroke-dashoffset: 0; opacity: 0; }
  100%   { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3drawa3 {
  0%, 26% { stroke-dashoffset: 100; opacity: 0; }
  27%    { stroke-dashoffset: 100; opacity: 0.9; }
  38%    { stroke-dashoffset: 0; opacity: 0.9; }
  86%    { stroke-dashoffset: 0; opacity: 0.9; }
  94%    { stroke-dashoffset: 0; opacity: 0; }
  100%   { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3drawa4 {
  0%, 39% { stroke-dashoffset: 100; opacity: 0; }
  40%    { stroke-dashoffset: 100; opacity: 0.9; }
  51%    { stroke-dashoffset: 0; opacity: 0.9; }
  86%    { stroke-dashoffset: 0; opacity: 0.9; }
  94%    { stroke-dashoffset: 0; opacity: 0; }
  100%   { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3drawa5 {
  0%, 52% { stroke-dashoffset: 100; opacity: 0; }
  53%    { stroke-dashoffset: 100; opacity: 0.9; }
  64%    { stroke-dashoffset: 0; opacity: 0.9; }
  86%    { stroke-dashoffset: 0; opacity: 0.9; }
  94%    { stroke-dashoffset: 0; opacity: 0; }
  100%   { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n3ridea1 {
  0%     { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  1%     { offset-distance: 0%; opacity: 1; transform: scale(1.05); }
  4%     { offset-distance: 22%; opacity: 1; transform: scale(0.9); }
  8%     { offset-distance: 60%; opacity: 1; transform: scale(1.05); }
  12%    { offset-distance: 100%; opacity: 1; transform: scale(1); }
  15%    { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%   { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3ridea2 {
  0%, 13% { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  14%    { offset-distance: 0%; opacity: 1; transform: scale(1.05); }
  17%    { offset-distance: 22%; opacity: 1; transform: scale(0.9); }
  21%    { offset-distance: 60%; opacity: 1; transform: scale(1.05); }
  25%    { offset-distance: 100%; opacity: 1; transform: scale(1); }
  28%    { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%   { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3ridea3 {
  0%, 26% { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  27%    { offset-distance: 0%; opacity: 1; transform: scale(1.05); }
  30%    { offset-distance: 22%; opacity: 1; transform: scale(0.9); }
  34%    { offset-distance: 60%; opacity: 1; transform: scale(1.05); }
  38%    { offset-distance: 100%; opacity: 1; transform: scale(1); }
  41%    { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%   { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3ridea4 {
  0%, 39% { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  40%    { offset-distance: 0%; opacity: 1; transform: scale(1.05); }
  43%    { offset-distance: 22%; opacity: 1; transform: scale(0.9); }
  47%    { offset-distance: 60%; opacity: 1; transform: scale(1.05); }
  51%    { offset-distance: 100%; opacity: 1; transform: scale(1); }
  54%    { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%   { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3ridea5 {
  0%, 52% { offset-distance: 0%; opacity: 0; transform: scale(0.4); }
  53%    { offset-distance: 0%; opacity: 1; transform: scale(1.05); }
  56%    { offset-distance: 22%; opacity: 1; transform: scale(0.9); }
  60%    { offset-distance: 60%; opacity: 1; transform: scale(1.05); }
  64%    { offset-distance: 100%; opacity: 1; transform: scale(1); }
  67%    { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%   { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3fill {
  0%, 12%   { transform: scaleY(0.06); }
  15%, 25%  { transform: scaleY(0.24); }
  28%, 38%  { transform: scaleY(0.44); }
  41%, 51%  { transform: scaleY(0.63); }
  54%, 64%  { transform: scaleY(0.82); }
  67%, 70%  { transform: scaleY(1); }
  76%, 86%  { transform: scaleY(0.72); }
  94%, 100% { transform: scaleY(0.06); }
}
@keyframes n3feed {
  0%, 64%  { offset-distance: 0%; opacity: 0; transform: scale(0.5); }
  66%      { offset-distance: 0%; opacity: 1; transform: scale(1); }
  72%      { offset-distance: 100%; opacity: 1; transform: scale(1); }
  74%      { offset-distance: 100%; opacity: 1; transform: scale(0.5); }
  76%      { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
  100%     { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
@keyframes n3joy {
  0%       { transform: translateY(0) scale(1); }
  30%      { transform: translateY(-0.6px) scale(1.012); }
  60%      { transform: translateY(0) scale(1); }
  71%      { transform: translateY(1px) scale(0.99); }
  76%      { transform: translateY(-5px) rotate(-3deg); }
  80%      { transform: translateY(0) rotate(1deg); }
  84%      { transform: translateY(-2.5px) rotate(2deg); }
  88%, 100% { transform: translateY(0) rotate(0deg); }
}
@keyframes n3smile {
  0%, 68%  { d: path("M247 113 q 5 5 10 0"); }
  71%      { d: path("M246 112 q 6 9 12 0"); }
  76%, 90% { d: path("M245 112 q 7 8 14 0"); }
  100%     { d: path("M247 113 q 5 5 10 0"); }
}
@keyframes n3cheek {
  0%, 68%  { opacity: 0.35; transform: scale(1); }
  74%      { opacity: 0.85; transform: scale(1.35); }
  84%      { opacity: 0.9; transform: scale(1.3); }
  92%, 100% { opacity: 0.35; transform: scale(1); }
}
@keyframes n3blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
@keyframes n3spoon {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes n3basket {
  0%, 100% { transform: translateY(0) scaleY(1); }
  1%, 14%, 27%, 40%, 53%  { transform: translateY(0) scaleY(0.94); }
  5%, 18%, 31%, 44%, 57%  { transform: translateY(0) scaleY(1); }
}
@keyframes n3steam {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  20%  { opacity: 0.5; }
  70%  { stroke-dashoffset: 0; opacity: 0.4; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes n3drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(12px); }
}
@media (prefers-reduced-motion: reduce) {
  .play .ns3 * { animation: none !important; }
}

/* ─── ns4 ─── */
/* ns4 — Здраве и SOS: спокойният пазач (щит-сърце, равен пулс) */
.ns4 [class*="n4-"] { transform-box: fill-box; transform-origin: center; }

.play .ns4 .n4-aura  { animation: n4aura 6s ease-in-out infinite; }
.play .ns4 .n4-cl    { animation: n4drift 26s ease-in-out infinite; }
.play .ns4 .n4-cl2   { animation: n4drift 32s ease-in-out infinite reverse; }
.play .ns4 .n4-shield{ animation: n4breathe 5s ease-in-out infinite; }
.play .ns4 .n4-inner { animation: n4inner 5s ease-in-out infinite; }
.play .ns4 .n4-heart { animation: n4heart 3.4s ease-in-out infinite; }
.play .ns4 .n4-pulse { animation: n4pulse 3.4s ease-in-out infinite; }
.play .ns4 .n4-ring.r1 { animation: n4ring 6s ease-out infinite; }
.play .ns4 .n4-ring.r2 { animation: n4ring 6s ease-out infinite; animation-delay: 3s; }
.play .ns4 .n4-tw.t1 { animation: n4tw 3.6s ease-in-out infinite; }
.play .ns4 .n4-tw.t2 { animation: n4tw 4.2s ease-in-out infinite; animation-delay: 1.2s; }
.play .ns4 .n4-mote.m1 { animation: n4mote 6s ease-in-out infinite; }
.play .ns4 .n4-mote.m2 { animation: n4mote 7.5s ease-in-out infinite reverse; }
.play .ns4 .n4-chip  { animation: n4chip 5s ease-in-out infinite; }

.ns4 .gchip-t { font: 600 11px system-ui, -apple-system, "Segoe UI", sans-serif; fill: #37665a; letter-spacing: .2px; }

@keyframes n4aura {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.06); opacity: 0.85; }
}
@keyframes n4breathe {
  0%, 100% { transform: scale(1)     translateY(0); }
  50%      { transform: scale(1.028) translateY(-1px); }
}
@keyframes n4inner {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.7; }
}
@keyframes n4heart {
  0%   { transform: scale(1); }
  12%  { transform: scale(1.11); }
  24%  { transform: scale(1.0); }
  36%  { transform: scale(1.08); }
  50%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes n4pulse {
  0%   { opacity: 0.35; }
  12%  { opacity: 0.95; }
  36%  { opacity: 0.85; }
  50%  { opacity: 0.35; }
  100% { opacity: 0.35; }
}
@keyframes n4ring {
  0%   { transform: scale(0.55); opacity: 0; }
  15%  { opacity: 0.6; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@keyframes n4tw {
  0%, 100% { transform: scale(0.6); opacity: 0.25; }
  50%      { transform: scale(1.1); opacity: 1; }
}
@keyframes n4mote {
  0%, 100% { transform: translateY(0)     translateX(0); opacity: 0.5; }
  50%      { transform: translateY(-6px)  translateX(2px); opacity: 0.9; }
}
@keyframes n4drift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(10px); }
}
@keyframes n4chip {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .play .ns4 * { animation: none !important; }
}

/* ─── ns5 ─── */
/* ns5 — Дневник на мама: дишащо небе + съзвездие-сърце + топла луна + падаща звезда */
.ns5 .n5-cst   { opacity: 0; }
.ns5 .n5-link  { stroke-dasharray: 120; stroke-dashoffset: 120; opacity: 0; }
.ns5 .n5-glow  { opacity: 0; }
.ns5 .n5-shoot { opacity: 0; }
.ns5 .n5-luv   { opacity: 0; }
.ns5 .n5-chip  { opacity: 0; }
.ns5 .n5-halo  { opacity: 0.5; }
.ns5 .n5-cap   { font: 700 10px/1 'Nunito', system-ui, -apple-system, sans-serif; fill: #efe6f7; letter-spacing: 0.2px; }

.play .ns5 .n5-sky      { animation: n5sky 8s ease-in-out infinite; }
.play .ns5 .n5-halo     { animation: n5moon 6s ease-in-out infinite; }
.play .ns5 .n5-dust.d1  { animation: n5tw 5s ease-in-out infinite; }
.play .ns5 .n5-dust.d2  { animation: n5tw 6.5s ease-in-out infinite 0.8s; }
.play .ns5 .n5-dust.d3  { animation: n5tw 5.6s ease-in-out infinite 2s; }
.play .ns5 .n5-cst.c1   { animation: n5c1 16s ease-in-out infinite; }
.play .ns5 .n5-cst.c2   { animation: n5c2 16s ease-in-out infinite; }
.play .ns5 .n5-cst.c3   { animation: n5c3 16s ease-in-out infinite; }
.play .ns5 .n5-cst.c4   { animation: n5c4 16s ease-in-out infinite; }
.play .ns5 .n5-cst.c5   { animation: n5c5 16s ease-in-out infinite; }
.play .ns5 .n5-cst.c6   { animation: n5c6 16s ease-in-out infinite; }
.play .ns5 .n5-link     { animation: n5link 16s ease-in-out infinite; }
.play .ns5 .n5-glow     { animation: n5glow 16s ease-in-out infinite; }
.play .ns5 .n5-shoot    { animation: n5shoot 16s ease-in-out infinite; }
.play .ns5 .n5-luv      { animation: n5luv 16s ease-out infinite; }
.play .ns5 .n5-chip     { animation: n5chip 16s ease-in-out infinite; }
.play .ns5 .n5-bok.k1   { animation: n5bok 7.5s ease-in-out infinite; }

@keyframes n5sky {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes n5moon {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.08); }
}
@keyframes n5tw {
  0%, 100% { opacity: 0.25; transform: translate(0, 0); }
  50%      { opacity: 1;    transform: translate(1.5px, -2.5px); }
}
@keyframes n5c1 {
  0%, 5%   { opacity: 0; transform: scale(0.2); }
  9%       { opacity: 1; transform: scale(1.5); }
  12%      { transform: scale(1); }
  88%      { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(1); }
}
@keyframes n5c2 {
  0%, 10%  { opacity: 0; transform: scale(0.2); }
  14%      { opacity: 1; transform: scale(1.5); }
  17%      { transform: scale(1); }
  88%      { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(1); }
}
@keyframes n5c3 {
  0%, 15%  { opacity: 0; transform: scale(0.2); }
  19%      { opacity: 1; transform: scale(1.5); }
  22%      { transform: scale(1); }
  88%      { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(1); }
}
@keyframes n5c4 {
  0%, 20%  { opacity: 0; transform: scale(0.2); }
  24%      { opacity: 1; transform: scale(1.5); }
  27%      { transform: scale(1); }
  88%      { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(1); }
}
@keyframes n5c5 {
  0%, 25%  { opacity: 0; transform: scale(0.2); }
  29%      { opacity: 1; transform: scale(1.5); }
  32%      { transform: scale(1); }
  88%      { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(1); }
}
@keyframes n5c6 {
  0%, 30%  { opacity: 0; transform: scale(0.2); }
  34%      { opacity: 1; transform: scale(1.5); }
  37%      { transform: scale(1); }
  88%      { opacity: 1; transform: scale(1); }
  95%, 100%{ opacity: 0; transform: scale(1); }
}
@keyframes n5link {
  0%, 40%  { stroke-dashoffset: 120; opacity: 0; }
  43%      { stroke-dashoffset: 120; opacity: 0.85; }
  62%      { stroke-dashoffset: 0;   opacity: 0.85; }
  88%      { stroke-dashoffset: 0;   opacity: 0.85; }
  95%, 100%{ stroke-dashoffset: 0;   opacity: 0; }
}
@keyframes n5glow {
  0%, 56%  { opacity: 0;    transform: scale(0.9); }
  68%      { opacity: 0.5;  transform: scale(1.05); }
  80%      { opacity: 0.32; transform: scale(1); }
  88%      { opacity: 0.36; transform: scale(1); }
  95%, 100%{ opacity: 0;    transform: scale(0.9); }
}
@keyframes n5shoot {
  0%, 64%  { opacity: 0; transform: translate(70px, 8px); }
  66%      { opacity: 0; transform: translate(70px, 8px); }
  69%      { opacity: 1; transform: translate(108px, 30px); }
  73%      { opacity: 0; transform: translate(148px, 52px); }
  100%     { opacity: 0; transform: translate(70px, 8px); }
}
@keyframes n5luv {
  0%, 78%  { opacity: 0; transform: translateY(0) scale(0.4); }
  84%      { opacity: 1; transform: translateY(-5px) scale(1.15); }
  90%      { opacity: 1; transform: translateY(-8px) scale(1); }
  96%, 100%{ opacity: 0; transform: translateY(-13px) scale(0.8); }
}
@keyframes n5chip {
  0%, 2%   { opacity: 0; }
  8%       { opacity: 1; }
  94%      { opacity: 1; }
  100%     { opacity: 0; }
}
@keyframes n5bok {
  0%, 100% { opacity: 0.2; transform: translate(0, 0) scale(1); }
  50%      { opacity: 0.6; transform: translate(-3px, -5px) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .play .ns5 * { animation: none !important; }
  .ns5 .n5-cst  { opacity: 1; }
  .ns5 .n5-link { stroke-dashoffset: 0; opacity: 0.8; }
  .ns5 .n5-glow { opacity: 0.32; }
  .ns5 .n5-halo { opacity: 0.6; }
  .ns5 .n5-chip { opacity: 1; }
  .ns5 .n5-shoot{ opacity: 0; }
  .ns5 .n5-luv  { opacity: 0; }
}

/* ─── ns6 ─── */
/* ---- ns6 : blooming skill-tree ---- */
.ns6 .n6-tree { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ns6 .n6-flr  { opacity: 1; }
.ns6 .n6-fly  { opacity: 1; }
.ns6 .n6-spk, .ns6 .n6-mote { opacity: 0; }

.play .ns6 .n6-tree      { animation: n6grow 9s ease-in-out infinite; }
.play .ns6 .n6-foli      { animation: n6foli 9s ease-in-out infinite; }
.play .ns6 .n6-flr.fl1   { animation: n6bloom1 9s ease-out infinite; }
.play .ns6 .n6-flr.fl2   { animation: n6bloom2 9s ease-out infinite; }
.play .ns6 .n6-flr.fl3   { animation: n6bloom3 9s ease-out infinite; }
.play .ns6 .n6-flr.fl4   { animation: n6bloom4 9s ease-out infinite; }
.play .ns6 .n6-flr.fl5   { animation: n6bloom5 9s ease-out infinite; }
.play .ns6 .n6-fly       { animation: n6fly 9s ease-in-out infinite; }
.play .ns6 .n6-fly-wings { animation: n6flap 0.32s ease-in-out infinite; }
.play .ns6 .n6-spk.s1    { animation: n6spk 9s ease-out infinite 1.5s; }
.play .ns6 .n6-spk.s2    { animation: n6spk 9s ease-out infinite 3.1s; }
.play .ns6 .n6-mote      { animation: n6mote 9s ease-in-out infinite; }
.play .ns6 .n6-chip      { animation: n6chip 9s ease-in-out infinite; }

@keyframes n6grow {
  0%       { stroke-dashoffset: 100; opacity: 0.85; }
  16%      { stroke-dashoffset: 0;   opacity: 1; }
  88%      { stroke-dashoffset: 0;   opacity: 1; }
  96%      { stroke-dashoffset: 0;   opacity: 0; }
  100%     { stroke-dashoffset: 100; opacity: 0; }
}
@keyframes n6foli {
  0%, 8%   { opacity: 0; transform: scale(0.7); }
  30%      { opacity: 1; transform: scale(1); }
  86%      { opacity: 1; transform: scale(1); }
  96%,100% { opacity: 0; transform: scale(0.9); }
}
@keyframes n6bloom1 {
  0%, 16%  { opacity: 0; transform: scale(0); }
  22%      { opacity: 1; transform: scale(1.28); }
  27%      { transform: scale(1); }
  86%      { opacity: 1; transform: scale(1); }
  93%      { opacity: 0; transform: scale(0.6); }
  100%     { opacity: 0; transform: scale(0); }
}
@keyframes n6bloom2 {
  0%, 22%  { opacity: 0; transform: scale(0); }
  28%      { opacity: 1; transform: scale(1.28); }
  33%      { transform: scale(1); }
  86%      { opacity: 1; transform: scale(1); }
  93%      { opacity: 0; transform: scale(0.6); }
  100%     { opacity: 0; transform: scale(0); }
}
@keyframes n6bloom3 {
  0%, 28%  { opacity: 0; transform: scale(0); }
  34%      { opacity: 1; transform: scale(1.28); }
  39%      { transform: scale(1); }
  86%      { opacity: 1; transform: scale(1); }
  93%      { opacity: 0; transform: scale(0.6); }
  100%     { opacity: 0; transform: scale(0); }
}
@keyframes n6bloom4 {
  0%, 34%  { opacity: 0; transform: scale(0); }
  40%      { opacity: 1; transform: scale(1.28); }
  45%      { transform: scale(1); }
  86%      { opacity: 1; transform: scale(1); }
  93%      { opacity: 0; transform: scale(0.6); }
  100%     { opacity: 0; transform: scale(0); }
}
@keyframes n6bloom5 {
  0%, 40%  { opacity: 0; transform: scale(0); }
  46%      { opacity: 1; transform: scale(1.32); }
  51%      { transform: scale(1); }
  86%      { opacity: 1; transform: scale(1); }
  93%      { opacity: 0; transform: scale(0.6); }
  100%     { opacity: 0; transform: scale(0); }
}
@keyframes n6fly {
  0%, 48%  { opacity: 0; transform: translate(120px, -34px) rotate(22deg); }
  56%      { opacity: 1; transform: translate(52px, -22px) rotate(-10deg); }
  64%      { opacity: 1; transform: translate(16px, -6px) rotate(9deg); }
  72%      { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  80%      { transform: translate(0, -1px) rotate(0deg); }
  86%      { opacity: 1; transform: translate(0, 0) rotate(0deg); }
  94%      { opacity: 0; transform: translate(26px, -18px) rotate(16deg); }
  100%     { opacity: 0; transform: translate(120px, -34px) rotate(22deg); }
}
@keyframes n6flap {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(0.68); }
}
@keyframes n6spk {
  0%       { opacity: 0; transform: scale(0.3) rotate(0deg); }
  6%       { opacity: 1; transform: scale(1.1) rotate(30deg); }
  16%      { opacity: 0; transform: scale(0.6) rotate(60deg); }
  100%     { opacity: 0; }
}
@keyframes n6mote {
  0%, 12%  { opacity: 0; transform: translateY(4px); }
  40%      { opacity: 0.9; transform: translateY(-3px); }
  70%      { opacity: 0.9; transform: translateY(-8px); }
  90%,100% { opacity: 0; transform: translateY(-12px); }
}
@keyframes n6chip {
  0%, 4%   { opacity: 0; transform: translateY(6px); }
  14%      { opacity: 1; transform: translateY(0); }
  86%      { opacity: 1; transform: translateY(0); }
  95%,100% { opacity: 0; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .play .ns6 * { animation: none !important; }
  .ns6 .n6-tree { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .ns6 .n6-flr, .ns6 .n6-foli, .ns6 .n6-fly, .ns6 .n6-chip { opacity: 1 !important; transform: none !important; }
}

/* ─── ns7 ─── */
/* ───────────────────────────────────────────────────────────────
   7 ▸ ИНСТРУМЕНТИ — СПРЕТНАТИЯТ НЕСЕСЕР
   Куфарчето се отваря, джаджите изхвърчат подредено и кацат с
   пружина на рафта — всяка блясва. „Всичко ти е подръка."
   ─────────────────────────────────────────────────────────────── */
.ns7 .n7-em { font-size: 19px; }
/* fill беше #4f8a76 = 3.70:1 върху чипчето (под 4.5:1); същото зелено като в ns4 */
.ns7 .n7-tt { font-size: 11px; font-weight: 800; fill: #37665a; letter-spacing: .2px; }
.ns7 .n7-item { opacity: 0; }
.ns7 .n7-spk  { opacity: 0; }
.ns7 .n7-lid  { transform-origin: left bottom; }
.ns7 .n7-glow { transform-origin: 150px 66px; }
.ns7 .n7-chip { opacity: 0; }

.play .ns7 .n7-lid    { animation: n7lid 8s ease-in-out infinite; }
.play .ns7 .n7-case   { animation: n7breathe 5s ease-in-out infinite; }
.play .ns7 .n7-glow   { animation: n7glow 6s ease-in-out infinite; }
.play .ns7 .n7-chip   { animation: n7chip 8s ease-in-out infinite; }
.play .ns7 .n7-item.i1 { animation: n7fly1 8s var(--bl-ease-spring) infinite; }
.play .ns7 .n7-item.i2 { animation: n7fly2 8s var(--bl-ease-spring) infinite; }
.play .ns7 .n7-item.i3 { animation: n7fly3 8s var(--bl-ease-spring) infinite; }
.play .ns7 .n7-item.i4 { animation: n7fly4 8s var(--bl-ease-spring) infinite; }
.play .ns7 .n7-spk.s1 { animation: n7twinkle 8s ease-out infinite; animation-delay: 2s; }
.play .ns7 .n7-spk.s2 { animation: n7twinkle 8s ease-out infinite; animation-delay: 2.64s; }
.play .ns7 .n7-spk.s3 { animation: n7twinkle 8s ease-out infinite; animation-delay: 3.28s; }
.play .ns7 .n7-spk.s4 { animation: n7twinkle 8s ease-out infinite; animation-delay: 3.92s; }

@keyframes n7lid {
  0%,6%   { transform: rotate(0deg); }
  14%     { transform: rotate(-104deg); }
  16%     { transform: rotate(-98deg); }
  78%     { transform: rotate(-98deg); }
  88%     { transform: rotate(0deg); }
  100%    { transform: rotate(0deg); }
}
@keyframes n7breathe {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-0.6px) scale(1.012); }
}
@keyframes n7glow {
  0%,100% { opacity: .8; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.05); }
}
@keyframes n7chip {
  0%,10%  { opacity: 0; transform: translateY(-6px); }
  20%     { opacity: 1; transform: translateY(0); }
  50%     { opacity: 1; transform: translateY(-1.5px); }
  78%     { opacity: 1; transform: translateY(0); }
  90%,100%{ opacity: 0; transform: translateY(-6px); }
}
@keyframes n7twinkle {
  0%   { opacity: 0; transform: scale(.2) rotate(0deg); }
  3%   { opacity: 1; transform: scale(1.1) rotate(45deg); }
  9%   { opacity: 0; transform: scale(.4) rotate(80deg); }
  100% { opacity: 0; transform: scale(.4) rotate(80deg); }
}
@keyframes n7fly1 {
  0%,14%  { opacity: 0; transform: translate(58px,45px) scale(.35); }
  15%     { opacity: 1; transform: translate(58px,45px) scale(.5); }
  19%     { opacity: 1; transform: translate(23px,9px) scale(1.2); }
  22%     { transform: translate(-3px,-3px) scale(1.05); }
  25%     { transform: translate(0,0) scale(1); }
  78%     { opacity: 1; transform: translate(0,0) scale(1); }
  86%     { opacity: 0; transform: translate(58px,45px) scale(.45); }
  100%    { opacity: 0; transform: translate(58px,45px) scale(.35); }
}
@keyframes n7fly2 {
  0%,22%  { opacity: 0; transform: translate(20px,45px) scale(.35); }
  23%     { opacity: 1; transform: translate(20px,45px) scale(.5); }
  27%     { opacity: 1; transform: translate(8px,9px) scale(1.2); }
  30%     { transform: translate(-1px,-3px) scale(1.05); }
  33%     { transform: translate(0,0) scale(1); }
  78%     { opacity: 1; transform: translate(0,0) scale(1); }
  86%     { opacity: 0; transform: translate(20px,45px) scale(.45); }
  100%    { opacity: 0; transform: translate(20px,45px) scale(.35); }
}
@keyframes n7fly3 {
  0%,30%  { opacity: 0; transform: translate(-18px,45px) scale(.35); }
  31%     { opacity: 1; transform: translate(-18px,45px) scale(.5); }
  35%     { opacity: 1; transform: translate(-7px,9px) scale(1.2); }
  38%     { transform: translate(1px,-3px) scale(1.05); }
  41%     { transform: translate(0,0) scale(1); }
  78%     { opacity: 1; transform: translate(0,0) scale(1); }
  86%     { opacity: 0; transform: translate(-18px,45px) scale(.45); }
  100%    { opacity: 0; transform: translate(-18px,45px) scale(.35); }
}
@keyframes n7fly4 {
  0%,38%  { opacity: 0; transform: translate(-56px,45px) scale(.35); }
  39%     { opacity: 1; transform: translate(-56px,45px) scale(.5); }
  43%     { opacity: 1; transform: translate(-22px,9px) scale(1.2); }
  46%     { transform: translate(3px,-3px) scale(1.05); }
  49%     { transform: translate(0,0) scale(1); }
  78%     { opacity: 1; transform: translate(0,0) scale(1); }
  86%     { opacity: 0; transform: translate(-56px,45px) scale(.45); }
  100%    { opacity: 0; transform: translate(-56px,45px) scale(.35); }
}
@media (prefers-reduced-motion: reduce) {
  .play .ns7 * { animation: none !important; }
  .ns7 .n7-item, .ns7 .n7-chip { opacity: 1; }
  .ns7 .n7-lid { transform: rotate(-98deg); }
}

/* ─── ns8 ─── */
/* ns8 — ЖЕНАТА В МЕН (премиум: изправяне + разцъфване + зодиак) */

/* ПОПРАВКА: „Ти си повече от мама 💃" при 12px мери 146.5 единици, а бялото
   чипче свършва на x=142 (текстът тръгва от x=22). Последните 26.5 единици
   висяха върху тъмнолилавото небе — контраст 1.30:1, тоест невидими.
   10px + 6 единици наляво: широчина 122, от 16 до 138 — вътре в чипчето. */
.ns8 .gchip-t { font-size: 10px; transform: translateX(-6px); }

.ns8 .n8-body  { transform-box: view-box; transform-origin: 150px 108px; }
.ns8 .n8-armL  { transform-box: view-box; transform-origin: 145px 66px; }
.ns8 .n8-armR  { transform-box: view-box; transform-origin: 155px 66px; }
.ns8 .n8-ring  { transform-box: view-box; transform-origin: 150px 64px; }
.ns8 .n8-rose,
.ns8 .n8-hglow,
.ns8 .n8-aura  { transform-box: fill-box; transform-origin: center; }

.play .ns8 .n8-body  { animation: n8rise  10s ease-in-out infinite; }
.play .ns8 .n8-armL  { animation: n8openL 10s ease-in-out infinite; }
.play .ns8 .n8-armR  { animation: n8openR 10s ease-in-out infinite; }
.play .ns8 .n8-rose  { animation: n8bloom 10s ease-in-out infinite; }
.play .ns8 .n8-hglow { animation: n8pulse 10s ease-in-out infinite; }
.play .ns8 .n8-aura  { animation: n8breath 7s ease-in-out infinite; }
.play .ns8 .n8-ring  { animation: n8spin  26s linear infinite; }
.play .ns8 .n8-tw.a  { animation: n8twk 3.6s ease-in-out infinite; }
.play .ns8 .n8-tw.b  { animation: n8twk 3.6s ease-in-out infinite 1.6s; }

@keyframes n8rise {
  0%   { transform: rotate(3.6deg) translateY(1.6px); }
  44%  { transform: rotate(-1.6deg) translateY(-1.2px); }
  70%  { transform: rotate(-1deg) translateY(-0.6px); }
  100% { transform: rotate(3.6deg) translateY(1.6px); }
}
@keyframes n8openL {
  0%   { transform: rotate(11deg); }
  44%  { transform: rotate(-5deg); }
  70%  { transform: rotate(-3deg); }
  100% { transform: rotate(11deg); }
}
@keyframes n8openR {
  0%   { transform: rotate(-11deg); }
  44%  { transform: rotate(5deg); }
  70%  { transform: rotate(3deg); }
  100% { transform: rotate(-11deg); }
}
@keyframes n8bloom {
  0%   { transform: scale(0.42); opacity: 0.45; }
  44%  { transform: scale(1); opacity: 1; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.42); opacity: 0.45; }
}
@keyframes n8pulse {
  0%   { opacity: 0.15; transform: scale(0.7); }
  50%  { opacity: 0.6;  transform: scale(1.1); }
  100% { opacity: 0.15; transform: scale(0.7); }
}
@keyframes n8breath {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.05); }
}
@keyframes n8spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes n8twk {
  0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
  50%      { opacity: 1;   transform: scale(1.15) rotate(45deg); }
}

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

/* ─── ns9 ─── */
/* ns9 — Лабораторията (премиум) */
/* беше 8.5px → 9.5 екранни пиксела на телефон, най-дребният надпис от деветте.
   10px пак се събира в чипчето (14…164): 123.5 широчина, край на 149.5. */
.ns9 .gchip-t { font-size: 10px; font-weight: 800; fill: #2f6a5b; }

/* base (static / reduced-motion composed frame) */
.ns9 .n9-drop   { opacity: 0; }
.ns9 .n9-splash { opacity: 0; }
.ns9 .n9-swirl  { opacity: 0.5; }
.ns9 .n9-b1, .ns9 .n9-b2, .ns9 .n9-b3 { opacity: 0; }
.ns9 .n9-line   { stroke-dasharray: 100; stroke-dashoffset: 0; }
.ns9 .n9-bulb   { opacity: 1; }
.ns9 .n9-glow   { opacity: 0.5; }
.ns9 .n9-spk    { opacity: 0; }

/* play — single ~12s story loop (+ ambient bubbles on their own tempo) */
.play .ns9 .n9-drop   { animation: n9drop   12s ease-in    infinite; }
.play .ns9 .n9-splash { animation: n9splash 12s ease-out   infinite; }
.play .ns9 .n9-swirl  { animation: n9swirl  12s linear     infinite; }
.play .ns9 .n9-graph  { animation: n9pulse  12s ease-out   infinite; }
.play .ns9 .n9-line   { animation: n9draw   12s ease-out   infinite; }
.play .ns9 .n9-dot    { animation: n9dot    12s ease-out   infinite; }
.play .ns9 .n9-bulb   { animation: n9bulb   12s ease-out   infinite; }
.play .ns9 .n9-glow   { animation: n9glow   12s ease-out   infinite; }
.play .ns9 .n9-spk.s1 { animation: n9spk    12s ease-out   infinite; }
.play .ns9 .n9-spk.s2 { animation: n9spk    12s ease-out   infinite; animation-delay: 0.35s; }
.play .ns9 .n9-b1     { animation: n9bub 3.4s ease-in infinite; }
.play .ns9 .n9-b2     { animation: n9bub 4.1s ease-in infinite; animation-delay: 0.7s; }
.play .ns9 .n9-b3     { animation: n9bub 3.7s ease-in infinite; animation-delay: 1.3s; }

@keyframes n9drop {
  0%, 4%   { opacity: 0; transform: translateY(-8px) scaleY(0.9); }
  7%       { opacity: 1; transform: translateY(-6px) scaleY(1); }
  14%      { opacity: 1; transform: translateY(50px) scaleY(1.25); }
  16.5%    { opacity: 0; transform: translateY(58px) scaleY(0.5); }
  17%, 100%{ opacity: 0; transform: translateY(-8px) scaleY(0.9); }
}
@keyframes n9splash {
  0%, 15%  { opacity: 0; transform: scale(0.3); }
  17.5%    { opacity: 0.85; transform: scale(0.6); }
  27%      { opacity: 0; transform: scale(1.35); }
  100%     { opacity: 0; transform: scale(0.3); }
}
@keyframes n9swirl {
  0%   { opacity: 0.12; transform: rotate(0deg); }
  16%  { opacity: 0.2; }
  28%  { opacity: 0.8; }
  86%  { opacity: 0.65; }
  100% { opacity: 0.2; transform: rotate(360deg); }
}
@keyframes n9bub {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  18%  { opacity: 0.7; }
  80%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-27px) scale(1); }
}
@keyframes n9draw {
  0%, 40%   { stroke-dashoffset: 100; opacity: 0; }
  43%       { opacity: 1; }
  60%       { stroke-dashoffset: 0; opacity: 1; }
  93%       { opacity: 1; }
  100%      { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes n9dot {
  0%, 58%  { opacity: 0; transform: scale(0.2); }
  62%      { opacity: 1; transform: scale(1.4); }
  67%, 93% { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; }
}
@keyframes n9pulse {
  0%, 62%  { transform: scale(1); }
  66%      { transform: scale(1.09); }
  71%      { transform: scale(1); }
  100%     { transform: scale(1); }
}
@keyframes n9bulb {
  0%, 60%  { opacity: 0; transform: scale(0.5); }
  66%      { opacity: 1; transform: scale(1.22); }
  71%      { transform: scale(1); }
  92%      { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(0.5); }
}
@keyframes n9glow {
  0%, 60%  { opacity: 0; transform: scale(0.6); }
  67%      { opacity: 0.9; transform: scale(1.12); }
  76%      { opacity: 0.5; transform: scale(1); }
  92%      { opacity: 0.45; }
  100%     { opacity: 0; }
}
@keyframes n9spk {
  0%, 64%  { opacity: 0; transform: scale(0.3); }
  70%      { opacity: 1; transform: scale(1); }
  82%      { opacity: 0.4; transform: scale(0.8); }
  92%      { opacity: 0; }
  100%     { opacity: 0; }
}

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

/* ═══ 🔋 battery-щрих (флот 22.07): генеричните .tw искри в сцените ═══
   Глобалният .tw в style.css мига винаги — вътре в сцена го спираме извън
   екран и го пускаме само под .play (сцената на екран ИЛИ клонирана в героя,
   който също носи .play). Само opacity → компоситор-евтино, 0 лейаут. */
.scene .tw { animation: none; }
.play .scene .tw { animation: twinkleOp 3.2s ease-in-out infinite; }
.play .scene .tw.t2 { animation-delay: -1.1s; }
.play .scene .tw.t3 { animation-delay: -2.2s; }
@media (prefers-reduced-motion: reduce) { .play .scene .tw { animation: none !important; } }