/* annakotsur.com: scroll-hero первого экрана (sticky-canvas + HTML-слои текста).
   Работает вместе с /assets/js/hero.js. Подключается ПОСЛЕ site.css.

   Концепция: «Кино» (Ф1–Ф2: H1 слева, факты справа, боли снизу слева), в Ф3 кадр уменьшается
   и уезжает влево, справа появляется развилка.
   Режимы:
   - html.sh-live  : скролл-режим (секция 500vh / 350vh на узких экранах, внутри sticky-сцена с canvas).
   - без sh-live   : статика (reduced-motion, saveData/2g, нет JS, нет AVIF). Финальный кадр картинкой,
                     весь текст и развилка видны обычной вёрсткой.
   Раскладки: >= 900px: десктоп; < 900px: «кадр сверху, текстовая панель снизу».
   Пороги фаз и параметры мобильной сцены только в hero.js (CFG). Число кадров только в manifest.json. */

/* ───────── Общий каркас ───────── */
.scrollhero{
  --sh-ease:cubic-bezier(.215,.61,.355,1);
  --sh-bg:#0a0a18;
  --sh-wl:max(var(--gutter,24px),calc((100vw - 1200px)/2 + var(--gutter,24px)));
  --cs:.42;
  position:relative;background:var(--sh-bg);color:var(--text)
}
.sh-stage{position:relative;background:var(--sh-bg);isolation:isolate}
.sh-media{position:relative;width:100%;aspect-ratio:16/9;max-height:62svh;overflow:hidden;background:var(--sh-bg)}
.sh-media picture{display:block;position:absolute;inset:0}
.sh-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.sh-canvas{position:absolute;inset:0;width:100%;height:100%;display:none}
picture.sh-poster{display:none}
.sh-vig{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,24,.55),transparent 18%,transparent 62%,#0a0a18 100%)}

/* ───────── Статика (без sh-live) ───────── */
.sh-ui{position:relative;z-index:2;width:min(100%,1200px);margin:0 auto;padding:28px var(--gutter,24px) 64px;display:grid;gap:32px}
.sh-h1{font-size:clamp(36px,5.4vw,60px);line-height:1;letter-spacing:-.02em}
.sh-sub .lead{margin-top:18px}
.sh-sub .hero-p{max-width:640px;margin:14px 0 0;font-size:16px}
.sh-facts.hero-facts{margin:0;max-width:none}
.sh-pains{display:grid;gap:12px}
.sh-pain{padding:14px 18px;border-left:2px solid var(--purple-light);font:500 19px/1.4 var(--font-text);color:var(--text)}
.sh-pain b,.sh-sub strong{font-weight:700}
.sh-fork-h{font-size:clamp(34px,4.4vw,52px);margin:0 0 34px;text-align:center;font-weight:500;letter-spacing:-.02em}
.sh-fork-h b{font-weight:700}
.sh-cards{margin-top:0}
@media (min-width:900px){html:not(.sh-live) .sh-fork-h{text-align:left;width:max-content;max-width:100%}}
.sh-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.sh-fork .sec-after{margin-top:18px}
.scrollhero .fork-card{padding:26px 28px}
.scrollhero .fork-card h3{font-size:clamp(22px,2vw,28px)}
.fork-more{display:none}
@media (max-width:899.98px){
  .sh-media{aspect-ratio:4/3}
  .sh-cards{grid-template-columns:1fr}
}

/* ───────── Макеты сайтов (нейтральные вайрфреймы, без текста и брендов) ───────── */
.mock{display:block;width:100%;height:auto;overflow:visible;opacity:.9}
.mock .m-win{fill:rgba(99,102,241,.08);stroke:rgba(165,180,252,.38);stroke-width:1.2}
.mock .m-line{fill:none;stroke:rgba(165,180,252,.26);stroke-width:1}
.mock .m-dot{fill:rgba(165,180,252,.40)}
.mock .m-pill{fill:rgba(165,180,252,.18)}
.mock .m-block{fill:rgba(165,180,252,.34)}
.mock .m-img{fill:rgba(99,102,241,.24)}
.mock .m-bar{fill:rgba(129,140,248,.72)}
.mock .m-bar--hi{fill:rgba(165,180,252,.9)}
.mock .m-note rect.m-plate{fill:#14143a;stroke:rgba(165,180,252,.45);stroke-width:1}
.mock .m-note .m-ln{fill:rgba(165,180,252,.30)}
.mock .m-ok{fill:#22c55e}
.mock .m-ok-ink{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* «Есть сайт»: график растёт, всплывает плашка */
.mock--has .m-bar{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(var(--a));
  transition:transform .9s var(--sh-ease,cubic-bezier(.215,.61,.355,1)) calc(var(--d,0) * 70ms)}
.mock--has .m-note{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(8px) scale(.92);
  transition:opacity .5s linear .45s,transform .9s var(--sh-ease,cubic-bezier(.215,.61,.355,1)) .45s}
.fork-card:hover .mock--has .m-bar,.fork-card:focus-within .mock--has .m-bar{transform:scaleY(var(--b))}
.fork-card:hover .mock--has .m-note,.fork-card:focus-within .mock--has .m-note{opacity:1;transform:none}

/* «Нет сайта»: пунктирный каркас, блоки встают на место */
.mock--none .m-win{stroke-dasharray:5 5}
.mock--none .m-hole{fill:none;stroke:rgba(165,180,252,.34);stroke-width:1.1;stroke-dasharray:3 4}
.mock--none .m-piece{transform-box:fill-box;transform-origin:50% 50%;opacity:.38;
  transform:translate(var(--x,0),var(--y,0)) rotate(var(--r,0deg));
  transition:transform 1s var(--sh-ease,cubic-bezier(.215,.61,.355,1)) calc(var(--d,0) * 70ms),opacity .5s linear calc(var(--d,0) * 70ms)}
.fork-card:hover .mock--none .m-piece,.fork-card:focus-within .mock--none .m-piece{opacity:.95;transform:none}

/* на тач-экранах нет hover: анимация макетов запускается сама, когда появляется развилка */
@media (hover:none){
  .scrollhero[data-phase="3"] .mock--has .m-bar{transform:scaleY(var(--b))}
  .scrollhero[data-phase="3"] .mock--has .m-note{opacity:1;transform:none}
  .scrollhero[data-phase="3"] .mock--none .m-piece{opacity:.95;transform:none}
}
/* статика и reduced-motion: сразу итоговое состояние, без переходов */
html:not(.sh-live) .mock--has .m-bar{transform:scaleY(var(--b));transition:none}
html:not(.sh-live) .mock--has .m-note{opacity:1;transform:none;transition:none}
html:not(.sh-live) .mock--none .m-piece{opacity:.95;transform:none;transition:none}
.mock-box{width:150px;flex:none}

/* ───────── Скролл-режим: общее ───────── */
html.sh-live .scrollhero{height:500vh}
@media (max-width:899.98px){html.sh-live .scrollhero{height:350vh}}
html.sh-live .sh-stage{position:sticky;top:var(--hero-top,68px);overflow:hidden;
  height:calc(100vh - var(--hero-top,68px));height:calc(100svh - var(--hero-top,68px))}
html.sh-live .sh-media{position:absolute;inset:0;aspect-ratio:auto;max-height:none}
html.sh-live .sh-canvas{display:block}
html.sh-live picture.sh-poster{display:block}
html.sh-live picture.sh-final{display:none}
html.sh-live .sh-ui{position:absolute;inset:0;padding:clamp(24px,4.5vh,48px) var(--gutter,24px) clamp(28px,6vh,60px);
  gap:0;pointer-events:none}
html.sh-live .sh-ui > *{min-width:0}
html.sh-live .sh-intro,html.sh-live .sh-facts,html.sh-live .sh-pains{text-shadow:0 2px 28px rgba(10,10,24,.85)}
html.sh-live .sh-pain{border:0;padding:0;font-family:var(--font-head);font-weight:500;letter-spacing:-.015em;line-height:1.16}

/* появление: opacity .5s linear + translate 1s cubic-bezier(.215,.61,.355,1) */
html.sh-live .sh-intro,html.sh-live .sh-facts,html.sh-live .sh-lead,html.sh-live .sh-heroP{
  transition:opacity .5s linear,transform 1s var(--sh-ease)}
html.sh-live .scrollhero[data-phase="3"] .sh-intro,
html.sh-live .scrollhero[data-phase="3"] .sh-facts{opacity:0;transform:translateY(-14px)}

html.sh-live .sh-pains{display:grid}
html.sh-live .sh-pain{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .5s linear,transform 1s var(--sh-ease)}
html.sh-live .scrollhero[data-pain="2"] .sh-pain:nth-child(1),
html.sh-live .scrollhero[data-pain="3"] .sh-pain:nth-child(-n+2),
html.sh-live .scrollhero[data-phase="3"] .sh-pain{transform:translateY(-14px)}
html.sh-live .scrollhero[data-pain="1"] .sh-pain:nth-child(1),
html.sh-live .scrollhero[data-pain="2"] .sh-pain:nth-child(2),
html.sh-live .scrollhero[data-pain="3"] .sh-pain:nth-child(3){opacity:1;transform:none}

html.sh-live .sh-fork-h,html.sh-live .fork-card,html.sh-live .sh-fork .sec-after{
  opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .5s linear,transform 1s var(--sh-ease),border-color .3s,box-shadow .5s var(--ease)}
html.sh-live .scrollhero[data-phase="3"] .sh-fork-h,
html.sh-live .scrollhero[data-phase="3"] .fork-card,
html.sh-live .scrollhero[data-phase="3"] .sh-fork .sec-after{opacity:1;transform:none;pointer-events:auto}
html.sh-live .scrollhero[data-phase="3"] .fork-card:nth-child(1){transition-delay:.12s,.12s,0s,0s}
html.sh-live .scrollhero[data-phase="3"] .fork-card:nth-child(2){transition-delay:.24s,.24s,0s,0s}
html.sh-live .scrollhero[data-phase="3"] .sh-fork .sec-after{transition-delay:.36s,.36s,0s,0s}
html.sh-live .sh-fork .sec-after{font-size:14px;max-width:640px;text-shadow:0 2px 20px rgba(10,10,24,.9)}
html.sh-live .scrollhero .fork-card{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(165deg,rgba(22,22,58,.84),rgba(13,13,32,.88) 62%)}
html.sh-live .scrollhero .fork-card:nth-child(2){background:linear-gradient(165deg,rgba(60,34,122,.58),rgba(13,13,32,.88) 62%)}
html.sh-live .fork-card .fork-body{display:block}

/* ───────── Десктоп (>= 900px): A «Кино» + финал «кадр уезжает влево» ───────── */
@media (min-width:900px){
  html.sh-live .sh-vig{
    background:
     radial-gradient(120% 92% at 50% 42%,transparent 52%,rgba(10,10,24,.78) 100%),
     linear-gradient(90deg,rgba(10,10,24,.84) 0%,rgba(10,10,24,.2) 30%,rgba(10,10,24,0) 48%,rgba(10,10,24,0) 52%,rgba(10,10,24,.2) 70%,rgba(10,10,24,.84) 100%),
     linear-gradient(180deg,rgba(10,10,24,.62) 0%,transparent 16%,transparent 66%,rgba(10,10,24,.86) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(.22 * var(--t,0)))}
  /* Ширина видимой сцены зависит от высоты окна и ограничена 1600px (родная ширина кадров): на широких мониторах лицо не раздувается,
     по бокам кадр растворяется в фоне. --sh-mw/--sh-ml читает и разметка (ширина колонки развилки). */
  html.sh-live .scrollhero{--sh-mw:min(100vw,1600px,calc((100vh - var(--hero-top,68px)) * 2));--sh-mw:min(100vw,1600px,calc((100svh - var(--hero-top,68px)) * 2));
    --sh-ml:calc((100vw - var(--sh-mw)) / 2)}
  html.sh-live .sh-media{inset:0 auto 0 var(--sh-ml);width:var(--sh-mw);transform-origin:0 0;will-change:transform;
    clip-path:inset(0 round calc(var(--t,0) * 19px));
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(10% * (1 - var(--t,0))),#000 calc(100% - 10% * (1 - var(--t,0))),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 calc(10% * (1 - var(--t,0))),#000 calc(100% - 10% * (1 - var(--t,0))),transparent 100%);
    transform:translate(calc(var(--t,0) * (var(--sh-wl) - var(--sh-ml))),calc(var(--t,0) * ((1 - var(--cs)) / 2 * 100% - 96px))) scale(calc(1 - var(--t,0) * (1 - var(--cs))))}
  html.sh-live .sh-ui{grid-template-columns:minmax(0,430px) minmax(0,1fr) minmax(0,330px);grid-template-rows:1fr auto}
  html.sh-live .sh-intro{grid-column:1;grid-row:1;align-self:start;max-width:430px}
  html.sh-live .sh-h1{font-size:clamp(38px,4.2vw,62px);line-height:1;letter-spacing:-.02em}
  html.sh-live .sh-sub .lead{font-size:clamp(16px,1.25vw,18px);color:var(--text);margin-top:20px;max-width:380px}
  html.sh-live .sh-sub .hero-p{font-size:14.5px;max-width:380px;margin-top:12px}
  html.sh-live .sh-facts.hero-facts{grid-column:3;grid-row:1;align-self:center;flex-direction:column;gap:10px}
  /* факты: без плашек, тонкая линия слева и жирное число; появляются позже H1 */
  html.sh-live .sh-facts.hero-facts{justify-self:end;width:min(100%,300px);gap:20px}
  html.sh-live .sh-facts li{padding:0 0 0 16px;border:0;border-left:1px solid rgba(165,180,252,.5);border-radius:0;font-size:15px;line-height:1.4;
    background:none;backdrop-filter:none;-webkit-backdrop-filter:none;align-items:flex-start}
  html.sh-live .sh-facts .chk{display:none}
  html.sh-live .sh-facts b{font:700 1.5em/1.1 var(--font-head);letter-spacing:-.02em;display:block;margin-bottom:3px;color:#fff}
  html.sh-live .sh-facts li > span:last-child{display:block}
  html.sh-live .sh-facts{animation:shFactsIn .9s var(--sh-ease) 1.3s backwards}
  html.sh-live .sh-pains{grid-column:1/3;grid-row:2;align-self:end}
  html.sh-live .sh-pain{font-size:clamp(24px,2.6vw,38px);max-width:560px}
  /* Ф3: колонка справа от уехавшего кадра */
  html.sh-live .sh-fork{grid-column:1/-1;grid-row:1/-1;align-self:center;justify-self:end;display:grid;gap:12px;margin-top:-20px;
    width:min(560px,calc(100vw - 2 * var(--sh-wl) - var(--sh-mw) * var(--cs) - 40px))}
  /* заголовок развилки: по центру всей сцены, над кадром и карточками */
  html.sh-live .sh-fork-h{position:absolute;left:var(--gutter,24px);right:auto;width:max-content;max-width:calc(100% - 2 * var(--gutter,24px));top:clamp(16px,3.4vh,34px);margin:0;
    font-size:min(64px,calc(var(--sh-mw) * var(--cs) / 9.8));line-height:1.05;text-align:left;text-shadow:0 2px 28px rgba(10,10,24,.9)}
  /* DE: заголовок длиннее (29 знаков против 20): кегль считается от ширины сжатого кадра, строка кончается до магистрали линий */
  html[lang="de"].sh-live .sh-fork-h{font-size:min(64px,calc(var(--sh-mw) * var(--cs) / 14.2))}
  /* развилка появляется по положению кадра (--t), а не по номеру фазы: карточки только когда кадр уже уехал и сжался */
  html.sh-live .sh-fork-h{opacity:clamp(0,calc((var(--t,0) - .7) * 5),1)!important;transition:transform 1s var(--sh-ease)!important}
  html.sh-live .fork-card,html.sh-live .sh-fork .sec-after{opacity:clamp(0,calc((var(--t,0) - .85) * 8),1)!important;pointer-events:none;
    transition:transform 1s var(--sh-ease),border-color .3s,box-shadow .5s var(--ease)!important}
  html.sh-live .scrollhero[data-fork] .fork-card,html.sh-live .scrollhero[data-fork] .sh-fork .sec-after{pointer-events:auto}
  html.sh-live .sh-cards{margin:0;gap:12px;grid-template-columns:1fr}
  html.sh-live .scrollhero .fork-card{display:grid;grid-template-columns:128px minmax(0,1fr);column-gap:20px;padding:18px 20px;border-radius:22px}
  html.sh-live .fork-card .mock-box{grid-column:1;grid-row:1;width:128px;margin:2px 0 0}
  html.sh-live .fork-card .fork-body{grid-column:2;grid-row:1}
  html.sh-live .fork-card h3{font-size:20px;margin-bottom:8px}
  html.sh-live .fork-card p{font-size:14px;line-height:1.5}
  html.sh-live .fork-card .btn-row{margin-top:12px}
  html.sh-live .fork-card .btn{min-height:44px;padding:10px 20px;font-size:15px}
  html.sh-live .sh-fork .sec-after{font-size:13px;margin:0}
}
/* 900..1100: колонка уже, макеты компактнее */
@media (min-width:1500px){html.sh-live .scrollhero{--cs:.375}}
@media (min-width:900px) and (max-width:1100px){
  html.sh-live .sh-ui{grid-template-columns:minmax(0,360px) minmax(0,1fr) minmax(0,270px)}
  html.sh-live .sh-intro{max-width:360px}
  html.sh-live .scrollhero .fork-card{grid-template-columns:96px minmax(0,1fr);column-gap:14px;padding:14px 16px}
  html.sh-live .fork-card .mock-box{width:96px}
  html.sh-live .fork-card p{font-size:13px}
}

/* ───────── Узкие экраны (< 900px): кадр сверху (64%), текстовая панель снизу (36%) ───────── */
@media (max-width:899.98px){
  html.sh-live .scrollhero{--top:64;--fin:36;--hh:58px}
  html.sh-live .sh-media{inset:calc(var(--t,0) * var(--hh)) 0 auto 0;height:calc((var(--top) - var(--t,0) * (var(--top) - var(--fin))) * 1%);
    transition:none}
  html.sh-live .sh-media img{object-position:50% 42%}
  html.sh-live .sh-canvas{inset:0 auto auto 0;height:auto}
  /* мягкий переход от кадра к панели, без наложения текста на лицо */
  html.sh-live .sh-vig{background:
    linear-gradient(180deg,rgba(10,10,24,.5) 0%,transparent 14%,transparent 72%,#0a0a18 100%)}
  html.sh-live .sh-ui{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:64% auto 1fr;
    padding:0 var(--gutter,16px) 14px}
  /* текст панели: все слои в одной ячейке, меняются по фазам */
  html.sh-live .sh-intro,html.sh-live .sh-sub{display:contents}
  html.sh-live .sh-h1{grid-area:2/1;align-self:start;margin-top:4px;font-size:clamp(26px,7.4vw,34px);line-height:1;letter-spacing:-.02em}
  html.sh-live .sh-lead{grid-area:3/1;align-self:start;font-size:14.5px;line-height:1.4;margin:10px 0 0;color:var(--text);max-width:none}
  html.sh-live .sh-heroP{grid-area:2/1;align-self:start;margin:4px 0 0;font-size:12.8px;line-height:1.42;max-width:none}
  html.sh-live .sh-facts.hero-facts{grid-area:3/1;align-self:start;flex-direction:column;gap:5px;margin:8px 0 0}
  html.sh-live .sh-facts li{padding:5px 10px 5px 7px;font-size:12px;border-radius:11px;
    background:rgba(13,13,32,.62)}
  html.sh-live .sh-facts .chk{flex-basis:16px;width:16px;height:16px}
  html.sh-live .sh-facts .chk svg{width:10px;height:10px}
  html.sh-live .sh-pains{grid-area:2/1/4/2;align-self:start;margin-top:6px}
  html.sh-live .sh-pain{font-size:clamp(21px,6vw,26px)}
  /* шаги панели в Ф1 и Ф2 */
  html.sh-live .sh-h1,html.sh-live .sh-lead,html.sh-live .sh-heroP,html.sh-live .sh-facts{transition:opacity .5s linear,transform 1s var(--sh-ease)}
  html.sh-live .scrollhero[data-sub="b"] .sh-h1,
  html.sh-live .scrollhero[data-sub="b"] .sh-lead,
  html.sh-live .scrollhero[data-phase="2"] .sh-h1,
  html.sh-live .scrollhero[data-phase="2"] .sh-lead{opacity:0;transform:translateY(-12px)}
  html.sh-live .scrollhero[data-sub="a"] .sh-heroP,
  html.sh-live .scrollhero[data-sub="a"] .sh-facts{opacity:0;transform:translateY(14px)}
  html.sh-live .scrollhero[data-phase="2"] .sh-heroP,
  html.sh-live .scrollhero[data-phase="2"] .sh-facts,
  html.sh-live .scrollhero[data-phase="3"] .sh-heroP,
  html.sh-live .scrollhero[data-phase="3"] .sh-facts,
  html.sh-live .scrollhero[data-phase="3"] .sh-h1,
  html.sh-live .scrollhero[data-phase="3"] .sh-lead{opacity:0;transform:translateY(-12px)}
  /* Ф3: развилка под сжавшимся кадром */
  html.sh-live .sh-fork{grid-area:1/1/4/2;align-self:end;display:grid;gap:8px;max-height:calc(100% - (var(--fin) * 1%) - var(--hh) - 12px);
    overflow:visible;padding-bottom:0}
  /* заголовок развилки стоит НАД кадром (ИИ-Анна смотрит на него); появляется, только когда кадр уже съехал вниз и сжался */
  html.sh-live .sh-fork-h{position:absolute;left:var(--gutter,16px);right:var(--gutter,16px);top:10px;margin:0;
    font-size:clamp(27px,7.6vw,34px);line-height:1.05;text-align:center;text-shadow:0 2px 20px rgba(10,10,24,.9)}
  html[lang="de"].sh-live .sh-fork-h{font-size:clamp(20px,6.2vw,30px)}
  /* появление привязано к --t (положение кадра), а не к номеру фазы: текст не заходит на лицо ни в один момент перехода */
  html.sh-live .sh-fork-h{opacity:clamp(0,calc((var(--t,0) - .9) * 10),1)!important;transition:transform 1s var(--sh-ease)!important}
  html.sh-live .fork-card,html.sh-live .sh-fork .sec-after{opacity:clamp(0,calc((var(--t,0) - .8) * 5),1)!important;
    transition:transform 1s var(--sh-ease),border-color .3s,box-shadow .5s var(--ease)!important}
  html.sh-live .sh-cards{display:grid;gap:8px;margin:0}
  html.sh-live .scrollhero .fork-card{display:grid;grid-template-columns:minmax(0,1fr) 84px;column-gap:12px;padding:10px 14px 12px;border-radius:18px}
  html.sh-live .fork-card .mock-box{grid-column:2;grid-row:1;width:84px;margin:0;align-self:start}
  html.sh-live .fork-card .fork-body,html.sh-live .fork-card .fb-in{display:contents}
  html.sh-live .fork-card h3{grid-column:1;grid-row:1;font-size:17px;line-height:1.12;margin:0;align-self:center}
  html.sh-live .fork-card .fork-more{grid-column:1/-1;display:inline-flex;align-items:center;gap:6px;justify-self:start;
    position:relative;z-index:2;margin:6px 0 0;padding:6px 0;background:none;border:0;color:var(--link);font:600 13px/1 var(--font-text);cursor:pointer}
  html.sh-live .fork-card .fork-more::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;
    transform:rotate(45deg) translateY(-2px);transition:transform .3s}
  html.sh-live .fork-card.is-more .fork-more::after{transform:rotate(-135deg)}
  html.sh-live .fork-card .fork-p{grid-column:1/-1;display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--sh-ease)}
  html.sh-live .fork-card.is-more .fork-p{grid-template-rows:1fr}
  html.sh-live .fork-card .fork-p > p{overflow:hidden;min-height:0;font-size:12.8px;line-height:1.42;margin:0}
  html.sh-live .fork-card.is-more .fork-p > p{margin:4px 0 2px}
  html.sh-live .fork-card .btn-row{grid-column:1/-1;margin-top:6px}
  html.sh-live .fork-card .btn{min-height:38px;padding:7px 18px;font-size:14px;width:100%}
  html.sh-live .sh-fork .sec-after{font-size:11.5px;line-height:1.4;margin:0}
  /* низкие экраны (360x740): чуть плотнее, чтобы вся развилка влезала в 100svh */
  @media (max-height:780px){
    html.sh-live .sh-fork{gap:6px}
    html.sh-live .sh-cards{gap:6px}
    html.sh-live .scrollhero .fork-card{padding:8px 14px 8px}
    html.sh-live .fork-card .fork-more{margin-top:2px;padding:4px 0}
    html.sh-live .fork-card .btn{min-height:36px;padding:6px 18px}
    html.sh-live .fork-card .btn-row{margin-top:3px}
  }
}

@keyframes shFactsIn{from{opacity:0;transform:translateY(12px)}}

/* ───────── Светящиеся линии от заголовка развилки к карточкам (пути считает hero.js) ───────── */
.sh-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.sh-line{fill:none;stroke:#818cf8;stroke-width:1.8;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(129,140,248,.95)) drop-shadow(0 0 12px rgba(99,102,241,.6))}
.sh-glint{fill:none;stroke:#e0e7ff;stroke-width:2.2;stroke-linecap:round;opacity:0;transition:opacity .6s;
  filter:drop-shadow(0 0 5px rgba(165,180,252,.9));animation:sh-run 4.8s linear infinite}
.sh-glint:nth-of-type(2){animation-delay:1.1s}
.sh-dot{fill:#e0e7ff;opacity:0;transition:opacity .4s;filter:drop-shadow(0 0 5px rgba(129,140,248,1)) drop-shadow(0 0 10px rgba(99,102,241,.8))}
.scrollhero[data-lines="full"] .sh-dot{opacity:1}
.scrollhero[data-lines="full"] .sh-glint{opacity:.95}
@keyframes sh-run{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(var(--len,600) * -1)}}
html.sh-live .sh-lines{opacity:0;transition:opacity .5s linear}
html.sh-live .scrollhero[data-phase="3"] .sh-lines{opacity:1}
html:not(.sh-live) .sh-glint{display:none}
html:not(.sh-live) .sh-dot{opacity:1}

@media (prefers-reduced-motion:reduce){
  .sh-glint{animation:none!important;display:none}
  .sh-intro,.sh-facts,.sh-pain,.fork-card,.sh-fork-h{transition:none!important}
}

/* 17.10 Anna: на узких экранах линий развилки нет */
@media (max-width:899.98px){.sh-lines{display:none}}


/* ───────── Главная: подвал «как панель задач Windows» (только body.home) ─────────
   >= 900px, есть hover, скролл-режим героя: подвал fixed внизу, спрятан; выезжает по наведению на нижний край,
   по фокусу клавиатуры и сам в конце героя (html.hero-end). Иначе (touch, < 900, reduced-motion, статика): обычный подвал в потоке.
   Логика: /assets/js/dock.js. Содержание подвала не меняется, только стиль. */
.home .site-footer{margin-top:0}
.dock-zone,.dock-tab{display:none}
@media (min-width:900px) and (hover:hover){
  html.sh-live .home .site-footer{position:fixed;left:0;right:0;bottom:0;z-index:900;margin:0;padding:26px 0 12px;
    background:rgba(10,10,24,.78);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
    transform:translateY(100%);transition:transform .35s cubic-bezier(.215,.61,.355,1);overflow:visible}
  html.sh-live .home .site-footer.is-open{transform:none}
  html.sh-live .home .site-footer .footer-grid{gap:28px;grid-template-columns:1.4fr 1fr 1fr 1fr}
  html.sh-live .home .site-footer .footer-about p{margin-top:8px;font-size:13px;line-height:1.4}
  html.sh-live .home .site-footer .footer-mail{margin-top:8px;font-size:17px}
  html.sh-live .home .site-footer .footer-title{margin-bottom:8px}
  html.sh-live .home .site-footer .footer-links{gap:5px;font-size:13.5px}
  html.sh-live .home .site-footer .footer-bottom{margin-top:14px;padding-top:10px}
  html.sh-live .home .dock-zone{display:block;position:fixed;left:0;right:0;bottom:0;height:20px;z-index:899}
  html.sh-live .home .dock-tab{display:block;position:fixed;left:50%;bottom:0;width:40px;height:4px;margin-left:-20px;z-index:901;border-radius:4px 4px 0 0;
    background:var(--purple-light);opacity:.55;box-shadow:0 0 12px 1px rgba(129,140,248,.55);pointer-events:none;transition:opacity .35s}
  html.sh-live .home.dock-open .dock-tab{opacity:0}
  /* финал: развилка не уходит под подвал (высоту подвала считает dock.js в --dock-h) */
  html.sh-live .sh-fork{margin-bottom:var(--dock-h,0px)}
}
/* низкие окна: карточки развилки сворачиваются в «Подробнее», как на мобиле, чтобы кнопки помещались над подвалом */
@media (min-width:900px) and (hover:hover) and (max-height:880px){
  html.sh-live .fork-card .fork-more{display:inline-flex;align-items:center;gap:6px;margin:2px 0 4px;padding:3px 0;background:none;border:0;
    color:var(--link);font:600 13px/1 var(--font-text);cursor:pointer}
  html.sh-live .fork-card .fork-more::after{content:"";width:6px;height:6px;border:solid currentColor;border-width:0 1.6px 1.6px 0;
    transform:rotate(45deg) translateY(-2px);transition:transform .3s}
  html.sh-live .fork-card.is-more .fork-more::after{transform:rotate(-135deg)}
  html.sh-live .fork-card .fork-p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--sh-ease)}
  html.sh-live .fork-card.is-more .fork-p{grid-template-rows:1fr}
  html.sh-live .fork-card .fork-p > p{overflow:hidden;min-height:0;margin:0}
  html.sh-live .fork-card.is-more .fork-p > p{margin:2px 0 4px}
  html.sh-live .fork-card .btn-row{margin-top:6px}
  html.sh-live .scrollhero .fork-card{padding:14px 18px}
}

/* ───────── Вариант А (Anna 23.10): до первого жеста прокрутки (html.sh-pre) ─────────
   Первый экран тот же, что у скролл-режима в фазе 1. «Боли» и развилка (а на узких экранах и hero-p с фактами)
   стоят обычным блоком под кадром. hero.js на первом жесте переносит их в сцену и снимает sh-pre.
   Пользователь в этот момент вверху страницы, поэтому первый экран не прыгает. */
html.sh-live.sh-pre .scrollhero{height:auto}
html.sh-live.sh-pre .sh-stage{position:relative;top:0}
.sh-after{display:none}
html.sh-pre .sh-after,html:not(.sh-live) .sh-after{display:block;width:min(1200px,100%);margin:0 auto;padding:clamp(48px,8vh,96px) var(--gutter,24px) clamp(56px,9vh,110px)}
html.sh-live.sh-pre .sh-after .sh-pains{grid-column:auto;grid-row:auto;grid-area:auto;display:grid;gap:14px;margin:0 0 clamp(48px,8vh,90px);align-self:auto}
html.sh-live.sh-pre .sh-after .sh-pain{grid-area:auto;opacity:1;transform:none;max-width:760px;font-size:clamp(21px,2.2vw,32px)}
html.sh-live.sh-pre .sh-after .sh-fork{grid-area:auto;grid-column:auto;grid-row:auto;display:block;width:auto;max-height:none;margin:0;justify-self:auto;align-self:auto}
html.sh-live.sh-pre .sh-after .sh-fork-h{position:static;width:auto;max-width:none;margin:0 0 26px;text-align:left;opacity:1!important;transform:none;font-size:clamp(30px,4vw,52px)}
html.sh-live.sh-pre .sh-after .fork-card,html.sh-live.sh-pre .sh-after .sh-fork .sec-after{opacity:1!important;transform:none;pointer-events:auto!important}
html.sh-live.sh-pre .sh-after .sh-cards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
html.sh-live.sh-pre .sh-after .sh-fork .sec-after{margin-top:18px}
html.sh-live.sh-pre .sh-after .sh-heroP,html.sh-live.sh-pre .sh-after .sh-facts{grid-area:auto;opacity:1!important;transform:none;margin:0 0 18px}
html.sh-live.sh-pre .sh-after .sh-facts.hero-facts{display:flex;flex-direction:column;gap:8px}
@media (max-width:899.98px){html.sh-live.sh-pre .sh-after .sh-cards{grid-template-columns:1fr}html.sh-live.sh-pre .sh-after .fork-card .fork-p{grid-template-rows:1fr}}
@media (min-width:900px){html.sh-live.sh-pre .sh-ui{grid-template-rows:1fr var(--pre-row2,0px)}}