/* BH · shorts.css — перший екран /services/shorts (27.10): рядок сценарію → ролик 9:16. Цикл 6 с (затримка = секунда − 5,5 с), база = фінал; вхід клітинок — механіка Codrops ScrollBlurTypography. */
.sh-glow{position:absolute;z-index:0;inset:-8% -6% 0;pointer-events:none;background:radial-gradient(34% 50% at 80% 52%,rgba(200,255,62,.2),rgba(200,255,62,.05) 55%,transparent 76%)}
.sw-win[data-run] .sh-glow{animation:so-fade 1000ms ease 2700ms both}
.sh-w{--shm:rgba(250,249,245,.5);position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto min(19.5cqi,250px);gap:clamp(12px,2cqi,28px);align-items:center;padding:clamp(18px,3.6cqi,48px) clamp(16px,4.6cqi,64px) clamp(24px,4.4cqi,60px)}
.sh-b{position:relative;display:grid;border-radius:max(14px,1.5cqi);background:rgba(250,249,245,.04);box-shadow:inset 0 0 0 1px rgba(250,249,245,.09)}
.sh-script{padding:max(14px,1.6cqi)}
.sh-script__k{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:max(12px,1.3cqi);padding:0 max(4px,.4cqi)}.sh-script__k b{font:800 max(14px,1.5cqi)/1 var(--f-tight);letter-spacing:-.02em;color:var(--sw-paper)}
.sh-script__k span{padding:5px 10px;border-radius:99px;background:rgba(200,255,62,.12);box-shadow:inset 0 0 0 1px rgba(200,255,62,.45);font:600 12px/1 var(--f-inter);color:var(--sw-lime)}
.sh-script__h,.sh-script__r,.sh-script__g{display:grid;grid-template-columns:max(24px,2.6cqi) repeat(3,minmax(0,1fr));gap:max(8px,.9cqi);align-items:start}
.sh-script__r{align-items:stretch}.sh-script__n{align-self:start}
.sh-script__h{padding:0 max(10px,1cqi) max(10px,1cqi);border-bottom:1px solid rgba(250,249,245,.1)}
.sh-script__c small{display:none}.sh-script__h i,.sh-script__c small{font:normal 600 max(12px,.9cqi)/1 var(--f-inter);letter-spacing:.08em;text-transform:uppercase;color:var(--shm)}
.sh-script__r{margin:max(8px,.9cqi) 0;padding:max(8px,.9cqi);border-radius:max(10px,1.1cqi);background:rgba(250,249,245,.03);box-shadow:inset 0 0 0 1px rgba(250,249,245,.08)}
.sh-script__n,.sh-script__g i{padding-top:max(8px,.9cqi);font:normal 700 max(12px,1cqi)/1.2 var(--f-tight);color:var(--sw-lime)}
@property --on{syntax:"<number>";inherits:true;initial-value:0}
.sh-script__c{position:relative;display:grid;gap:8px;align-content:start;padding:max(8px,.9cqi);border-radius:max(8px,.8cqi);color:rgb(250 249 245/calc(.5 + var(--on) * .5))}
.sh-script__c>span{display:block;position:relative;font:600 max(13px,1.45cqi)/1.3 var(--f-tight);letter-spacing:-.015em}
.sh-script__bar{position:absolute;inset:0;border-radius:inherit;background:rgba(200,255,62,.1);box-shadow:inset 0 -2px 0 var(--sw-lime),inset 0 0 0 1px rgba(200,255,62,.45);opacity:var(--on)}
.sh-script__c:nth-child(4){--on:1}
.sh-script__g{padding:max(6px,.6cqi) max(8px,.9cqi);opacity:.5}
.sh-script__g i{padding:0;color:var(--shm)}
.sh-script__g b{display:block;height:max(6px,.6cqi);margin-top:max(4px,.4cqi);border-radius:9px;background:rgba(250,249,245,.18)}.sh-script__g b:nth-of-type(2){width:72%}.sh-script__g b:nth-of-type(3){width:84%}
.sh-flow{display:flex;gap:6px}
.sh-flow i{width:7px;height:7px;border-radius:50%;background:var(--sw-lime);opacity:.3;animation:sh-flow 1.5s ease-in-out infinite}
.sh-flow i:nth-child(2){animation-delay:.25s}.sh-flow i:nth-child(3){animation-delay:.5s}
@keyframes sh-flow{40%{opacity:1;transform:scale(1.3)}}
.sh-clip{position:relative;display:block;width:100%;aspect-ratio:9/16;container-type:inline-size}
.sh-clip__v{position:absolute;inset:0;border-radius:max(12px,7cqi);overflow:hidden;background:#0b0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 30px 60px -24px rgba(0,0,0,.85)}
.sh-clip__a{position:absolute;inset:0;transform:scale(1.1);transform-origin:50% 56%;animation:sh-zoom 6s var(--sw-out) -5.5s infinite}
.sh-clip__tag{position:absolute;z-index:3;left:7%;top:5%;padding:5px 9px;border-radius:99px;background:rgba(17,17,16,.7);box-shadow:inset 0 0 0 1px rgba(250,249,245,.18);font:600 max(12px,4.4cqi)/1 var(--f-inter);color:var(--sw-paper);white-space:nowrap}
.sh-hook{position:absolute;z-index:3;right:6%;top:4%;width:max(34px,19cqi);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:rgba(17,17,16,.62)}
.sh-hook svg{position:absolute;inset:0;width:100%;height:100%}
.sh-hook__b{fill:none;stroke:rgba(250,249,245,.18);stroke-width:3.4}
.sh-hook__f{fill:none;stroke:var(--sw-lime);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:50% 50%;animation:sh-ring 6s linear -5.5s infinite}
.sh-hook__n{font:normal 800 max(12px,5.4cqi)/1 var(--f-tight);color:var(--sw-paper);counter-reset:sht var(--hk-t);animation:sh-cnt 6s linear -5.5s infinite}
.sh-hook__n::before{content:counter(sht) " с"}
.sh-clip__c{position:absolute;z-index:3;left:7%;right:7%;bottom:9%;display:flex;flex-wrap:wrap;gap:3px 6px;justify-content:center;padding:8px 10px;border-radius:10px;background:rgba(17,17,16,.82);font:800 max(13px,8.6cqi)/1.15 var(--f-tight);letter-spacing:-.02em}
.sh-cover{position:absolute;z-index:4;left:-31%;top:55%;display:grid;gap:6px;justify-items:start;width:42%}
.sh-cover__a{display:block;width:100%;aspect-ratio:3/4;border-radius:10px;box-shadow:0 0 0 2px var(--sw-lime),0 18px 40px -14px rgba(0,0,0,.9)}
.sh-cover__a b{position:absolute;left:12%;right:24%;height:7%;border-radius:9px;background:var(--sw-paper)}.sh-cover__a b:first-child{top:14%}.sh-cover__a b+b{top:26%;right:44%;background:var(--sw-lime)}
.sh-cover small{padding:4px 8px;border-radius:99px;background:rgba(17,17,16,.8);font:600 12px/1 var(--f-inter);color:var(--sw-paper)}
.sw-win[data-run] .sh-script__c>span{animation:sh-blur 900ms var(--sw-out) calc(var(--c) * 1s + 300ms) both}
.sh-script__c:nth-child(2){animation:sh-on 6s ease -5.5s infinite}.sh-script__c:nth-child(3){animation:sh-on 6s ease -4.5s infinite}.sh-script__c:nth-child(4){animation:sh-on3 6s ease -3.5s infinite}
@keyframes sh-blur{from{filter:blur(6px);opacity:.15;transform:translateY(6px)}}
@keyframes sh-on{0%,15%{--on:1}19%,100%{--on:0}}
@keyframes sh-on3{0%,63%{--on:1}67%,100%{--on:0}}
@keyframes sh-zoom{0%,14%{transform:none}18%,30%{transform:scale(1.04)}34%,92%{transform:scale(1.1)}100%{transform:none}}
.sh-kw{display:inline-block;color:#fff;animation:sh-kw6 6s ease-in-out calc(var(--t) - 5.5s) infinite}
.sh-kw--z{margin:0 .16em;color:var(--sw-lime);transform:scale(1.22);animation-name:sh-kz}
@keyframes sh-kw6{0%,6%{color:var(--sw-lime);transform:scale(1.1)}12%,100%{color:#fff;transform:none}}
@keyframes sh-kz{0%,58%{color:var(--sw-lime);transform:scale(1.22)}64%,100%{color:#fff;transform:none}}
@keyframes sh-ring{0%{stroke-dashoffset:1}50%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes sh-cnt{0%{--hk-t:0}50%,92%{--hk-t:3}100%{--hk-t:0}}
.sw-win[data-run] .sh-cover{animation:sh-cover 760ms var(--sw-out) 3500ms both}
@keyframes sh-cover{from{opacity:0;transform:translateY(40%) rotate(-6deg)}}
.sw-win[data-run] .sh-toast{animation-delay:3750ms}
.sw-win[data-run] :is(.sh-script,.sh-clip){animation:so-up 700ms var(--sw-out) 200ms both}
.sw-win{container-name:shw}
@container shw (max-width:640px){
  .sh-w{grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:10px;padding:12px 12px 70px}
  .sh-flow,.sh-script__h,.sh-script__g,.sh-script__n,.sh-clip__tag,.sh-script__k span{display:none}
  .sh-script__k{margin:2px 0 6px;padding:0 4px}.sh-script__k b{font-size:13px}
  .sh-script{padding:6px}
  .sh-script__r{grid-template-columns:minmax(0,1fr);gap:4px;margin:0;padding:0;background:none;box-shadow:none}
  .sh-script__c{gap:4px;padding:6px 8px}
  .sh-script__c small{display:block}
  .sh-script__c>span{font-size:13px}
  .sh-cover{left:7%;top:19%;width:38%}
  .sh-cover small{display:none}
}
@media (min-width:1280px){.sw-hero__h{font-size:clamp(64px,4.45vw,68px)}}
@media (max-width:760px){.sw-what .sv-nums{flex-wrap:nowrap;gap:12px 24px}.sw-what .sv-nums span{max-width:17ch}}
@media (prefers-reduced-motion:reduce){
  .sh-flow i,.sh-script__c,.sh-script__c>span,.sh-clip__a,.sh-kw,.sh-hook__f,.sh-hook__n,.sh-cover {animation:none!important}
}