/* Маскот Картини-Ума (корги). Разметку вставляют index.html и бандл; SVG встраивает js/mascot.js. */

/* Пузырь реплики; фразы сменяют друг друга без JS */
.k-bubble { position: relative; display: inline-grid; margin: 0 auto 8px; padding: 8px 14px; max-width: 290px;
  background: #fff; color: #2B1B12; border: 2px solid #2B1B12; border-radius: 16px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center;
  box-shadow: 0 4px 14px rgba(43, 27, 18, .12); }
.k-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 12px; height: 12px; margin-left: -6px;
  background: #fff; border-right: 2px solid #2B1B12; border-bottom: 2px solid #2B1B12; transform: rotate(45deg); }
.k-lines > span { grid-area: 1 / 1; opacity: 0; animation: kLine var(--k-cycle, 16s) infinite; }
.k-lines > span:nth-child(2) { animation-delay: calc(var(--k-cycle, 16s) * 1 / var(--k-n, 4)); }
.k-lines > span:nth-child(3) { animation-delay: calc(var(--k-cycle, 16s) * 2 / var(--k-n, 4)); }
.k-lines > span:nth-child(4) { animation-delay: calc(var(--k-cycle, 16s) * 3 / var(--k-n, 4)); }
.k-lines > span:nth-child(5) { animation-delay: calc(var(--k-cycle, 16s) * 4 / var(--k-n, 4)); }
.k-lines[data-n="3"] > span { animation-name: kLine3; }
.k-lines[data-n="5"] > span { animation-name: kLine5; }
@keyframes kLine { 0% { opacity: 0; transform: translateY(4px); } 2%, 23% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes kLine3 { 0% { opacity: 0; transform: translateY(4px); } 2%, 31% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes kLine5 { 0% { opacity: 0; transform: translateY(4px); } 2%, 18% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-4px); } }

/* Прелоадер: мягкое появление, чтобы при быстрой загрузке не мигал; под онбордингом прячется */
.k-pre { display: flex; flex-direction: column; align-items: center; opacity: 0; animation: kPreIn .35s ease .25s forwards; }
.k-pre-dog { width: 150px; }
.k-pre-text { margin: 10px 0 0; font-size: 15px; font-weight: 500; color: #6b6478; }
@keyframes kPreIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body:has(.onboarding-overlay) #skeleton-ui { visibility: hidden; }

/* Оверлей входа: корги сидит на верхнем крае карточки */
.auth-overlay-card.k-has-hero { margin-top: 150px; }
.k-auth-hero { position: absolute; left: 0; right: 0; bottom: calc(100% - 10px); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.k-auth-dog { width: 92px; margin: 0; }
@media (max-height: 660px) { .k-auth-hero .k-bubble { display: none; } .auth-overlay-card.k-has-hero { margin-top: 96px; } }
@media (max-height: 540px) { .k-auth-hero { display: none; } .auth-overlay-card.k-has-hero { margin-top: 0; } }

/* Экран входа */
.k-login-hero { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.k-login-dog { width: 104px; }

/* Ожидание генерации: коллекция и мобильная лента */
.processing-dog-svg k-mascot.k-proc { width: 94%; max-width: 340px; }
.processing-dog-svg k-mascot.k-proc > svg { width: 100%; height: auto; }
.gallery-item-image-wrapper k-mascot img { opacity: 1; width: 100%; height: auto; }
.canvas-feed-placeholder k-mascot.k-proc { flex: 0 1 auto; width: 94%; min-height: 0; }
.canvas-feed-placeholder k-mascot.k-proc > svg { width: 100%; height: auto; max-height: none; }
.canvas-feed-item k-mascot img { width: 100%; height: auto; object-fit: contain; }

/* Реплики в карточках не прячутся под плашкой с промтом */
.gallery-item.processing .processing-text-rotate { padding-bottom: 30px; }
.gallery-item.failed .failed-placeholder { padding-bottom: 34px; }

/* Провал в мобильной ленте */
.canvas-feed-error img.k-feed-guilty { display: block; width: 62%; height: auto; margin: 0 auto 6px; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .k-lines > span { animation: none; }
  .k-lines > span:first-child { opacity: 1; }
  .k-pre { animation: none; opacity: 1; }
}
/* Маскот-корги: анимации частей встроенного SVG (генерируется work/mascot-20260928/mascot/build.cjs) */
k-mascot{display:block;margin:0 auto}k-mascot>svg,k-mascot>img{display:block;width:100%;height:auto}
.km{overflow:visible}.km g[class^="km-"],.km path[class^="km-"],.km circle[class^="km-"]{transform-box:view-box;transform-origin:0 0}
.km .km-tail{animation:km-tail .5s var(--km-t,0s) ease-in-out infinite alternate}@keyframes km-tail{from{transform:rotate(-10deg)}to{transform:rotate(12deg)}}
.km .km-eye{animation:km-blink 4.2s var(--km-t,0s) infinite}@keyframes km-blink{0%,90%,100%{transform:scaleY(1)}93%{transform:scaleY(.08)}96%{transform:scaleY(1)}}
.km .km-flap{animation:km-flap 2.4s var(--km-t,0s) ease-in-out infinite}@keyframes km-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
.km .km-body{animation:km-breath 2.8s var(--km-t,0s) ease-in-out infinite}@keyframes km-breath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.986)}}
.km-hello .km-armR{animation:km-wave .42s var(--km-t,0s) ease-in-out infinite alternate}@keyframes km-wave{from{transform:rotate(-3deg)}to{transform:rotate(17deg)}}
.km-hello .km-head,.km-think .km-head{animation:km-nod 2.8s var(--km-t,0s) ease-in-out infinite}@keyframes km-nod{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.km-paint .km-armR{animation:km-stroke .9s var(--km-t,0s) ease-in-out infinite alternate}@keyframes km-stroke{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
.km-paint .km-head{animation:km-focus 1.8s var(--km-t,0s) ease-in-out infinite}@keyframes km-focus{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(3deg)}}
.km-paint .km-s1{stroke-dasharray:1 1;animation:km-s1 5.4s var(--km-t,0s) ease-in-out infinite}@keyframes km-s1{0%,2%{stroke-dashoffset:1;opacity:0}2.5%{stroke-dashoffset:1;opacity:1}24%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}.km-paint .km-s2{stroke-dasharray:1 1;animation:km-s2 5.4s var(--km-t,0s) ease-in-out infinite}@keyframes km-s2{0%,24%{stroke-dashoffset:1;opacity:0}24.5%{stroke-dashoffset:1;opacity:1}46%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}.km-paint .km-s3{stroke-dasharray:1 1;animation:km-s3 5.4s var(--km-t,0s) ease-in-out infinite}@keyframes km-s3{0%,46%{stroke-dashoffset:1;opacity:0}46.5%{stroke-dashoffset:1;opacity:1}68%,86%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}.km-paint .km-d1{animation:km-d1 5.4s var(--km-t,0s) ease-out infinite}@keyframes km-d1{0%,70%{opacity:0}73%,86%{opacity:1}96%,100%{opacity:0}}.km-paint .km-d2{animation:km-d2 5.4s var(--km-t,0s) ease-out infinite}@keyframes km-d2{0%,74%{opacity:0}77%,86%{opacity:1}96%,100%{opacity:0}}.km-paint .km-d3{animation:km-d3 5.4s var(--km-t,0s) ease-out infinite}@keyframes km-d3{0%,78%{opacity:0}81%,86%{opacity:1}96%,100%{opacity:0}}
.km-happy .km-head{animation:km-joy 1.2s var(--km-t,0s) ease-in-out infinite}@keyframes km-joy{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.km-wow .km-body{animation:km-jump .6s var(--km-t,0s) ease-in-out infinite alternate}@keyframes km-jump{from{transform:translate(0,0)}to{transform:translate(0,-14px)}}
.km-point .km-armL{animation:km-poke 1.1s ease-in-out infinite}@keyframes km-poke{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}
.km-point .km-head{animation:km-nod 2.8s ease-in-out infinite}
.km-guilty *{animation:none!important}
@media (prefers-reduced-motion:reduce){.km *{animation:none!important}}