.qanim, .qanim * { box-sizing: border-box; }
.qanim {
position: absolute;
inset: 0;
overflow: hidden;
container-type: inline-size;
border-radius: 6px 6px 0 0;
background: #2B292D;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
line-height: 1.25;
text-align: left;
}
.qanim-clip {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px 6px 0 0;
}
.qanim-clip--1 { object-position: left center; }
.qanim-clip--2,
.qanim-clip--3 { opacity: 0; }
.qanim-panel {
position: absolute;
right: 10px;
bottom: 10px;
width: 15.2em;
padding: .8em .8em .9em;
border-radius: 5px;
background: #fff;
box-shadow: inset 0 0 0 1px rgba(43, 41, 45, .1),
0 3px 12px rgba(43, 41, 45, .32);
font-size: 9.5px;
font-size: clamp(7.8px, 4.6px + 1.05cqw, 10.5px);
}
.qanim-title {
margin-bottom: .7em;
}
.qanim-list {
position: relative;
}
.qanim-row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
height: 2.4em;
gap: .55em;
padding: 0 .5em;
}
.qanim-row + .qanim-row { margin-top: .25em; }
.qanim-num {
flex: 0 0 auto;
width: 1em;
font-size: .88em;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: rgba(43, 41, 45, .32);
}
.qanim-name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 700;
letter-spacing: -.01em;
color: #2B292D;
}
.qanim-mark {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 0;
height: 2.4em;
overflow: hidden;
border-radius: 4px;
background: rgba(0, 255, 255, .22);
box-shadow: inset 3px 0 0 #00ffff;
}
.qanim-fill {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: block;
height: .22em;
background: #00ffff;
transform: scaleX(0);
transform-origin: left center;
}
@keyframes qanim-mark {
0%,       30%     { top: 0;      animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
33.333%,  63.333% { top: 2.65em; animation-timing-function: cubic-bezier(.65, 0, .35, 1); }
66.667%,  96.667% { top: 5.3em;  animation-timing-function: cubic-bezier(.5, 0, .3, 1); }
100%              { top: 0; }
}
@keyframes qanim-fill {
0%       { transform: scaleX(0); }
30%      { transform: scaleX(1); }
30.001%  { transform: scaleX(0); }
33.333%  { transform: scaleX(0); }
63.333%  { transform: scaleX(1); }
63.334%  { transform: scaleX(0); }
66.667%  { transform: scaleX(0); }
96.667%  { transform: scaleX(1); }
96.668%  { transform: scaleX(0); }
100%     { transform: scaleX(0); }
}
@keyframes qanim-clip2 {
0%,      30%  { opacity: 0; }
33.333%, 70%  { opacity: 1; }
70.001%, 100% { opacity: 0; }
}
@keyframes qanim-clip3 {
0%,      63.333% { opacity: 0; }
66.667%, 96.667% { opacity: 1; }
100%             { opacity: 0; }
}
.carousel-item.active .qanim-mark    { animation: qanim-mark  6s linear infinite; }
.carousel-item.active .qanim-fill    { animation: qanim-fill  6s linear infinite; }
.carousel-item.active .qanim-clip--2 { animation: qanim-clip2 6s linear infinite; }
.carousel-item.active .qanim-clip--3 { animation: qanim-clip3 6s linear infinite; }
@keyframes qanim-cue {
0%, 100% { outline-color: rgba(0, 0, 0, 0); }
}
.carousel-item.active .qanim-clip--1 { animation: qanim-cue 6s linear 0s infinite; }
.carousel-item.active .qanim-clip--2 { animation: qanim-clip2 6s linear infinite,
qanim-cue   6s linear 2s infinite; }
.carousel-item.active .qanim-clip--3 { animation: qanim-clip3 6s linear infinite,
qanim-cue   6s linear 4s infinite; }
@media (prefers-reduced-motion: reduce) {
.qanim, .qanim *,
.carousel-item.active .qanim-mark,
.carousel-item.active .qanim-fill,
.carousel-item.active .qanim-clip--1,
.carousel-item.active .qanim-clip--2,
.carousel-item.active .qanim-clip--3 {
animation: none !important;
transition: none !important;
}
.qanim-fill { transform: scaleX(.34); }
}