/* Онбординг «как это работает»: живые сцены из onbart.js (window.ONB_ART) — menu, fridge, cook, family.
   Плоские цвета и тёмный контур, как CAT_ART и cookfx. Движение — только transform и opacity, по кругу (4,8–5 с).
   Базовые стили = финальный кадр, ключевые кадры начинают «с пустого»: без анимации (меньше движения) картинка цельная. */
.onb-art{display:block;width:100%;max-width:240px;height:auto;aspect-ratio:1/1;margin:0 auto;
  --onb-ink:#2B2B33; --onb-paper:#FFFFFF; --onb-line:#C7CAD3; --onb-dev:#2B2B33; --onb-chat:#D5E5F3; --onb-fr:#EEF2F7;
  --onb-stand:#2B2B33; --onb-handle:#3A2A20;
  --onb-acc:var(--accent,#005BBF); --onb-steam:#B4B6C4; --onb-sh:rgba(43,43,51,.1); --onb-bg:var(--fill,rgba(118,118,128,.12))}
.onb-menu{--onb-bg:#FFE8C6}
.onb-fridge{--onb-bg:#DDEEFF}
.onb-cook{--onb-bg:#FFE3D6}
.onb-family{--onb-bg:#DDF3E2}
[data-theme="dark"] .onb-art{--onb-paper:#E6EAEE;--onb-line:#A9B0BC;--onb-dev:#3A3A46;--onb-chat:#B7CCE0;--onb-fr:#C9D2DB;--onb-stand:#8E99A8;--onb-handle:#7A5A40;--onb-steam:rgba(255,255,255,.55);--onb-sh:rgba(0,0,0,.35)}
[data-theme="dark"] .onb-menu{--onb-bg:rgba(255,179,64,.17)}
[data-theme="dark"] .onb-fridge{--onb-bg:rgba(90,174,255,.17)}
[data-theme="dark"] .onb-cook{--onb-bg:rgba(255,120,97,.17)}
[data-theme="dark"] .onb-family{--onb-bg:rgba(61,203,100,.16)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .onb-art{--onb-paper:#E6EAEE;--onb-line:#A9B0BC;--onb-dev:#3A3A46;--onb-chat:#B7CCE0;--onb-fr:#C9D2DB;--onb-stand:#8E99A8;--onb-handle:#7A5A40;--onb-steam:rgba(255,255,255,.55);--onb-sh:rgba(0,0,0,.35)}
  :root:not([data-theme="light"]) .onb-menu{--onb-bg:rgba(255,179,64,.17)}
  :root:not([data-theme="light"]) .onb-fridge{--onb-bg:rgba(90,174,255,.17)}
  :root:not([data-theme="light"]) .onb-cook{--onb-bg:rgba(255,120,97,.17)}
  :root:not([data-theme="light"]) .onb-family{--onb-bg:rgba(61,203,100,.16)}
}
.onb-art .o{stroke:var(--onb-ink,#2B2B33);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.onb-art .t{stroke:var(--onb-ink,#2B2B33);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.onb-art .bg{fill:var(--onb-bg,#EEEEF3)}
.onb-art .sh{fill:var(--onb-sh,rgba(43,43,51,.1))}
.onb-art .pp{fill:var(--onb-paper,#FFFFFF)}
.onb-art .ik{fill:var(--onb-ink,#2B2B33)}
.onb-art .ln{fill:var(--onb-line,#C7CAD3)}
.onb-art .lr{fill:none;stroke:var(--onb-line,#C7CAD3);stroke-width:2.4}
.onb-art .ac{fill:var(--onb-acc,#005BBF)}
.onb-art .dv{fill:var(--onb-dev,#2B2B33)}
.onb-art .ch{fill:var(--onb-chat,#D5E5F3)}
.onb-art .fr{fill:var(--onb-fr,#EEF2F7)}
.onb-art .sd2{stroke:var(--onb-stand,#2B2B33)}
.onb-art .mt{fill:var(--onb-stand,#2B2B33)}
.onb-art .hn{fill:var(--onb-handle,#3A2A20)}

/* 1. меню на день: солнце встаёт, карточки завтрак → обед → ужин */
.onb-menu .sun{transform-box:fill-box;transform-origin:50% 50%;animation:onb-sun 4.8s cubic-bezier(.2,.8,.3,1) infinite}
.onb-menu .rays{transform-box:fill-box;transform-origin:50% 50%;animation:onb-spin 14s linear infinite}
.onb-menu .c1,.onb-menu .c2,.onb-menu .c3{transform-box:fill-box;transform-origin:50% 100%;animation:onb-c1 4.8s cubic-bezier(.22,1,.36,1) infinite}
.onb-menu .c2{animation-name:onb-c2}
.onb-menu .c3{animation-name:onb-c3}
@keyframes onb-sun{0%{opacity:0;transform:translateY(40px)}22%,90%{opacity:1;transform:none}100%{opacity:0;transform:none}}
@keyframes onb-spin{to{transform:rotate(360deg)}}
@keyframes onb-c1{0%,14%{opacity:0;transform:translateY(16px) scale(.9)}24%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes onb-c2{0%,32%{opacity:0;transform:translateY(16px) scale(.9)}42%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}
@keyframes onb-c3{0%,50%{opacity:0;transform:translateY(16px) scale(.9)}60%,88%{opacity:1;transform:none}95%,100%{opacity:0;transform:none}}

/* 2. холодильник: голос → дверца открывается → продукты дугой летят в кастрюлю. Финальный кадр — дверца открыта, всё в кастрюле */
.onb-fridge .w{fill:none;stroke:var(--onb-acc,#005BBF);stroke-width:3.2;stroke-linecap:round;transform-box:fill-box;animation:onb-wave 1.5s ease-out infinite}
.onb-fridge .wl{transform-origin:100% 50%}
.onb-fridge .wr{transform-origin:0 50%}
.onb-fridge .w2{animation-delay:-1.1s}
.onb-fridge .door{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(-.3);animation:onb-door 5s ease-in-out infinite}
.onb-fridge .pot{transform-box:view-box;transform-origin:178px 200px;animation:onb-pot 5s ease-out infinite}
.onb-fridge .x1,.onb-fridge .x2,.onb-fridge .x3{animation:onb-x1 5s linear infinite}
.onb-fridge .y1,.onb-fridge .y2,.onb-fridge .y3{transform-box:fill-box;transform-origin:50% 50%;animation:onb-y1 5s linear infinite}
.onb-fridge .x2{animation-name:onb-x2}
.onb-fridge .x3{animation-name:onb-x3}
.onb-fridge .y2{animation-name:onb-y2}
.onb-fridge .y3{animation-name:onb-y3}
@keyframes onb-wave{0%{opacity:0;transform:scale(.6)}35%{opacity:1}100%{opacity:0;transform:scale(1.2)}}
@keyframes onb-door{0%,6%{transform:none}16%,68%{transform:scaleX(-.3)}78%,100%{transform:none}}
@keyframes onb-pot{0%,39%,46%,49%,56%,59%,66%,100%{transform:none}41.5%,51.5%,61.5%{transform:scale(1.06,.92)}}
@keyframes onb-x1{0%,14%{opacity:0;transform:translateX(-100px)}18%,22%{opacity:1;transform:translateX(-100px)}40%{transform:none}84%{opacity:1}91%,100%{opacity:0;transform:none}}
@keyframes onb-x2{0%,15%{opacity:0;transform:translateX(-123px)}19%,30%{opacity:1;transform:translateX(-123px)}50%{transform:none}84%{opacity:1}91%,100%{opacity:0;transform:none}}
@keyframes onb-x3{0%,16%{opacity:0;transform:translateX(-113px)}20%,40%{opacity:1;transform:translateX(-113px)}60%{transform:none}84%{opacity:1}91%,100%{opacity:0;transform:none}}
@keyframes onb-y1{0%,22%{transform:translateY(-37px) rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}31%{transform:translateY(-90px) rotate(180deg);animation-timing-function:cubic-bezier(.6,0,.8,.5)}40%,84%{transform:translateY(0) rotate(360deg)}91%,100%{transform:translateY(16px) rotate(360deg)}}
@keyframes onb-y2{0%,30%{transform:translateY(0) rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}40%{transform:translateY(-84px) rotate(-180deg);animation-timing-function:cubic-bezier(.6,0,.8,.5)}50%,84%{transform:translateY(0) rotate(-360deg)}91%,100%{transform:translateY(16px) rotate(-360deg)}}
@keyframes onb-y3{0%,40%{transform:translateY(4px) rotate(0deg);animation-timing-function:cubic-bezier(.2,.7,.4,1)}50%{transform:translateY(-72px) rotate(180deg);animation-timing-function:cubic-bezier(.6,0,.8,.5)}60%,84%{transform:translateY(0) rotate(360deg)}91%,100%{transform:translateY(16px) rotate(360deg)}}

/* 3. по шагам: пар, кусочки подпрыгивают, огонь дрожит, стрелка таймера тикает, галочки 1-2-3, в конце таймер звенит */
.onb-cook .st{fill:none;stroke:var(--onb-steam,#B4B6C4);stroke-width:4;stroke-linecap:round;transform-box:fill-box;transform-origin:50% 100%;animation:onb-steam 2.4s ease-out infinite}
.onb-cook .s2{animation-delay:-.8s}
.onb-cook .s3{animation-delay:-1.6s}
.onb-cook .fl{transform-box:fill-box;transform-origin:50% 100%;animation:onb-flame .4s ease-in-out infinite alternate}
.onb-cook .fl2{animation-delay:-.15s}
.onb-cook .fl3{animation-delay:-.27s}
.onb-cook .hp{transform-box:fill-box;transform-origin:50% 50%;animation:onb-hop 1.1s ease-in-out infinite}
.onb-cook .h2{animation-delay:-.3s}
.onb-cook .h3{animation-delay:-.62s}
.onb-cook .h4{animation-delay:-.85s}
.onb-cook .hd{transform-box:fill-box;transform-origin:50% 100%;animation:onb-spin 5s steps(10,end) infinite}
.onb-cook .tm{transform-box:fill-box;transform-origin:50% 60%;animation:onb-ring 5s linear infinite}
.onb-cook .k1,.onb-cook .k2,.onb-cook .k3{transform-box:fill-box;transform-origin:50% 50%;animation:onb-k1 5s cubic-bezier(.22,1,.36,1) infinite}
.onb-cook .k2{animation-name:onb-k2}
.onb-cook .k3{animation-name:onb-k3}
@keyframes onb-steam{0%{opacity:0;transform:translateY(10px) scale(.85)}35%{opacity:1}100%{opacity:0;transform:translateY(-14px) scale(1.1)}}
@keyframes onb-flame{from{transform:scale(.9,.75)}to{transform:scale(1.05,1.1)}}
@keyframes onb-hop{0%{transform:none}25%{transform:translateY(-13px) rotate(90deg)}50%,100%{transform:translateY(0) rotate(180deg)}}
@keyframes onb-ring{0%,78%,92%,100%{transform:none}80%,84%,88%{transform:rotate(-9deg)}82%,86%,90%{transform:rotate(9deg)}}
@keyframes onb-k1{0%,16%{opacity:0;transform:scale(.3)}24%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes onb-k2{0%,38%{opacity:0;transform:scale(.3)}46%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}
@keyframes onb-k3{0%,60%{opacity:0;transform:scale(.3)}68%,92%{opacity:1;transform:none}98%,100%{opacity:0;transform:none}}

/* 4. семья: каждый подпрыгивает — появляется его порция, потом щит «аллергии учтены» */
.onb-family .f{transform-box:fill-box;transform-origin:50% 100%;animation:onb-fhop 5s ease-in-out infinite}
.onb-family .f2{animation-delay:.5s}
.onb-family .f3{animation-delay:1s}
.onb-family .f4{animation-delay:1.5s}
.onb-family .d1,.onb-family .d2,.onb-family .d3,.onb-family .d4{transform-box:fill-box;transform-origin:50% 100%;animation:onb-d1 5s cubic-bezier(.22,1,.36,1) infinite}
.onb-family .d2{animation-name:onb-d2}
.onb-family .d3{animation-name:onb-d3}
.onb-family .d4{animation-name:onb-d4}
.onb-family .sd{transform-box:fill-box;transform-origin:50% 50%;animation:onb-sd 5s cubic-bezier(.22,1,.36,1) infinite}
.onb-family .rg{fill:none;stroke:#34C759;stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:onb-pulse 5s ease-out infinite}
@keyframes onb-fhop{0%,3%,13%,100%{transform:none}8%{transform:translateY(-10px) scale(1.03,.98)}}
@keyframes onb-d1{0%,9%{opacity:0;transform:scale(.2)}15%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes onb-d2{0%,19%{opacity:0;transform:scale(.2)}25%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes onb-d3{0%,29%{opacity:0;transform:scale(.2)}35%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes onb-d4{0%,39%{opacity:0;transform:scale(.2)}45%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes onb-sd{0%,50%{opacity:0;transform:scale(.3) rotate(-25deg)}60%,90%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
@keyframes onb-pulse{0%,58%{opacity:0;transform:scale(.8)}62%{opacity:.9}84%,100%{opacity:0;transform:scale(1.35)}}

/* тишина: «меньше движения» — сразу финальный кадр; пауза приложения (calm, paused) — замираем где есть */
@media (prefers-reduced-motion:reduce){.onb-art *{animation:none!important}}
body.calm .onb-art *,body.paused .onb-art *{animation-play-state:paused!important}