.banim, .banim * { box-sizing: border-box; }
.pillar-preview:has(.banim) {
background: #fff;
}
.banim {
position: absolute;
inset: 0;
overflow: hidden;
background: #fff;
container-type: inline-size;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
}
.banim-stage {
position: absolute;
inset: 7.3% 4.1%;
overflow: hidden;
border-radius: .45em;
background: rgba(43, 41, 45, .08);
font-size: 8px;
font-size: calc(3.6px + 1.95cqw);
color: #2B292D;
--banim-x: 5%;
--banim-y: 8.9%;
}
.banim-shot {
position: absolute; inset: 0; z-index: 0;
display: block; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 50%;
}
.banim .dw-live { top: var(--banim-y); left: var(--banim-x); z-index: 2; font-size: .85em; }
.banim .dw-live .dw-live-dot { animation: dw-pulse 2.2s ease-in-out infinite; }
.banim-mark {
position: absolute; top: var(--banim-y); right: var(--banim-x); z-index: 2;
display: flex; align-items: center; justify-content: center;
width: 2.5em; height: 2.5em;
border-radius: .4em;
background: #2B292D;
color: #fff;
font-size: 1em; font-weight: 800; line-height: 1; letter-spacing: .03em;
}
.banim-banner {
position: absolute; left: var(--banim-x); bottom: var(--banim-y); z-index: 2;
display: flex; flex-direction: column;
padding: .45em .85em .5em;
border-radius: .35em;
background: rgba(255, 255, 255, .94);
white-space: nowrap;
}
.banim-banner-name { display: block; font-size: 1em; font-weight: 700; line-height: 1.25; }
.banim-banner-role {
display: block;
font-family: 'Open Sans', 'Open Sans Fb', 'Open Sans Fb A', sans-serif;
font-size: .78em; font-weight: 400; line-height: 1.35;
color: rgba(43, 41, 45, .62);
}
.banim-banner--b { opacity: 0; transform: translateX(-110%); }
.banim-inset {
position: absolute; right: var(--banim-x); bottom: var(--banim-y); z-index: 2;
width: 31%; aspect-ratio: 16 / 9;
overflow: hidden; border-radius: .35em;
background: rgba(43, 41, 45, .2);
box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
}
.banim-clip { position: absolute; inset: 0; }
.banim-clip img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.banim-clip--b { opacity: 0; }
.banim-prog { position: absolute; left: 0; right: 0; bottom: 0; height: .25em; background: rgba(255, 255, 255, .32); }
.banim-prog-fill { position: absolute; inset: 0; background: #00ffff; transform: scaleX(0); transform-origin: 0 50%; }
.banim-banner--a { animation: banim-banner-a 11s linear infinite; }
.banim-banner--b { animation: banim-banner-b 11s linear infinite; }
.banim-clip--b { animation: banim-clip-b 11s linear infinite; }
.banim-clip--a .banim-prog-fill { animation: banim-prog-a 11s linear infinite; }
.banim-clip--b .banim-prog-fill { animation: banim-prog-b 11s linear infinite; }
@keyframes banim-banner-a {
0%, 20%       { transform: translateX(0);      opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
24%, 72%      { transform: translateX(-110%);  opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
77%, 100%     { transform: translateX(0);      opacity: 1; }
}
@keyframes banim-banner-b {
0%, 26%       { transform: translateX(-110%);  opacity: 0; animation-timing-function: cubic-bezier(.2, .7, .25, 1); }
31%, 66%      { transform: translateX(0);      opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .85, .45); }
70%, 100%     { transform: translateX(-110%);  opacity: 0; }
}
@keyframes banim-clip-b {
0%, 45%       { opacity: 0; animation-timing-function: ease-in-out; }
50%, 93%      { opacity: 1; animation-timing-function: ease-in-out; }
98%, 100%     { opacity: 0; }
}
@keyframes banim-prog-a {
0%            { transform: scaleX(0); }
43%, 52%      { transform: scaleX(1); }
52.01%, 100%  { transform: scaleX(0); }
}
@keyframes banim-prog-b {
0%, 50%       { transform: scaleX(0); }
91%, 98.5%    { transform: scaleX(1); }
98.51%, 100%  { transform: scaleX(0); }
}
.pillar-panel:not(.is-active) .banim,
.pillar-panel:not(.is-active) .banim * {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.banim *, .banim *:before, .banim *:after { animation: none !important; }
.banim-clip--a .banim-prog-fill { transform: scaleX(.55); }
}