/* ═══════════════════════════════════════════════════════════════════════════════
   🌬️ ЖИВАТА СЦЕНА (js/pl-zhivo.js) — слоят на сцената, светлинките, проблясъкът.
   Само transform/opacity. Безкрайни са само светлинките (7 на екран) — пазителите на
   приложението ги спират извън екрана и докато пръстът се движи. „По-малко движение“ = нищо.
   ПЪТ НАЗАД: махни <link>/<script> на pl-zhivo от index.html.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── СТАЯТА: сцената в свой слой зад всичко ── */
html body #roomOverlay .ro-panel.ro-panel.pl-zh-on { background-image: none !important; isolation: isolate; }
.pl-zh { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; border-radius: inherit; }
.pl-zh-bg {
  position: absolute; inset: 0;                    /* същото кадриране като досегашния фон на панела */
  background: #f6ede3 50% 0 / cover no-repeat;
  transform: translate3d(0, var(--zh-y, 0px), 0); will-change: transform;
}
.pl-zh.pl-zh-in .pl-zh-bg { animation: plZhIn 1.3s cubic-bezier(.2, .8, .25, 1) both; }
@keyframes plZhIn { from { opacity: .55; transform: translate3d(0, 0, 0) scale(1.07); } to { opacity: 1; transform: translate3d(0, var(--zh-y, 0px), 0) scale(1); } }
/* при превъртане сцената изостава нагоре — долният ѝ ръб се разтапя в цвета на килима, без черта */
.pl-zh-bg::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 20%; background: linear-gradient(180deg, rgba(246, 237, 227, 0), #f6ede3); }
/* нощем: същото нощно було като досега (premium.css: multiply × #3a4580) */
html[data-theme="dark"] .pl-zh-bg { background-color: #3a4580; background-blend-mode: multiply; }
html[data-theme="dark"] .pl-zh-bg::after { background: linear-gradient(180deg, rgba(58, 69, 128, 0), #343e74); }

/* ── СВЕТЛИНКИТЕ: сърчица (h), точици-боке (d), искри (s) — плуват нагоре бавно ── */
.pl-zh-pp { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#plScene .pl-zh-pp { bottom: 45%; }        /* на началото — само над героя, не под картите */
/* 🪤 22.09 (проверителят на „Инструменти“): в стая с прозрачни панели светлинките се виждаха ПРЕЗ тях
   и изглеждаха като петна върху заглавията. Сега плуват само в горната трета — там, където е сцената. */
.pl-zh .pl-zh-pp { bottom: 62%; }
.pl-zh-p {
  position: absolute; bottom: -24px; width: var(--s); height: var(--s); display: block;
  animation: plZhUp var(--t) linear var(--d) infinite; will-change: transform, opacity; opacity: 0;
}
.pl-zh-d { border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .95) 0, rgba(255, 214, 229, .7) 45%, rgba(255, 214, 229, 0) 72%); }
.pl-zh-h { background: #f59cbb; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.4-8.9C1.2 8.7 3.2 4.6 7 4.6c2.1 0 3.6 1.2 5 3 1.4-1.8 2.9-3 5-3 3.8 0 5.8 4.1 4.4 7.5C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.4-8.9C1.2 8.7 3.2 4.6 7 4.6c2.1 0 3.6 1.2 5 3 1.4-1.8 2.9-3 5-3 3.8 0 5.8 4.1 4.4 7.5C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pl-zh-s { background: #f3c96a; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes plZhUp {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(0deg); }
  12%  { opacity: .75; }
  50%  { transform: translate3d(14px, -48vh, 0) rotate(12deg); }
  85%  { opacity: .55; }
  100% { opacity: 0;   transform: translate3d(-10px, -92vh, 0) rotate(-8deg); }
}
/* нощем: сърчицата стават звезди, светлинките — по-бледи и студени */
html[data-theme="dark"] .pl-zh-h { background: #fff3c4; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l2.6 8.4L23 12l-8.4 2.6L12 23l-2.6-8.4L1 12l8.4-2.6z'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .pl-zh-d { background: radial-gradient(circle, rgba(255, 255, 255, .9) 0, rgba(190, 205, 255, .5) 45%, rgba(190, 205, 255, 0) 72%); }

/* ── НАЧАЛОТО: сцената изостава при превъртане (дълбочина) ── */
/* слоят е 100px по-дълъг (да има какво да изостава), а размерът на картината е „cover“ спрямо ЕКРАНА,
   не спрямо удължения слой — иначе сцената се приближаваше с ~12% (мерено: 944 срещу 844 px) */
#plScene { transform: translate3d(0, var(--zh-y, 0px), 0); bottom: -100px !important; background-size: max(100%, calc(100vh * .5714)) auto !important; will-change: transform; }

/* ── ПРОБЛЯСЪКЪТ на гел бутона — веднъж ── */
.pl-glint {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; z-index: 1;
}
.pl-glint::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg); animation: plGlint 1.15s cubic-bezier(.3, .6, .3, 1) .15s 1 both;
}
@keyframes plGlint { from { transform: translateX(0) skewX(-18deg); } to { transform: translateX(380%) skewX(-18deg); } }
.pl-glint { animation: plGlintHold 1.4s linear 1 both; }
@keyframes plGlintHold { from { opacity: 1; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .pl-zh-pp, .pl-glint { display: none !important; }
  .pl-zh.pl-zh-in .pl-zh-bg { animation: none !important; }
  .pl-zh-bg, #plScene { transform: none !important; }
}

/* 🎈 балончето се отдръпва, докато мама превърта стаята (js/pl-zhivo.js: балонътНастрана) */
/* 🪤 балончето си има собствена анимация (fabBob) — тя бие opacity/transform от CSS правило.
   Затова отдръпването е през filter, който анимацията не пипа (мерено: opacity остава 0.92). */
html .ro-fab, html #roFab { transition: filter .22s ease; }
html.pl-fab-away .ro-fab, html.pl-fab-away #roFab { filter: opacity(.22) saturate(.85); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html .ro-fab, html #roFab { transition: none; } }

/* ═══════════════════════════════════════════════════════════════════════════════
   🖼️ 20.10 · СЦЕНАТА НА ГЕРОЯ ВЕЧЕ НЕ Е ЗАКОВАНА ЗАД ЦЯЛАТА СТРАНИЦА (gl20)
   Собственикът: „много странна разтеглена картинка“. Мерено (gl20_predi_diag.log, getComputedStyle):
   #plScene беше position:fixed, 390×944, фон nachalo.webp 720×1280 с размер max(100%, 57vh) — на
   телефон не е разтеглен, но е ЗАКОВАН: бебето на облака стоеше зад всяка карта на 14 544 px страница
   („пак се вижда зад Мира е до теб“); а на широк екран max(100%, …) го надуваше ×2–×2.7 (размазано).
   Сега: сцената е горе, колкото един екран, тръгва нагоре с героя (по-бавно — дълбочина, pl-zhivo.js),
   долу се топи в крема на страницата; „cover“ горе в средата; на широк екран — не по-широка от 820 px
   (ръбовете се топят), т.е. картината никога не расте над ×1.14.
   ПЪТ НАЗАД: махни този блок (до „край 20.10“) и върни реда с превъртиНачало в js/pl-zhivo.js.
   ═══════════════════════════════════════════════════════════════════════════════ */
html.pl-on #plScene {
  position: absolute !important; top: 0; left: 0; right: 0; bottom: auto !important;
  height: 880px; height: max(880px, 100vh);
  margin: 0 auto; max-width: 820px;
  background: #f6ede3 url(../img/scene/nachalo.webp) 50% 0 / cover no-repeat !important;
}
/* долният ръб се топи в цвета на страницата (статичен преливник — не маска) */
html.pl-on #plScene::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(246, 237, 227, 0) 0, rgba(246, 237, 227, .78) 55%, #f6ede3 94%);
}
html[data-theme="dark"].pl-on { background: #161d45; }
html[data-theme="dark"].pl-on #plScene::before { background: linear-gradient(180deg, rgba(22, 29, 69, 0) 0, rgba(22, 29, 69, .8) 55%, #161d45 94%); }
@media (min-width: 821px) {
  html.pl-on #plScene {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  }
}
/* край 20.10 */

/* ── 24.10 · влят от css/pl-otklik.css (сесия-помощник): таванът е 180 заявки (dev/byudzhet.js), а бяха 179 ── */
/* ═══════════════════════════════════════════════════════════════════════════════
   👆 ОТКЛИКЪТ · живи микроанимации в стаите (24.10.2026) — двойката е блокът „ОТКЛИКЪТ“ в края на js/pl-zhivo.js
   Собственикът: „анимации с код навсякъде, където можеш да бодеш“.
   Какво вече мърдаше и НЕ се дублира (прочетено 24.10):
     · картите .jr-card в стаята влизат в дълбочина (anim.css rmxDepthInL/R) — не ги пипам;
     · вълничката при допир (anim.js .bl-ripple) и потъването при :active (pl-ui.css translateY) — остават;
       тук се добавя само МАЩАБ през отделното свойство `scale` (js), което се събира с тях;
     · сцената, светлинките, проблясъкът (pl-zhivo.css), изплуването на началото (pl-poyava.css);
     · „Моето бебе“ (.pl-bb) си има свои влизания (pl-bebe.css) — не е в списъка долу.
   Какво цъфваше рязко и е тук:
     1) премиум блоковете под банера (.pl-br .pl-ig .pl-zm .pl-dn .pl-hr .pl-in .pl-lb .pl-zd) —
        картите им влизат една след друга (50 ms, до 8), само при ПЪРВАТА поява на блока
        (js слага .pl-otk-vliza за 1 с и го маха с таймер — прерисуване не мига, скрит таб не засяда);
     2) мехурчето на помощничката: беше msgIn ОТ opacity 0 (style.css) — сега от .4, с лек отскок;
     3) чиповете под отговора: също бяха от opacity 0 (style.css .ro-chip msgIn) — сега от .5, по ред;
     4) „Прочети цялото“ без статия (pl-statii.js, .pl-zn-more) — абзаците се разгръщат меко;
     5) искрите при успешен запис (js, BL_FX.cheer) — видът им е тук.
   ЗАКОНИТЕ: само transform/opacity (отделните `translate`/`scale` — не чупят чужд transform);
   нищо не тръгва от opacity 0 (най-ниско .4); „по-малко движение“ → нищо; без картинки и текст.
   ПЪТ НАЗАД: махни блока „ОТКЛИКЪТ“ (оттук до края) тук и в края на js/pl-zhivo.js.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* стъпката не се наследява — иначе вложените елементи биха взели закъснението на родителя си */
@property --otk-d { syntax: '<time>'; inherits: false; initial-value: 0ms; }
#roRoom > .pl-otk-vliza > :first-child, #roChips .ro-chip:first-child, .pl-zn-more > :first-child { --otk-d: 0ms; }

@media (prefers-reduced-motion: no-preference) {

  /* ── 1 · премиум блоковете: картите им влизат по ред ──
     🪤 24.10 (МЕРЕНО в пробата): закъснението беше в отделни правила — а :not() вдига тежестта на
     главното и краткото `animation` нулираше delay-а (второто дете влизаше на 0 s). Сега стъпката е
     променлива (--otk-d) вътре в самото `animation` — тежестта няма значение. */
  html body #roRoom > .pl-otk-vliza > :nth-child(-n+8):not([data-pl-hr-spot]) {
    animation: plOtkVliza .46s cubic-bezier(.22, 1, .36, 1) var(--otk-d, 0ms) backwards;
  }
  #roRoom > .pl-otk-vliza > :nth-child(2) { --otk-d: 50ms; }
  #roRoom > .pl-otk-vliza > :nth-child(3) { --otk-d: 100ms; }
  #roRoom > .pl-otk-vliza > :nth-child(4) { --otk-d: 150ms; }
  #roRoom > .pl-otk-vliza > :nth-child(5) { --otk-d: 200ms; }
  #roRoom > .pl-otk-vliza > :nth-child(6) { --otk-d: 250ms; }
  #roRoom > .pl-otk-vliza > :nth-child(7) { --otk-d: 300ms; }
  #roRoom > .pl-otk-vliza > :nth-child(8) { --otk-d: 350ms; }

  /* ── 2 · мехурчето: помощничката отляво, мама отдясно — всяко расте от своя ъгъл ── */
  html body #roomOverlay #roChat .msg.bot .msg-bubble {
    transform-origin: 0 100%;
    animation: plOtkMehur .28s cubic-bezier(.34, 1.45, .64, 1) both;
  }
  html body #roomOverlay #roChat .msg.user .msg-bubble {
    transform-origin: 100% 100%;
    animation: plOtkMehur .22s cubic-bezier(.3, 1.25, .6, 1) both;
  }

  /* ── 3 · чиповете под отговора — по ред, като подадени с ръка ── */
  html body #roomOverlay #roChips .ro-chip { animation: plOtkChip .3s cubic-bezier(.3, 1.35, .6, 1) var(--otk-d, 0ms) both; }
  #roChips .ro-chip:nth-child(2) { --otk-d: 45ms; }
  #roChips .ro-chip:nth-child(3) { --otk-d: 90ms; }
  #roChips .ro-chip:nth-child(4) { --otk-d: 135ms; }
  #roChips .ro-chip:nth-child(n+5) { --otk-d: 180ms; }

  /* ── 4 · разгънатото на място („Прочети цялото“ без статия) ── */
  html body .pl-zn-more:not([hidden]) > * { animation: plOtkVliza .38s cubic-bezier(.22, 1, .36, 1) var(--otk-d, 0ms) backwards; }
  .pl-zn-more > :nth-child(2) { --otk-d: 45ms; }
  .pl-zn-more > :nth-child(3) { --otk-d: 90ms; }
  .pl-zn-more > :nth-child(n+4) { --otk-d: 135ms; }
}

@keyframes plOtkVliza { from { opacity: .55; translate: 0 12px; scale: .985; } }
@keyframes plOtkMehur { from { opacity: .4; translate: 0 8px; scale: .92; } }
@keyframes plOtkChip  { from { opacity: .5; translate: 0 6px; scale: .94; } }

/* ── 5 · искрите при успешен запис — слоят и частиците (движението е от js, WAAPI) ──
   Слоят е вътре в #roomOverlay: под 600 px touch.css спира CSS анимациите на всичко извън стаята,
   а WAAPI анимациите не слушат animation-play-state — затова движението е от js. */
.pl-otk-sloy { position: fixed; inset: 0; pointer-events: none; z-index: 140; overflow: hidden; }
/* 24.10 (кадрите): 9 px точици се губеха над гел бутона → по-едри, с неподвижен ореол (drop-shadow не се анимира) */
.pl-otk-i {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: #ec6f9f; pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .9)) drop-shadow(0 1px 2px rgba(200, 69, 122, .35));
}
.pl-otk-i.z { background: #eeb43a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 0; filter: none; }
.pl-otk-i.s {
  width: 18px; height: 16px; margin: -8px 0 0 -9px; border-radius: 0; background: #d94882; filter: none;
  clip-path: path('M9 16C9 16 0 10.6 0 4.9C0 2.1 2.2 0 4.8 0C6.6 0 8.1 1 9 2.4C9.9 1 11.4 0 13.2 0C15.8 0 18 2.1 18 4.9C18 10.6 9 16 9 16Z');
}
html[data-theme="dark"] .pl-otk-i { background: #ffc2d8; filter: drop-shadow(0 0 4px rgba(255, 194, 216, .55)); }
html[data-theme="dark"] .pl-otk-i.z { background: #ffe9a8; filter: none; }
html[data-theme="dark"] .pl-otk-i.s { background: #f59cbb; filter: none; }
@media (prefers-reduced-motion: reduce) { .pl-otk-sloy { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════════
   🌱 ЖИВОТ 2 · 27.10 — още движение с код там, където още нямаше (двойката е блокът „ЖИВОТ 2“ в js/pl-zhivo.js)
   Прочетено преди писане и НЕ дублирано: картите в стаята (anim.css rmxDepthIn + polish.js 45 ms), вълничката
   (anim.js), ОТКЛИКЪТ горе (натиск, вход по ред, мехурчета, искри), прозорците .md-veil (пружина в rooms.css),
   листовете pl-dv / pl-ig / pl-hr, лентите .bg-fill / .gl-fill (вече scaleX), живите числа (pl-chislo), търсенето.
   Законите (JMATION + zhiv-sait): подготовка → удар → презасилване; без избледняване — новото идва ОТ посоката;
   само transform/opacity (отделните translate/scale — не чупят чужд transform); съдържание от opacity ≥ .4;
   js не чете размери; „по-малко движение“ → нищо.
     1) смяна на таба (Стаята / Статии / Попитай) — съдържанието влиза от посоката на новия таб;
     2) профилът и четецът на статии — пружина (бяха плоско изплуване от opacity 0);
     3) отметките (чекбокс, role=checkbox) — удар .82 → презасилване 1.14 → 1 (js, WAAPI);
     4) пълнежите .nm-fill .st-fill .sp-fill .sc-fill .rg-fill — растат от лявото, само при първата поява;
     5) числата data-cnt в стаята — лек отскок, щом отброяването спре (js);
     6) долната лента — чертичката на новата активна идва от страната на старата; нощем хапчето подскача;
     7) празните състояния — бавно дишане (5,2 s, 1,2 %).
   ПЪТ НАЗАД: махни блока „ЖИВОТ 2“ (оттук до края) тук и в края на js/pl-zhivo.js.
   ═══════════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* 1 · табовете: js слага data-zh2-pos (r = новият е вдясно) за 600 ms; .ro-anim е класът, който setTab рестартира */
  html body #roomOverlay .ro-panel[data-zh2-pos="r"] .ro-anim { animation: plZh2OtD .38s cubic-bezier(.3, 1.22, .5, 1) both; }
  html body #roomOverlay .ro-panel[data-zh2-pos="l"] .ro-anim { animation: plZh2OtL .38s cubic-bezier(.3, 1.22, .5, 1) both; }

  /* 2 · профилът и четецът: пердето от .4, листът — подготовка (по-ниско и по-малко) → удар → презасилване */
  html body .prof-overlay { animation: plZh2Perde .24s ease-out both; }
  html body .prof-overlay .prof-box,
  html body .art-panel { animation: plZh2List .48s cubic-bezier(.3, 1.3, .45, 1) both; }

  /* 4 · пълнежите: класът е от js за 1 s (таймер — крайният кадър е наложен и при спрян таб) */
  html body .pl-zh2-puln { transform-origin: 0 50%; animation: plZh2Puln .72s cubic-bezier(.2, .9, .25, 1) both; }

  /* 6 · долната лента */
  html:not([data-theme="dark"]) body .bottom-nav .bn-item.bn-active[data-zh2-ot="l"]::after { animation: plZh2TochkaL .4s cubic-bezier(.3, 1.4, .5, 1) both; }
  html:not([data-theme="dark"]) body .bottom-nav .bn-item.bn-active[data-zh2-ot="r"]::after { animation: plZh2TochkaR .4s cubic-bezier(.3, 1.4, .5, 1) both; }
  html[data-theme="dark"] body .bottom-nav .bn-item.bn-active[data-zh2-ot] { animation: plZh2Hapche .38s cubic-bezier(.3, 1.5, .5, 1) both; }

  /* 7 · празните състояния — дишат бавно; първият кадър е покоят (замръзне ли — нищо не личи) */
  html body :is(.pl-br-empty, .pl-in-empty, .pl-sa-empty, .rv-empty, .sos-empty, .bb-empty) { animation: plZh2Dish 5.2s ease-in-out infinite; }
}
/* 5 · числата: transform не важи за inline елемент — само span-овете с data-cnt в стаята стават inline-block
   (числото не се пречупва, тоест редът не се мести) */
#roomOverlay span[data-cnt] { display: inline-block; }

@keyframes plZh2OtD     { from { opacity: .5; translate: 34px 0; } }
@keyframes plZh2OtL     { from { opacity: .5; translate: -34px 0; } }
@keyframes plZh2Perde   { from { opacity: .4; } }
@keyframes plZh2List    { 0% { opacity: .5; translate: 0 30px; scale: .955; } 55% { opacity: 1; } }
@keyframes plZh2Puln    { 0% { scale: .06 1; } 72% { scale: 1.012 1; } 100% { scale: 1 1; } }
@keyframes plZh2TochkaL { from { translate: -30px 0; scale: .35 1; } }
@keyframes plZh2TochkaR { from { translate: 30px 0; scale: .35 1; } }
@keyframes plZh2Hapche  { 0% { scale: .9; } 60% { scale: 1.06; } 100% { scale: 1; } }
@keyframes plZh2Dish    { 0%, 100% { scale: 1; translate: 0 0; } 50% { scale: 1.012; translate: 0 -1.5px; } }
/* край ЖИВОТ 2 */