/* WarBoost V2.1 — contextual hero visuals for Publisher Demo */
:root{--wb-hero-size:46px}
.wbHeroInline{display:flex;align-items:center;gap:10px;min-width:0}
.wbHeroAvatar{width:var(--wb-hero-size);height:var(--wb-hero-size);border-radius:14px;object-fit:cover;flex:0 0 auto;box-shadow:0 0 0 1px rgba(99,205,255,.18),0 8px 22px rgba(0,0,0,.22);transform:translateZ(0)}
.wbHeroAvatar.wbTopHero{animation:wbHeroPulse 2.8s ease-in-out infinite;box-shadow:0 0 0 1px rgba(114,220,255,.34),0 0 22px rgba(61,190,255,.18),0 8px 22px rgba(0,0,0,.22)}
.wbHeroBadge{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:3px 7px;border-radius:999px;font-size:11px;line-height:1.2;color:#bfefff;background:rgba(35,150,208,.12);border:1px solid rgba(65,190,240,.22);vertical-align:middle}
.wbHeroBadge strong{color:#eaf9ff}
.wbHeroDecorated{position:relative;overflow:hidden}
.wbHeroDecorated::after{content:"";position:absolute;inset:-30% auto auto -20%;width:160px;height:90px;background:radial-gradient(circle,rgba(68,190,255,.08),transparent 70%);pointer-events:none}
.wbHeroFadeIn{animation:wbHeroIn .38s ease-out both}
@keyframes wbHeroIn{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:none}}
@keyframes wbHeroPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){.wbHeroAvatar.wbTopHero,.wbHeroFadeIn{animation:none!important}}
@media (max-width:520px){:root{--wb-hero-size:42px}.wbHeroBadge{font-size:10px;padding:3px 6px}}