/* Сцены инструментов (tool-scenes.js + scenes/*.js).
   Материалы и свет живут в SVG и canvas, здесь раскладка, глубина, табло и общие движения.
   Анимируются только transform, opacity и stroke-dashoffset. */

/* ---------- раскладка ---------- */
section.tl-hero.tl-has-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,560px);column-gap:clamp(20px,3.5vw,56px);align-items:center}
section.tl-hero.tl-has-scene>:not(.tl-scene){grid-column:1}
section.tl-hero .tl-scene{grid-column:2;grid-row:1/span 3;margin:-28px 0 -18px;width:100%;aspect-ratio:560/360;pointer-events:none;user-select:none;perspective:1100px}
@media (max-width:980px){section.tl-hero.tl-has-scene{grid-template-columns:minmax(0,1fr) minmax(300px,440px)}}
@media (max-width:860px){
  section.tl-hero.tl-has-scene{display:block}
  section.tl-hero .tl-scene{width:min(100%,460px);margin:16px auto 0;aspect-ratio:560/360}
}
/* старые фоновые анимации героя из visual-system.css: сцена их заменяет */
body.shell-v2 .tl-hero.tool-hero::before,body.shell-v2 .tl-hero.tool-hero::after{content:none!important;animation:none!important}

.tl-scene-stage{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform;opacity:0;transform:translateY(10px);transition:opacity .7s var(--hv-ease,cubic-bezier(.22,1,.36,1))}
.tl-scene.is-ready .tl-scene-stage{opacity:1}
.tl-scene-svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible;font-family:var(--hv-sans,system-ui);font-variant-numeric:tabular-nums}
.tl-scene-fx{position:absolute;pointer-events:none}
.tl-hud{position:absolute;inset:0;pointer-events:none;transform:translateZ(30px)}

/* ---------- табло ---------- */
.tl-readout{position:absolute;display:grid;gap:3px;transform:translate(0,-50%);opacity:0;transition:opacity .5s .2s;white-space:nowrap}
.tl-readout.is-on{opacity:1}
.tl-readout[data-align=right]{transform:translate(-100%,-50%);justify-items:end;text-align:right}
.tl-readout[data-align=center]{transform:translate(-50%,-50%);justify-items:center;text-align:center}
.tl-readout-label{font:600 9.5px/1 var(--hv-sans,system-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--hv-mut2,#706E76)}
.tl-readout-value{display:flex;align-items:baseline;gap:4px;font:500 clamp(15px,1.45vw,21px)/1 var(--hv-sans,system-ui);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--hv-text,#EDEBE6);text-shadow:0 1px 12px rgba(0,0,0,.6)}
.tl-readout-value i{font-style:normal;font-size:.62em;letter-spacing:0;color:var(--hv-mut,#9A98A0)}
.tl-readout[data-tone=accent] .tl-readout-value b{color:#ff8098}
.tl-readout[data-tone=small] .tl-readout-value{font-size:clamp(12px,1vw,14px);letter-spacing:0}
.tl-readout[data-tone=caption] .tl-readout-label{display:none}
.tl-readout[data-tone=caption] .tl-readout-value{font-size:12.5px;letter-spacing:.01em;color:var(--hv-mut,#9A98A0)}
@media (max-width:860px){.tl-readout-value{font-size:15px}.tl-readout-label{font-size:8.5px}}

/* ---------- общие классы SVG ---------- */
.tl-scene{--sc-ink:var(--hv-text,#EDEBE6);--sc-mut:var(--hv-mut,#9A98A0);--sc-mut2:var(--hv-mut2,#706E76);--sc-line:rgba(237,235,230,.1);--sc-line2:rgba(237,235,230,.24);--sc-acc:var(--hv-accent,#E23A57)}
.sc-ln{fill:none;stroke:var(--sc-line2);stroke-width:1}
.sc-hair{fill:none;stroke:var(--sc-line);stroke-width:1}
.sc-ink{fill:none;stroke:var(--sc-ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.sc-acc{fill:none;stroke:var(--sc-acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sc-label{fill:var(--sc-mut);font-size:11px;letter-spacing:.02em}
.sc-cap{fill:var(--sc-mut2);font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.sc-ink-text{fill:#2a2b31;font-size:12px}
.sc-hand{fill:#d22b4b;font-size:17px;font-family:"Caveat","Segoe Print","Comic Sans MS",cursive;font-weight:600}
.tl-scene text{paint-order:stroke;stroke-linejoin:round}

/* ---------- общие движения ---------- */
.sc-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:sc-draw var(--dur,1100ms) var(--hv-ease,cubic-bezier(.22,1,.36,1)) var(--d,0ms) forwards}
@keyframes sc-draw{to{stroke-dashoffset:0}}
.sc-rise{opacity:0;transform-box:fill-box;transform-origin:center bottom;animation:sc-rise .8s var(--hv-ease,cubic-bezier(.22,1,.36,1)) var(--d,0ms) forwards}
@keyframes sc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sc-fade{opacity:0;animation:sc-fade .9s ease var(--d,0ms) forwards}
@keyframes sc-fade{to{opacity:1}}
.sc-pop{opacity:0;transform-box:fill-box;transform-origin:center;animation:sc-pop .6s cubic-bezier(.34,1.56,.64,1) var(--d,0ms) forwards}
@keyframes sc-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

.tl-scene.is-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
  .tl-scene *,.tl-scene-stage{animation:none!important;transition:none!important}
  .tl-scene-stage{opacity:1;transform:none}
  .tl-scene .sc-draw{stroke-dashoffset:0}
  .tl-scene :is(.sc-rise,.sc-pop,.sc-fade){opacity:1;transform:none}
  .tl-readout{opacity:1}
}

/* ---------- Николай AI: сцена в пустом состоянии чата ---------- */
body.shell-v2 .assistant-chat-empty .tl-scene{width:min(100%,420px);margin:0 0 12px;aspect-ratio:560/300;perspective:none}
@media (max-height:760px){body.shell-v2 .assistant-chat-empty .tl-scene{width:min(100%,320px)}}

/* ---------- Презентации: листы раскладываются при входе, первый слайд меняется под сценарий ---------- */
.slides-scene.is-enter .slides-paper-back{animation:sl-back 1.2s var(--hv-ease,cubic-bezier(.22,1,.36,1)) both}
.slides-scene.is-enter .slides-paper-front{animation:sl-front 1.2s var(--hv-ease,cubic-bezier(.22,1,.36,1)) .15s both}
@keyframes sl-back{from{opacity:0;transform:translate(60px,20px) rotate(6deg)}to{opacity:.65;transform:rotate(-5deg)}}
@keyframes sl-front{from{opacity:0;transform:translateY(44px) rotate(-3deg) scale(.96)}to{opacity:1;transform:rotate(3deg)}}
.slides-scene{perspective:1200px}
.slides-scene .slides-paper-front{transition:transform .5s var(--hv-ease,cubic-bezier(.22,1,.36,1))}
.slides-paper-front>*{transition:opacity .18s,transform .18s}
.slides-paper-front.is-flip>*{opacity:0;transform:translateY(6px)}
@media (prefers-reduced-motion:reduce){.slides-scene.is-enter .slides-paper-back,.slides-scene.is-enter .slides-paper-front{animation:none}.slides-paper-front>*{transition:none}}

/* ---------- Сравнение версий на поддомене Антиплагиата (старая оболочка) ---------- */
body:not(.shell-v2) .tl-crumbs{display:flex;gap:10px;align-items:center}
body:not(.shell-v2) .tl-crumbs span::before{content:"/";margin-right:10px;opacity:.55}