/* BH Agency · social.css — спільний для /services/smm і /services/shorts (social-premium 27.10, слово Heidar: «свои визуальные элементы, свой моушн… чтобы подходило под идею шортсов, чтобы там было понятно»).
   Вантажиться ПІСЛЯ premium.css (кіт: вікно A11, вітрина, стежка, маніфест, компакт mc-). Тут — лише те, що належить соцмережам: телефон-каркас, сцени вікон і плиток, візуали секцій. Перший екран Shorts і нові сцени Shorts — shorts.css (shorts-production 27.10).
   Система BH (bh-source): palette #111110 · #FAF9F5 · #C8FF3E; шрифти Inter Tight (D) + Inter (T), локально. Рух — лише transform / opacity / clip-path / stroke-dashoffset; filter:blur на великих шарах нема.
   Базові стилі = ФІНАЛЬНИЙ кадр; ключові кадри описують лише «звідки» (prefers-reduced-motion вимикає рух → видно результат). Підписи в демо малює CSS (sw_t: data-t) — це частина картинки, не текст сторінки.
   Префікси: so- спільне · sm- SMM · sh- Shorts. Механіки: Codrops 3DCarousel / 3DStackMotion (MIT, vendor/codrops-*), Skillry Obsidian letterbox і spotlight (механіка, код наш). */

/* ───────── 0 · спільне ───────── */
@property --hk-t{syntax:"<integer>";inherits:false;initial-value:3}
@keyframes so-up{from{opacity:0;transform:translateY(16px)}}
@keyframes so-pop{from{opacity:0;transform:scale(.55)}}
@keyframes so-fade{from{opacity:0}}
@keyframes so-grow{from{transform:scaleX(0)}}
@keyframes so-draw{from{stroke-dashoffset:1}}
@keyframes so-slide-l{from{opacity:0;transform:translateX(-26px)}}
@keyframes so-toast{from{opacity:0;transform:translateY(18px) scale(.96)}}
[data-so-live].is-off *,.sx.is-off *,.sw-sv__v.is-off *{animation-play-state:paused!important}

/* телефон: корпус 9:19, усередині — екран; усе вкладене міряємо в cqi корпусу (1cqi = 1 % ширини) */
.so-ph{position:relative;display:block;width:100%;aspect-ratio:9/19;container-type:inline-size;border-radius:16%/7.6%;padding:3.4%;
  background:linear-gradient(155deg,#2b2d32,#121316 60%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.22),0 40px 80px -30px rgba(0,0,0,.85)}
.so-ph::before{content:"";position:absolute;z-index:4;left:50%;top:3.1%;width:26%;height:2.3%;translate:-50% 0;border-radius:99px;background:#050506}
.so-ph__scr{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:13%/6.2%;background:#0b0c0e;isolation:isolate}

/* «арт»: абстрактні сцени карток (без фото, без облич) */
.so-art{position:relative;display:block;overflow:hidden}
.so-art--1{background:radial-gradient(circle at 50% 56%,#f4ffd2 0 7%,#C8FF3E 8% 22%,transparent 23%),radial-gradient(circle at 50% 56%,rgba(200,255,62,.22) 0 38%,transparent 39%),linear-gradient(165deg,#1f2126,#0c0d0f)}
.so-art--2{background:linear-gradient(165deg,#d9ff72,#b3ee26)}
.so-art--2::after{content:"";position:absolute;left:26%;right:26%;bottom:0;height:60%;border-radius:999px 999px 0 0;background:#111110}
.so-art--3{background:repeating-linear-gradient(-45deg,rgba(17,17,16,.09) 0 7px,transparent 7px 16px),linear-gradient(165deg,#fffef9,#e4e3dc)}
.so-art--3::after{content:"";position:absolute;left:30%;right:30%;top:22%;bottom:34%;border-radius:22%;background:#111110;rotate:-9deg}
.so-art--4{background:radial-gradient(120% 60% at 50% 125%,rgba(200,255,62,.4),transparent 60%),repeating-linear-gradient(135deg,rgba(250,249,245,.08) 0 6px,transparent 6px 14px),linear-gradient(165deg,#3a3c42,#16171a)}

/* аватари, лінії-«текст» */
.sm-av{display:block;flex:none;width:max(16px,1.7cqi);aspect-ratio:1;border-radius:50%;background:conic-gradient(from 210deg,#eaffb0,#C8FF3E,#6f9a10,#eaffb0)}
.sm-av--1{background:conic-gradient(from 20deg,#fffef9,#b8b7b0,#fffef9)}
.sm-av--2{background:conic-gradient(from 120deg,#4a4c52,#9a9ca3,#4a4c52)}
.sm-av--bh{background:var(--sw-lime);box-shadow:0 0 0 2px rgba(200,255,62,.28)}
.so-ph .sm-av{width:9cqi}

/* повідомлення-тост у вікні */
.so-toast{position:absolute;z-index:4;left:clamp(12px,2.4cqi,32px);bottom:clamp(12px,2.4cqi,32px);display:flex;align-items:center;gap:12px;padding:12px 16px 12px 12px;border-radius:16px;
  background:rgba(250,249,245,.96);color:var(--sw-ink);box-shadow:0 20px 50px -18px rgba(0,0,0,.7),0 0 0 1px rgba(17,17,16,.06)}
.so-toast__i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--sw-lime);color:var(--sw-ink)}
.so-toast__i svg{width:18px;height:18px}
.so-toast>span:last-child{display:grid;gap:4px}
.so-toast b{font:700 14px/1 var(--f-tight);letter-spacing:-.01em}
.so-toast small{font:500 12px/1.2 var(--f-inter);color:rgba(17,17,16,.62)}
.so-toast--r{left:auto;right:clamp(12px,2.4cqi,32px)}
.sw-win[data-run] .so-toast{animation:so-toast 620ms var(--sw-out) 3250ms both}

/* легенда календаря */
.sm-lg{display:inline-flex;align-items:center;gap:6px;font-style:normal;font:600 max(12px,.95cqi)/1 var(--f-inter);color:rgba(250,249,245,.72)}
.sm-lg::before{content:"";width:max(9px,.9cqi);aspect-ratio:1;border-radius:3px;background:rgba(250,249,245,.78)}
.sm-lg--r::before{background:var(--sw-lime)}
.sm-lg--s::before{background:transparent;box-shadow:inset 0 0 0 max(1.5px,.18cqi) var(--sw-lime);border-radius:50%}

/* ───────── 1 · SMM · перший екран: вікно-студія з телефоном — «стрічка наповнюється сама» ───────── */
.sm-glow{position:absolute;z-index:0;inset:-8% -6% 0;pointer-events:none;background:radial-gradient(38% 48% at 80% 64%,rgba(200,255,62,.26),rgba(200,255,62,.06) 55%,transparent 76%)}
.sm-glow::after{content:"";position:absolute;inset:0;background:radial-gradient(30% 40% at 52% 40%,rgba(200,255,62,.14),transparent 70%);animation:sm-breathe 7s ease-in-out 4s infinite alternate}
@keyframes sm-breathe{from{opacity:.2}to{opacity:1}}
.sw-win[data-run] .sm-glow{animation:so-fade 1000ms ease 2900ms both}
.sm-bp{position:absolute;z-index:0;inset:0 3cqi;pointer-events:none;opacity:0;background:repeating-linear-gradient(90deg,transparent 0 calc(16.666% - 1px),rgba(200,255,62,.16) calc(16.666% - 1px) 16.666%)}
.sw-win[data-run] .sm-bp{animation:sm-bp 1600ms ease both}
@keyframes sm-bp{0%{opacity:0}25%{opacity:.9}100%{opacity:0}}
.sm-w{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.55fr) minmax(0,1.15fr);gap:clamp(14px,3.2cqi,44px);align-items:center;padding:clamp(14px,3cqi,40px) clamp(16px,4cqi,56px) clamp(16px,3.6cqi,48px)}
.sm-b{position:relative;display:grid;gap:max(8px,.9cqi);padding:max(12px,1.35cqi);border-radius:max(14px,1.5cqi);background:rgba(250,249,245,.04);box-shadow:inset 0 0 0 1px rgba(250,249,245,.09)}
.sm-mid{position:relative;display:block}
.sm-col{display:grid;gap:max(10px,1.4cqi);align-content:center}
/* календар */
.sm-cal__k,.sm-reach__k{font:700 max(13px,1.15cqi)/1 var(--f-tight);letter-spacing:-.015em;color:var(--sw-paper)}
.sm-cal__d,.sm-cal__g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:max(4px,.5cqi)}
.sm-cal__d i{font:600 max(12px,.95cqi)/1 var(--f-inter);color:rgba(250,249,245,.5);text-align:center;font-style:normal}
.sm-c{aspect-ratio:1.18;border-radius:max(6px,.7cqi);background:rgba(250,249,245,.05);box-shadow:inset 0 0 0 1px rgba(250,249,245,.07)}
.sm-c--p{background:rgba(250,249,245,.8);box-shadow:none}
.sm-c--r{background:var(--sw-lime);box-shadow:0 6px 18px -8px rgba(200,255,62,.7)}
.sm-c--s{background:transparent;box-shadow:inset 0 0 0 max(1.5px,.18cqi) var(--sw-lime)}
.sm-cal__lg{display:flex;flex-wrap:wrap;gap:max(8px,1cqi) max(12px,1.4cqi)}
.sw-win[data-run] .sm-cal{animation:so-up 640ms var(--sw-out) 200ms both}
.sw-win[data-run] .sm-c--p,.sw-win[data-run] .sm-c--r,.sw-win[data-run] .sm-c--s{animation:so-pop 460ms var(--sw-out) calc(450ms + var(--d) * 52ms) both}
/* телефон */
.sm-ph .so-ph__scr{display:grid;grid-template-rows:auto minmax(0,1fr);background:linear-gradient(180deg,#101114,#0a0b0d)}
.sm-stories{display:flex;gap:4.5cqi;padding:11cqi 5cqi 4cqi}
.sm-ring{flex:none;width:13cqi;aspect-ratio:1;border-radius:50%;background:conic-gradient(from 30deg,#C8FF3E,#6f9a10,#eaffb0,#C8FF3E);-webkit-mask:radial-gradient(circle,transparent 0 56%,#000 58%);mask:radial-gradient(circle,transparent 0 56%,#000 58%)}
.sm-ring:nth-child(odd){opacity:.75}
.sw-win[data-run] .sm-ring{animation:so-pop 500ms var(--sw-out) calc(520ms + var(--d) * 90ms) both}
.sm-feed{display:grid;align-content:start;gap:4cqi;padding:0 4cqi;animation:sm-drift 11s ease-in-out 3.8s infinite alternate}
@keyframes sm-drift{to{transform:translateY(-9%)}}
.sm-post{display:grid;gap:2.4cqi}
.sm-post__h{display:flex;align-items:center;gap:3cqi}
.sm-post__n{display:grid;gap:1.4cqi;flex:1}
.sm-post__n b,.sm-post__t b,.sm-reel__c b{display:block;height:2.2cqi;border-radius:9px;background:rgba(250,249,245,.28);width:46%}
.sm-post__n b+b,.sm-post__t b+b,.sm-reel__c b+b{width:28%;background:rgba(250,249,245,.16)}
.sm-post__a{aspect-ratio:1;border-radius:4cqi}
.sm-post__r{display:flex;align-items:center;gap:3cqi}
.sm-post__r .so-heart{width:8cqi;height:8cqi;color:#ff5a5a}
.sm-ic{display:block;width:7cqi;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 .9cqi rgba(250,249,245,.5)}
.sm-ic--s{border-radius:30% 70% 60% 40%}
.sm-post__t{display:grid;gap:1.6cqi}
.sm-reel{display:block;aspect-ratio:9/13;border-radius:4cqi;position:relative}
.sm-reel__p{position:absolute;z-index:2;left:50%;top:44%;translate:-50% -50%;width:18cqi;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:rgba(17,17,16,.72);color:var(--sw-lime);box-shadow:0 0 0 .8cqi rgba(200,255,62,.35);animation:sm-play 2.6s ease-in-out 4s infinite}
.sm-reel__p .so-play{width:9cqi;height:9cqi}
@keyframes sm-play{50%{transform:scale(1.1)}}
.sm-reel__s{position:absolute;z-index:2;right:3cqi;bottom:16cqi;display:grid;gap:3cqi}
.sm-reel__s i{display:block;width:6.5cqi;aspect-ratio:1;border-radius:50%;background:rgba(250,249,245,.85)}
.sm-reel__c{position:absolute;z-index:2;left:3.4cqi;right:14cqi;bottom:3.4cqi;display:grid;gap:1.4cqi;grid-template-columns:auto 1fr;align-items:center;column-gap:2.4cqi}
.sm-reel__c .sm-av{grid-row:span 2;width:7cqi}
.sm-reel__c b{background:rgba(17,17,16,.5);width:100%}.sm-reel__c b+b{width:60%;background:rgba(17,17,16,.32)}
.sw-win[data-run] .sm-post{animation:so-up 700ms var(--sw-out) 900ms both}
.sw-win[data-run] .sm-reel{animation:so-up 700ms var(--sw-out) 1500ms both}
.sm-pop{position:absolute;z-index:5;left:30%;top:46%;width:14%;color:#ff5a5a;opacity:0;pointer-events:none}
.sm-pop .so-heart{width:100%;height:auto}
.sw-win[data-run] .sm-pop{animation:sm-heart 1100ms ease 1350ms both}
@keyframes sm-heart{0%{opacity:0;transform:translateY(12px) scale(.4)}35%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:translateY(-40px) scale(1)}}
/* охоплення */
.sm-chart{display:grid}
.sm-chart>*{grid-area:1/1}
.sm-meter{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:max(3px,.35cqi);align-items:end;height:max(40px,4.6cqi)}
.sm-meter i{display:block;height:calc(26% + var(--k) * 6.2%);border-radius:3px;background:linear-gradient(180deg,var(--sw-lime),#6f9a10);opacity:.9}
.sm-spark{width:100%;height:max(40px,4.6cqi);overflow:visible}
.sm-spark path{fill:none;stroke:var(--sw-paper);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.sw-win[data-run] .sm-reach{animation:so-up 640ms var(--sw-out) 1850ms both}
.sw-win[data-run] .sm-meter i{animation:sm-seg 320ms var(--sw-out) calc(1950ms + var(--k) * 70ms) both}
@keyframes sm-seg{from{opacity:.1;transform:scaleY(.2);transform-origin:50% 100%}}
.sw-win[data-run] .sm-spark path{animation:so-draw 1100ms ease 2000ms both}
/* Direct */
.sm-dm__h{display:flex;align-items:center;justify-content:space-between;font:700 max(13px,1.15cqi)/1 var(--f-tight);letter-spacing:-.015em;color:var(--sw-paper)}
.sm-badge{display:block;width:max(10px,1cqi);aspect-ratio:1;border-radius:50%;background:var(--sw-lime);animation:sm-ping 2.6s ease-out 4.2s infinite}
@keyframes sm-ping{0%{box-shadow:0 0 0 0 rgba(200,255,62,.6)}70%,100%{box-shadow:0 0 0 max(10px,1.1cqi) rgba(200,255,62,0)}}
.sm-dm__row{display:flex;align-items:flex-start;gap:max(8px,1cqi)}
.sm-dm__row .sm-av{width:max(24px,2.6cqi)}
.sm-dm__m{position:relative;display:grid}
.sm-bub{padding:max(9px,.95cqi) max(13px,1.35cqi);border-radius:16px 16px 16px 4px;background:var(--sw-paper);color:var(--sw-ink);font:700 max(13px,1.2cqi)/1.15 var(--f-tight);letter-spacing:-.01em;box-shadow:0 12px 30px -14px rgba(200,255,62,.5)}
.sm-typing{position:absolute;left:0;top:0;display:inline-flex;gap:5px;padding:max(11px,1.1cqi) max(13px,1.3cqi);border-radius:16px 16px 16px 4px;background:rgba(250,249,245,.14);opacity:0}
.sm-typing i{display:block;width:6px;height:6px;border-radius:50%;background:rgba(250,249,245,.75);animation:sm-dot 900ms ease-in-out infinite}
.sm-typing i:nth-child(2){animation-delay:140ms}.sm-typing i:nth-child(3){animation-delay:280ms}
@keyframes sm-dot{50%{transform:translateY(-4px);opacity:.5}}
.sw-win[data-run] .sm-dm{animation:so-up 640ms var(--sw-out) 2250ms both}
.sw-win[data-run] .sm-typing{opacity:1;animation:sm-typing 520ms ease 2450ms both}
@keyframes sm-typing{0%{opacity:0}12%,85%{opacity:1}100%{opacity:0}}
.sw-win[data-run] .sm-bub{animation:so-pop 520ms var(--sw-out) 2900ms both}
.sw-win[data-run] .sm-badge{animation:so-pop 400ms var(--sw-out) 3050ms both,sm-ping 2.6s ease-out 4.2s infinite}

/* вузьке вікно (телефон): без календаря, телефон ліворуч, охоплення + Direct праворуч */
@container (max-width:640px){
  .sm-w{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:14px;padding:16px 14px 74px}
  .sm-cal{display:none}
  .sm-b{padding:12px;gap:9px;border-radius:14px}
  .sm-cal__k,.sm-reach__k,.sm-dm__h{font-size:13px}
  .sm-meter,.sm-spark{height:34px}
  .sm-meter{gap:3px}
  .sm-dm__row .sm-av{width:26px}
  .sm-bub{font-size:13px;padding:9px 12px}
  .sm-typing{padding:11px 13px}
  .sm-col{gap:12px}
  .so-toast{left:12px;right:12px;bottom:12px}
}
@container (max-width:380px){.sm-w{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:10px;padding:14px 10px 72px}}