/* ─────────────────────────────────────────────────────────────
   Енотик — «живой слой». Сайт дышит, наблюдает и думает.
   Подключается после базовых стилей на всех трёх страницах.
   Всё движение выключается при prefers-reduced-motion.
   ───────────────────────────────────────────────────────────── */

:root{
  --lv-ease:cubic-bezier(.22,.8,.26,1);
  --lv-breath:7.5s;
  --lv-violet:#7837df;
  --lv-violet-soft:rgba(120,55,223,.12);
  --lv-amber-soft:rgba(227,189,103,.16);
  --lv-ink:#151515;
}

/* ── Дыхание ─────────────────────────────────────────────── */
@keyframes lv-breathe{0%,100%{transform:scale(1) translate3d(0,0,0)}50%{transform:scale(1.045) translate3d(0,-6px,0)}}
@keyframes lv-breathe-soft{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes lv-aura-a{0%,100%{transform:translate3d(-8%,-4%,0) scale(1);opacity:.75}50%{transform:translate3d(-2%,4%,0) scale(1.12);opacity:1}}
@keyframes lv-aura-b{0%,100%{transform:translate3d(6%,6%,0) scale(1.05);opacity:.7}50%{transform:translate3d(0,-4%,0) scale(.94);opacity:1}}
@keyframes lv-glow{0%,100%{opacity:.35}50%{opacity:.75}}
@keyframes lv-pulse-dot{0%,100%{transform:scale(.7);opacity:.35}50%{transform:scale(1);opacity:1}}
@keyframes lv-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes lv-pop{0%{opacity:0;transform:translateY(10px) scale(.86)}70%{transform:translateY(-2px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes lv-zz{0%{opacity:0;transform:translate(0,4px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-18px) scale(1.15)}}
@keyframes lv-nod{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(4px) rotate(-2deg)}65%{transform:translateY(-3px) rotate(1.5deg)}}
@keyframes lv-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
@keyframes lv-caret{50%{opacity:0}}
@keyframes lv-think-sweep{0%,100%{transform:translate(-6px,-7px)}50%{transform:translate(6px,-7px)}}
@keyframes lv-scan{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}

/* Аура за первым экраном: два медленных пятна света */
.lv-aura{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.lv-aura span{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.lv-aura span:nth-child(1){left:8%;top:-10%;width:52vw;height:52vw;max-width:760px;max-height:760px;background:radial-gradient(circle,var(--lv-violet-soft) 0,rgba(120,55,223,0) 68%);animation:lv-aura-a calc(var(--lv-breath)*1.6) ease-in-out infinite}
.lv-aura span:nth-child(2){right:-6%;top:22%;width:44vw;height:44vw;max-width:640px;max-height:640px;background:radial-gradient(circle,var(--lv-amber-soft) 0,rgba(227,189,103,0) 68%);animation:lv-aura-b calc(var(--lv-breath)*1.9) ease-in-out infinite}

/* Знак бренда и окно чата дышат */
.brand__mark{transform-origin:50% 50%;animation:lv-breathe-soft calc(var(--lv-breath)*.7) ease-in-out infinite}
.demo-frame::before{animation:lv-glow var(--lv-breath) ease-in-out infinite}
.hero__peek svg{animation:lv-float 6s ease-in-out infinite}

/* ── Наблюдение: глаза ───────────────────────────────────── */
[data-eyes] .lv-eye{transform-box:view-box;transition:transform .12s ease}
[data-eyes] .lv-pupil{transform-box:view-box;transition:transform .35s var(--lv-ease);will-change:transform}
[data-eyes].is-blink .lv-eye{transform:scaleY(.06)}
.is-idle [data-eyes] .lv-eye{transform:scaleY(.1);transition-duration:.5s}
.is-idle [data-eyes] .lv-pupil{transform:translate(0,4px)!important}
[data-eyes].is-thinking .lv-pupil{animation:lv-think-sweep 1.6s ease-in-out infinite;transition:none}
[data-eyes].is-nod{animation:lv-nod .6s var(--lv-ease) 1}
[data-eyes].is-wiggle{animation:lv-wiggle .5s ease-in-out 1}

/* Без скрипта глаза всё равно живут: медленно оглядываются и моргают; уши изредка дёргаются */
@keyframes lv-look{0%,18%{transform:translate(0,0)}25%,40%{transform:translate(-7px,2px)}48%,62%{transform:translate(6px,-3px)}70%,82%{transform:translate(2px,4px)}90%,100%{transform:translate(0,0)}}
@keyframes lv-blink-auto{0%,92%,100%{transform:scaleY(1)}94%,96%{transform:scaleY(.06)}}
@keyframes lv-ears{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-2.5deg)}92%{transform:rotate(1.5deg)}95%{transform:rotate(-1deg)}}
[data-eyes]:not(.is-live) .lv-pupil{animation:lv-look 11s ease-in-out infinite}
[data-eyes]:not(.is-live) .lv-eye{animation:lv-blink-auto 5.5s ease-in-out infinite}
[data-eyes] .lv-ears{transform-box:fill-box;transform-origin:50% 100%;animation:lv-ears 7s ease-in-out infinite}
[data-eyes] .lv-ears:nth-of-type(1){animation-delay:-2s}

/* Голова енота в каталоге — теперь инлайновый SVG, следит за курсором */
.catalog__mascot svg{width:100%;height:auto;display:block}

/* ── Спутник в углу: маленький наблюдатель ───────────────── */
.lv-companion{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:0;height:64px;padding:0;border:0;border-radius:999px;background:#fff;color:var(--lv-ink);box-shadow:0 10px 30px rgba(21,21,21,.16),0 0 0 1px rgba(21,21,21,.06);cursor:pointer;transition:transform .35s var(--lv-ease),box-shadow .3s,gap .3s,opacity .4s;animation:lv-pop .6s var(--lv-ease) both}
.lv-companion__face{width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:50%;overflow:visible}
.lv-companion__face svg{width:46px;height:auto;transform-origin:50% 60%;animation:lv-float 5.2s ease-in-out infinite}
.lv-companion__label{max-width:0;overflow:hidden;white-space:nowrap;font:500 13px/1 JetBrains,ui-monospace,monospace;opacity:0;transition:max-width .35s var(--lv-ease),opacity .25s,padding .35s;padding:0}
.lv-companion:hover,.lv-companion:focus-visible{transform:translateY(-3px);box-shadow:0 16px 38px rgba(120,55,223,.22),0 0 0 1px rgba(120,55,223,.25)}
.lv-companion:hover .lv-companion__label,.lv-companion:focus-visible .lv-companion__label{max-width:180px;opacity:1;padding-right:20px}
.lv-companion__zz{position:absolute;left:44px;top:6px;font:700 15px/1 JetBrains,monospace;color:var(--lv-violet);opacity:0;pointer-events:none}
.is-idle .lv-companion__zz{animation:lv-zz 2.6s ease-out infinite}
.is-idle .lv-companion__face svg{animation-duration:8s}
.lv-companion.is-hidden{opacity:0;pointer-events:none;transform:translateY(20px)}
@media(max-width:760px){.lv-companion{display:none}}

/* ── Шапка: замечает прокрутку ───────────────────────────── */
.site-header{position:sticky;top:0;transition:box-shadow .3s,background .3s,backdrop-filter .3s}
.site-header.is-scrolled{background:rgba(251,249,246,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(21,21,21,.06)}
.lv-progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--lv-progress,0));background:linear-gradient(90deg,var(--lv-violet),#b18cff);opacity:0;transition:opacity .3s;pointer-events:none}
.site-header.is-scrolled .lv-progress{opacity:1}
@media(max-width:1100px){.site-nav{transition:opacity .25s,transform .3s var(--lv-ease)}.site-nav.is-open{animation:lv-pop .35s var(--lv-ease) both}}
.menu-toggle span{transition:transform .3s var(--lv-ease),opacity .2s;transform-origin:50% 50%}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Появление при прокрутке ─────────────────────────────── */
.lv-reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--lv-ease),transform .8s var(--lv-ease);transition-delay:calc(var(--lv-i,0)*70ms)}
.lv-reveal.is-in{opacity:1;transform:none}
.lv-reveal--scale{transform:translateY(14px) scale(.97)}

/* Значки моделей всплывают по очереди, потом покачиваются волной */
@keyframes lv-wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hero__models .model-glyph{animation:lv-pop .55s var(--lv-ease) both,lv-wave 4.2s ease-in-out infinite;animation-delay:calc(var(--lv-i,0)*60ms + .1s),calc(var(--lv-i,0)*.35s + 1s);transition:transform .25s var(--lv-ease)}
/* Кнопка отправки «зовёт»: мягкое кольцо-пульс, пока поле пустое */
@keyframes lv-ring{0%{box-shadow:0 0 0 0 rgba(120,55,223,.45)}70%{box-shadow:0 0 0 14px rgba(120,55,223,0)}100%{box-shadow:0 0 0 0 rgba(120,55,223,0)}}
.demo-chat__form input:placeholder-shown+.demo-chat__send,.composer textarea:placeholder-shown~.composer__bottom .send-button{animation:lv-ring 3.2s ease-out infinite}
.hero__models .model-glyph:hover{transform:translateY(-4px) rotate(-4deg)}

/* Магнитные кнопки и наклон карточек */
.lv-magnet{transition:transform .25s var(--lv-ease),background .2s,box-shadow .2s;will-change:transform}
.lv-tilt{transition:transform .35s var(--lv-ease),box-shadow .35s;transform-style:preserve-3d}
.lv-tilt:hover{box-shadow:0 18px 40px rgba(21,21,21,.08)}

/* Галерея и карточки реагируют на курсор */

/* FAQ: плавное раскрытие и живой плюс */
.faq details[open] summary{color:var(--lv-violet)}
.faq details p{animation:lv-pop .35s var(--lv-ease) both}

/* ── Мышление: демо-чат ──────────────────────────────────── */
.demo-chat__conversation{scroll-behavior:smooth}
.demo-turn{animation:lv-pop .4s var(--lv-ease) both}
.demo-turn--bot{align-self:flex-start;display:flex;gap:12px;max-width:86%;padding:0;color:#e9e9e9}
.demo-turn--bot .demo-chat__avatar{width:34px;height:34px;flex:none;font-size:18px;margin-top:2px}
.demo-turn--bot{color:#EDEAF5}
.demo-turn__body{display:flex;flex-direction:column;gap:9px;min-width:0}
.demo-turn__text{margin:0;line-height:1.55}
.demo-turn__text .lv-caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:currentColor;vertical-align:-2px;animation:lv-caret .7s steps(1) infinite}
.demo-turn__meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 11.5px/1.3 JetBrains,ui-monospace,monospace;color:#a8a8a8;letter-spacing:.01em}
.demo-turn__meta b{color:#c9b5f5;font-weight:500}
.demo-think{display:inline-flex;align-items:center;gap:10px;color:#bdbdbd;font-size:13px}
.demo-think__dots{display:inline-flex;gap:4px}
.demo-think__dots i{width:6px;height:6px;border-radius:50%;background:#b7a1eb;animation:lv-pulse-dot 1.2s ease-in-out infinite}
.demo-think__dots i:nth-child(2){animation-delay:.2s}.demo-think__dots i:nth-child(3){animation-delay:.4s}
.demo-think__label{min-width:150px}
.demo-chat__suggest{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.demo-chat__suggest button{border:1px solid #3d3d3d;background:transparent;color:#cfcfcf;border-radius:999px;padding:8px 13px;font-size:13px;line-height:1.1;transition:background .2s,color .2s,border-color .2s,transform .25s var(--lv-ease)}
.demo-chat__suggest button:hover{background:#333;color:#fff;border-color:#555;transform:translateY(-2px)}
.demo-chat__suggest[hidden]{display:none}
.demo-chat__form input{transition:box-shadow .25s,background .2s}
.demo-chat__form input:focus{outline:none;box-shadow:0 0 0 2px rgba(167,119,255,.6)}
.demo-chat.is-thinking .demo-chat__spark{color:#b7a1eb;animation:lv-wiggle 1.2s ease-in-out infinite}
.demo-chat.is-thinking .demo-chat__send{opacity:.5;pointer-events:none}
.demo-chat__reset{margin-top:10px;align-self:flex-start;border:0;background:transparent;color:#9d9d9d;font-size:12px;padding:6px 0;text-decoration:underline;text-underline-offset:3px;animation:lv-pop .4s var(--lv-ease) both}
.demo-chat__reset:hover{color:#fff}

/* Витрина: подсказка «листайте» пульсирует, пока не тронули */
.round-btn{position:relative}
.round-btn.is-hinting::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(120,55,223,.35);animation:lv-breathe-soft 1.6s ease-in-out infinite}

/* Живые полосы аудио-карточки, когда она в кадре */


/* ── Снижение движения ──────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  [data-eyes] .lv-ears,[data-eyes]:not(.is-live) .lv-pupil,[data-eyes]:not(.is-live) .lv-eye,.demo-chat__send,.send-button,.lv-aura span,.brand__mark,.demo-frame::before,.lv-companion,.lv-companion__face svg,.hero__models .model-glyph,.demo-turn,.demo-think__dots i,.ch-low-faq-list details p,.ch-feat-round.is-hinting::after,[data-eyes].is-thinking .lv-pupil,.is-idle .lv-companion__zz,.demo-chat.is-thinking .demo-chat__spark,.demo-chat__reset{animation:none!important}
  .lv-reveal{opacity:1;transform:none;transition:none}
  .lv-magnet,.lv-tilt,[data-eyes] .lv-pupil,[data-eyes] .lv-eye,.ch-feat-gallery-tile img,.ch-low-idea,.ch-low-idea img{transition:none!important;transform:none!important}
  .demo-turn__text .lv-caret{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   Экраны продукта: знакомство и кабинет (тёмная тема)
   ═══════════════════════════════════════════════════════════ */
@keyframes lv-orbit{0%,100%{transform:scale(1) rotate(0);opacity:.7}50%{transform:scale(1.04) rotate(3deg);opacity:1}}
@keyframes lv-orbit-b{0%,100%{transform:scale(1.02) rotate(0);opacity:.55}50%{transform:scale(.97) rotate(-4deg);opacity:.9}}

/* Знакомство: сцена дышит, персонаж следит, варианты появляются по очереди */
.onboard-art-pane .art-orbit-one{animation:lv-orbit calc(var(--lv-breath)*1.4) ease-in-out infinite}
.onboard-art-pane .art-orbit-two{animation:lv-orbit-b calc(var(--lv-breath)*1.9) ease-in-out infinite}
.onboard-art-pane .art-glow{animation:lv-glow var(--lv-breath) ease-in-out infinite}
.onboard-art-pane .art-chip{animation:lv-float 5s ease-in-out infinite}
.onboard-art-pane .art-chip-b{animation-delay:-1.6s}.onboard-art-pane .art-chip-c{animation-delay:-3.1s}
.guide-mascot{transform-origin:50% 60%}
.guide-mascot.is-nod{animation:lv-nod .6s var(--lv-ease) 1}
.guide-mascot .lv-tail{transform-box:fill-box;transform-origin:10% 40%;animation:lv-wiggle 6s ease-in-out infinite}
.art-bubble{transition:transform .3s var(--lv-ease)}
.art-bubble .lv-caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:currentColor;vertical-align:-2px;animation:lv-caret .7s steps(1) infinite}
.purpose-option.is-enter,.task-option.is-enter{animation:lv-pop .5s var(--lv-ease) both;animation-delay:calc(var(--lv-i,0)*55ms)}
.purpose-option[aria-pressed="true"] b{opacity:1;transform:translateX(0)}
.purpose-option b{transition:opacity .2s,transform .3s var(--lv-ease);transform:translateX(-6px)}
.task-option{transition:background .18s,border .18s,color .18s,transform .25s var(--lv-ease)}
.task-option:hover{transform:translateY(-2px)}
.task-option[aria-pressed="true"]{transform:scale(1.03)}
.step-progress span{transition:width .5s var(--lv-ease)}
.continue-step:not(:disabled){box-shadow:0 12px 30px rgba(170,134,237,.25)}
body.is-leaving{transition:opacity .35s ease;opacity:0}

/* Кабинет: знак приветствия — живая мордочка */
.welcome-mark--live{overflow:visible;animation:lv-breathe-soft calc(var(--lv-breath)*.8) ease-in-out infinite}
.welcome-mark--live svg{width:46px;height:auto}
.welcome-mark--live svg.is-nod{animation:lv-nod .6s var(--lv-ease) 1}
.welcome-mark--live svg.is-wiggle{animation:lv-wiggle .5s ease-in-out 1}
.composer{transition:border-color .18s,box-shadow .35s}
.composer:focus-within{box-shadow:0 0 0 8px #A787EC1A,0 24px 65px #0004}
.composer textarea{resize:none;overflow:auto;transition:height .12s ease}
.composer-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.composer-message{margin:0}
.composer-hint{flex:none;color:#8D8592;font-size:11px;letter-spacing:.02em;white-space:nowrap}
@media(max-width:600px){.composer-hint{display:none}}
.send-button{transition:transform .25s var(--lv-ease),filter .2s,opacity .2s}
.send-button:not(:disabled):hover{filter:brightness(1.1)}
.send-button:disabled{opacity:.55;cursor:progress}
.cab-think{margin:14px 0 0;color:#bdb4c6;font-size:13px}
.cab-answer{margin:14px 0 0;padding-top:14px;border-top:1px solid #4a4150;line-height:1.55;animation:lv-pop .4s var(--lv-ease) both}
.cab-answer .lv-caret{display:inline-block;width:2px;height:1em;margin-left:2px;background:currentColor;vertical-align:-2px;animation:lv-caret .7s steps(1) infinite}
.workspace-result small b{color:#C4A9F0;font-weight:500}
.workspace-result:not([hidden]){animation:lv-pop .45s var(--lv-ease) both}
.quick-card{animation:lv-pop .55s var(--lv-ease) both;animation-delay:calc(var(--lv-i,0)*80ms + .15s)}
.quick-card:hover .quick-art{transform:translateY(-2px) scale(1.02)}
.quick-art{transition:transform .35s var(--lv-ease)}
.history-item{animation:lv-pop .4s var(--lv-ease) both;transition:color .2s,transform .2s var(--lv-ease)}
.history-item:hover{transform:translateX(3px)}
.sidebar-link{transition:background .2s,color .2s,transform .2s var(--lv-ease)}
.sidebar-link:hover{transform:translateX(2px)}
.mode-button{transition:background .2s,color .2s,transform .2s var(--lv-ease)}
.mode-button:hover{transform:translateY(-1px)}
.preview-pulse::before{animation:lv-breathe-soft 3.6s ease-in-out infinite}
.cab-dialog,.preview-dialog{animation:lv-pop .35s var(--lv-ease) both}
.cab-dialog::backdrop,.preview-dialog::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media(prefers-reduced-motion:reduce){
  .onboard-art-pane .art-orbit-one,.onboard-art-pane .art-orbit-two,.onboard-art-pane .art-glow,.onboard-art-pane .art-chip,.guide-mascot .lv-tail,.purpose-option.is-enter,.task-option.is-enter,.welcome-mark--live,.quick-card,.history-item,.cab-answer,.workspace-result:not([hidden]),.preview-pulse::before,.cab-dialog,.preview-dialog,.art-bubble .lv-caret,.cab-answer .lv-caret{animation:none!important}
  body.is-leaving{transition:none}
}

/* ── Cookie-уведомление (все страницы) ─────────────────── */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:70;display:flex;align-items:center;gap:16px;max-width:720px;margin:0 auto;padding:14px 16px 14px 18px;border-radius:18px;background:var(--surface,var(--panel-2,#fff));color:var(--ink,var(--text,#1A1730));border:1px solid var(--line,rgba(0,0,0,.1));box-shadow:0 30px 70px -30px rgba(0,0,0,.5);animation:lv-pop .5s var(--lv-ease) both}
.cookie p{flex:1;margin:0;font-size:14px;line-height:1.45;color:var(--ink-2,var(--text-2,#3A3650))}
.cookie a{color:var(--violet-deep,var(--violet,#7837df));text-decoration:underline;text-underline-offset:3px}
.cookie div{display:flex;gap:6px;flex:none}
.cookie button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-strong,var(--line-2,rgba(0,0,0,.2)));background:transparent;color:inherit;font:500 13px/1 JetBrains,ui-monospace,monospace;cursor:pointer;transition:background .2s,color .2s}
.cookie button.is-primary{background:var(--lv-violet);color:#fff;border-color:var(--lv-violet)}
.cookie button:hover{background:var(--lv-violet);color:#fff;border-color:var(--lv-violet)}
@media(max-width:760px){.cookie{flex-direction:column;align-items:stretch;left:10px;right:10px;bottom:10px}.cookie button{flex:1}}
@media(prefers-reduced-motion:reduce){.cookie{animation:none}}