/* rd-sta.css — блок СТА + быстрая связь (правки Анны 06.10.2026). Один общий блок вместо полос #cta/#cta1/#cta2 на всех страницах.
   Разметку строит assets/rd-sta.js (берёт значки и кнопку со страницы, ставит свой призыв).
   Тёмный фон на всю ширину; верх и низ растворяются ВНУТРИ самого блока (маска только на фоне): соседние блоки не перекрываются и остаются кликабельными.
   Сценарий при каждом появлении в экране (образец Анны — PROSE, раздвигающаяся буква O):
   0–0,56 с знак aR целиком → 0,7–1,19 половины «a» и «R» раздвигаются (ease-in-out), в щели проявляется ANNA REDINOVA и подпись → пауза 0,84 с →
   2,1 надпись гаснет → 2,31–2,73 половины съезжаются → 2,87–3,29 знак уходит → с 3,25 снизу призыв по словам → кнопка → значки соцсетей «монетками» (360° вокруг вертикальной оси), дальше спокойное движение.
   Знак и призыв лежат в одной ячейке сетки (.sta-in): высота блока — по призыву, знак по центру. Нитей и маятника нет.
   «Уменьшить движение» (.sta-calm): тот же порядок, только проявление без смещений и поворотов. Нет IntersectionObserver (.sta-static): сразу призыв, без знака. */
html body section:is(#cta,#cta1,#cta2):is(#cta,#cta1,#cta2):is(#cta,#cta1,#cta2):is(#cta,#cta1,#cta2):is(#cta,#cta1,#cta2):not(.rd-sta){display:none!important}
.rd-sta{position:relative;width:100%;box-sizing:border-box;padding:clamp(96px,9vw,140px) clamp(16px,4vw,60px);min-height:clamp(560px,46vw,680px);overflow:hidden;z-index:1;margin:0;
  display:flex;align-items:center;justify-content:center;background:transparent;border:0;color:#F4F4F3;text-align:center}
.rd-sta *{box-sizing:border-box}
.rd-sta .sta-defs{position:absolute;width:0;height:0;overflow:hidden}
.rd-sta .sta-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,#1c1c1b 0%,#0d0d0d 70%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* п.35 (последнее слово Анны: «везде 18»): край размытия 18 px сверху и снизу на телефоне; на ПК та же доля высоты блока — 7 % (≈21 px при высоте 298). Цвет за краем — цвет соседнего блока (фон секции задаёт rd-sta.js) */
/* метка середины блока: по ней rd-sta.js решает, что знак уже в экране */
.rd-sta .sta-mid{position:absolute;left:0;top:50%;width:100%;height:2px;pointer-events:none;visibility:hidden}
.rd-sta .sta-in{position:relative;z-index:2;width:100%;max-width:1100px;display:grid;justify-items:center;align-items:center}
.rd-sta .sta-in>*{grid-area:1/1;min-width:0}
.rd-sta .sta-cta{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
/* знак aR: две половины одного контура (a | R) с щелью между ними; щель раскрывается под надпись */
.rd-sta .sta-brand{--h:clamp(114px,13.5vw,192px);--spx:clamp(21px,3.6vw,51px);--fs:clamp(27px,4.05vw,60px);--fk:1;display:flex;align-items:center;justify-content:center;height:var(--h);width:max-content;color:#fff;pointer-events:none}
.rd-sta .sta-al,.rd-sta .sta-ar{display:block;flex:none;height:var(--h);fill:currentColor;overflow:hidden}
.rd-sta .sta-al{width:calc(var(--h)*538/720)}
.rd-sta .sta-ar{width:calc(var(--h)*745/720);margin-left:calc(var(--h)*-3/720)}
.rd-sta .sta-slot{position:relative;flex:none;width:0;height:100%;--sw:calc(var(--nw,300px) + 2*var(--spx))}
.rd-sta .sta-name{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;white-space:nowrap;text-align:center}
.rd-sta .sta-nm{font-family:'Jost','DM Sans',sans-serif;font-weight:300;text-transform:uppercase;letter-spacing:.36em;margin-right:-.36em;white-space:nowrap;font-size:calc(var(--fs)*var(--fk));line-height:1.1;color:#fff}
.rd-sta .sta-sub{margin-top:.7em;font-family:'Jost','DM Sans',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.34em;margin-right:-.34em;white-space:nowrap;font-size:calc(var(--fs)*.3*var(--fk));color:rgba(244,244,243,.66)}
html body .rd-sta .sta-h{margin:0;font-family:'Tenor Sans',Georgia,serif!important;font-weight:400;font-size:clamp(28px,4.2vw,60px);line-height:1.12;color:#F4F4F3;max-width:960px;text-wrap:balance;letter-spacing:0}
.rd-sta .sta-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em 0 .14em;margin-bottom:-.14em}
.rd-sta .sta-w>span{display:inline-block}
.rd-sta .sta-btnw{margin-top:clamp(28px,3.2vw,44px)}
.rd-sta .sta-lead{display:inline-flex;align-items:center;justify-content:center;min-width:280px;height:64px;padding:0 clamp(32px,3.4vw,56px);border:0;border-radius:0;cursor:pointer;
  font-family:'Jost',sans-serif;font-size:17px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#000;text-decoration:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.26) 50%,transparent 60%),var(--pr1-amber,linear-gradient(115deg,#E8A768 0%,#D9803F 50%,#C06A30 100%));background-size:260% 100%,100% 100%;background-repeat:no-repeat;background-position:160% 0,0 0}
.rd-sta .sta-lead:hover{filter:brightness(1.05)}
/* значки: строго в ряд, небольшое расстояние; perspective нужна для поворота «монеткой» */
.rd-sta .sta-socs{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:clamp(14px,2vw,24px);margin-top:clamp(26px,3vw,38px);perspective:700px}
.rd-sta .sta-soc{position:relative;display:block;width:60px;height:60px;padding:0;text-decoration:none;border:0;background:none;cursor:pointer;flex:none;backface-visibility:visible}
.rd-sta .sta-ic{position:relative;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;color:#fff;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.5);filter:saturate(.72) brightness(.92);--c1:rgba(217,128,63,.16);--c2:rgba(232,167,104,.3)}
.rd-sta .sta-ic::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:.4;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);background-size:260% 100%;background-repeat:no-repeat;background-position:170% 0}
.rd-sta .sta-ic svg{position:relative;z-index:1;width:28px;height:28px;fill:#fff}
.rd-sta .sta-ig .sta-ic{background:linear-gradient(45deg,#E8A768 0%,#D9803F 35%,#B84D6C 70%,#7A4A9B 100%)}
.rd-sta .sta-tg .sta-ic{background:linear-gradient(180deg,#37BBFE,#229ED9)}
.rd-sta .sta-wa .sta-ic{background:linear-gradient(180deg,#4FE07D,#25D366)}
.rd-sta .sta-wc .sta-ic{background:linear-gradient(180deg,#2FD07C,#07C160)}
.rd-sta .sta-soc:hover .sta-ic{filter:saturate(.85) brightness(1.02)}

/* до появления всё скрыто; класс .sta-play запускает сценарий (JS снимает и ставит заново при каждом появлении) */
.rd-sta:not(.sta-static) .sta-brand,.rd-sta:not(.sta-static) .sta-nm,.rd-sta:not(.sta-static) .sta-sub,.rd-sta:not(.sta-static) .sta-btnw,.rd-sta:not(.sta-static) .sta-soc{opacity:0}
.rd-sta:not(.sta-static) .sta-w>span{transform:translateY(115%)}
.rd-sta.sta-static .sta-brand{display:none}
.rd-sta.sta-play .sta-brand{animation:staBIn .56s cubic-bezier(.3,.6,.3,1) 0s both,staBOut .42s cubic-bezier(.5,0,.3,1) 2.87s forwards}
.rd-sta.sta-play .sta-slot{animation:staOpen .49s cubic-bezier(.65,0,.35,1) .7s both,staClose .42s cubic-bezier(.65,0,.35,1) 2.31s forwards}
.rd-sta.sta-play .sta-nm{animation:staReveal .49s cubic-bezier(.65,0,.35,1) .735s both,staGone .21s ease 2.1s forwards}
.rd-sta.sta-play .sta-sub{animation:staReveal .49s cubic-bezier(.65,0,.35,1) .945s both,staGone .21s ease 2.1s forwards}
.rd-sta.sta-play .sta-w>span{animation:staWord .85s cubic-bezier(.2,.7,.2,1) calc(var(--d,0)*1s) both}
.rd-sta.sta-play .sta-btnw{animation:staUp .8s cubic-bezier(.2,.7,.2,1) var(--bd,5s) both}
.rd-sta.sta-play .sta-lead{animation:staShine 3.6s ease-in-out calc(var(--bd,5s) + .8s) infinite,staGlow 2.6s ease-in-out calc(var(--bd,5s) + .8s) infinite}
.rd-sta.sta-play .sta-soc{animation:staCoin .75s cubic-bezier(.3,.6,.3,1) calc(var(--sd,5.6s) + var(--i,0)*.28s) both}
.rd-sta.sta-play .sta-ic{animation:staBob 5s ease-in-out calc(var(--sd,5.6s) + 1.6s + var(--i,0)*.5s) infinite,staHalo 3.6s ease-in-out calc(var(--sd,5.6s) + 1.6s + var(--i,0)*.6s) infinite}
.rd-sta.sta-play .sta-ic::after{animation:staSheen 4s ease-in-out calc(var(--sd,5.6s) + 1.6s) infinite}
@keyframes staBIn{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:none}}
@keyframes staBOut{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px) scale(.96)}}
@keyframes staOpen{0%{width:0}100%{width:var(--sw)}}
@keyframes staClose{0%{width:var(--sw)}100%{width:0}}
@keyframes staReveal{0%{opacity:0;clip-path:inset(-.2em 50% -.2em 50%)}35%{opacity:1}100%{opacity:1;clip-path:inset(-.2em -.2em -.2em -.2em)}}
@keyframes staGone{0%{opacity:1}100%{opacity:0}}
@keyframes staFade{0%{opacity:0}100%{opacity:1}}
@keyframes staWord{0%{transform:translateY(115%)}100%{transform:none}}
@keyframes staUp{0%{opacity:0;transform:translateY(26px)}100%{opacity:1;transform:none}}
@keyframes staShine{0%{background-position:160% 0,0 0}60%,100%{background-position:-60% 0,0 0}}
@keyframes staGlow{0%,100%{box-shadow:0 0 8px rgba(217,128,63,.22),0 4px 12px rgba(0,0,0,.4);transform:scale(1)}50%{box-shadow:0 0 24px 3px rgba(232,167,104,.34),0 6px 16px rgba(0,0,0,.4);transform:scale(1.04)}}
@keyframes staCoin{0%{opacity:0;transform:rotateY(0) scale(.55)}12%{opacity:1}100%{opacity:1;transform:rotateY(360deg) scale(1)}}
@keyframes staBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@keyframes staHalo{0%,100%{box-shadow:0 0 8px 0 var(--c1),0 4px 14px rgba(0,0,0,.5)}50%{box-shadow:0 0 18px 3px var(--c2),0 6px 16px rgba(0,0,0,.5)}}
@keyframes staSheen{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}
/* «Уменьшить движение»: тот же порядок, но щель открыта сразу, без смещений, поворотов и пульса; призыв — с 2,6 с */
.rd-sta.sta-calm.sta-play .sta-brand{animation:staFade .6s ease 0s both,staBOutCalm .5s ease 2s forwards}
.rd-sta.sta-calm.sta-play .sta-slot{animation:none;width:var(--sw)}
.rd-sta.sta-calm.sta-play .sta-nm{animation:staFade .6s ease .5s both}
.rd-sta.sta-calm.sta-play .sta-sub{animation:staFade .6s ease .8s both}
.rd-sta.sta-calm.sta-play .sta-w>span{animation:staWordFade .7s ease calc(var(--d,0)*1s) both}
.rd-sta.sta-calm.sta-play .sta-btnw{animation:staFade .7s ease var(--bd,3s) both}
.rd-sta.sta-calm.sta-play .sta-soc{animation:staFade .6s ease calc(var(--sd,3.6s) + var(--i,0)*.28s) both}
.rd-sta.sta-calm.sta-play .sta-lead,.rd-sta.sta-calm.sta-play .sta-ic,.rd-sta.sta-calm.sta-play .sta-ic::after{animation:none}
.rd-sta.sta-calm:not(.sta-static) .sta-w>span{transform:none;opacity:0}
@keyframes staWordFade{0%{opacity:0}100%{opacity:1}}
@keyframes staBOutCalm{0%{opacity:1}100%{opacity:0}}

@media(max-width:767px){
  .rd-sta .sta-bg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .rd-sta{padding:84px 16px;min-height:0}
  .rd-sta .sta-brand{--h:76px;--spx:9px;--fs:24px}
  .rd-sta .sta-nm{letter-spacing:.2em;margin-right:-.2em}
  .rd-sta .sta-sub{font-size:max(8px,calc(var(--fs)*.5*var(--fk)));letter-spacing:.22em;margin-right:-.22em;margin-top:.6em}
  html body .rd-sta .sta-h{font-size:clamp(25px,7.4vw,32px)}
  .rd-sta .sta-lead{width:100%;min-width:0;height:56px;font-size:15px}
  .rd-sta .sta-btnw{width:100%;max-width:340px;margin-top:24px}
  .rd-sta .sta-socs{gap:clamp(12px,4vw,20px);margin-top:24px}
  .rd-sta .sta-soc,.rd-sta .sta-ic{width:52px;height:52px}
}

/* ПК и «ставня» (от 768 px) — высота блока связи вдвое меньше (Анна 06.10, поздний вечер): было min-height 46vw (662 px на 1440, 589 на 1280); теперь по содержанию — поля, интервалы и кегль заголовка уже, состав тот же (заголовок, кнопка, четыре значка). Размытие 7 % высоты. Телефон не затронут */
@media(min-width:768px){
  html body section.rd-sta,html body #site-content section.rd-sta{min-height:0!important;padding-top:clamp(28px,2.6vw,40px)!important;padding-bottom:clamp(28px,2.6vw,40px)!important}
  html body .rd-sta .sta-h{font-size:clamp(28px,3.2vw,46px)}
  .rd-sta .sta-brand{--h:clamp(96px,10vw,140px);--fs:clamp(22px,3vw,42px)}
  .rd-sta .sta-btnw{margin-top:clamp(18px,1.8vw,26px)}
  .rd-sta .sta-lead{height:56px}
  .rd-sta .sta-socs{margin-top:clamp(18px,1.8vw,26px)}
}

/* края размытия: фон секции задаёт rd-sta.js по цветам соседних блоков (сверху — верхний сосед, снизу — нижний) */

/* п.60 + п.63 (Анна 07.10): один стандарт габаритов блока связи на всех страницах.
   Причина «значки выходят за тёмный блок» (замер: .sta-bg кончался на 29 px выше низа секции): правило ритма `#site-content section > *{margin-bottom:29px}` попадало и на .sta-bg (inset:0, абсолютный) и сдвигало его низ вверх. Поля у всех детей секции сняты; фон — на всю высоту.
   Телефон: поля сверху и снизу 29 px (было: главная 29, страницы-разделы 84). ПК — прежний стандарт (28–40 px). Высота блока дальше зависит только от числа строк заголовка. */
html body section.rd-sta>*,html body #site-content section.rd-sta>*{margin-top:0!important;margin-bottom:0!important}
@media(max-width:767px){
  html body section.rd-sta,html body #site-content section.rd-sta{padding:29px 16px!important;min-height:0!important}
}