/* bh.css (2026-11-13): blog post heroes. Animated widget on the right, post title in a styled, semi-transparent 19px box over 65% of the hero. Scoped to .wsm-heromod-post. Prefix bh-. */
body.ws-mod .wsm-heromod-post .wsm-hero{min-height:clamp(330px,31vw,430px);align-items:stretch}
body.ws-mod .wsm-heromod-post .wsm-hero-inner{position:relative;display:flex;align-items:flex-end;width:100%;padding-top:clamp(28px,3.4vw,44px);padding-bottom:clamp(28px,3.4vw,44px)}
body.ws-mod .wsm-heromod-post .wsm-hero h1{position:relative;z-index:2;box-sizing:border-box;width:65%;max-width:none;margin:0;padding:15px 24px;font-size:19px;font-weight:800;line-height:1.3;letter-spacing:.01em;color:#fff;
  background:rgba(7,12,22,.5);border:3px solid #F5B800;border-radius:14px;box-shadow:0 0 0 6px rgba(245,184,0,.16),0 14px 34px rgba(0,0,0,.45);text-shadow:0 1px 8px rgba(0,0,0,.7)}
body.ws-mod .wsm-heromod-post .wsm-hero-slot,body.ws-mod .wsm-heromod-post .wsm-hero-slot:not(:empty){position:absolute;z-index:1;right:20px;top:clamp(16px,2vw,28px);bottom:clamp(16px,2vw,28px);width:auto;aspect-ratio:480/300;max-width:calc(100% - 40px);margin:0}
body.ws-mod .wsm-heromod-post .bh-svg{display:block;width:100%;height:100%;filter:drop-shadow(0 12px 26px rgba(0,0,0,.5))}
@media(max-width:760px){
 body.ws-mod .wsm-heromod-post .wsm-hero-inner{flex-direction:column-reverse;align-items:stretch;gap:14px}
 body.ws-mod .wsm-heromod-post .wsm-hero h1{width:100%}
 body.ws-mod .wsm-heromod-post .wsm-hero-slot,body.ws-mod .wsm-heromod-post .wsm-hero-slot:not(:empty){position:static;width:100%;max-width:440px;height:auto;margin:0 auto}
 body.ws-mod .wsm-heromod-post .bh-svg{height:auto}
}
/* shared motion */
.bh-svg *{transform-box:fill-box}
.bh-ln{transform-origin:left center;animation:bhType 7s ease-out infinite;animation-delay:calc(var(--i,0) * .45s)}
@keyframes bhType{0%{transform:scaleX(0)}22%,86%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.bh-ck{stroke-dasharray:24;animation:bhCk 6s ease-out infinite;animation-delay:calc(var(--i,0) * .6s)}
@keyframes bhCk{0%{stroke-dashoffset:24}16%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
.bh-blink{animation:bhBlink 1s steps(2,jump-none) infinite}
@keyframes bhBlink{0%{opacity:1}100%{opacity:.1}}
.bh-pulse{transform-origin:center;animation:bhPulse 2.4s ease-in-out infinite}
.bh-pulse2{transform-origin:center;animation:bhPulse 3s ease-in-out infinite}
@keyframes bhPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.bh-spin{transform-origin:center;animation:bhSpin var(--t,8s) linear infinite}
@keyframes bhSpin{to{transform:rotate(calc(360deg * var(--dir,1)))}}
.bh-tw{transform-origin:center;animation:bhTw 2.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes bhTw{0%,100%{transform:scale(.4);opacity:.35}50%{transform:scale(1.2);opacity:1}}
.bh-flow{animation:bhFlow 1.2s linear infinite}
@keyframes bhFlow{to{stroke-dashoffset:-20}}
.bh-pk{animation:bhPk 2.8s ease-in infinite;animation-delay:calc(var(--i,0) * .6s)}
@keyframes bhPk{0%{transform:translate(0,0);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.bh-bar{transform-origin:left center;animation:bhBar 5s ease-in-out infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes bhBar{0%{transform:scaleX(.08)}45%,85%{transform:scaleX(1)}100%{transform:scaleX(.08)}}
.bh-led{animation:bhLed 1.3s ease-in-out infinite;animation-delay:calc(var(--i,0) * .28s)}
@keyframes bhLed{0%,100%{opacity:1}50%{opacity:.2}}
.bh-float{animation:bhFloat 4.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * 1.1s)}
@keyframes bhFloat{0%{transform:translateY(0);opacity:0}15%{opacity:1}80%{opacity:1}100%{transform:translateY(-150px);opacity:0}}
/* seo */
.bh-hl3{animation:bhHl3 9s ease-in-out infinite}
@keyframes bhHl3{0%,26%{transform:translateX(0)}33%,59%{transform:translateX(150px)}66%,92%{transform:translateX(300px)}100%{transform:translateX(0)}}
.bh-scan{animation:bhScan 6s ease-in-out infinite}
@keyframes bhScan{0%,100%{transform:translate(-30px,-20px)}35%{transform:translate(22px,-8px)}65%{transform:translate(-14px,30px)}}
.bh-arc{animation:bhArc 5s ease-in-out infinite}
@keyframes bhArc{0%{stroke-dashoffset:100}50%,85%{stroke-dashoffset:8}100%{stroke-dashoffset:100}}
.bh-needle{animation:bhNeedle 5s ease-in-out infinite}
@keyframes bhNeedle{0%{transform:rotate(-80deg)}50%,85%{transform:rotate(66deg)}100%{transform:rotate(-80deg)}}
/* content */
.bh-pen{transform-origin:bottom left;animation:bhPen 3.2s ease-in-out infinite}
@keyframes bhPen{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-40px,12px) rotate(-6deg)}60%{transform:translate(-70px,44px) rotate(4deg)}}
.bh-cell{animation:bhCell 8s ease-out infinite;animation-delay:calc(var(--i,0) * .35s)}
@keyframes bhCell{0%{fill:#1e3b66}12%,80%{fill:#F5B800}100%{fill:#1e3b66}}
/* web design */
.bh-fillb{fill:#d9e0ea;animation:bhFillb 8s ease-out infinite;animation-delay:calc(var(--i,0) * .5s)}
@keyframes bhFillb{0%{fill:#d9e0ea}14%,86%{fill:var(--c)}100%{fill:#d9e0ea}}
.bh-cursor{animation:bhCursor 8s ease-in-out infinite}
@keyframes bhCursor{0%{transform:translate(60px,70px)}20%{transform:translate(160px,110px)}40%{transform:translate(70px,190px)}60%{transform:translate(250px,190px)}80%{transform:translate(150px,248px)}100%{transform:translate(60px,70px)}}
.bh-ring{animation:bhRing 8s steps(1,end) infinite}
@keyframes bhRing{0%{transform:translateY(0)}25%{transform:translateY(38px)}50%{transform:translateY(76px)}75%{transform:translateY(114px)}}
.bh-stack{transform-origin:center;animation:bhStack 3.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * .3s)}
@keyframes bhStack{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}
/* programming */
.bh-tabhl{animation:bhTab 12s steps(1,end) infinite}
@keyframes bhTab{0%{transform:translateX(0)}25%{transform:translateX(86px)}50%{transform:translateX(172px)}75%{transform:translateX(258px)}}
.bh-code{opacity:0;animation:bhCode 12s ease-in-out infinite;animation-delay:calc(var(--i,0) * 3s)}
@keyframes bhCode{0%{opacity:0;transform:translateX(10px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0}}
.bh-hue{animation:bhHue 12s steps(1,end) infinite}
@keyframes bhHue{0%{fill:#ff7a45}25%{fill:#4aa3ff}50%{fill:#a78bfa}75%{fill:#FFD54A}}
/* promotions */
.bh-wave{transform-origin:left center;animation:bhWave 2.4s ease-out infinite;animation-delay:calc(var(--i,0) * .4s)}
@keyframes bhWave{0%{transform:scale(.6);opacity:0}30%{opacity:1}100%{transform:scale(1.5);opacity:0}}
.bh-rise{transform-origin:bottom center;animation:bhRise 5s ease-out infinite;animation-delay:calc(var(--i,0) * .3s)}
@keyframes bhRise{0%{transform:scaleY(.1)}35%,88%{transform:scaleY(1)}100%{transform:scaleY(.1)}}
.bh-trend{animation:bhTrend 5s ease-out infinite}
@keyframes bhTrend{0%{stroke-dashoffset:100}45%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:100}}
/* discounts */
.bh-swing{animation:bhSwing 3.4s ease-in-out infinite}
@keyframes bhSwing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
.bh-shrink{transform-origin:left center;animation:bhShrink 4.4s cubic-bezier(.3,.8,.2,1) infinite}
@keyframes bhShrink{0%,12%{transform:scaleX(1)}55%,88%{transform:scaleX(.62)}100%{transform:scaleX(1)}}
.bh-bounce{animation:bhBounce 1.6s ease-in-out infinite}
@keyframes bhBounce{0%,100%{transform:translateY(-4px)}50%{transform:translateY(8px)}}
/* generic */
.bh-mer{animation:bhMer 7s linear infinite;animation-delay:calc(var(--i,0) * -2.3s)}
@keyframes bhMer{0%{transform:scaleX(1)}50%{transform:scaleX(.12)}100%{transform:scaleX(1)}}
.bh-orbit{animation:bhSpin 26s linear infinite}
@media(prefers-reduced-motion:reduce){.bh-svg *{animation:none!important}.bh-ln,.bh-bar,.bh-rise,.bh-shrink{transform:none!important}.bh-code[style*="--i:0"]{opacity:1}.bh-pk,.bh-wave,.bh-float{opacity:0}}
.bh-svg .bh-needle,.bh-svg .bh-swing,.bh-svg .bh-mer,.bh-svg .bh-orbit,.bh-svg .bh-cursor,.bh-svg .bh-ring,.bh-svg .bh-hl3,.bh-svg .bh-tabhl,.bh-svg .bh-scan{transform-box:view-box}